Criminal Case Visualization

#!/usr/bin/env python3
"""Render-then-sample gate for criminal-case visualization output.

Static SVG analysis cannot catch every way a card turns black (missing fill,
dangling filter refs, CSS that never matched, renderer quirks). This is the
final backstop: render the HTML to PNG with the project's html2png, then sample
pixels. Large near-black regions = a black card slipped through = FAIL.

Usage:
    python3 render_pixel_check.py <input.html> [--keep-png] [--png=out.png]

Exit codes: 0 PASS, 1 FAIL (black region found), 2 setup/render error.

Rationale (rule 6): the user has confirmed they dislike dark/black boxes. A
chart that renders with a black card face is a hard failure, not a warning.
"""

from __future__ import annotations

import argparse
import subprocess
import sys
import tempfile
from pathlib import Path

HTML2PNG = Path.home() / ".claude/skills/html2png/scripts/html2png.js"

# A pixel is "near-black" below this perceived luminance (0..255).
NEAR_BLACK_LUM = 60
# Fail if a single horizontal band (row group) is >= this fraction near-black,
# OR the whole image exceeds the global fraction. Bands catch one black card
# even when the rest of the long page is white.
BAND_FRACTION = 0.45
GLOBAL_FRACTION = 0.06
BAND_ROWS = 40  # downsampled rows per band


def render(html: Path, png: Path, width: int) -> None:
    if not HTML2PNG.exists():
        raise FileNotFoundError(f"html2png not found at {HTML2PNG}")
    subprocess.run(
        ["node", str(HTML2PNG), str(html), str(png), f"--width={width}"],
        check=True,
        capture_output=True,
        text=True,
    )


def analyze(png: Path) -> tuple[bool, list[str]]:
    try:
        from PIL import Image
    except ImportError:
        return False, ["Pillow not installed; cannot pixel-check. pip install Pillow"]

    im = Image.open(png).convert("RGB")
    w, h = im.size
    # Downsample for speed; keep aspect. Width 200 is plenty to spot a card.
    small_w = 200
    small_h = max(1, int(h * small_w / w))
    sm = im.resize((small_w, small_h))
    px = list(sm.getdata())  # noqa: deprecation tolerated; small image

    def lum(p: tuple[int, int, int]) -> float:
        return 0.299 * p[0] + 0.587 * p[1] + 0.114 * p[2]

    near_black = [lum(p) < NEAR_BLACK_LUM for p in px]
    total = len(px)
    global_frac = sum(near_black) / total if total else 0.0

    msgs: list[str] = []
    failed = False

    if global_frac >= GLOBAL_FRACTION:
        failed = True
        msgs.append(
            f"global near-black coverage {global_frac*100:.1f}% "
            f">= {GLOBAL_FRACTION*100:.0f}% (rule 6: no dark/black cards)"
        )

    # Banded scan: find the worst horizontal band.
    rows = small_h
    band_px = small_w * min(BAND_ROWS, rows)
    worst = 0.0
    worst_y = 0
    for top in range(0, rows, BAND_ROWS):
        bottom = min(rows, top + BAND_ROWS)
        cnt = 0
        for y in range(top, bottom):
            base = y * small_w
            cnt += sum(near_black[base: base + small_w])
        frac = cnt / (small_w * (bottom - top))
        if frac > worst:
            worst, worst_y = frac, top
    if worst >= BAND_FRACTION:
        failed = True
        # Map band back to approximate original-y for the human.
        approx_y = int(worst_y / rows * h)
        msgs.append(
            f"horizontal band near y={approx_y}px is {worst*100:.0f}% near-black "
            f">= {BAND_FRACTION*100:.0f}% — looks like a black card. Open the PNG."
        )

    if not failed:
        msgs.append(
            f"OK: global near-black {global_frac*100:.1f}%, worst band {worst*100:.0f}%"
        )
    return (not failed), msgs


def main() -> int:
    ap = argparse.ArgumentParser(description="Render HTML and fail on black cards")
    ap.add_argument("html", type=Path)
    ap.add_argument("--png", type=Path, default=None)
    ap.add_argument("--width", type=int, default=1080)
    ap.add_argument("--keep-png", action="store_true")
    args = ap.parse_args()

    if not args.html.exists():
        print(f"ERROR: file not found: {args.html}")
        return 2

    tmp = None
    if args.png:
        png = args.png
    else:
        tmp = tempfile.NamedTemporaryFile(suffix=".png", delete=False)
        png = Path(tmp.name)
        tmp.close()

    try:
        render(args.html, png, args.width)
    except subprocess.CalledProcessError as exc:
        print(f"ERROR: render failed: {exc.stderr[:400]}")
        return 2
    except FileNotFoundError as exc:
        print(f"ERROR: {exc}")
        return 2

    ok, msgs = analyze(png)
    for m in msgs:
        prefix = "PASS" if ok and m.startswith("OK") else ("ERROR" if not ok else "INFO")
        print(f"{prefix}: {m}")

    if not args.keep_png and not args.png and png.exists():
        png.unlink()
    elif args.keep_png or args.png:
        print(f"INFO: PNG saved at {png}")

    return 0 if ok else 1


if __name__ == "__main__":
    sys.exit(main())

