elanous 0.2.9 → 0.2.11

package/skills/diagram-master/references/engines/nanobannana/render_nanobannana2.py

@@ -0,0 +1,168 @@
+#!/usr/bin/env python3
+"""
+Nano Banana 2 렌더러 — diagram-master 스킬용.
+
+Gemini 3.1 Flash Image Preview (gemini-3.1-flash-image-preview) 모델을 사용하여
+텍스트 프롬프트로 다이어그램/인포그래픽/시각화를 생성.
+
+사용법:
+  # 텍스트 프롬프트로 다이어그램 생성
+  uv run python render_nanobannana2.py "수요 공급 곡선 다이어그램, 균형점 표시" --output supply_demand.png
+
+  # 프롬프트 파일에서 읽기
+  uv run python render_nanobannana2.py --file prompt.txt --output diagram.png
+
+  # 참고 이미지 + 프롬프트 (PDF에서 추출한 이미지를 참고하여 재생성)
+  uv run python render_nanobannana2.py "이 다이어그램을 깔끔하게 다시 그려줘" --ref original.png --output clean.png
+
+  # 4K 해상도
+  uv run python render_nanobannana2.py "IS-LM 모델" --output islm.png --aspect 16:9
+
+환경변수:
+  GEMINI_API_KEY 또는 GOOGLE_API_KEY (환경변수에서 탐색)
+"""
+
+import argparse
+import base64
+import os
+import sys
+import textwrap
+from pathlib import Path
+
+
+def find_api_key() -> str:
+    """Read the user's Gemini credential from the process environment."""
+    key = os.environ.get("GEMINI_API_KEY") or os.environ.get("GOOGLE_API_KEY")
+    if key:
+        return key
+
+    print("Error: GEMINI_API_KEY not found in the environment.", file=sys.stderr)
+    sys.exit(1)
+
+
+def build_diagram_prompt(user_prompt: str) -> str:
+    """다이어그램 생성에 최적화된 시스템 프롬프트 구성."""
+    return (
+        "You are a professional diagram and infographic designer. "
+        "Create a clean, publication-quality diagram based on the following description. "
+        "Rules:\n"
+        "- Use clear labels and annotations\n"
+        "- Use a clean white background unless specified otherwise\n"
+        "- Use semantic colors (blue for primary, red for important, green for success)\n"
+        "- Ensure all text is legible and properly sized\n"
+        "- Include a title at the top\n"
+        "- Use professional, modern design aesthetics\n"
+        "- If mathematical equations are involved, render them correctly\n"
+        "- For Korean text, use clean sans-serif Korean typography\n\n"
+        f"Diagram request: {user_prompt}"
+    )
+
+
+def render(prompt: str, output: str, ref_image: str | None = None,
+           aspect: str | None = None) -> str:
+    """Nano Banana 2로 다이어그램 생성."""
+    import google.generativeai as genai
+
+    api_key = find_api_key()
+    genai.configure(api_key=api_key)
+
+    model = genai.GenerativeModel("gemini-3.1-flash-image-preview")
+
+    # 프롬프트 구성
+    full_prompt = build_diagram_prompt(prompt)
+
+    # 생성 설정
+    gen_config = genai.types.GenerationConfig(
+        response_modalities=["image", "text"],
+    )
+
+    # 참고 이미지가 있으면 멀티모달 입력
+    contents = []
+    if ref_image:
+        ref_path = Path(ref_image)
+        if not ref_path.exists():
+            print(f"Error: Reference image {ref_image} not found", file=sys.stderr)
+            sys.exit(1)
+
+        # 이미지 MIME 타입 판단
+        suffix = ref_path.suffix.lower()
+        mime_map = {".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg",
+                    ".webp": "image/webp", ".gif": "image/gif"}
+        mime = mime_map.get(suffix, "image/png")
+
+        img_data = ref_path.read_bytes()
+        contents = [
+            {"mime_type": mime, "data": img_data},
+            full_prompt,
+        ]
+    else:
+        contents = [full_prompt]
+
+    # 생성
+    try:
+        response = model.generate_content(contents, generation_config=gen_config)
+    except Exception as e:
+        print(f"Error generating image: {e}", file=sys.stderr)
+        sys.exit(1)
+
+    # 이미지 추출 및 저장
+    out_path = Path(output)
+    saved = False
+
+    if response.candidates:
+        for part in response.candidates[0].content.parts:
+            if hasattr(part, "inline_data") and part.inline_data:
+                img_bytes = part.inline_data.data
+                out_path.write_bytes(img_bytes)
+                saved = True
+                print(f"Saved: {out_path}")
+                break
+
+    if not saved:
+        # text response만 온 경우
+        if response.text:
+            print(f"Model returned text instead of image:\n{response.text[:500]}", file=sys.stderr)
+        else:
+            print("Error: No image generated", file=sys.stderr)
+        sys.exit(1)
+
+    return str(out_path)
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="Nano Banana 2 렌더러 — AI 다이어그램 생성",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog=textwrap.dedent("""\
+            예시:
+              uv run python render_nanobannana2.py "수요 공급 곡선 다이어그램"
+              uv run python render_nanobannana2.py "IS-LM 모델" --output islm.png
+              uv run python render_nanobannana2.py "이 다이어그램을 깔끔하게 재생성" --ref original.png
+              uv run python render_nanobannana2.py --file prompt.txt --output result.png
+        """),
+    )
+    parser.add_argument("prompt", nargs="?", help="다이어그램 설명 프롬프트")
+    parser.add_argument("--file", "-f", help="프롬프트를 파일에서 읽기")
+    parser.add_argument("--output", "-o", default="diagram.png", help="출력 PNG 경로 (기본: diagram.png)")
+    parser.add_argument("--ref", help="참고 이미지 경로 (PDF 추출 이미지 등)")
+    parser.add_argument("--aspect", help="종횡비 (예: 16:9, 1:1, 4:3)")
+
+    args = parser.parse_args()
+
+    # 프롬프트 결정
+    if args.file:
+        prompt = Path(args.file).read_text(encoding="utf-8").strip()
+    elif args.prompt:
+        prompt = args.prompt
+    else:
+        parser.error("프롬프트 또는 --file 옵션이 필요합니다")
+        return
+
+    if args.aspect:
+        prompt += f"\n\nAspect ratio: {args.aspect}"
+
+    render(prompt, args.output, args.ref, args.aspect)
+
+
+if __name__ == "__main__":
+    main()

