spolvero 0.3.0__py3-none-any.whl

spolvero/render.py

@@ -0,0 +1,564 @@
+"""Preview rendering for normalized diagrams and references."""
+
+from __future__ import annotations
+
+import math
+import os
+import shutil
+import struct
+import subprocess
+import zlib
+from pathlib import Path
+from typing import Any
+
+from spolvero.ir import is_flowchart_ir
+from spolvero.models import DiagramSource
+from spolvero.topology import STENCIL_MAP, is_topology_ir
+from spolvero.utils import escape, wrap_label, write_text
+
+
+def render_preview(diagram: DiagramSource, ir: dict[str, Any], svg_path: Path, png_path: Path) -> None:
+    if try_mmdc_render(diagram, svg_path, png_path):
+        return
+
+    if is_flowchart_ir(ir):
+        layout = compute_layout(ir)
+        write_text(svg_path, flowchart_svg(ir, layout))
+        write_flowchart_png(png_path, ir, layout)
+        return
+
+    if is_topology_ir(ir):
+        layout = compute_layout(ir)
+        write_text(svg_path, topology_svg(ir, layout))
+        write_basic_flowchart_png(png_path, ir, layout)
+        return
+
+    if try_external_reference_render(diagram, svg_path, png_path):
+        return
+    write_text(svg_path, reference_svg(diagram, ir))
+    write_reference_png(png_path)
+
+
+def try_mmdc_render(diagram: DiagramSource, svg_path: Path, png_path: Path) -> bool:
+    """Render a Mermaid diagram with the official ``mmdc`` CLI, if available.
+
+    Activation requires:
+    - ``diagram.language == "mermaid"``
+    - ``mmdc`` resolvable via ``shutil.which`` (or the override
+      ``SPOLVERO_MMDC_BIN`` environment variable)
+    - the env var ``SPOLVERO_DISABLE_MMDC`` is not set to ``1``
+
+    Returns True if both SVG and PNG were produced; on any failure the caller
+    should fall back to the built-in renderer.
+    """
+
+    if diagram.language != "mermaid":
+        return False
+    if os.environ.get("SPOLVERO_DISABLE_MMDC") == "1":
+        return False
+    bin_override = os.environ.get("SPOLVERO_MMDC_BIN")
+    mmdc = bin_override or shutil.which("mmdc")
+    if not mmdc:
+        return False
+
+    tmp_input = svg_path.with_suffix(".mmd.tmp")
+    write_text(tmp_input, diagram.text)
+    try:
+        subprocess.run(
+            [mmdc, "-i", str(tmp_input), "-o", str(svg_path)],
+            check=True,
+            capture_output=True,
+        )
+        subprocess.run(
+            [mmdc, "-i", str(tmp_input), "-o", str(png_path)],
+            check=True,
+            capture_output=True,
+        )
+    except Exception:
+        return False
+    finally:
+        tmp_input.unlink(missing_ok=True)
+    return svg_path.exists() and png_path.exists()
+
+
+def try_external_reference_render(diagram: DiagramSource, svg_path: Path, png_path: Path) -> bool:
+    if diagram.language == "graphviz" and shutil.which("dot"):
+        tmp_dot = svg_path.with_suffix(".dot.tmp")
+        write_text(tmp_dot, diagram.text)
+        try:
+            subprocess.run(["dot", "-Tsvg", str(tmp_dot), "-o", str(svg_path)], check=True, capture_output=True)
+            subprocess.run(["dot", "-Tpng", str(tmp_dot), "-o", str(png_path)], check=True, capture_output=True)
+            tmp_dot.unlink(missing_ok=True)
+            return True
+        except Exception:
+            tmp_dot.unlink(missing_ok=True)
+            return False
+    return False
+
+
+def compute_layout(ir: dict[str, Any]) -> dict[str, Any]:
+    nodes = ir.get("nodes", [])
+    edges = ir.get("edges", [])
+    node_ids = [node["id"] for node in nodes]
+    outgoing: dict[str, list[str]] = {node_id: [] for node_id in node_ids}
+    incoming_count: dict[str, int] = {node_id: 0 for node_id in node_ids}
+    for edge in edges:
+        if edge["from"] in outgoing and edge["to"] in incoming_count:
+            outgoing[edge["from"]].append(edge["to"])
+            incoming_count[edge["to"]] += 1
+
+    queue = [node_id for node_id in node_ids if incoming_count[node_id] == 0]
+    rank = {node_id: 0 for node_id in node_ids}
+    seen: set[str] = set()
+    while queue:
+        node_id = queue.pop(0)
+        seen.add(node_id)
+        for target in outgoing.get(node_id, []):
+            rank[target] = max(rank[target], rank[node_id] + 1)
+            incoming_count[target] -= 1
+            if incoming_count[target] == 0:
+                queue.append(target)
+    if len(seen) < len(node_ids):
+        fallback_rank = max(rank.values(), default=0) + 1
+        for node_id in node_ids:
+            if node_id not in seen:
+                rank[node_id] = fallback_rank
+
+    groups: dict[int, list[dict[str, Any]]] = {}
+    for node in nodes:
+        groups.setdefault(rank[node["id"]], []).append(node)
+
+    orientation = ir.get("orientation", "left_to_right")
+    positions: dict[str, dict[str, float]] = {}
+    margin = 60
+    x_gap = 240
+    y_gap = 120
+    for rank_value in sorted(groups):
+        group = groups[rank_value]
+        for index, node in enumerate(group):
+            width = min(260, max(130, max((len(line) for line in wrap_label(node["label"])), default=8) * 8 + 44))
+            height = max(58, len(wrap_label(node["label"])) * 16 + 30)
+            if orientation == "left_to_right":
+                x = margin + rank_value * x_gap
+                y = margin + index * y_gap
+            else:
+                x = margin + index * x_gap
+                y = margin + rank_value * y_gap
+            positions[node["id"]] = {"x": x, "y": y, "w": width, "h": height}
+
+    max_x = max((p["x"] + p["w"] for p in positions.values()), default=600) + margin
+    max_y = max((p["y"] + p["h"] for p in positions.values()), default=360) + margin
+    return {"positions": positions, "width": int(max_x), "height": int(max_y)}
+
+
+def flowchart_svg(ir: dict[str, Any], layout: dict[str, Any]) -> str:
+    width = layout["width"]
+    height = layout["height"]
+    positions = layout["positions"]
+    parts = [
+        '<?xml version="1.0" encoding="UTF-8"?>',
+        f'<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 {width} {height}">',
+        "<defs>",
+        '<marker id="arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth">',
+        '<path d="M0,0 L10,4 L0,8 z" fill="#4b5563"/>',
+        "</marker>",
+        "</defs>",
+        '<rect width="100%" height="100%" fill="#ffffff"/>',
+        f'<text x="24" y="32" font-family="Segoe UI, Arial, sans-serif" font-size="18" font-weight="600" fill="#111827">{escape(ir.get("title", "Diagram"))}</text>',
+    ]
+    for edge in ir.get("edges", []):
+        src = positions.get(edge["from"])
+        dst = positions.get(edge["to"])
+        if not src or not dst:
+            continue
+        x1, y1 = src["x"] + src["w"], src["y"] + src["h"] / 2
+        x2, y2 = dst["x"], dst["y"] + dst["h"] / 2
+        if abs(x2 - x1) < 10:
+            x1, y1 = src["x"] + src["w"] / 2, src["y"] + src["h"]
+            x2, y2 = dst["x"] + dst["w"] / 2, dst["y"]
+        parts.append(
+            f'<line x1="{x1:.1f}" y1="{y1:.1f}" x2="{x2:.1f}" y2="{y2:.1f}" stroke="#4b5563" stroke-width="1.8" marker-end="url(#arrow)"/>'
+        )
+        if edge.get("label"):
+            mx, my = (x1 + x2) / 2, (y1 + y2) / 2 - 7
+            parts.append(
+                f'<text x="{mx:.1f}" y="{my:.1f}" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" font-size="12" fill="#374151">{escape(edge["label"])}</text>'
+            )
+    for node in ir.get("nodes", []):
+        pos = positions[node["id"]]
+        parts.append(node_shape_svg(node, pos))
+    parts.append("</svg>")
+    return "\n".join(parts) + "\n"
+
+
+def node_shape_svg(node: dict[str, Any], pos: dict[str, float]) -> str:
+    x, y, w, h = pos["x"], pos["y"], pos["w"], pos["h"]
+    label = node.get("label", node["id"])
+    shape_kind = node.get("shape_kind", "process")
+    fill = "#eef6ff"
+    stroke = "#2563eb"
+    if shape_kind == "decision":
+        points = f"{x + w / 2:.1f},{y:.1f} {x + w:.1f},{y + h / 2:.1f} {x + w / 2:.1f},{y + h:.1f} {x:.1f},{y + h / 2:.1f}"
+        shape = f'<polygon points="{points}" fill="#fff7ed" stroke="#f97316" stroke-width="1.8"/>'
+    elif shape_kind == "terminator":
+        shape = f'<rect x="{x:.1f}" y="{y:.1f}" width="{w:.1f}" height="{h:.1f}" rx="{h / 2:.1f}" fill="#ecfdf5" stroke="#059669" stroke-width="1.8"/>'
+    elif shape_kind == "database":
+        shape = (
+            f'<rect x="{x:.1f}" y="{y + 8:.1f}" width="{w:.1f}" height="{h - 16:.1f}" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.8"/>'
+            f'<ellipse cx="{x + w / 2:.1f}" cy="{y + 8:.1f}" rx="{w / 2:.1f}" ry="8" fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.8"/>'
+            f'<ellipse cx="{x + w / 2:.1f}" cy="{y + h - 8:.1f}" rx="{w / 2:.1f}" ry="8" fill="none" stroke="#7c3aed" stroke-width="1.8"/>'
+        )
+    elif shape_kind == "document":
+        shape = f'<path d="M{x:.1f},{y:.1f} H{x + w:.1f} V{y + h - 10:.1f} Q{x + w * .75:.1f},{y + h + 8:.1f} {x + w * .5:.1f},{y + h - 2:.1f} Q{x + w * .25:.1f},{y + h - 12:.1f} {x:.1f},{y + h - 2:.1f} Z" fill="#fdf2f8" stroke="#db2777" stroke-width="1.8"/>'
+    elif shape_kind == "subprocess":
+        shape = (
+            f'<rect x="{x:.1f}" y="{y:.1f}" width="{w:.1f}" height="{h:.1f}" rx="4" fill="{fill}" stroke="{stroke}" stroke-width="1.8"/>'
+            f'<line x1="{x + 12:.1f}" y1="{y:.1f}" x2="{x + 12:.1f}" y2="{y + h:.1f}" stroke="{stroke}" stroke-width="1.2"/>'
+            f'<line x1="{x + w - 12:.1f}" y1="{y:.1f}" x2="{x + w - 12:.1f}" y2="{y + h:.1f}" stroke="{stroke}" stroke-width="1.2"/>'
+        )
+    else:
+        shape = f'<rect x="{x:.1f}" y="{y:.1f}" width="{w:.1f}" height="{h:.1f}" rx="6" fill="{fill}" stroke="{stroke}" stroke-width="1.8"/>'
+
+    text_lines = wrap_label(label)
+    start_y = y + h / 2 - (len(text_lines) - 1) * 7
+    text = ['<text font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#111827" text-anchor="middle">']
+    for index, line in enumerate(text_lines):
+        dy = 0 if index == 0 else 16
+        text.append(f'<tspan x="{x + w / 2:.1f}" y="{start_y + dy * index:.1f}">{escape(line)}</tspan>')
+    text.append("</text>")
+    return f'<g data-node-id="{escape(node["id"])}">\n{shape}\n' + "\n".join(text) + "\n</g>"
+
+
+def topology_svg(ir: dict[str, Any], layout: dict[str, Any]) -> str:
+    """Render a topology IR with simple geometric glyphs per node kind."""
+
+    width = layout["width"]
+    height = layout["height"]
+    positions = layout["positions"]
+    parts = [
+        '<?xml version="1.0" encoding="UTF-8"?>',
+        f'<svg xmlns="http://www.w3.org/2000/svg" width="{width}" height="{height}" viewBox="0 0 {width} {height}">',
+        "<defs>",
+        '<marker id="arrow" markerWidth="10" markerHeight="8" refX="9" refY="4" orient="auto" markerUnits="strokeWidth">',
+        '<path d="M0,0 L10,4 L0,8 z" fill="#4b5563"/>',
+        "</marker>",
+        "</defs>",
+        '<rect width="100%" height="100%" fill="#ffffff"/>',
+        f'<text x="24" y="32" font-family="Segoe UI, Arial, sans-serif" font-size="18" font-weight="600" fill="#111827">{escape(ir.get("title", "Topology"))}</text>',
+    ]
+    # Container rectangles drawn first so nodes overlay them.
+    container_nodes: dict[str, list[str]] = {}
+    for node in ir.get("nodes", []):
+        cid = node.get("container") or ""
+        if cid:
+            container_nodes.setdefault(cid, []).append(node["id"])
+    for container in ir.get("containers", []):
+        ids = container_nodes.get(container["id"], [])
+        if not ids:
+            continue
+        xs = [positions[i]["x"] for i in ids if i in positions]
+        ys = [positions[i]["y"] for i in ids if i in positions]
+        ws = [positions[i]["w"] for i in ids if i in positions]
+        hs = [positions[i]["h"] for i in ids if i in positions]
+        if not xs:
+            continue
+        pad = 18
+        bx = min(xs) - pad
+        by = min(ys) - pad - 14
+        bw = max(x + w for x, w in zip(xs, ws)) - bx + pad
+        bh = max(y + h for y, h in zip(ys, hs)) - by + pad
+        parts.append(
+            f'<rect x="{bx:.1f}" y="{by:.1f}" width="{bw:.1f}" height="{bh:.1f}" '
+            f'rx="10" fill="#f9fafb" stroke="#9ca3af" stroke-dasharray="6 4" stroke-width="1.5"/>'
+        )
+        parts.append(
+            f'<text x="{bx + 12:.1f}" y="{by + 18:.1f}" font-family="Segoe UI, Arial, sans-serif" '
+            f'font-size="12" font-weight="600" fill="#6b7280">{escape(container.get("label", container["id"]))}</text>'
+        )
+    for edge in ir.get("edges", []):
+        src = positions.get(edge["from"])
+        dst = positions.get(edge["to"])
+        if not src or not dst:
+            continue
+        x1, y1 = src["x"] + src["w"], src["y"] + src["h"] / 2
+        x2, y2 = dst["x"], dst["y"] + dst["h"] / 2
+        parts.append(
+            f'<line x1="{x1:.1f}" y1="{y1:.1f}" x2="{x2:.1f}" y2="{y2:.1f}" '
+            f'stroke="#4b5563" stroke-width="1.8" marker-end="url(#arrow)"/>'
+        )
+        if edge.get("label"):
+            mx, my = (x1 + x2) / 2, (y1 + y2) / 2 - 7
+            parts.append(
+                f'<text x="{mx:.1f}" y="{my:.1f}" text-anchor="middle" font-family="Segoe UI, Arial, sans-serif" '
+                f'font-size="12" fill="#374151">{escape(edge["label"])}</text>'
+            )
+    for node in ir.get("nodes", []):
+        pos = positions[node["id"]]
+        parts.append(topology_node_svg(node, pos))
+    parts.append("</svg>")
+    return "\n".join(parts) + "\n"
+
+
+def topology_node_svg(node: dict[str, Any], pos: dict[str, float]) -> str:
+    x, y, w, h = pos["x"], pos["y"], pos["w"], pos["h"]
+    kind = node.get("kind", "generic")
+    glyph = STENCIL_MAP.get(kind, STENCIL_MAP["generic"])["glyph"]
+    fill = "#eef6ff"
+    stroke = "#2563eb"
+    if glyph == "diamond":
+        points = (
+            f"{x + w / 2:.1f},{y:.1f} {x + w:.1f},{y + h / 2:.1f} "
+            f"{x + w / 2:.1f},{y + h:.1f} {x:.1f},{y + h / 2:.1f}"
+        )
+        shape = f'<polygon points="{points}" fill="#fff7ed" stroke="#f97316" stroke-width="1.8"/>'
+    elif glyph == "rounded":
+        shape = (
+            f'<rect x="{x:.1f}" y="{y:.1f}" width="{w:.1f}" height="{h:.1f}" '
+            f'rx="{h / 2:.1f}" fill="#ecfdf5" stroke="#059669" stroke-width="1.8"/>'
+        )
+    elif glyph == "cylinder":
+        shape = (
+            f'<rect x="{x:.1f}" y="{y + 8:.1f}" width="{w:.1f}" height="{h - 16:.1f}" '
+            f'fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.8"/>'
+            f'<ellipse cx="{x + w / 2:.1f}" cy="{y + 8:.1f}" rx="{w / 2:.1f}" ry="8" '
+            f'fill="#f5f3ff" stroke="#7c3aed" stroke-width="1.8"/>'
+            f'<ellipse cx="{x + w / 2:.1f}" cy="{y + h - 8:.1f}" rx="{w / 2:.1f}" ry="8" '
+            f'fill="none" stroke="#7c3aed" stroke-width="1.8"/>'
+        )
+    elif glyph == "cloud":
+        cx = x + w / 2
+        cy = y + h / 2
+        rx = w / 2
+        ry = h / 2
+        shape = (
+            f'<ellipse cx="{cx:.1f}" cy="{cy:.1f}" rx="{rx:.1f}" ry="{ry:.1f}" '
+            f'fill="#fdf4ff" stroke="#a855f7" stroke-width="1.8"/>'
+        )
+    elif glyph == "circle":
+        r = min(w, h) / 2
+        shape = (
+            f'<circle cx="{x + w / 2:.1f}" cy="{y + h / 2:.1f}" r="{r:.1f}" '
+            f'fill="#fffbeb" stroke="#d97706" stroke-width="1.8"/>'
+        )
+    else:
+        shape = (
+            f'<rect x="{x:.1f}" y="{y:.1f}" width="{w:.1f}" height="{h:.1f}" '
+            f'rx="6" fill="{fill}" stroke="{stroke}" stroke-width="1.8"/>'
+        )
+
+    label = node.get("label", node["id"])
+    text_lines = wrap_label(label)
+    start_y = y + h / 2 - (len(text_lines) - 1) * 7
+    text_parts = [
+        '<text font-family="Segoe UI, Arial, sans-serif" font-size="13" fill="#111827" text-anchor="middle">'
+    ]
+    for index, line in enumerate(text_lines):
+        dy = 0 if index == 0 else 16
+        text_parts.append(
+            f'<tspan x="{x + w / 2:.1f}" y="{start_y + dy * index:.1f}">{escape(line)}</tspan>'
+        )
+    text_parts.append("</text>")
+    kind_label = STENCIL_MAP.get(kind, STENCIL_MAP["generic"])["label"]
+    return (
+        f'<g data-node-id="{escape(node["id"])}" data-kind="{escape(kind)}" '
+        f'data-stencil="{escape(kind_label)}">\n{shape}\n'
+        + "\n".join(text_parts)
+        + "\n</g>"
+    )
+
+
+def reference_svg(diagram: DiagramSource, ir: dict[str, Any]) -> str:
+    title = escape(diagram.title)
+    source_type = escape(diagram.source_type)
+    warning = escape("; ".join(ir.get("warnings", diagram.warnings)) or "Reference output only.")
+    return f"""<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="360" viewBox="0 0 900 360">
+  <rect width="100%" height="100%" fill="#ffffff"/>
+  <rect x="36" y="42" width="828" height="250" rx="8" fill="#f9fafb" stroke="#9ca3af" stroke-width="1.5"/>
+  <text x="72" y="100" font-family="Segoe UI, Arial, sans-serif" font-size="24" font-weight="600" fill="#111827">{title}</text>
+  <text x="72" y="142" font-family="Segoe UI, Arial, sans-serif" font-size="16" fill="#374151">Source type: {source_type}</text>
+  <text x="72" y="182" font-family="Segoe UI, Arial, sans-serif" font-size="15" fill="#6b7280">Native parsing/rendering is not available.</text>
+  <text x="72" y="222" font-family="Segoe UI, Arial, sans-serif" font-size="14" fill="#6b7280">{warning}</text>
+</svg>
+"""
+
+
+def write_flowchart_png(png_path: Path, ir: dict[str, Any], layout: dict[str, Any]) -> None:
+    try:
+        from PIL import Image, ImageDraw, ImageFont  # type: ignore
+
+        width, height = layout["width"], layout["height"]
+        image = Image.new("RGB", (width, height), "white")
+        draw = ImageDraw.Draw(image)
+        font = ImageFont.load_default()
+        draw.text((24, 18), ir.get("title", "Diagram"), fill=(17, 24, 39), font=font)
+        positions = layout["positions"]
+        for edge in ir.get("edges", []):
+            src = positions.get(edge["from"])
+            dst = positions.get(edge["to"])
+            if not src or not dst:
+                continue
+            x1, y1 = src["x"] + src["w"], src["y"] + src["h"] / 2
+            x2, y2 = dst["x"], dst["y"] + dst["h"] / 2
+            draw.line((x1, y1, x2, y2), fill=(75, 85, 99), width=2)
+            draw_arrowhead(draw, x1, y1, x2, y2)
+            if edge.get("label"):
+                draw.text(((x1 + x2) / 2, (y1 + y2) / 2 - 14), edge["label"], fill=(55, 65, 81), font=font)
+        for node in ir.get("nodes", []):
+            pos = positions[node["id"]]
+            box = (pos["x"], pos["y"], pos["x"] + pos["w"], pos["y"] + pos["h"])
+            if node.get("shape_kind") == "decision":
+                points = [
+                    (pos["x"] + pos["w"] / 2, pos["y"]),
+                    (pos["x"] + pos["w"], pos["y"] + pos["h"] / 2),
+                    (pos["x"] + pos["w"] / 2, pos["y"] + pos["h"]),
+                    (pos["x"], pos["y"] + pos["h"] / 2),
+                ]
+                draw.polygon(points, fill=(255, 247, 237), outline=(249, 115, 22))
+            else:
+                draw.rounded_rectangle(box, radius=10, fill=(238, 246, 255), outline=(37, 99, 235), width=2)
+            lines = wrap_label(node.get("label", node["id"]))
+            text_y = pos["y"] + pos["h"] / 2 - len(lines) * 7
+            for line in lines:
+                try:
+                    bbox = draw.textbbox((0, 0), line, font=font)
+                    text_w = bbox[2] - bbox[0]
+                except Exception:
+                    text_w = len(line) * 6
+                draw.text((pos["x"] + pos["w"] / 2 - text_w / 2, text_y), line, fill=(17, 24, 39), font=font)
+                text_y += 14
+        image.save(png_path)
+    except Exception:
+        write_basic_flowchart_png(png_path, ir, layout)
+
+
+def draw_arrowhead(draw: Any, x1: float, y1: float, x2: float, y2: float) -> None:
+    angle = math.atan2(y2 - y1, x2 - x1)
+    size = 8
+    points = [
+        (x2, y2),
+        (x2 - size * math.cos(angle - 0.5), y2 - size * math.sin(angle - 0.5)),
+        (x2 - size * math.cos(angle + 0.5), y2 - size * math.sin(angle + 0.5)),
+    ]
+    draw.polygon(points, fill=(75, 85, 99))
+
+
+def write_basic_flowchart_png(png_path: Path, ir: dict[str, Any], layout: dict[str, Any]) -> None:
+    width = min(max(int(layout["width"]), 320), 2400)
+    height = min(max(int(layout["height"]), 240), 1800)
+    canvas = new_canvas(width, height, (255, 255, 255))
+    positions = layout["positions"]
+    for edge in ir.get("edges", []):
+        src = positions.get(edge["from"])
+        dst = positions.get(edge["to"])
+        if not src or not dst:
+            continue
+        draw_line(canvas, int(src["x"] + src["w"]), int(src["y"] + src["h"] / 2), int(dst["x"]), int(dst["y"] + dst["h"] / 2), (75, 85, 99))
+    for node in ir.get("nodes", []):
+        pos = positions[node["id"]]
+        x, y, w, h = int(pos["x"]), int(pos["y"]), int(pos["w"]), int(pos["h"])
+        if node.get("shape_kind") == "decision":
+            draw_polygon(canvas, [(x + w // 2, y), (x + w, y + h // 2), (x + w // 2, y + h), (x, y + h // 2)], (255, 247, 237), (249, 115, 22))
+        else:
+            draw_rect(canvas, x, y, x + w, y + h, (238, 246, 255), (37, 99, 235))
+    write_png(png_path, canvas)
+
+
+def write_reference_png(png_path: Path) -> None:
+    canvas = new_canvas(900, 360, (255, 255, 255))
+    draw_rect(canvas, 36, 42, 864, 292, (249, 250, 251), (156, 163, 175))
+    draw_rect(canvas, 72, 92, 520, 130, (238, 246, 255), (37, 99, 235))
+    draw_rect(canvas, 72, 160, 720, 198, (255, 247, 237), (249, 115, 22))
+    draw_rect(canvas, 72, 226, 620, 264, (236, 253, 245), (5, 150, 105))
+    write_png(png_path, canvas)
+
+
+def new_canvas(width: int, height: int, color: tuple[int, int, int]) -> list[list[tuple[int, int, int]]]:
+    return [[color for _ in range(width)] for _ in range(height)]
+
+
+def set_pixel(canvas: list[list[tuple[int, int, int]]], x: int, y: int, color: tuple[int, int, int]) -> None:
+    if 0 <= y < len(canvas) and 0 <= x < len(canvas[0]):
+        canvas[y][x] = color
+
+
+def draw_line(canvas: list[list[tuple[int, int, int]]], x1: int, y1: int, x2: int, y2: int, color: tuple[int, int, int]) -> None:
+    dx = abs(x2 - x1)
+    dy = -abs(y2 - y1)
+    sx = 1 if x1 < x2 else -1
+    sy = 1 if y1 < y2 else -1
+    err = dx + dy
+    while True:
+        for ox in range(-1, 2):
+            for oy in range(-1, 2):
+                set_pixel(canvas, x1 + ox, y1 + oy, color)
+        if x1 == x2 and y1 == y2:
+            break
+        e2 = 2 * err
+        if e2 >= dy:
+            err += dy
+            x1 += sx
+        if e2 <= dx:
+            err += dx
+            y1 += sy
+
+
+def draw_rect(
+    canvas: list[list[tuple[int, int, int]]],
+    x1: int,
+    y1: int,
+    x2: int,
+    y2: int,
+    fill: tuple[int, int, int],
+    stroke: tuple[int, int, int],
+) -> None:
+    for y in range(max(0, y1), min(len(canvas), y2)):
+        for x in range(max(0, x1), min(len(canvas[0]), x2)):
+            canvas[y][x] = fill
+    for x in range(x1, x2 + 1):
+        set_pixel(canvas, x, y1, stroke)
+        set_pixel(canvas, x, y2, stroke)
+    for y in range(y1, y2 + 1):
+        set_pixel(canvas, x1, y, stroke)
+        set_pixel(canvas, x2, y, stroke)
+
+
+def draw_polygon(
+    canvas: list[list[tuple[int, int, int]]],
+    points: list[tuple[int, int]],
+    fill: tuple[int, int, int],
+    stroke: tuple[int, int, int],
+) -> None:
+    min_y = max(0, min(y for _, y in points))
+    max_y = min(len(canvas) - 1, max(y for _, y in points))
+    for y in range(min_y, max_y + 1):
+        intersections = []
+        for i, (x1, y1) in enumerate(points):
+            x2, y2 = points[(i + 1) % len(points)]
+            if (y1 <= y < y2) or (y2 <= y < y1):
+                x = int(x1 + (y - y1) * (x2 - x1) / (y2 - y1))
+                intersections.append(x)
+        intersections.sort()
+        for i in range(0, len(intersections), 2):
+            if i + 1 < len(intersections):
+                for x in range(max(0, intersections[i]), min(len(canvas[0]), intersections[i + 1])):
+                    canvas[y][x] = fill
+    for i, (x1, y1) in enumerate(points):
+        x2, y2 = points[(i + 1) % len(points)]
+        draw_line(canvas, x1, y1, x2, y2, stroke)
+
+
+def write_png(path: Path, canvas: list[list[tuple[int, int, int]]]) -> None:
+    height = len(canvas)
+    width = len(canvas[0]) if height else 0
+    raw = b"".join(b"\x00" + bytes(channel for pixel in row for channel in pixel) for row in canvas)
+
+    def chunk(kind: bytes, data: bytes) -> bytes:
+        return struct.pack(">I", len(data)) + kind + data + struct.pack(">I", zlib.crc32(kind + data) & 0xFFFFFFFF)
+
+    png = b"\x89PNG\r\n\x1a\n"
+    png += chunk(b"IHDR", struct.pack(">IIBBBBB", width, height, 8, 2, 0, 0, 0))
+    png += chunk(b"IDAT", zlib.compress(raw, 9))
+    png += chunk(b"IEND", b"")
+    path.write_bytes(png)
+