#!/usr/bin/env python3
"""Lightweight layout lint for criminal-case visualization HTML/SVG files.

The checker is intentionally approximate. It catches common failures before
human review: missing viewBox, small bold Chinese text, text overflow outside a
nearby rect, and obvious text-to-text collisions.
"""

from __future__ import annotations

import argparse
import html
import re
import sys
import xml.etree.ElementTree as ET
from dataclasses import dataclass
from pathlib import Path


SVG_RE = re.compile(r"<svg\b[\s\S]*?</svg>", re.IGNORECASE)
TAG_NS_RE = re.compile(r"^\{.*\}")

# --- Hard-gate config (2026-05-30) ---------------------------------------
# These checks turn long-standing "wall rules" into machine-enforced ERRORs.
# Reason: prior outputs violated every documented rule (black cards, SVG
# timelines, blurred bold Chinese) because nothing failed the build.

# Allow-list of light fills the skill explicitly sanctions (see SKILL rule 6
# + chart-templates background colors). Anything darker that backs a sizeable
# rect/cell is treated as a forbidden dark card.
LIGHT_FILL_ALLOW = {
    "#ffffff", "#fff", "#f9f9f9", "#f9fafb", "#f3f4f6", "#f8fafc",
    "#fef2f2", "#fee2e2", "#fff7ed", "#ffedd5", "#fef3c7", "#fde68a",
    "#eff6ff", "#dbeafe", "#dcfce7", "#bbf7d0", "#f3e8ff", "#ede9fe",
    "#e5e7eb", "#d1d5db", "#fafafa", "#f1f5f9", "#ecfdf5", "#fff1f2",
}

# Color-word fallbacks that are unambiguously dark.
DARK_COLOR_WORDS = {"black", "#000", "#000000"}

# Sections whose content is text-dense and MUST be HTML table/grid, never SVG.
# Matched against the nearest preceding heading/section marker text.
TABLE_ONLY_KEYWORDS = ("时间轴", "时间图", "事实时间", "证据印证", "证据矩阵", "矩阵")

HEX_RE = re.compile(r"#[0-9a-fA-F]{3,6}\b")


def hex_luminance(hex_color: str) -> float | None:
    """Perceived luminance 0..255 for a #rgb / #rrggbb string, else None."""
    h = hex_color.strip().lower().lstrip("#")
    if len(h) == 3:
        h = "".join( c * 2 for c in h)
    if len(h) != 6:
        return None
    try:
        r, g, b = int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)
    except ValueError:
        return None
    return 0.299 * r + 0.587 * g + 0.114 * b


def is_dark_fill(value: str | None) -> bool:
    """True when a fill/background value is darker than the light allow-list."""
    if not value:
        return False
    v = value.strip().lower()
    if v in DARK_COLOR_WORDS:
        return True
    m = HEX_RE.search(v)
    if not m:
        return False
    hexv = m.group(0).lower()
    if hexv in LIGHT_FILL_ALLOW:
        return False
    lum = hex_luminance(hexv)
    # Threshold ~110: #1F2937 (lum~38) and #374151 (lum~62) are caught;
    # mid grays like #6B7280 (lum~113) used for *strokes/text* pass here and
    # are only flagged when they actually back a large rect (see caller).
    return lum is not None and lum < 110


@dataclass
class Box:
    x1: float
    y1: float
    x2: float
    y2: float

    @property
    def width(self) -> float:
        return max(0.0, self.x2 - self.x1)

    @property
    def height(self) -> float:
        return max(0.0, self.y2 - self.y1)

    def contains(self, other: "Box", pad: float = 0.0) -> bool:
        return (
            other.x1 >= self.x1 - pad
            and other.y1 >= self.y1 - pad
            and other.x2 <= self.x2 + pad
            and other.y2 <= self.y2 + pad
        )

    def intersects(self, other: "Box") -> bool:
        return not (
            self.x2 <= other.x1
            or other.x2 <= self.x1
            or self.y2 <= other.y1
            or other.y2 <= self.y1
        )

    def intersection_area(self, other: "Box") -> float:
        if not self.intersects(other):
            return 0.0
        return max(0.0, min(self.x2, other.x2) - max(self.x1, other.x1)) * max(
            0.0, min(self.y2, other.y2) - max(self.y1, other.y1)
        )


@dataclass
class TextItem:
    text: str
    box: Box
    font_size: float
    font_weight: int
    anchor: str
    line_no: int


def strip_ns(tag: str) -> str:
    return TAG_NS_RE.sub("", tag)


def parse_float(value: str | None, default: float = 0.0) -> float:
    if not value:
        return default
    match = re.search(r"-?\d+(?:\.\d+)?", value)
    if not match:
        return default
    return float(match.group(0))


def parse_weight(value: str | None) -> int:
    if not value:
        return 400
    value = value.strip().lower()
    if value in {"normal", "regular"}:
        return 400
    if value in {"bold", "bolder"}:
        return 700
    match = re.search(r"\d+", value)
    return int(match.group(0)) if match else 400


def style_map(style: str | None) -> dict[str, str]:
    result: dict[str, str] = {}
    if not style:
        return result
    for part in style.split(";"):
        if ":" in part:
            key, value = part.split(":", 1)
            result[key.strip()] = value.strip()
    return result