package/skills/diagram-master/references/engines/svg/color-palette.md

@@ -0,0 +1,188 @@
+# Color Palette & Brand Style
+
+**This is the single source of truth for all colors and brand-specific styles.** To customize diagrams for your own brand, edit this file — everything else in the skill is universal.
+
+All colors are defined as CSS custom properties in the HTML base template. Reference them as `var(--color-name)` in your SVG and CSS.
+
+---
+
+## Shape Colors (Semantic)
+
+Colors encode meaning, not decoration. Each semantic purpose has a fill/stroke pair.
+
+| Semantic Purpose | Fill | Stroke | CSS Variable Prefix |
+|------------------|------|--------|---------------------|
+| Primary/Neutral | `#3b82f6` | `#1e3a5f` | `--c-primary` |
+| Secondary | `#60a5fa` | `#1e3a5f` | `--c-secondary` |
+| Tertiary | `#93c5fd` | `#1e3a5f` | `--c-tertiary` |
+| Start/Trigger | `#fed7aa` | `#c2410c` | `--c-start` |
+| End/Success | `#a7f3d0` | `#047857` | `--c-success` |
+| Warning/Reset | `#fee2e2` | `#dc2626` | `--c-warning` |
+| Decision | `#fef3c7` | `#b45309` | `--c-decision` |
+| AI/LLM | `#ddd6fe` | `#6d28d9` | `--c-ai` |
+| Inactive/Disabled | `#dbeafe` | `#1e40af` | `--c-inactive` |
+| Error | `#fecaca` | `#b91c1c` | `--c-error` |
+
+**Rule**: Always pair a darker stroke with a lighter fill for contrast.
+
+---
+
+## Interactive State Colors
+
+These colors apply when elements are hovered, clicked, or selected.
+
+| State | Effect | CSS Property |
+|-------|--------|--------------|
+| Hover | Fill lightens 10%, stroke intensifies, subtle glow | `filter: brightness(1.1); drop-shadow(0 0 6px var(--glow-color))` |
+| Active/Pressed | Fill darkens 5%, scale 0.98 | `filter: brightness(0.95); transform: scale(0.98)` |
+| Selected/Focus | 2px ring in Primary stroke color | `outline: 2px solid #3b82f6; outline-offset: 2px` |
+| Glow (connection highlight) | Soft radial glow behind element | `filter: drop-shadow(0 0 12px rgba(59,130,246,0.4))` |
+| Fade (non-selected) | Opacity 0.3 | `opacity: 0.3` |
+| Connected highlight | Stroke brightens, fill slightly saturates | `filter: saturate(1.3) brightness(1.05)` |
+
+### Glow Colors by Semantic Purpose
+
+| Semantic Purpose | Glow Color (rgba) |
+|------------------|-------------------|
+| Primary | `rgba(59, 130, 246, 0.4)` |
+| Start/Trigger | `rgba(194, 65, 12, 0.3)` |
+| Success | `rgba(4, 120, 87, 0.3)` |
+| Warning | `rgba(220, 38, 38, 0.3)` |
+| Decision | `rgba(180, 83, 9, 0.3)` |
+| AI/LLM | `rgba(109, 40, 217, 0.4)` |
+
+---
+
+## Text Colors (Hierarchy)
+
+| Level | Color | Use For |
+|-------|-------|---------|
+| Title | `#1e40af` | Section headings, major labels |
+| Subtitle | `#3b82f6` | Subheadings, secondary labels |
+| Body/Detail | `#64748b` | Descriptions, annotations, metadata |
+| On light fills | `#374151` | Text inside light-colored shapes |
+| On dark fills | `#ffffff` | Text inside dark-colored shapes |
+| Link/Interactive | `#2563eb` | Clickable text, underlined on hover |
+
+---
+
+## Evidence Artifact Colors
+
+Used for code snippets, data examples, and other concrete evidence.
+
+| Artifact | Background | Text Color | Border |
+|----------|-----------|------------|--------|
+| Code snippet | `#1e293b` | Syntax-colored | `#334155` |
+| JSON/data example | `#1e293b` | `#22c55e` (green) | `#334155` |
+| Modal overlay | `rgba(0,0,0,0.5)` | — | — |
+| Modal content | `#ffffff` | `#1e293b` | `#e2e8f0` |
+| Copy button | `#334155` | `#94a3b8` | — |
+| Copy button (hover) | `#475569` | `#e2e8f0` | — |
+
+### Syntax Highlighting Colors (for code evidence)
+
+| Token Type | Color |
+|-----------|-------|
+| Keyword | `#c084fc` (purple) |
+| String | `#86efac` (green) |
+| Number | `#fbbf24` (amber) |
+| Comment | `#64748b` (slate) |
+| Function | `#60a5fa` (blue) |
+| Type | `#22d3ee` (cyan) |
+| Operator | `#f8fafc` (white) |
+
+---
+
+## Animation Colors & Timing
+
+| Animation | Duration | Easing | Color |
+|-----------|----------|--------|-------|
+| Flow arrow dash | `2s` | `linear` | Arrow stroke color |
+| Hover transition | `0.3s` | `ease` | — |
+| Modal appear | `0.2s` | `ease-out` | — |
+| Pulse (start node) | `2s` | `ease-in-out` | Start fill color at 50% opacity |
+| Glow pulse | `1.5s` | `ease-in-out` | Semantic glow color |
+| Expand/collapse | `0.3s` | `ease` | — |
+
+---
+
+## Default Stroke & Line Colors
+
+| Element | Color |
+|---------|-------|
+| Arrows | Source element's stroke color |
+| Structural lines | Primary stroke (`#1e3a5f`) or Slate (`#64748b`) |
+| Marker dots (fill + stroke) | Primary fill (`#3b82f6`) |
+| Grid lines (if shown) | `#f1f5f9` |
+| Divider lines | `#e2e8f0` |
+
+---
+
+## Dark Mode Colors
+
+| Property | Light Mode | Dark Mode |
+|----------|-----------|-----------|
+| Background | `#ffffff` | `#0f172a` |
+| Card background | `#ffffff` | `#1e293b` |
+| Text primary | `#1e293b` | `#f1f5f9` |
+| Text secondary | `#64748b` | `#94a3b8` |
+| Border | `#e2e8f0` | `#334155` |
+| SVG background | `#ffffff` | `#0f172a` |
+
+---
+
+## Background
+
+| Property | Value |
+|----------|-------|
+| Canvas background (light) | `#ffffff` |
+| Canvas background (dark) | `#0f172a` |
+| Toolbar background | `#f8fafc` |
+| Toolbar border | `#e2e8f0` |
+
+---
+
+## CSS Custom Properties Template
+
+```css
+:root {
+  /* Semantic fills */
+  --c-primary-fill: #3b82f6;
+  --c-primary-stroke: #1e3a5f;
+  --c-secondary-fill: #60a5fa;
+  --c-tertiary-fill: #93c5fd;
+  --c-start-fill: #fed7aa;
+  --c-start-stroke: #c2410c;
+  --c-success-fill: #a7f3d0;
+  --c-success-stroke: #047857;
+  --c-warning-fill: #fee2e2;
+  --c-warning-stroke: #dc2626;
+  --c-decision-fill: #fef3c7;
+  --c-decision-stroke: #b45309;
+  --c-ai-fill: #ddd6fe;
+  --c-ai-stroke: #6d28d9;
+  --c-error-fill: #fecaca;
+  --c-error-stroke: #b91c1c;
+
+  /* Text */
+  --c-text-title: #1e40af;
+  --c-text-subtitle: #3b82f6;
+  --c-text-body: #64748b;
+  --c-text-on-light: #374151;
+  --c-text-on-dark: #ffffff;
+
+  /* Evidence */
+  --c-evidence-bg: #1e293b;
+  --c-evidence-border: #334155;
+  --c-evidence-text: #22c55e;
+
+  /* Interactive */
+  --c-glow-primary: rgba(59, 130, 246, 0.4);
+  --c-focus-ring: #3b82f6;
+  --c-fade-opacity: 0.3;
+
+  /* Background */
+  --c-bg: #ffffff;
+  --c-bg-toolbar: #f8fafc;
+}
+```

