graph TD
    subgraph Key [Diagram Legend]
        direction LR
        K1[Core State / App] ~~~ K2[Math Component] ~~~ K3[Hardware Model] ~~~ K4[AI Rule / Mandate]
        style K1 fill:#1a1a1a,stroke:#5b9bd5,color:#5b9bd5
        style K2 fill:#1a1a1a,stroke:#10b981,color:#10b981
        style K3 fill:#1a1a1a,stroke:#f59e0b,color:#f59e0b
        style K4 fill:#1a1a1a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#8b5cf6
    end

    subgraph Architecture_Flow [System Flow]
        direction TB
        subgraph Registry_Module [Registry & Discovery]
            direction TB
            Main[js/main.js] -- "Defines" --> Registry[PATTERNS Registry]
            Registry -- "Listed In" --> PMD[patterns.md]
        end

        subgraph State_Module [Central State & Lifecycle]
            direction TB
            App[js/app.js] -- "Manages" --> Instances[Instance Configs]
            App -- "Decoupled From" --> TabMgr[js/tabs.js]
            TabMgr -- "Created By" --> TabComp[Tab Component]
            Instances -- "Restored By" --> Persist[js/persistence.js]
        end

        subgraph UX_Module [Interaction & UI Elements]
            direction TB
            Utils[js/utils.js] -- "Standardizes" --> GSettings[General Settings UI]
            Utils -- "Logic" --> Negotiator[Auto-Color Negotiator]
            GSettings -- "Rule: UX Normalization" --> GMD[GEMINI.md]
        end

        subgraph Math_Module [Mathematical Generation]
            direction TB
            TabComp[Tab Component] -- "calls" --> Exporter[js/xcs-exporter.js]
            Exporter -- "wraps" --> XCSProj[XCSProject Instance]
        end

        subgraph Core_Module [XCSSystem Module]
            direction TB
            System[js/xcs-system.js] -- "Defines" --> XCSProj
            System -- "Defines" --> XCSItem[XCSItem Class]
            XCSProj -- "instantiates" --> XCSItem
            XCSItem -- "Bakes" --> VAlpha[VANTAGE-ALPHA Rules]
        end

        subgraph Visual_Module [Visualization]
            direction TB
            Viewer[js/viewer.js] -- "Consumes" --> XCSItem
            XCSItem -- "Standard IR" --> Render["getRenderProps()"]
        end

        %% Internal Flow
        Main --> App
        TabMgr --> TabComp
        TabComp --> Utils
        Negotiator --> GSettings
        Exporter -- "Internal" --> System
        XCSProj -- "Items" --> Viewer
    end

    %% Styling
    classDef aiRule fill:#1a1a1a,stroke:#8b5cf6,stroke-width:2px,stroke-dasharray: 5 5,color:#8b5cf6;
    class GMD,PMD,VAlpha,K4 aiRule;
    class Registry_Module,State_Module,UX_Module,Math_Module,Core_Module,Visual_Module default;
    
    style App fill:#1a1a1a,stroke:#5b9bd5,color:#5b9bd5
    style TabComp fill:#1a1a1a,stroke:#10b981,color:#10b981
    style System fill:#1a1a1a,stroke:#f59e0b,color:#f59e0b

    %% Invisible Link to position Key on the left
    Key ~~~ Architecture_Flow
    

graph TD
    subgraph XCS_System_Core ["XCS System Core Classes"]
        direction TB
        
        subgraph XCSProject_Class ["XCSProject Class"]
            direction TB
            P1["Internal State"]
            P1 --- P1a["canvasId: UUID"]
            P1 --- P1b["canvas: {id, layerData, displays[]}"]
            P1 --- P1c["device: {id, power, data: ProcessingTree}"]
            P1 --- P1d["root: Formal XCS Metadata"]
            
            P2["Public Methods"]
            P2 --- P2a["addItem(type, options)"]
            P2 --- P2b["getItems(): XCSItem[]"]
            P2 --- P2c["toJSON(): Object"]
            P2 --- P2d["static fromJSON(data)"]
        end

        subgraph XCSItem_Class ["XCSItem Class (Base)"]
            direction TB
            I1["Instance Data"]
            I1 --- I1a["display: DisplayNode"]
            I1 --- I1b["laser: LaserNode"]
            I1 --- I1c["idx: Selection Index"]
            
            I2["Item Properties (Render)"]
            I2 --- I2a["Geometry: x, y, w, h, angle, scale"]
            I2 --- I2b["Laser: power, speed, density, repeat"]
            I2 --- I2c["Metadata: laser, isFill, id, type"]
            
            I3["Methods"]
            I3 --- I3a["updateParams(params)"]
            I3 --- I3b["static createDisplayNode()"]
            I3 --- I3c["static createLaserNode()"]
            I3 --- I3d["static createOpNode()"]
        end

        subgraph XCSItem_Subclasses ["Subclasses"]
            direction LR
            S1["XCSShape (RECT, CIRCLE, ...)"]
            S2["XCSText (Baked Glyphs)"]
            S2 --- S2a["static bake(): Typesetter"]
        end

        XCSProject_Class -- "Factory For" --> XCSItem_Class
        XCSItem_Class -- "Inherited By" --> S1
        XCSItem_Class -- "Inherited By" --> S2
    end

    %% Styling
    style XCSProject_Class fill:#1a1a1a,stroke:#f59e0b,color:#f59e0b
    style XCSItem_Class fill:#1a1a1a,stroke:#10b981,color:#10b981
    style XCS_System_Core fill:#0d0d0d,stroke:#333