def attr_or_style(elem: ET.Element, name: str, default: str | None = None) -> str | None:
    if name in elem.attrib:
        return elem.attrib[name]
    return style_map(elem.attrib.get("style")).get(name, default)


def text_content(elem: ET.Element) -> str:
    text = "".join(elem.itertext())
    return html.unescape(re.sub(r"\s+", " ", text)).strip()


def estimated_text_width(text: str, font_size: float) -> float:
    width = 0.0
    for ch in text:
        code = ord(ch)
        if ch.isspace():
            width += 0.35
        elif 0x4E00 <= code <= 0x9FFF or 0x3000 <= code <= 0x303F or 0xFF00 <= code <= 0xFFEF:
            width += 1.0
        elif ch in "MW@#%":
            width += 0.85
        else:
            width += 0.55
    return width * font_size


def line_number(source: str, needle: str) -> int:
    idx = source.find(needle)
    if idx < 0:
        return 0
    return source.count("\n", 0, idx) + 1


def parse_svg(source: str, index: int) -> tuple[list[Box], list[TextItem], list[str], list[str]]:
    warnings: list[str] = []
    errors: list[str] = []
    rects: list[Box] = []
    texts: list[TextItem] = []

    try:
        root = ET.fromstring(source)
    except ET.ParseError as exc:
        return rects, texts, warnings, [f"svg[{index}] XML parse error: {exc}"]

    if not root.attrib.get("viewBox"):
        warnings.append(f"svg[{index}] missing viewBox")

    for elem in root.iter():
        tag = strip_ns(elem.tag)
        if tag == "rect":
            x = parse_float(elem.attrib.get("x"))
            y = parse_float(elem.attrib.get("y"))
            w = parse_float(elem.attrib.get("width"))
            h = parse_float(elem.attrib.get("height"))
            if w > 0 and h > 0:
                rects.append(Box(x, y, x + w, y + h))
        elif tag == "text":
            text = text_content(elem)
            if not text:
                continue
            x = parse_float(elem.attrib.get("x"))
            y = parse_float(elem.attrib.get("y"))
            font_size = parse_float(attr_or_style(elem, "font-size"), 12.0)
            weight = parse_weight(attr_or_style(elem, "font-weight"))
            anchor = attr_or_style(elem, "text-anchor", "start") or "start"
            width = estimated_text_width(text, font_size)
            height = font_size * 1.25
            if anchor == "middle":
                x1 = x - width / 2
            elif anchor == "end":
                x1 = x - width
            else:
                x1 = x
            y1 = y - font_size
            item = TextItem(
                text=text,
                box=Box(x1, y1, x1 + width, y1 + height),
                font_size=font_size,
                font_weight=weight,
                anchor=anchor,
                line_no=line_number(source, text),
            )
            texts.append(item)
            if font_size < 16 and weight > 400:
                warnings.append(
                    f"svg[{index}] small bold text may blur: line {item.line_no}, "
                    f"font-size={font_size:g}, font-weight={weight}, text={text[:30]!r}"
                )

    return rects, texts, warnings, errors


def nearest_container(text: TextItem, rects: list[Box]) -> Box | None:
    cx = (text.box.x1 + text.box.x2) / 2
    cy = (text.box.y1 + text.box.y2) / 2
    candidates = [r for r in rects if r.x1 - 2 <= cx <= r.x2 + 2 and r.y1 - 8 <= cy <= r.y2 + 8]
    if not candidates:
        return None
    return min(candidates, key=lambda r: r.width * r.height)


def lint_layout(rects: list[Box], texts: list[TextItem], index: int) -> tuple[list[str], list[str]]:
    warnings: list[str] = []
    errors: list[str] = []

    for item in texts:
        container = nearest_container(item, rects)
        if container and not container.contains(item.box, pad=4):
            errors.append(
                f"svg[{index}] text likely overflows containing box: line {item.line_no}, "
                f"text={item.text[:40]!r}"
            )

    for i, a in enumerate(texts):
        for b in texts[i + 1 :]:
            if abs(a.box.y1 - b.box.y1) < max(a.font_size, b.font_size) * 0.35:
                continue
            area = a.box.intersection_area(b.box)
            if area <= 0:
                continue
            smaller = max(1.0, min(a.box.width * a.box.height, b.box.width * b.box.height))
            if area / smaller > 0.18:
                errors.append(
                    f"svg[{index}] text boxes overlap: line {a.line_no} {a.text[:24]!r} / "
                    f"line {b.line_no} {b.text[:24]!r}"
                )

    return warnings, errors