package/skills/diagram-master/references/engines/svg/html-base-template.html

@@ -0,0 +1,332 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Interactive SVG Diagram</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    /* === Color Palette (from color-palette.md) === */
+    :root {
+      --c-primary-fill: #3b82f6;
+      --c-primary-stroke: #1e3a5f;
+      --c-secondary-fill: #60a5fa;
+      --c-tertiary-fill: #93c5fd;
+      --c-start-fill: #fed7aa;
+      --c-start-stroke: #c2410c;
+      --c-success-fill: #a7f3d0;
+      --c-success-stroke: #047857;
+      --c-warning-fill: #fee2e2;
+      --c-warning-stroke: #dc2626;
+      --c-decision-fill: #fef3c7;
+      --c-decision-stroke: #b45309;
+      --c-ai-fill: #ddd6fe;
+      --c-ai-stroke: #6d28d9;
+      --c-error-fill: #fecaca;
+      --c-error-stroke: #b91c1c;
+      --c-text-title: #1e40af;
+      --c-text-subtitle: #3b82f6;
+      --c-text-body: #64748b;
+      --c-text-on-light: #374151;
+      --c-text-on-dark: #ffffff;
+      --c-evidence-bg: #1e293b;
+      --c-evidence-border: #334155;
+      --c-evidence-text: #22c55e;
+      --c-glow-primary: rgba(59, 130, 246, 0.4);
+      --c-focus-ring: #3b82f6;
+      --c-fade-opacity: 0.3;
+      --c-bg: #ffffff;
+      --c-bg-toolbar: #f8fafc;
+    }
+
+    /* === Base Styles === */
+    body {
+      background: var(--c-bg);
+      font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    }
+
+    #diagram-container {
+      width: 100%;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    #diagram {
+      width: 100%;
+      height: auto;
+    }
+
+    /* === Interactive States === */
+    .interactive-node {
+      cursor: pointer;
+      transition: filter 0.3s ease, opacity 0.3s ease;
+    }
+
+    .interactive-node:hover .node-bg {
+      filter: brightness(1.1) drop-shadow(0 0 8px var(--c-glow-primary));
+    }
+
+    .interactive-node:focus {
+      outline: 2px solid var(--c-focus-ring);
+      outline-offset: 2px;
+    }
+
+    .interactive-node:focus:not(:focus-visible) {
+      outline: none;
+    }
+
+    .evidence-artifact {
+      cursor: pointer;
+      transition: filter 0.3s ease;
+    }
+
+    .evidence-artifact:hover .evidence-bg {
+      filter: brightness(1.2);
+    }
+
+    /* === Animations === */
+    @keyframes pulse {
+      0%, 100% { filter: drop-shadow(0 0 0px rgba(194, 65, 12, 0)); }
+      50% { filter: drop-shadow(0 0 12px rgba(194, 65, 12, 0.4)); }
+    }
+    .pulse-animation { animation: pulse 2s ease-in-out infinite; }
+
+    @keyframes dash-flow {
+      to { stroke-dashoffset: -24; }
+    }
+    .flow-animated {
+      stroke-dasharray: 8 4;
+      animation: dash-flow 2s linear infinite;
+    }
+
+    @keyframes fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* === Layer Toggle === */
+    .layer-btn {
+      transition: background-color 0.2s ease, color 0.2s ease;
+    }
+
+    .layer-btn.active {
+      background-color: #dbeafe;
+      color: #1e40af;
+    }
+
+    /* === Responsive === */
+    @media (max-width: 768px) {
+      #diagram-container { padding: 0.5rem; }
+      #detail-panel { width: 100% !important; }
+    }
+  </style>
+</head>
+<body class="bg-white min-h-screen flex flex-col items-center justify-center p-4 md:p-8">
+
+  <!-- Toolbar -->
+  <div class="flex flex-wrap gap-2 mb-4 justify-center">
+    <!-- Layer toggle -->
+    <button class="layer-btn active px-3 py-1.5 rounded-lg text-sm font-medium" data-layer="summary" onclick="setLayer('summary')">Summary</button>
+    <button class="layer-btn px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 text-gray-500" data-layer="detail" onclick="setLayer('detail')">Full Detail</button>
+    <button class="layer-btn px-3 py-1.5 rounded-lg text-sm font-medium bg-gray-100 text-gray-500" data-layer="code" onclick="setLayer('code')">Code View</button>
+    <div class="w-px bg-gray-200 mx-1"></div>
+    <!-- Export -->
+    <button onclick="exportPNG()" class="px-3 py-1.5 bg-slate-800 text-white rounded-lg text-sm hover:bg-slate-700">PNG</button>
+    <button onclick="exportSVG()" class="px-3 py-1.5 bg-slate-800 text-white rounded-lg text-sm hover:bg-slate-700">SVG</button>
+  </div>
+
+  <!-- Diagram Container -->
+  <div id="diagram-container" class="relative">
+    <svg id="diagram" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Interactive SVG Diagram">
+      <defs>
+        <!-- Arrowhead markers -->
+        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+          <polygon points="0 0, 10 3.5, 0 7" fill="var(--c-primary-stroke)" />
+        </marker>
+        <marker id="arrowhead-success" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+          <polygon points="0 0, 10 3.5, 0 7" fill="var(--c-success-stroke)" />
+        </marker>
+        <marker id="arrowhead-warning" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+          <polygon points="0 0, 10 3.5, 0 7" fill="var(--c-warning-stroke)" />
+        </marker>
+      </defs>
+
+      <!-- ===== SECTION 1: Title ===== -->
+      <text x="40" y="50" fill="var(--c-text-title)" font-size="28" font-weight="700" font-family="Inter, system-ui, sans-serif">
+        Diagram Title Here
+      </text>
+      <text x="40" y="78" fill="var(--c-text-body)" font-size="14" font-family="Inter, system-ui, sans-serif">
+        Subtitle or description
+      </text>
+
+      <!-- ===== SECTION 2+: Add diagram sections here ===== -->
+      <!-- Use <g id="section-xxx" data-layer="summary"> for layer-aware sections -->
+
+      <!-- Tooltip (hidden by default) -->
+      <g id="tooltip" style="display:none; pointer-events:none;">
+        <rect x="0" y="0" width="200" height="36" rx="6" ry="6" fill="#1e293b" stroke="#334155" stroke-width="1" opacity="0.95" />
+        <text x="10" y="23" fill="#f1f5f9" font-size="13" font-family="Inter, system-ui, sans-serif" id="tooltip-text">Tooltip</text>
+      </g>
+    </svg>
+  </div>
+
+  <!-- Detail Panel (slide-in from right) -->
+  <div id="detail-panel" class="fixed right-0 top-0 h-full w-96 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto border-l border-gray-200">
+    <div class="p-6">
+      <button id="detail-close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
+      <h2 id="detail-title" class="text-xl font-bold text-blue-900 mb-4"></h2>
+      <div id="detail-content" class="text-gray-600 text-sm leading-relaxed"></div>
+    </div>
+  </div>
+
+  <!-- Modal Overlay -->
+  <div id="modal-overlay" class="fixed inset-0 bg-black/50 hidden z-50 flex items-center justify-center p-8">
+    <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-y-auto">
+      <div class="p-6">
+        <div class="flex justify-between items-center mb-4">
+          <h3 id="modal-title" class="text-lg font-bold text-slate-800"></h3>
+          <button id="modal-close" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
+        </div>
+        <div id="modal-body"></div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // === Render Ready Signal (for Playwright validation) ===
+    window.__diagramReady = false;
+    window.__renderComplete = false;
+
+    const svg = document.getElementById('diagram');
+
+    // === Tooltip ===
+    function showTooltip(evt, text) {
+      const tooltip = document.getElementById('tooltip');
+      const tooltipText = document.getElementById('tooltip-text');
+      tooltipText.textContent = text;
+      const bbox = tooltipText.getBBox();
+      tooltip.querySelector('rect').setAttribute('width', bbox.width + 20);
+
+      const pt = svg.createSVGPoint();
+      pt.x = evt.clientX;
+      pt.y = evt.clientY;
+      const svgPt = pt.matrixTransform(svg.getScreenCTM().inverse());
+      tooltip.setAttribute('transform', `translate(${svgPt.x + 12}, ${svgPt.y - 45})`);
+      tooltip.style.display = '';
+    }
+
+    function hideTooltip() {
+      document.getElementById('tooltip').style.display = 'none';
+    }
+
+    // === Detail Panel ===
+    function showDetail(title, contentHtml) {
+      document.getElementById('detail-title').textContent = title;
+      document.getElementById('detail-content').innerHTML = contentHtml;
+      document.getElementById('detail-panel').classList.remove('translate-x-full');
+    }
+
+    document.getElementById('detail-close').addEventListener('click', () => {
+      document.getElementById('detail-panel').classList.add('translate-x-full');
+    });
+
+    // === Modal ===
+    function showModal(title, bodyHtml) {
+      document.getElementById('modal-title').textContent = title;
+      document.getElementById('modal-body').innerHTML = bodyHtml;
+      document.getElementById('modal-overlay').classList.remove('hidden');
+    }
+
+    document.getElementById('modal-close').addEventListener('click', () => {
+      document.getElementById('modal-overlay').classList.add('hidden');
+    });
+
+    document.getElementById('modal-overlay').addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) {
+        document.getElementById('modal-overlay').classList.add('hidden');
+      }
+    });
+
+    // === Keyboard: Escape to close ===
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        document.getElementById('detail-panel').classList.add('translate-x-full');
+        document.getElementById('modal-overlay').classList.add('hidden');
+      }
+    });
+
+    // === Keyboard navigation for interactive elements ===
+    document.querySelectorAll('[data-interactive="true"]').forEach(el => {
+      el.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          el.click();
+        }
+      });
+    });
+
+    // === Layer Toggle ===
+    function setLayer(layer) {
+      document.querySelectorAll('.layer-btn').forEach(btn => {
+        if (btn.dataset.layer === layer) {
+          btn.classList.add('active');
+          btn.classList.remove('bg-gray-100', 'text-gray-500');
+        } else {
+          btn.classList.remove('active');
+          btn.classList.add('bg-gray-100', 'text-gray-500');
+        }
+      });
+
+      document.querySelectorAll('svg [data-layer]').forEach(el => {
+        const layers = el.dataset.layer.split(',');
+        el.style.display = layers.includes(layer) ? '' : 'none';
+      });
+    }
+
+    // === Export PNG ===
+    function exportPNG() {
+      const svgEl = document.getElementById('diagram');
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      const data = new XMLSerializer().serializeToString(svgEl);
+      const img = new Image();
+      const blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      img.onload = () => {
+        canvas.width = img.width * 2;
+        canvas.height = img.height * 2;
+        ctx.scale(2, 2);
+        ctx.drawImage(img, 0, 0);
+        URL.revokeObjectURL(url);
+        const a = document.createElement('a');
+        a.download = 'diagram.png';
+        a.href = canvas.toDataURL('image/png');
+        a.click();
+      };
+      img.src = url;
+    }
+
+    // === Export SVG ===
+    function exportSVG() {
+      const svgEl = document.getElementById('diagram');
+      const data = new XMLSerializer().serializeToString(svgEl);
+      const blob = new Blob([data], { type: 'image/svg+xml' });
+      const a = document.createElement('a');
+      a.download = 'diagram.svg';
+      a.href = URL.createObjectURL(blob);
+      a.click();
+    }
+
+    // === Copy Code ===
+    function copyCode(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        // Visual feedback handled by caller
+      });
+    }
+
+    // === Signal ready ===
+    window.__diagramReady = true;
+    window.__renderComplete = true;
+  </script>
+</body>
+</html>