{
    "elements": [
        {
            "id": "INSTRUCTION",
            "type": "card",
            "title": "AI INSTRUCTION",
            "color": "red",
            "tags": ["system"],
            "description": "SYSTEM INSTRUCTION FOR AI: Create schema following this format.\n\nELEMENT TYPES:\n- \"card\" - standard card with text (180x55px)\n- \"condition\" - diamond for decisions (160x80px)\n- \"ascii\" - ASCII diagram for prototypes (auto-size, max 500px)\n- \"html\" - HTML content card (auto-size, sanitized)\n\nELEMENT STRUCTURE:\n{\n  \"id\": \"unique_id\",\n  \"type\": \"card\" | \"condition\" | \"ascii\" | \"html\",\n  \"title\": \"Element title\",\n  \"color\": \"blue\",\n  \"tags\": [\"tag1\", \"tag2\"],\n  \"description\": \"Description text\",\n  \"content\": \"(for type=ascii: ASCII art, for type=html: HTML content)\",\n  \"width\": 800, \"height\": 600 (optional, for html/ascii only),\n  \"connections\": [{\"to\": \"target_id\", \"label\": \"optional label\"}]\n}\n\nCONNECTIONS FORMAT:\nDefine connections INSIDE each element using the \"connections\" array:\n  \"connections\": [{\"to\": \"target_element_id\", \"label\": \"optional\"}]\nEach connection points FROM this element TO the target element.\nDo NOT use a separate top-level connections array.\n\nHTML CARDS:\n- Use inline styles only (no external CSS)\n- Sanitized via DOMPurify (safe HTML only)\n- Set width/height for custom sizes (e.g. 1280x900 for page prototypes)\n- Without width/height: auto-sized from content (default 320px wide)\n- Great for: dashboards, forms, profiles, page layouts, UI mockups\n\nCOLORS: default, blue, green, orange, purple, red, teal, yellow, gray, black\n\nDO NOT specify x/y - calculated automatically!",
            "connections": [
                {"to": "label-format"},
                {"to": "example-card"}
            ]
        },
        {
            "id": "label-format",
            "type": "card",
            "title": "📝 LABEL FORMAT",
            "color": "orange",
            "tags": ["system"],
            "description": "CONNECTION LABELS RULE\n\n═══════════════════════════════\n📌 [BRACKETS] — UI TRANSITIONS\n═══════════════════════════════\n\nUse [square brackets] for:\n• Screen to screen transitions\n• User actions (tap, click, swipe)\n• Button clicks\n• Navigation between UI screens\n\n✅ EXAMPLES:\n• [Login] — user taps Login button\n• [Submit] — form submission\n• [Back] — navigation back\n• [Open Profile] — screen transition\n\n═══════════════════════════════\n📌 NO BRACKETS — LOGIC/DATA\n═══════════════════════════════\n\nNo brackets for:\n• System/logic connections\n• Data flow\n• API calls\n• Conditions (yes/no, true/false)\n\n✅ EXAMPLES:\n• success — API response\n• error — error handling\n• yes / no — condition branches\n• valid / invalid — validation result"
        },
        {
            "id": "example-card",
            "type": "card",
            "title": "Example Card",
            "color": "blue",
            "tags": ["example"],
            "description": "This card demonstrates a regular process card.\n\nIt is connected to the instruction and leads to a decision.",
            "connections": [
                {"to": "example-condition", "label": "[Next]"}
            ]
        },
        {
            "id": "example-condition",
            "type": "condition",
            "title": "Decision?",
            "color": "yellow",
            "tags": ["decision"],
            "description": "This is a condition (diamond shape) for branching logic.",
            "connections": [
                {"to": "example-ascii", "label": "yes"},
                {"to": "example-error", "label": "no"}
            ]
        },
        {
            "id": "example-ascii",
            "type": "ascii",
            "title": "Login Form Mockup",
            "color": "purple",
            "tags": ["prototype"],
            "content": "┌─────────────────────┐\n│      LOGIN          │\n├─────────────────────┤\n│ Email: [__________] │\n│ Pass:  [__________] │\n│                     │\n│ [ Cancel ] [Submit] │\n└─────────────────────┘",
            "description": "ASCII prototype of a login form",
            "connections": [
                {"to": "example-success", "label": "[Submit]"}
            ]
        },
        {
            "id": "example-error",
            "type": "card",
            "title": "Error Screen",
            "color": "red",
            "tags": ["example"],
            "description": "Error state - no brackets on condition connection"
        },
        {
            "id": "example-success",
            "type": "card",
            "title": "Success Screen",
            "color": "green",
            "tags": ["example"],
            "description": "Success after UI action [Submit]",
            "connections": [
                {"to": "example-html"}
            ]
        },
        {
            "id": "example-html",
            "type": "html",
            "title": "HTML Card Example",
            "color": "teal",
            "tags": ["example"],
            "content": "<div style=\"font-family:system-ui;padding:14px;background:#fafafa;border-radius:8px;\"><div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\"><span style=\"font-size:14px;font-weight:600;color:#18181b;\">User Profile</span><span style=\"background:#dcfce7;color:#16a34a;font-size:11px;padding:2px 8px;border-radius:10px;\">Active</span></div><div style=\"display:flex;gap:10px;align-items:center;margin-bottom:12px;\"><div style=\"width:36px;height:36px;background:#e4e4e7;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#71717a;\">A</div><div><div style=\"font-size:13px;font-weight:500;color:#18181b;\">Alex Johnson</div><div style=\"font-size:11px;color:#a1a1aa;\">alex@company.com</div></div></div><div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px;\"><div style=\"background:#fff;border:1px solid #f0f0f0;border-radius:6px;padding:10px;text-align:center;\"><div style=\"font-size:18px;font-weight:700;color:#18181b;\">12</div><div style=\"font-size:10px;color:#a1a1aa;\">Projects</div></div><div style=\"background:#fff;border:1px solid #f0f0f0;border-radius:6px;padding:10px;text-align:center;\"><div style=\"font-size:18px;font-weight:700;color:#18181b;\">89%</div><div style=\"font-size:10px;color:#a1a1aa;\">Completion</div></div></div></div>",
            "description": "HTML cards render rich UI — dashboards, forms, profiles, prototypes"
        }
    ],
    "tagsDictionary": [
        {"id": "tag-sys", "name": "system", "color": "#E53935"},
        {"id": "tag-ex", "name": "example", "color": "#2196F3"},
        {"id": "tag-dec", "name": "decision", "color": "#FDD835"},
        {"id": "tag-proto", "name": "prototype", "color": "#9C27B0"}
    ]
}