def gate_dark_cards(raw: str) -> list[str]:
    """ERROR on dark-filled SVG rects / dark-background CSS used as card faces.

    Skill rule 6 forbids dark/black boxes (user-confirmed dislike). Prior
    outputs used fill="#1F2937" on large rects for charts 4/5.
    """
    errors: list[str] = []

    # 1) SVG <rect ... fill="#1F2937"> with non-trivial size.
    for m in re.finditer(r"<rect\b[^>]*>", raw, re.IGNORECASE):
        tag = m.group(0)
        fill = None
        fm = re.search(r'fill\s*[:=]\s*["\']?\s*(#[0-9a-fA-F]{3,6}|black)', tag)
        if fm:
            fill = fm.group(1)
        if not is_dark_fill(fill):
            continue
        w = parse_float(re.search(r'width\s*=\s*["\']?([\d.]+)', tag).group(1)) if re.search(r'width\s*=', tag) else 0.0
        h = parse_float(re.search(r'height\s*=\s*["\']?([\d.]+)', tag).group(1)) if re.search(r'height\s*=', tag) else 0.0
        if w * h >= 2500:  # ~50x50 and up = a card face, not a thin accent bar
            errors.append(
                f"forbidden dark card: <rect fill={fill}> size {w:g}x{h:g} "
                f"at line {line_number(raw, tag[:40])} (rule 6: no dark/black boxes)"
            )

    # 1b) Bare <rect> with no fill attribute AND no class to back it via CSS.
    # SVG defaults such a rect to BLACK fill -> renders as a black card. This
    # is the real root cause of charts 4/5 black boxes (fill was never set;
    # only `.node rect{fill:#FFF}` existed, so non-.node cards went black).
    # A class only "backs" a rect's fill if its CSS body sets `fill:` to a
    # real color (not `none`, and `stroke:` does NOT count — that was the
    # charts 4/5 trap: `.node rect { stroke: ... }` with no fill -> black).
    def _has_fill(body: str) -> bool:
        fm = re.search(r'(?<!-)fill\s*:\s*([^;}\s]+)', body)
        return bool(fm) and fm.group(1).strip().lower() not in {"none", "transparent"}

    css_rect_classes: set[str] = set()
    for cm in re.finditer(r'\.([\w-]+(?:\.[\w-]+)*)\s+rect\s*\{([^}]*)\}', raw):
        if _has_fill(cm.group(2)):
            # ".node.neutral" -> {"node","neutral"}; match if rect has ALL? No —
            # CSS compound needs all; but keep permissive: any token present.
            css_rect_classes.update(cm.group(1).split("."))
    if re.search(r'(^|[^.\w])rect\s*\{([^}]*)\}', raw):
        for cm in re.finditer(r'(^|[^.\w])rect\s*\{([^}]*)\}', raw):
            if _has_fill(cm.group(2)):
                css_rect_classes.add("__bare_rect__")
                break
    for m in re.finditer(r'<rect\b[^>]*?>', raw, re.DOTALL):
        tag = m.group(0)
        if re.search(r'fill\s*[:=]', tag):
            continue  # explicit fill (attr or inline style) — handled above
        cls_m = re.search(r'class\s*=\s*["\']([^"\']*)["\']', tag)
        classes = set(cls_m.group(1).split()) if cls_m else set()
        backed = bool(classes & css_rect_classes) or "__bare_rect__" in css_rect_classes
        # also check parent <g class="..."> within 200 chars before the rect
        if not backed:
            ctx = raw[max(0, m.start() - 200):m.start()]
            for gm in re.finditer(r'<g\b[^>]*class\s*=\s*["\']([^"\']*)["\']', ctx):
                if set(gm.group(1).split()) & css_rect_classes:
                    backed = True
        w = parse_float(re.search(r'width\s*=\s*["\']?([\d.]+)', tag).group(1)) if re.search(r'width\s*=', tag) else 0.0
        h = parse_float(re.search(r'height\s*=\s*["\']?([\d.]+)', tag).group(1)) if re.search(r'height\s*=', tag) else 0.0
        if not backed and w * h >= 2500:
            errors.append(
                f"bare <rect> with no fill (renders BLACK): size {w:g}x{h:g} "
                f"at line {line_number(raw, tag[:50])} — set fill or a CSS-backed class "
                f"(rule 6 root cause: SVG default fill is black)"
            )

    # 2) CSS background: dark on card-like classes.
    for m in re.finditer(r'background[a-z-]*\s*:\s*(#[0-9a-fA-F]{3,6}|black)', raw, re.IGNORECASE):
        val = m.group(1)
        if is_dark_fill(val):
            errors.append(
                f"forbidden dark background in CSS: {val} at line "
                f"{raw.count(chr(10), 0, m.start()) + 1} (rule 6: no dark/black boxes)"
            )
    return errors


def gate_dangling_filter_refs(raw: str) -> list[str]:
    """ERROR when a CSS/element filter references a #id not defined in the SAME svg.

    THE charts 4/5 black-card root cause: `.node rect { filter: url(#shadow); }`
    applies to every svg, but `<filter id="shadow">` was defined only inside
    svg[1]. In every other svg the rects reference a missing filter, and
    headless Chrome renders them as solid BLACK. Pure fill/grep checks miss this.
    """
    errors: list[str] = []

    # Collect filter ids referenced from CSS (apply to ALL svgs that match).
    css_blocks = re.findall(r"<style\b[^>]*>([\s\S]*?)</style>", raw, re.IGNORECASE)
    css_text = "\n".join(css_blocks)
    css_filter_ids = set(re.findall(r"filter\s*:\s*url\(#([\w-]+)\)", css_text))
    # Does CSS target rect / .node rect etc.? If so, every svg with such rects
    # needs the id defined locally.
    css_targets_rect = bool(re.search(r"rect\s*\{[^}]*filter\s*:\s*url\(#", css_text))

    sources = SVG_RE.findall(raw)
    for idx, svg in enumerate(sources, start=1):
        local_ids = set(re.findall(r'<filter\b[^>]*id\s*=\s*["\']([\w-]+)["\']', svg))
        # inline filter="url(#x)" usages inside this svg
        inline_refs = set(re.findall(r'filter\s*=\s*["\']url\(#([\w-]+)\)["\']', svg))
        style_refs = set(re.findall(r'filter\s*:\s*url\(#([\w-]+)\)', svg))
        refs = inline_refs | style_refs
        # If CSS applies a filter to rects and this svg has <rect>, the css id
        # must resolve locally too.
        if css_targets_rect and re.search(r"<rect\b", svg):
            refs |= css_filter_ids
        missing = {r for r in refs if r and r not in local_ids}
        for mid in sorted(missing):
            errors.append(
                f"svg[{idx}] references filter #{mid} not defined in this <svg> "
                f"(renders BLACK in Chrome). Define <filter id=\"{mid}\"> inside "
                f"EACH svg that uses it, or drop the filter. (charts 4/5 root cause)"
            )
    return errors


def gate_table_only_sections(raw: str) -> list[str]:
    """ERROR when a text-dense section (timeline/matrix) contains an SVG.

    These MUST be HTML table/grid. Prior output put the timeline in SVG and the
    cards overlapped + text was clipped.
    """
    errors: list[str] = []
    # Split into <section ...> blocks; fall back to heading-delimited chunks.
    blocks = re.split(r'(?=<section\b)', raw, flags=re.IGNORECASE)
    if len(blocks) <= 1:
        blocks = re.split(r'(?=<h[1-3]\b)', raw, flags=re.IGNORECASE)
    for blk in blocks:
        head = blk[:400]
        if not any(kw in head for kw in TABLE_ONLY_KEYWORDS):
            continue
        if re.search(r"<svg\b", blk, re.IGNORECASE):
            label = next((kw for kw in TABLE_ONLY_KEYWORDS if kw in head), "?")
            errors.append(
                f"text-dense section '{label}' uses <svg>; must be HTML table/grid "
                f"(2026-05-29 routing rule + charts 2/6 spec)"
            )
    return errors


def gate_bold_chinese(raw: str) -> list[str]:
    """ERROR on small bold Chinese in SVG text (strokes merge, illegible).

    Complements the per-SVG WARN: this scans the whole file including CSS
    classes so a .process-title{font-weight:600} hidden in <style> still fails.
    """
    errors: list[str] = []
    han = re.compile(r"[一-鿿]")
    # SVG text elements carrying font-weight >=600 attribute.
    for m in re.finditer(r"<text\b[^>]*>(.*?)</text>", raw, re.IGNORECASE | re.DOTALL):
        tag, inner = m.group(0), m.group(1)
        if not han.search(inner):
            continue
        wm = re.search(r'font-weight\s*[:=]\s*["\']?\s*(\d{3}|bold|bolder)', tag)
        if not wm:
            continue
        weight = parse_weight(wm.group(1))
        size = parse_float(attr_value(tag, "font-size"), 12.0)
        if weight > 400 and size < 16:
            errors.append(
                f"small bold Chinese in SVG: weight={weight} size={size:g} "
                f"text={inner.strip()[:24]!r} at line {line_number(raw, tag[:40])} "
                f"(rule 2: Chinese font-weight must be 400 under 16px)"
            )
    return errors


def attr_value(tag: str, name: str) -> str | None:
    m = re.search(rf'{name}\s*[:=]\s*["\']?\s*([^"\';\s>]+)', tag)
    return m.group(1) if m else None


def gate_palette_contract(raw: str) -> list[str]:
    """ERROR when output deviates from the locked Claude-orange Scheme-A contract.

    The skill's whole point is determinism: every case must look identical.
    Two regressions this catches:
      1. cold-gray page background #F9F9F9 (contract mandates warm white #FAFAF9)
      2. Mermaid graphs missing clusterBkg override -> default mustard subgraph
    """
    errors: list[str] = []

    # 1) Cold-gray page background. Match `--c-page` var or body background.
    for m in re.finditer(r'--c-page\s*:\s*(#[0-9a-fA-F]{3,6})', raw):
        if m.group(1).lower() in {"#f9f9f9", "#f9fafb", "#f3f4f6"}:
            errors.append(
                f"cold-gray page background {m.group(1)} at line "
                f"{raw.count(chr(10), 0, m.start()) + 1}; contract requires warm white #FAFAF9 (rule 6)"
            )

    # 2) Mermaid init blocks must set clusterBkg to avoid default mustard.
    #    Only check files that actually contain mermaid init directives.
    for m in re.finditer(r"%%\{init:.*?\}%%", raw, re.DOTALL):
        block = m.group(0)
        if "subgraph" in raw and "clusterBkg" not in block:
            errors.append(
                "Mermaid init present but missing clusterBkg override; "
                "subgraph will render default mustard. Add clusterBkg:'#FAFAF9' (模板铁律)"
            )
            break
    return errors


def lint_file(path: Path) -> int:
    raw = path.read_text(encoding="utf-8", errors="replace")
    sources = SVG_RE.findall(raw)
    if not sources and "<svg" in raw:
        sources = [raw]

    warnings: list[str] = []
    errors: list[str] = []

    if not sources:
        warnings.append("no inline SVG found; HTML/CSS layout still requires PNG visual review")

    if "position:absolute" in raw or "position: absolute" in raw:
        warnings.append("absolute-positioned element found; confirm it does not cover the diagram")

    # --- Hard gates: documented rules, now build-failing -------------------
    errors.extend(gate_dark_cards(raw))
    errors.extend(gate_dangling_filter_refs(raw))
    errors.extend(gate_table_only_sections(raw))
    errors.extend(gate_bold_chinese(raw))
    errors.extend(gate_palette_contract(raw))

    for idx, svg in enumerate(sources, start=1):
        rects, texts, svg_warnings, svg_errors = parse_svg(svg, idx)
        warnings.extend(svg_warnings)
        errors.extend(svg_errors)
        if svg_errors:
            continue
        layout_warnings, layout_errors = lint_layout(rects, texts, idx)
        warnings.extend(layout_warnings)
        errors.extend(layout_errors)

    for msg in warnings:
        print(f"WARN: {msg}")
    for msg in errors:
        print(f"ERROR: {msg}")

    if errors:
        print(f"FAIL: {len(errors)} error(s), {len(warnings)} warning(s)")
        return 1
    print(f"PASS: {len(warnings)} warning(s)")
    return 0


def main() -> int:
    parser = argparse.ArgumentParser(description="Lint SVG/HTML diagram layout")
    parser.add_argument("file", type=Path, help="HTML or SVG file to check")
    args = parser.parse_args()
    if not args.file.exists():
        print(f"ERROR: file not found: {args.file}")
        return 2
    return lint_file(args.file)


if __name__ == "__main__":
    sys.exit(main())

<!DOCTYPE html>
<!--
  刑事案件可视化 · 浅色 HTML 表格/卡片标准模板
  用途：文字密集型图表(时间轴、量刑预测、共同犯罪对比、受援人参与、证据矩阵)
  原则：纯 HTML+CSS，浏览器自动换行/撑高，绝不手写 SVG 坐标。
  禁止：黑底卡片、深色方框、SVG <filter url(#id)> 跨节点引用。

  套用方法：复制本文件 → 替换 {{占位符}} → 删除用不到的 section →
            node ~/.claude/skills/html2png/scripts/html2png.js 本文件 out.png --width=1467
            python3 ~/.claude/skills/criminal-case-visualization/scripts/render_pixel_check.py 本文件
-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{{案件名}} - 可视化图表</title>
<style>
  :root {
    /* —— 调色板（Claude 橙白 · 方案A 极简克制，2026-05-30 定为默认）—— */
    /* 设计原则：暖白底上浮白框，受援人陶土橙点亮全场，其他安静退后。 */
    --c-page:      #FAFAF9;   /* 页面底：暖白（非冷灰） */
    --c-card:      #FFFFFF;   /* 卡片底（永远浅色，禁止改深） */
    --c-ink:       #1C1917;   /* 主文字（仅文字用，不可做卡片底） */
    --c-sub:       #78716C;   /* 辅助文字（暖灰） */
    --c-line:      #E7E5E4;   /* 分隔线（暖灰） */
    --c-our:       #D97757;   /* 己方/受援人：Claude 陶土橙（唯一焦点色） */
    --c-leader:    #78716C;   /* 主犯/组织者：深暖灰描边（退后，不与橙争焦点） */
    --c-co:        #A8A29E;   /* 同案犯：中暖灰 */
    --c-third:     #D6D3D1;   /* 第三方/被害人：浅暖灰 */
    --c-ok:        #10B981;   /* 印证/有利 绿（功能色保留） */
    --c-warn:      #F59E0B;   /* 存疑 黄 */
    --c-bad:       #DC2626;   /* 矛盾/不利 红 */
    /* 浅功能底（表格格子专用，全部浅色） */
    --b-ok:   #DCFCE7;  --b-warn: #FEF3C7;  --b-bad: #FEE2E2;
    --b-info: #DBEAFE;  --b-our:  #FBEEE8;  --b-mute: #F5F5F4;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--c-page);
    font-family: "PingFang SC", -apple-system, "Microsoft YaHei", sans-serif;
    color: var(--c-ink); font-weight: 400; line-height: 1.6;
  }
  nav {
    position: sticky; top: 0; background: var(--c-card);
    border-bottom: 1px solid var(--c-line); padding: 12px 24px;
    display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; z-index: 10;
  }
  nav a { color: var(--c-sub); text-decoration: none; }
  nav a:hover { color: var(--c-our); }
  .chart-section { max-width: 1467px; margin: 0 auto; padding: 32px 24px 8px; }
  .chart-title { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
  .chart-subtitle { font-size: 13px; color: var(--c-sub); margin: 0 0 20px; }

  /* —— 通用卡片 —— */
  .card {
    background: var(--c-card); border: 2px solid var(--c-third);
    border-radius: 8px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  }
  .card.our    { border-color: var(--c-our); }
  .card.leader { border-color: var(--c-leader); }
  .card.co     { border-color: var(--c-co); }
  .card.ok     { border-color: var(--c-ok); }
  .card.bad    { border-color: var(--c-bad); }
  .card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
  .card .meta { font-size: 12px; color: var(--c-sub); }
  .grid { display: grid; gap: 16px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* —— 表格（时间轴 / 证据矩阵 通用）—— */
  table { width: 100%; border-collapse: collapse; background: var(--c-card);
          border-radius: 8px; overflow: hidden; font-size: 13px; }
  th, td { border: 1px solid var(--c-line); padding: 10px 12px;
           vertical-align: top; text-align: left; }
  th { background: var(--b-mute); font-weight: 600; }
  /* 行/格 浅色底（全部浅色，杜绝黑块） */
  .row-our  { background: var(--b-our); }
  .row-info { background: var(--b-info); }
  .cell-ok   { background: var(--b-ok); }
  .cell-warn { background: var(--b-warn); }
  .cell-bad  { background: var(--b-bad); }
  .cell-mute { background: var(--b-mute); color: var(--c-sub); }

  /* —— 标签 —— */
  .tag { display: inline-block; font-size: 11px; padding: 1px 7px;
         border-radius: 4px; margin: 1px 2px; }
  .tag-ok   { background: var(--b-ok);   color: #166534; }
  .tag-info { background: var(--b-info); color: #1E40AF; }
  .tag-warn { background: var(--b-warn); color: #92400E; }
  .tag-bad  { background: var(--b-bad);  color: #991B1B; }
  .tag-our  { background: var(--b-our);  color: #9A3412; }

  /* —— 量刑/数据 行 —— */
  .kv { display: grid; grid-template-columns: 92px 1fr; gap: 4px 10px;
        font-size: 13px; }
  .kv dt { color: var(--c-sub); }
  .kv dd { margin: 0; }
  .accent-ok  { color: var(--c-ok); }
  .accent-bad { color: var(--c-bad); }
  .accent-our { color: var(--c-our); }

  /* —— 图例（流内放置，不用 absolute，避免遮挡）—— */
  .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px;
            color: var(--c-sub); margin-top: 14px; }
  .legend span::before { content: "—"; margin-right: 5px; font-weight: 700; }
  .lg-our::before    { color: var(--c-our); }
  .lg-co::before     { color: var(--c-co); }
  .lg-third::before  { color: var(--c-third); }

  footer { max-width: 1467px; margin: 24px auto; padding: 16px 24px;
           border-top: 1px solid var(--c-line); font-size: 12px;
           color: var(--c-sub); }

  @media print {
    nav { display: none; }
    .chart-section { page-break-inside: avoid; }
  }
</style>
</head>
<body>

<nav>
  <a href="#chart2">2. 事实时间轴</a>
  <a href="#chart3">3. 受援人参与</a>
  <a href="#chart4">4. 量刑预测</a>
  <a href="#chart5">5. 共同犯罪地位</a>
  <a href="#chart6">6. 证据矩阵</a>
</nav>

<!-- ============ 图表2：案件事实时间轴（HTML 表格，禁用 SVG）============ -->
<section id="chart2" class="chart-section">
  <h2 class="chart-title">{{案件名}} — 案件事实时间轴</h2>
  <p class="chart-subtitle">{{案号}}｜时间—事件—证据三栏对照</p>
  <table>
    <colgroup><col style="width:12%"><col style="width:38%"><col style="width:50%"></colgroup>
    <thead><tr><th>时间</th><th>关键事件</th><th>证据支撑</th></tr></thead>
    <tbody>
      <!-- 受援人参与的犯罪事实行加 class="row-our" -->
      <tr class="row-our">
        <td>{{日期}}</td>
        <td>{{何人何地何事}} <span class="tag tag-our">★ 受援人参与</span></td>
        <td><span class="tag tag-ok">被告人供述</span><span class="tag tag-info">被害人陈述</span> {{具体证据}}</td>
      </tr>
      <tr>
        <td>{{日期}}</td>
        <td>{{事件}}</td>
        <td><span class="tag tag-warn">微信转账</span> {{证据}} <span class="accent-bad">❌ {{矛盾点}}</span></td>
      </tr>
      <!-- 程序节点行加 class="row-info" -->
      <tr class="row-info">
        <td>{{日期}}</td>
        <td>{{程序节点：抓获/起诉/开庭}}</td>
        <td><span class="tag tag-info">法律文书</span> {{文书}}</td>
      </tr>
    </tbody>
  </table>
</section>

<!-- ============ 图表3：受援人参与分析（卡片 grid）============ -->
<section id="chart3" class="chart-section">
  <h2 class="chart-title">受援人参与情况分析</h2>
  <p class="chart-subtitle">逐起分析参与程度、获利与同案犯对比</p>
  <div class="grid grid-3">
    <div class="card our">
      <h3>第一起：{{案名}}</h3>
      <div class="kv">
        <dt>时间地点</dt><dd>{{时间地点}}</dd>
        <dt>被害损失</dt><dd>{{金额}}</dd>
        <dt>参与情况</dt><dd>{{报名✓ 到场✗ 谈判✗}}</dd>
        <dt>获利</dt><dd class="accent-our">{{获利}}</dd>
      </div>
    </div>
    <!-- 复制卡片… -->
  </div>
  <div class="grid grid-2" style="margin-top:16px">
    <div class="card">
      <h3>受援人整体参与</h3>
      <div class="kv">
        <dt>参与案件</dt><dd>{{n}}起</dd>
        <dt>总获利</dt><dd>{{金额区间}}</dd>
        <dt>参与程度</dt><dd>{{低｜多起未到场｜未主导}}</dd>
      </div>
    </div>
    <div class="card our">
      <h3>从犯地位认定依据</h3>
      <ol style="margin:0;padding-left:18px;font-size:13px">
        <li>组织地位：{{主犯认定}}</li>
        <li>分工情况：{{受援人分工}}</li>
        <li>分赃方式：{{无决定权/由主犯分配}}</li>
        <li>获利较少：{{金额}}</li>
      </ol>
      <p class="accent-our" style="margin:8px 0 0">⇒ 建议认定为从犯，从轻处罚</p>
    </div>
  </div>
</section>

<!-- ============ 图表4：量刑预测对比（卡片 grid，浅色）============ -->
<section id="chart4" class="chart-section">
  <h2 class="chart-title">量刑预测对比</h2>
  <p class="chart-subtitle">不同情节下的量刑预测、计算过程及法律依据</p>
  <div class="grid grid-2">
    <div class="card">
      <h3>量刑基准计算</h3>
      <div class="kv">
        <dt>犯罪数额</dt><dd>{{数额}}（属"数额较大"）</dd>
        <dt>法定刑期</dt><dd>{{刑法第X条}}</dd>
        <dt>量刑起点</dt><dd>{{起点}}</dd>
        <dt>基准刑</dt><dd class="accent-ok">{{基准刑}}</dd>
      </div>
      <p class="meta" style="margin:8px 0 0">法律依据：{{司法解释条文}}</p>
    </div>
    <div class="card">
      <h3>量刑情节适用</h3>
      <div class="kv">
        <dt>从轻情节</dt><dd class="accent-ok">{{自首/坦白/退赃/认罪认罚}}</dd>
        <dt>从重情节</dt><dd class="accent-bad">{{有则列，无则"无"}}</dd>
        <dt>待完成</dt><dd>{{退赃/谅解}}</dd>
      </div>
    </div>
  </div>
  <div class="grid grid-3" style="margin-top:16px">
    <div class="card bad">
      <h3>情景一：检察院建议</h3>
      <p class="kv"><dt>量刑幅度</dt><dd class="accent-bad">{{区间}}</dd></p>
    </div>
    <div class="card our">
      <h3>情景二：认定从犯</h3>
      <p class="kv"><dt>量刑幅度</dt><dd class="accent-our">{{区间}}</dd></p>
    </div>
    <div class="card ok">
      <h3>情景三：全额退赃+谅解</h3>
      <p class="kv"><dt>量刑幅度</dt><dd class="accent-ok">{{区间，可缓刑}}</dd></p>
    </div>
  </div>
</section>

<!-- ============ 图表5：共同犯罪地位对比（表格）============ -->
<section id="chart5" class="chart-section">
  <h2 class="chart-title">共同犯罪地位对比</h2>
  <p class="chart-subtitle">各被告地位、作用、分赃多维度对比</p>
  <table>
    <thead><tr><th>维度</th><th>{{主犯}}</th><th>{{同案犯A}}</th><th class="row-our">{{受援人}}</th></tr></thead>
    <tbody>
      <tr><th>地位作用</th><td>组织指挥</td><td>{{}}</td><td class="row-our">{{次要}}</td></tr>
      <tr><th>参与案件</th><td>{{全部}}</td><td>{{}}</td><td class="row-our">{{n起}}</td></tr>
      <tr><th>分赃</th><td>{{主导分配}}</td><td>{{}}</td><td class="row-our accent-our">{{最少}}</td></tr>
      <tr><th>主从认定</th><td><span class="tag tag-bad">主犯</span></td><td>{{}}</td><td class="row-our"><span class="tag tag-our">从犯</span></td></tr>
    </tbody>
  </table>
</section>

<!-- ============ 图表6：证据印证关系矩阵（表格）============ -->
<section id="chart6" class="chart-section">
  <h2 class="chart-title">证据印证关系矩阵</h2>
  <p class="chart-subtitle">双轴矩阵展示证据印证/矛盾</p>
  <table>
    <thead><tr><th>证据＼待证</th><th>主观明知</th><th>客观行为</th><th>分赃金额</th><th>从犯地位</th></tr></thead>
    <tbody>
      <tr>
        <th>{{被告人供述}}</th>
        <td class="cell-ok">✓ {{}}</td>
        <td class="cell-ok">✓ {{}}</td>
        <td class="cell-bad">❌ {{矛盾}}</td>
        <td class="cell-ok">✓ {{}}</td>
      </tr>
      <tr>
        <th>{{微信转账记录}}</th>
        <td class="cell-mute">- 缺失</td>
        <td class="cell-warn">⚠ {{部分}}</td>
        <td class="cell-bad">❌ {{矛盾}}</td>
        <td class="cell-mute">-</td>
      </tr>
    </tbody>
  </table>
  <div class="legend" style="margin-top:14px">
    <span class="tag tag-ok">✓ 印证</span>
    <span class="tag tag-bad">❌ 矛盾</span>
    <span class="tag tag-warn">⚠ 存疑</span>
    <span class="tag cell-mute" style="padding:1px 7px">- 缺失</span>
  </div>
</section>

<footer>{{案号}}｜生成时间：{{日期}}</footer>

</body>
</html>