@eaprelsky/nocturna-wheel 0.2.0

package/dist/nocturna-wheel.umd.js

@@ -0,0 +1,4598 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.NocturnaWheel = {}));
+})(this, (function (exports) { 'use strict';
+
+    /**
+     * ServiceRegistry.js
+     * A simple service locator/registry with all dependencies inlined.
+     */
+
+    // Self-contained implementation
+    class ServiceRegistry {
+        // Private map to store service instances
+        static #instances = new Map();
+        
+        /**
+         * Registers a service instance with the registry
+         * @param {string} key - Service identifier
+         * @param {Object} instance - Service instance
+         */
+        static register(key, instance) {
+            this.#instances.set(key, instance);
+        }
+        
+        /**
+         * Retrieves a service instance from the registry
+         * @param {string} key - Service identifier
+         * @returns {Object|undefined} The service instance, or undefined if not found
+         */
+        static get(key) {
+            return this.#instances.get(key);
+        }
+        
+        /**
+         * Checks if a service is registered
+         * @param {string} key - Service identifier
+         * @returns {boolean} True if the service is registered
+         */
+        static has(key) {
+            return this.#instances.has(key);
+        }
+        
+        /**
+         * Clears all registered services
+         * Useful for testing or reinitialization
+         */
+        static clear() {
+            this.#instances.clear();
+        }
+        
+        /**
+         * Gets or creates a basic SvgUtils-compatible instance
+         * @returns {Object} An object with SVG utility methods
+         */
+        static getSvgUtils() {
+            if (!this.has('svgUtils')) {
+                // Create a simple SVG utilities object
+                const svgUtils = {
+                    svgNS: "http://www.w3.org/2000/svg",
+                    
+                    createSVGElement(tagName, attributes = {}) {
+                        const element = document.createElementNS(this.svgNS, tagName);
+                        for (const [key, value] of Object.entries(attributes)) {
+                            element.setAttribute(key, value);
+                        }
+                        return element;
+                    },
+                    
+                    addTooltip(element, text) {
+                        const title = document.createElementNS(this.svgNS, "title");
+                        title.textContent = text;
+                        element.appendChild(title);
+                        return element;
+                    },
+                    
+                    pointOnCircle(centerX, centerY, radius, angle) {
+                        const radians = (angle - 90) * (Math.PI / 180);
+                        return {
+                            x: centerX + radius * Math.cos(radians),
+                            y: centerY + radius * Math.sin(radians)
+                        };
+                    }
+                };
+                
+                this.register('svgUtils', svgUtils);
+            }
+            return this.get('svgUtils');
+        }
+        
+        /**
+         * Gets or creates an IconProvider instance
+         * @param {string} basePath - Optional base path for SVG assets
+         * @returns {Object} The IconProvider instance
+         */
+        static getIconProvider(basePath = './assets/svg/zodiac/') {
+            if (!this.has('iconProvider')) {
+                // Create a simple icon provider
+                const iconProvider = {
+                    basePath: basePath,
+                    
+                    getPlanetIconPath(planetName) {
+                        return `${this.basePath}zodiac-planet-${planetName.toLowerCase()}.svg`;
+                    },
+                    
+                    getZodiacIconPath(signName) {
+                        return `${this.basePath}zodiac-sign-${signName.toLowerCase()}.svg`;
+                    },
+                    
+                    getAspectIconPath(aspectType) {
+                        return `${this.basePath}zodiac-aspect-${aspectType.toLowerCase()}.svg`;
+                    },
+                    
+                    createTextFallback(svgUtils, options, text) {
+                        const { x, y, size = '16px', color = '#000000', className = 'icon-fallback' } = options;
+                        
+                        const textElement = svgUtils.createSVGElement("text", {
+                            x: x,
+                            y: y,
+                            'text-anchor': 'middle',
+                            'dominant-baseline': 'middle',
+                            'font-size': size,
+                            'class': className,
+                            'fill': color
+                        });
+                        
+                        textElement.textContent = text;
+                        return textElement;
+                    }
+                };
+                
+                this.register('iconProvider', iconProvider);
+            }
+            return this.get('iconProvider');
+        }
+        
+        /**
+         * Initializes all core services at once
+         * @param {Object} options - Initialization options
+         */
+        static initializeServices(options = {}) {
+            // Initialize SvgUtils
+            this.getSvgUtils();
+            
+            // Initialize IconProvider with the assets base path
+            this.getIconProvider(options.assetBasePath || './assets/svg/zodiac/');
+            
+            console.log("ServiceRegistry: Core services initialized");
+        }
+    }
+
+    /**
+     * ChartConfig.js
+     * Configuration class for the natal chart rendering.
+     */
+
+    class ChartConfig {
+        /**
+         * Creates a new configuration with default settings
+         * @param {Object} customConfig - Custom configuration to merge with defaults
+         */
+        constructor(customConfig = {}) {
+            // Astronomical data - pure positional data without styling
+            this.astronomicalData = {
+                ascendant: 0,       // Ascendant longitude in degrees
+                mc: 90,             // Midheaven longitude in degrees
+                latitude: 51.5,     // Default latitude (London)
+                houseSystem: "Placidus", // Default house system
+                planets: {
+                    // Default planet positions
+                    sun: 0,
+                    moon: 0,
+                    mercury: 0,
+                    venus: 0,
+                    mars: 0,
+                    jupiter: 0,
+                    saturn: 0,
+                    uranus: 0,
+                    neptune: 0,
+                    pluto: 0
+                }
+            };
+            
+            // Aspect settings
+            this.aspectSettings = {
+                enabled: true,
+                orb: 6, // Default orb for aspects
+                types: {
+                    conjunction: { angle: 0, orb: 8, color: "#ff0000", enabled: true },
+                    opposition: { angle: 180, orb: 8, color: "#0000ff", enabled: true },
+                    trine: { angle: 120, orb: 6, color: "#00ff00", enabled: true },
+                    square: { angle: 90, orb: 6, color: "#ff00ff", enabled: true },
+                    sextile: { angle: 60, orb: 4, color: "#00ffff", enabled: true }
+                    // Other aspects can be added here
+                }
+            };
+            
+            // Planet settings
+            this.planetSettings = {
+                enabled: true,
+                primaryEnabled: true,     // Toggle for primary (inner circle) planets
+                secondaryEnabled: true,   // Toggle for secondary (innermost circle) planets
+                dotSize: 3,               // Size of the position dot
+                iconSize: 24,             // Size of the planet icon
+                orbs: {
+                    // Default orbs for each planet
+                    sun: 8,
+                    moon: 8,
+                    mercury: 6,
+                    venus: 6,
+                    mars: 6,
+                    jupiter: 6,
+                    saturn: 6,
+                    uranus: 4,
+                    neptune: 4,
+                    pluto: 4
+                },
+                colors: {
+                    // Default colors for each planet
+                    sun: "#ff9900",
+                    moon: "#aaaaaa",
+                    mercury: "#3399cc",
+                    venus: "#cc66cc",
+                    mars: "#cc3333",
+                    jupiter: "#9966cc",
+                    saturn: "#336633",
+                    uranus: "#33cccc",
+                    neptune: "#3366ff",
+                    pluto: "#663366"
+                },
+                visible: {
+                    // Default visibility for each planet
+                    sun: true,
+                    moon: true,
+                    mercury: true,
+                    venus: true,
+                    mars: true,
+                    jupiter: true,
+                    saturn: true,
+                    uranus: true,
+                    neptune: true,
+                    pluto: true
+                }
+            };
+            
+            // House settings - only UI related settings, no calculations
+            this.houseSettings = {
+                enabled: true,
+                lineColor: "#666666",
+                textColor: "#333333",
+                fontSize: 10,
+                rotationAngle: 0  // Custom rotation angle for house system
+            };
+            
+            // Zodiac settings
+            this.zodiacSettings = {
+                enabled: true,
+                colors: {
+                    aries: "#ff6666",
+                    taurus: "#66cc66",
+                    gemini: "#ffcc66",
+                    cancer: "#6699cc",
+                    leo: "#ff9900",
+                    virgo: "#996633",
+                    libra: "#6699ff",
+                    scorpio: "#cc3366",
+                    sagittarius: "#cc66ff",
+                    capricorn: "#339966",
+                    aquarius: "#3399ff",
+                    pisces: "#9966cc"
+                },
+                fontSize: 10
+            };
+            
+            // Radii for different chart layers
+            this.radius = {
+                innermost: 90,       // Innermost circle (for dual charts, transits, synastry)
+                zodiacInner: 120,    // Inner circle (aspect container)
+                zodiacMiddle: 150,   // Middle circle (house boundaries)
+                zodiacOuter: 180,    // Outer circle (zodiac ring)
+                planet: 105,         // Default planet placement radius
+                aspectInner: 20,     // Center space for aspects
+                aspectOuter: 120,    // Outer boundary for aspects
+                houseNumberRadius: 210 // Radius for house numbers
+            };
+            
+            // SVG settings
+            this.svg = {
+                width: 460,
+                height: 460,
+                viewBox: "0 0 460 460",
+                center: { x: 230, y: 230 }
+            };
+            
+            // Assets settings
+            this.assets = {
+                basePath: "./assets/",
+                zodiacIconPath: "svg/zodiac/",
+                planetIconPath: "svg/zodiac/"
+            };
+            
+            // Theme settings
+            this.theme = {
+                backgroundColor: "transparent",
+                textColor: "#333333",
+                lineColor: "#666666",
+                lightLineColor: "#cccccc",
+                fontFamily: "'Arial', sans-serif"
+            };
+            
+            // House cusps cache - will be populated by HouseCalculator
+            this.houseCusps = [];
+            
+            // Merge custom config with defaults (deep merge)
+            this.mergeConfig(customConfig);
+            
+            // Initialize house cusps if we have enough data
+            this._initializeHouseCusps();
+        }
+
+        /**
+         * Merges custom configuration with the default configuration
+         * @param {Object} customConfig - Custom configuration object
+         */
+        mergeConfig(customConfig) {
+            // Helper function for deep merge
+            const deepMerge = (target, source) => {
+                if (typeof source !== 'object' || source === null) {
+                    return source;
+                }
+                
+                for (const key in source) {
+                    if (Object.prototype.hasOwnProperty.call(source, key)) {
+                        if (typeof source[key] === 'object' && source[key] !== null && 
+                            typeof target[key] === 'object' && target[key] !== null) {
+                            // If both are objects, recurse
+                            target[key] = deepMerge(target[key], source[key]);
+                        } else {
+                            // Otherwise just copy
+                            target[key] = source[key];
+                        }
+                    }
+                }
+                
+                return target;
+            };
+            
+            // Apply deep merge to all top-level properties
+            for (const key in customConfig) {
+                if (Object.prototype.hasOwnProperty.call(customConfig, key) && 
+                    Object.prototype.hasOwnProperty.call(this, key)) {
+                    this[key] = deepMerge(this[key], customConfig[key]);
+                }
+            }
+        }
+
+        /**
+         * Initializes house cusps using the HouseCalculator
+         * @private
+         */
+        _initializeHouseCusps() {
+            // Only calculate if we have the necessary data
+            if (typeof this.astronomicalData.ascendant === 'number' && 
+                typeof this.astronomicalData.mc === 'number') {
+                
+                try {
+                    // Create calculator instance
+                    const houseCalculator = new HouseCalculator();
+                    
+                    // Calculate house cusps using the current house system
+                    this.houseCusps = houseCalculator.calculateHouseCusps(
+                        this.astronomicalData.ascendant,
+                        this.astronomicalData.houseSystem,
+                        {
+                            latitude: this.astronomicalData.latitude,
+                            mc: this.astronomicalData.mc
+                        }
+                    );
+                } catch (error) {
+                    console.error("Failed to calculate house cusps:", error);
+                    // Set empty cusps array if calculation fails
+                    this.houseCusps = [];
+                }
+            }
+        }
+
+        /**
+         * Gets settings for a specific planet
+         * @param {string} planetName - Name of the planet
+         * @returns {Object} - Planet settings
+         */
+        getPlanetSettings(planetName) {
+            const planetLower = planetName.toLowerCase();
+            return {
+                color: this.planetSettings.colors[planetLower] || "#000000",
+                size: this.planetSettings.size,
+                visible: this.planetSettings.visible[planetLower] !== false
+            };
+        }
+
+        /**
+         * Gets settings for a specific aspect
+         * @param {string} aspectType - Type of aspect
+         * @returns {Object} - Aspect settings
+         */
+        getAspectSettings(aspectType) {
+            const aspectLower = aspectType.toLowerCase();
+            return this.aspectSettings.types[aspectLower] || 
+                   { angle: 0, orb: this.aspectSettings.orb, color: "#999999", enabled: true };
+        }
+
+        /**
+         * Gets settings for a specific zodiac sign
+         * @param {string} signName - Name of the zodiac sign
+         * @returns {Object} - Zodiac sign settings
+         */
+        getZodiacSettings(signName) {
+            const signLower = signName.toLowerCase();
+            return {
+                color: this.zodiacSettings.colors[signLower] || "#666666",
+                fontSize: this.zodiacSettings.fontSize
+            };
+        }
+
+        /**
+         * Updates aspect settings
+         * @param {Object} settings - New aspect settings
+         */
+        updateAspectSettings(settings) {
+            this.aspectSettings = { ...this.aspectSettings, ...settings };
+        }
+
+        /**
+         * Updates planet settings
+         * @param {Object} settings - New planet settings
+         */
+        updatePlanetSettings(settings) {
+            this.planetSettings = { ...this.planetSettings, ...settings };
+        }
+
+        /**
+         * Updates house settings (visual settings only)
+         * @param {Object} settings - New house settings
+         */
+        updateHouseSettings(settings) {
+            this.houseSettings = { ...this.houseSettings, ...settings };
+        }
+
+        /**
+         * Updates zodiac settings
+         * @param {Object} settings - New zodiac settings
+         */
+        updateZodiacSettings(settings) {
+            this.zodiacSettings = { ...this.zodiacSettings, ...settings };
+        }
+
+        /**
+         * Sets radius for a specific layer
+         * @param {string} layerName - Layer name
+         * @param {number} value - Radius value
+         */
+        setRadius(layerName, value) {
+            if (Object.prototype.hasOwnProperty.call(this.radius, layerName)) {
+                this.radius[layerName] = value;
+            }
+        }
+
+        /**
+         * Toggles the visibility of a planet
+         * @param {string} planetName - Name of the planet
+         * @param {boolean} visible - Whether the planet should be visible
+         */
+        togglePlanetVisibility(planetName, visible) {
+            if (this.planetSettings && this.planetSettings.visible) {
+                this.planetSettings.visible[planetName] = visible;
+            }
+        }
+        
+        /**
+         * Toggles the visibility of houses
+         * @param {boolean} visible - Whether houses should be visible
+         */
+        toggleHousesVisibility(visible) {
+            this.houseSettings.enabled = visible;
+        }
+        
+        /**
+         * Toggles the visibility of aspects
+         * @param {boolean} visible - Whether aspects should be visible
+         */
+        toggleAspectsVisibility(visible) {
+            this.aspectSettings.enabled = visible;
+        }
+        
+        /**
+         * Toggles the visibility of primary planets (inner circle)
+         * @param {boolean} visible - Whether primary planets should be visible
+         */
+        togglePrimaryPlanetsVisibility(visible) {
+            this.planetSettings.primaryEnabled = visible;
+        }
+        
+        /**
+         * Toggles the visibility of secondary planets (innermost circle)
+         * @param {boolean} visible - Whether secondary planets should be visible
+         */
+        toggleSecondaryPlanetsVisibility(visible) {
+            this.planetSettings.secondaryEnabled = visible;
+        }
+
+        /**
+         * Sets the current house system and recalculates house cusps
+         * @param {string} systemName - Name of the house system to use
+         * @returns {boolean} - Success status
+         */
+        setHouseSystem(systemName) {
+            // Update the house system name
+            this.astronomicalData.houseSystem = systemName;
+            
+            // Recalculate house cusps with new system
+            this._initializeHouseCusps();
+            
+            return true;
+        }
+        
+        /**
+         * Gets the current house cusps
+         * @returns {Array} - Array of house cusps
+         */
+        getHouseCusps() {
+            // If we don't have house cusps data yet, calculate it
+            if (!this.houseCusps || this.houseCusps.length === 0) {
+                this._initializeHouseCusps();
+            }
+            
+            // Ensure we're returning the correct format - convert to legacy format if needed
+            if (this.houseCusps.length > 0 && typeof this.houseCusps[0] === 'number') {
+                return this.houseCusps.map(longitude => ({ lon: longitude }));
+            }
+            
+            return this.houseCusps;
+        }
+        
+        /**
+         * Sets the Ascendant position and recalculates house cusps
+         * @param {number} ascendant - Ascendant longitude in degrees
+         * @returns {boolean} - Success status
+         */
+        setAscendant(ascendant) {
+            if (typeof ascendant !== 'number' || ascendant < 0 || ascendant >= 360) {
+                return false;
+            }
+            
+            this.astronomicalData.ascendant = ascendant;
+            this._initializeHouseCusps();
+            return true;
+        }
+        
+        /**
+         * Sets the Midheaven position and recalculates house cusps
+         * @param {number} mc - Midheaven longitude in degrees
+         * @returns {boolean} - Success status
+         */
+        setMidheaven(mc) {
+            if (typeof mc !== 'number' || mc < 0 || mc >= 360) {
+                return false;
+            }
+            
+            this.astronomicalData.mc = mc;
+            this._initializeHouseCusps();
+            return true;
+        }
+        
+        /**
+         * Sets the geographic latitude and recalculates house cusps
+         * @param {number} latitude - Geographic latitude in degrees
+         * @returns {boolean} - Success status
+         */
+        setLatitude(latitude) {
+            if (typeof latitude !== 'number' || latitude < -90 || latitude > 90) {
+                return false;
+            }
+            
+            this.astronomicalData.latitude = latitude;
+            this._initializeHouseCusps();
+            return true;
+        }
+        
+        /**
+         * Sets a planet's position
+         * @param {string} planetName - Name of the planet
+         * @param {number} longitude - Longitude in degrees
+         * @returns {boolean} - Success status
+         */
+        setPlanetPosition(planetName, longitude) {
+            const planetLower = planetName.toLowerCase();
+            
+            if (typeof longitude !== 'number' || longitude < 0 || longitude >= 360) {
+                return false;
+            }
+            
+            if (this.astronomicalData.planets.hasOwnProperty(planetLower)) {
+                this.astronomicalData.planets[planetLower] = longitude;
+                return true;
+            }
+            
+            return false;
+        }
+        
+        /**
+         * Gets a planet's position
+         * @param {string} planetName - Name of the planet
+         * @returns {number|null} - Planet longitude or null if not found
+         */
+        getPlanetPosition(planetName) {
+            const planetLower = planetName.toLowerCase();
+            
+            if (this.astronomicalData.planets.hasOwnProperty(planetLower)) {
+                return this.astronomicalData.planets[planetLower];
+            }
+            
+            return null;
+        }
+        
+        /**
+         * Gets the current house system
+         * @returns {string} - Name of the current house system
+         */
+        getHouseSystem() {
+            return this.astronomicalData.houseSystem;
+        }
+        
+        /**
+         * Gets the available house systems by creating a temporary calculator
+         * @returns {Array} - Array of available house system names
+         */
+        getAvailableHouseSystems() {
+            const calculator = new HouseCalculator();
+            return calculator.getAvailableHouseSystems();
+        }
+    }
+
+    /**
+     * SvgUtils.js
+     * Utility class for working with SVG elements
+     */
+    class SvgUtils {
+        constructor() {
+            this.svgNS = "http://www.w3.org/2000/svg";
+        }
+
+        /**
+         * Creates an SVG element with the specified tag
+         * @param {string} tagName - Name of the SVG tag
+         * @param {Object} attributes - Object with attributes to set
+         * @returns {Element} Created SVG element
+         */
+        createSVGElement(tagName, attributes = {}) {
+            const element = document.createElementNS(this.svgNS, tagName);
+            
+            for (const [key, value] of Object.entries(attributes)) {
+                element.setAttribute(key, value);
+            }
+            
+            return element;
+        }
+
+        /**
+         * Adds a tooltip (title) to an SVG element
+         * @param {Element} element - SVG element
+         * @param {string} text - Tooltip text
+         * @returns {Element} The element with tooltip
+         */
+        addTooltip(element, text) {
+            const title = document.createElementNS(this.svgNS, "title");
+            title.textContent = text;
+            element.appendChild(title);
+            return element;
+        }
+
+        /**
+         * Calculates coordinates of a point on a circle
+         * @param {number} centerX - X coordinate of the center
+         * @param {number} centerY - Y coordinate of the center
+         * @param {number} radius - Circle radius
+         * @param {number} angle - Angle in degrees
+         * @returns {Object} Object with x and y coordinates
+         */
+        pointOnCircle(centerX, centerY, radius, angle) {
+            // Convert angle to radians (accounting for 0 starting at the top)
+            const radians = (angle - 90) * (Math.PI / 180);
+            
+            return {
+                x: centerX + radius * Math.cos(radians),
+                y: centerY + radius * Math.sin(radians)
+            };
+        }
+    }
+
+    /**
+     * SVGManager.js
+     * Handles the creation, management, and querying of the main SVG element and its layer groups.
+     */
+
+    class SVGManager {
+        /**
+         * Constructor
+         * @param {Object} options - Manager options
+         * @param {SvgUtils} [options.svgUtils] - SvgUtils instance (optional, will use from registry if not provided)
+         */
+        constructor(options = {}) {
+            this.svgNS = "http://www.w3.org/2000/svg";
+            this.svg = null; // Reference to the main SVG element
+            this.groups = {}; // References to the layer groups (g elements)
+            
+            // Use injected svgUtils or get from registry
+            this.svgUtils = options.svgUtils || ServiceRegistry.getSvgUtils();
+            
+            // Define standard group order (bottom to top)
+            this.groupOrder = [
+                'zodiac',
+                'houseDivisions',
+                'aspects', // Render aspects below planets and houses
+                'primaryPlanets', // Inner circle planets
+                'secondaryPlanets', // Innermost circle planets
+                'houses' // House numbers on top
+                // Add other groups if needed, e.g., 'tooltips'
+            ];
+        }
+
+        /**
+         * Initializes the main SVG element within a container.
+         * @param {string|Element} containerSelector - ID/CSS selector of the container element or the element itself.
+         * @param {Object} options - SVG attributes (e.g., viewBox, width, height, class, preserveAspectRatio).
+         * @returns {SVGElement | null} The created SVG element or null if container not found.
+         */
+        initialize(containerSelector, options = {}) {
+            // Handle both string selectors and DOM elements
+            let container;
+            if (typeof containerSelector === 'string') {
+                container = document.querySelector(containerSelector);
+                if (!container) {
+                    console.error(`SVGManager: Container not found with selector: ${containerSelector}`);
+                    return null;
+                }
+            } else if (containerSelector instanceof Element || containerSelector instanceof HTMLElement) {
+                container = containerSelector;
+            } else {
+                console.error(`SVGManager: Invalid container. Expected string selector or DOM element.`);
+                return null;
+            }
+
+            // Clear container
+            container.innerHTML = '';
+
+            // Default options
+            const defaultOptions = {
+                width: "100%",
+                height: "100%",
+                viewBox: "0 0 460 460", // Default size, should match ChartConfig ideally
+                preserveAspectRatio: "xMidYMid meet",
+                class: "nocturna-wheel-svg" // Default class
+            };
+
+            const svgOptions = { ...defaultOptions, ...options };
+
+            // Create SVG element
+            this.svg = document.createElementNS(this.svgNS, "svg");
+
+            // Set attributes
+            for (const [key, value] of Object.entries(svgOptions)) {
+                this.svg.setAttribute(key, value);
+            }
+
+            // Append to container
+            container.appendChild(this.svg);
+            console.log("SVGManager: SVG initialized");
+            return this.svg;
+        }
+
+        /**
+         * Creates the standard layer groups within the SVG in the predefined order.
+         */
+        createStandardGroups() {
+            if (!this.svg) {
+                console.error("SVGManager: Cannot create groups, SVG not initialized.");
+                return;
+            }
+
+            // Clear existing groups before creating new ones (or check if they exist)
+            this.groups = {};
+            // Remove existing group elements from SVG if any
+            this.svg.querySelectorAll('g').forEach(g => g.remove());
+
+            console.log("SVGManager: Creating standard groups:", this.groupOrder);
+            this.groupOrder.forEach(groupName => {
+                this.createGroup(groupName);
+            });
+            
+            // Create a legacy 'planets' group for backward compatibility
+            // This will be deprecated in future versions
+            this.createGroup('planets');
+        }
+
+        /**
+         * Creates a named group (<g>) element and appends it to the SVG.
+         * If the group already exists, it returns the existing group.
+         * @param {string} name - The name (and ID) for the group.
+         * @returns {SVGElement | null} The created or existing group element, or null if SVG not initialized.
+         */
+        createGroup(name) {
+            if (!this.svg) {
+                console.error(`SVGManager: Cannot create group '${name}', SVG not initialized.`);
+                return null;
+            }
+            if (this.groups[name]) {
+                return this.groups[name]; // Return existing group
+            }
+
+            const group = document.createElementNS(this.svgNS, "g");
+            group.setAttribute("id", `group-${name}`); // Set ID for easy debugging/selection
+            group.setAttribute("class", `svg-group svg-group-${name}`); // Add class
+
+            this.svg.appendChild(group); // Append to SVG (order matters based on creation sequence)
+            this.groups[name] = group;
+            // console.log(`SVGManager: Created group '${name}'`);
+            return group;
+        }
+
+        /**
+         * Retrieves a previously created group element by name.
+         * @param {string} name - The name of the group.
+         * @returns {SVGElement | null} The group element or null if not found or not initialized.
+         */
+        getGroup(name) {
+            if (!this.svg) {
+                 console.warn(`SVGManager: Cannot get group '${name}', SVG not initialized.`);
+                 return null;
+            }
+            
+            // For backward compatibility, map 'planets' to 'primaryPlanets'
+            if (name === 'planets') {
+                console.warn('SVGManager: Using deprecated "planets" group. Use "primaryPlanets" or "secondaryPlanets" instead.');
+                name = 'primaryPlanets';
+            }
+            
+            if (!this.groups[name]) {
+                 console.warn(`SVGManager: Group '${name}' not found. Creating it.`);
+                 // Attempt to create if missing, might indicate an issue elsewhere
+                 return this.createGroup(name);
+            }
+            return this.groups[name];
+        }
+
+        /**
+         * Retrieves all created group elements.
+         * @returns {Object<string, SVGElement>} An object mapping group names to their SVGElement references.
+         */
+        getAllGroups() {
+            return this.groups;
+        }
+
+        /**
+         * Returns the main SVG element.
+         * @returns {SVGElement | null} The main SVG element or null if not initialized.
+         */
+        getSVG() {
+            return this.svg;
+        }
+
+    } // End of SVGManager class
+
+    /**
+     * BaseRenderer.js
+     * Self-contained base class for all renderers.
+     * This version has all dependencies inlined to avoid import issues.
+     */
+
+    // Define a completely self-contained renderer base class
+    class BaseRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {string} options.svgNS - SVG namespace.
+         * @param {Object} options.config - Chart configuration object.
+         * @param {Object} options.svgUtils - SVG utility service.
+         */
+        constructor(options) {
+            if (!options || !options.svgNS || !options.config) {
+                throw new Error(`${this.constructor.name}: Missing required options (svgNS, config)`);
+            }
+            
+            // Store base options
+            this.svgNS = options.svgNS;
+            this.config = options.config;
+            this.options = options;
+            
+            // Use the provided svgUtils or create minimal internal SVG utilities
+            this.svgUtils = options.svgUtils || {
+                // Store SVG namespace
+                svgNS: this.svgNS,
+                
+                // Create SVG element
+                createSVGElement: (tagName, attributes = {}) => {
+                    const element = document.createElementNS(this.svgNS, tagName);
+                    for (const [key, value] of Object.entries(attributes)) {
+                        element.setAttribute(key, value);
+                    }
+                    return element;
+                },
+                
+                // Add tooltip to element
+                addTooltip: (element, text) => {
+                    const title = document.createElementNS(this.svgNS, "title");
+                    title.textContent = text;
+                    element.appendChild(title);
+                    return element;
+                },
+                
+                // Calculate point on circle
+                pointOnCircle: (centerX, centerY, radius, angle) => {
+                    const radians = (angle - 90) * (Math.PI / 180);
+                    return {
+                        x: centerX + radius * Math.cos(radians),
+                        y: centerY + radius * Math.sin(radians)
+                    };
+                }
+            };
+            
+            // Get dimensions from config
+            this.centerX = this.config.svg.center.x;
+            this.centerY = this.config.svg.center.y;
+            this.innerRadius = this.config.radius.zodiacInner;
+            this.middleRadius = this.config.radius.zodiacMiddle;
+            this.outerRadius = this.config.radius.zodiacOuter;
+        }
+
+        /**
+         * Clears all child nodes of the given parent SVG group.
+         * @param {Element} parentGroup - The SVG group to clear.
+         */
+        clearGroup(parentGroup) {
+            if (parentGroup) {
+                parentGroup.innerHTML = '';
+            }
+        }
+
+        /**
+         * Abstract render method to be implemented by subclasses.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @returns {Array} Array of rendered SVG elements.
+         */
+        render(parentGroup) {
+            throw new Error(`${this.constructor.name}: render() not implemented.`);
+        }
+    }
+
+    /**
+     * AstrologyUtils.js
+     * Utility class for astrological calculations
+     */
+    class AstrologyUtils {
+        /**
+         * Capitalizes the first letter of a string
+         * @param {string} string - Input string
+         * @returns {string} String with capitalized first letter
+         */
+        static capitalizeFirstLetter(string) {
+            return string.charAt(0).toUpperCase() + string.slice(1);
+        }
+
+        /**
+         * Determines the house based on position and rotation angle
+         * @param {number} position - Position in degrees (0-359)
+         * @param {number} rotationAngle - Rotation angle of the house system
+         * @returns {number} House number (1-12)
+         */
+        static getHouseFromPosition(position, rotationAngle = 0) {
+            // Adjust position relative to house system rotation
+            const adjustedPosition = (position - rotationAngle + 360) % 360;
+            // Determine house
+            return Math.floor(adjustedPosition / 30) + 1;
+        }
+
+        /**
+         * Returns the list of zodiac sign names
+         * @returns {Array} Array of zodiac sign names
+         */
+        static getZodiacSigns() {
+            return [
+                "aries", "taurus", "gemini", "cancer", "leo", "virgo", 
+                "libra", "scorpio", "sagittarius", "capricorn", "aquarius", "pisces"
+            ];
+        }
+
+        /**
+         * Returns the available house systems with descriptions
+         * @returns {Object} Object mapping house system names to their descriptions
+         */
+        static getHouseSystems() {
+            return {
+                "Placidus": "Most commonly used house system in Western astrology, based on time of day",
+                "Koch": "Developed by Walter Koch, a time-based system similar to Placidus",
+                "Campanus": "Medieval system dividing the prime vertical into equal parts",
+                "Regiomontanus": "Similar to Campanus, but using the celestial equator instead of prime vertical",
+                "Equal": "Divides the ecliptic into 12 equal segments of 30° each from the Ascendant",
+                "Whole Sign": "Assigns the entire rising sign to the 1st house, with subsequent signs as houses",
+                "Porphyry": "Simple system that divides each quadrant into three equal parts",
+                "Topocentric": "Modern system similar to Placidus but more accurate for extreme latitudes"
+            };
+        }
+
+        /**
+         * Returns the list of planets
+         * @returns {Array} Array of planet names
+         */
+        static getPlanets() {
+            return [
+                "sun", "moon", "mercury", "venus", "mars", 
+                "jupiter", "saturn", "uranus", "neptune", "pluto"
+            ];
+        }
+
+        /**
+         * Converts a house number to a Roman numeral
+         * @param {number} house - House number (1-12)
+         * @returns {string} Roman numeral
+         */
+        static houseToRoman(house) {
+            const romanNumerals = ["I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"];
+            return romanNumerals[house - 1] || '';
+        }
+
+        /**
+         * Returns the full name of a planet in the specified language
+         * @param {string} planetCode - Planet code (sun, moon, etc.)
+         * @param {string} language - Language code (default: 'en')
+         * @returns {string} Full planet name
+         */
+        static getPlanetFullName(planetCode, language = 'en') {
+            const planetNames = {
+                en: {
+                    "sun": "Sun",
+                    "moon": "Moon",
+                    "mercury": "Mercury",
+                    "venus": "Venus",
+                    "mars": "Mars",
+                    "jupiter": "Jupiter",
+                    "saturn": "Saturn",
+                    "uranus": "Uranus",
+                    "neptune": "Neptune",
+                    "pluto": "Pluto"
+                },
+                ru: {
+                    "sun": "Солнце",
+                    "moon": "Луна",
+                    "mercury": "Меркурий",
+                    "venus": "Венера",
+                    "mars": "Марс",
+                    "jupiter": "Юпитер",
+                    "saturn": "Сатурн",
+                    "uranus": "Уран",
+                    "neptune": "Нептун",
+                    "pluto": "Плутон"
+                }
+            };
+            
+            const names = planetNames[language] || planetNames.en;
+            return names[planetCode.toLowerCase()] || this.capitalizeFirstLetter(planetCode);
+        }
+
+        /**
+         * Returns the full name of a zodiac sign in the specified language
+         * @param {string} signCode - Zodiac sign code (aries, taurus, etc.)
+         * @param {string} language - Language code (default: 'en')
+         * @returns {string} Full zodiac sign name
+         */
+        static getZodiacSignFullName(signCode, language = 'en') {
+            const signNames = {
+                en: {
+                    "aries": "Aries",
+                    "taurus": "Taurus",
+                    "gemini": "Gemini",
+                    "cancer": "Cancer",
+                    "leo": "Leo",
+                    "virgo": "Virgo",
+                    "libra": "Libra",
+                    "scorpio": "Scorpio",
+                    "sagittarius": "Sagittarius",
+                    "capricorn": "Capricorn",
+                    "aquarius": "Aquarius",
+                    "pisces": "Pisces"
+                },
+                ru: {
+                    "aries": "Овен",
+                    "taurus": "Телец",
+                    "gemini": "Близнецы",
+                    "cancer": "Рак",
+                    "leo": "Лев",
+                    "virgo": "Дева",
+                    "libra": "Весы",
+                    "scorpio": "Скорпион",
+                    "sagittarius": "Стрелец",
+                    "capricorn": "Козерог",
+                    "aquarius": "Водолей",
+                    "pisces": "Рыбы"
+                }
+            };
+            
+            const names = signNames[language] || signNames.en;
+            return names[signCode.toLowerCase()] || this.capitalizeFirstLetter(signCode);
+        }
+    }
+
+    /**
+     * ZodiacRenderer.js
+     * Class for rendering the zodiac circle and signs.
+     */
+    class ZodiacRenderer extends BaseRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {string} options.svgNS - SVG namespace.
+         * @param {ChartConfig} options.config - Chart configuration object.
+         * @param {string} options.assetBasePath - Base path for assets.
+         * @param {IconProvider} [options.iconProvider] - Icon provider service.
+         */
+        constructor(options) {
+            super(options);
+            if (!options.assetBasePath) {
+                throw new Error("ZodiacRenderer: Missing required option assetBasePath");
+            }
+
+            this.iconProvider = options.iconProvider; // Store the icon provider
+            this.signIconRadius = (this.outerRadius + this.middleRadius) / 2;
+            this.signIconSize = 30;
+        }
+
+        /**
+         * Renders the zodiac wheel components.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @returns {Array} Array of rendered SVG elements (or empty array).
+         */
+        render(parentGroup) {
+            if (!parentGroup) {
+                console.error("ZodiacRenderer: parentGroup is null or undefined.");
+                return [];
+            }
+            this.clearGroup(parentGroup);
+
+            const renderedElements = [];
+
+            renderedElements.push(...this.renderBaseCircles(parentGroup));
+            renderedElements.push(...this.renderDivisionLines(parentGroup));
+            renderedElements.push(...this.renderZodiacSigns(parentGroup));
+
+            console.log("ZodiacRenderer: Rendering complete.");
+            return renderedElements;
+        }
+
+        /**
+         * Renders the base circles for the chart layout.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @returns {Array<Element>} Array containing the created circle elements.
+         */
+        renderBaseCircles(parentGroup) {
+            const elements = [];
+            const circles = [
+                { r: this.outerRadius, class: "chart-outer-circle" },
+                { r: this.middleRadius, class: "chart-middle-circle" },
+                { r: this.innerRadius, class: "chart-inner-circle" }
+            ];
+
+            circles.forEach(circleData => {
+                const circle = this.svgUtils.createSVGElement("circle", {
+                    cx: this.centerX,
+                    cy: this.centerY,
+                    r: circleData.r,
+                    class: `zodiac-element ${circleData.class}` // Add base class
+                });
+                parentGroup.appendChild(circle);
+                elements.push(circle);
+            });
+            return elements;
+        }
+
+        /**
+         * Renders the division lines between zodiac signs.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @returns {Array<Element>} Array containing the created line elements.
+         */
+        renderDivisionLines(parentGroup) {
+            const elements = [];
+            for (let i = 0; i < 12; i++) {
+                const angle = i * 30; // 30 degrees per sign
+
+                // Lines span from the inner zodiac ring to the outer zodiac ring
+                const point1 = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.middleRadius, angle);
+                const point2 = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.outerRadius, angle);
+
+                // Instead of skipping lines, use special classes for cardinal points
+                let specialClass = "";
+                if (angle === 0) specialClass = "aries-point"; // Aries point (0°)
+                else if (angle === 90) specialClass = "cancer-point"; // Cancer point (90°)
+                else if (angle === 180) specialClass = "libra-point"; // Libra point (180°)
+                else if (angle === 270) specialClass = "capricorn-point"; // Capricorn point (270°)
+
+                const line = this.svgUtils.createSVGElement("line", {
+                    x1: point1.x,
+                    y1: point1.y,
+                    x2: point2.x,
+                    y2: point2.y,
+                    class: `zodiac-element zodiac-division-line ${specialClass}`
+                });
+
+                parentGroup.appendChild(line);
+                elements.push(line);
+            }
+            return elements;
+        }
+
+        /**
+         * Renders the zodiac sign icons.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @returns {Array<Element>} Array containing the created image elements.
+         */
+        renderZodiacSigns(parentGroup) {
+            const elements = [];
+            const zodiacSigns = AstrologyUtils.getZodiacSigns(); // Assumes AstrologyUtils is available
+
+            for (let i = 0; i < 12; i++) {
+                const signName = zodiacSigns[i];
+                // Place icon in the middle of the sign's 30-degree sector
+                const angle = i * 30 + 15;
+
+                // Calculate position for the icon center
+                const point = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.signIconRadius, angle);
+
+                // Get icon path using IconProvider if available
+                let iconHref;
+                if (this.iconProvider) {
+                    iconHref = this.iconProvider.getZodiacIconPath(signName);
+                } else {
+                    // Fallback to old path construction
+                    iconHref = `${this.options.assetBasePath}svg/zodiac/zodiac-sign-${signName}.svg`;
+                }
+                
+                console.log(`Loading zodiac sign: ${iconHref}`);
+                
+                const icon = this.svgUtils.createSVGElement("image", {
+                    x: point.x - this.signIconSize / 2, // Offset to center the icon
+                    y: point.y - this.signIconSize / 2,
+                    width: this.signIconSize,
+                    height: this.signIconSize,
+                    href: iconHref,
+                    class: `zodiac-element zodiac-sign zodiac-sign-${signName}` // Add base and specific class
+                });
+
+                // Fallback for missing icons
+                 icon.addEventListener('error', () => {
+                     console.warn(`Zodiac sign icon not found: ${iconHref}`);
+                     icon.setAttribute('href', ''); // Remove broken link
+                     
+                     // Create a text fallback
+                     const fallbackText = signName.substring(0, 3).toUpperCase();
+                     
+                     // Use IconProvider's createTextFallback if available
+                     let textElement;
+                     if (this.iconProvider) {
+                         textElement = this.iconProvider.createTextFallback(
+                             this.svgUtils,
+                             {
+                                 x: point.x,
+                                 y: point.y,
+                                 size: '10px',
+                                 color: '#ccc',
+                                 className: `zodiac-element zodiac-sign zodiac-sign-${signName}`
+                             },
+                             fallbackText
+                         );
+                     } else {
+                         // Legacy fallback
+                         textElement = this.svgUtils.createSVGElement('text', {
+                             x: point.x,
+                             y: point.y,
+                             'text-anchor': 'middle',
+                             'dominant-baseline': 'central',
+                             'font-size': '10px',
+                             fill: '#ccc',
+                             class: `zodiac-element zodiac-sign zodiac-sign-${signName}`
+                         });
+                         textElement.textContent = fallbackText;
+                     }
+                     
+                     parentGroup.appendChild(textElement);
+                     elements.push(textElement); // Add placeholder to rendered elements
+                 });
+
+
+                // Add tooltip with the full sign name
+                this.svgUtils.addTooltip(icon, AstrologyUtils.getZodiacSignFullName(signName));
+
+                parentGroup.appendChild(icon);
+                elements.push(icon);
+            }
+            return elements;
+        }
+    } // End of ZodiacRenderer class
+
+    /**
+     * HouseRenderer.js
+     * Class for rendering astrological houses in a natal chart.
+     */
+    class HouseRenderer extends BaseRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {string} options.svgNS - SVG namespace.
+         * @param {ChartConfig} options.config - Chart configuration object.
+         * @param {Object} options.houseData - House cusps data (optional).
+         */
+        constructor(options) {
+            super(options);
+            this.houseData = options.houseData || [];
+            // Specific radii for house renderer
+            this.extendedRadius = this.outerRadius + 25;
+            this.numberRadius = this.outerRadius + 30;
+        }
+
+        /**
+         * Renders the house components.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @param {number} rotationAngle - Rotation angle for the house system (default: 0).
+         * @returns {Array} Array of rendered SVG elements.
+         */
+        render(parentGroup, rotationAngle = 0) {
+            if (!parentGroup) {
+                console.error("HouseRenderer: parentGroup is null or undefined.");
+                return [];
+            }
+            // Clear the group before rendering
+            this.clearGroup(parentGroup);
+            
+            const renderedElements = [];
+            
+            renderedElements.push(...this.renderDivisions(parentGroup, rotationAngle));
+            renderedElements.push(...this.renderNumbers(parentGroup, rotationAngle));
+            
+            console.log("HouseRenderer: Rendering complete.");
+            return renderedElements;
+        }
+
+        /**
+         * Renders the house division lines.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @param {number} rotationAngle - Rotation angle for the house system.
+         * @returns {Array<Element>} Array containing the created line elements.
+         */
+        renderDivisions(parentGroup, rotationAngle) {
+            const elements = [];
+            let ascendantAlignmentOffset = 0;
+            
+            // Log house data for debugging
+            console.log("HouseRenderer: House data for divisions:", this.houseData);
+            
+            // Calculate offset only if house data is present
+            if (this.houseData && this.houseData.length >= 12) {
+                // Handle both legacy format { lon: value } and new format [value1, value2, ...]
+                const ascendantLon = this.getHouseLongitude(this.houseData[0]);
+                // Offset needed to place Ascendant (house 1 cusp) at 0 degrees (top side)
+                ascendantAlignmentOffset = (360 - ascendantLon) % 360;
+            }
+            
+            // Add division lines for 12 houses with rotation
+            for (let i = 0; i < 12; i++) {
+                // Use custom house positions if available, otherwise evenly distribute
+                let baseAngle;
+                if (this.houseData && this.houseData.length >= 12) {
+                    baseAngle = this.getHouseLongitude(this.houseData[i]);
+                } else {
+                    baseAngle = i * 30; // Default if no data
+                }
+                // Apply alignment offset and user rotation
+                const angle = (baseAngle + ascendantAlignmentOffset + rotationAngle) % 360;
+                
+                // Determine the house type/class for styling
+                let axisClass = '';
+                if (i === 0) axisClass = 'axis asc'; // ASC - Ascendant (1st house cusp)
+                else if (i === 3) axisClass = 'axis ic'; // IC - Imum Coeli (4th house cusp)
+                else if (i === 6) axisClass = 'axis dsc'; // DSC - Descendant (7th house cusp)
+                else if (i === 9) axisClass = 'axis mc'; // MC - Medium Coeli (10th house cusp)
+                
+                // Calculate points for inner to middle circle lines
+                const innerPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.innerRadius, angle);
+                const middlePoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.middleRadius, angle);
+                
+                // Create line from inner to middle circle
+                const innerLine = this.svgUtils.createSVGElement("line", {
+                    x1: innerPoint.x,
+                    y1: innerPoint.y,
+                    x2: middlePoint.x,
+                    y2: middlePoint.y,
+                    class: `house-element house-division-line ${axisClass}`
+                });
+                
+                // Ensure cardinal points render above zodiac lines
+                if (axisClass.includes('axis')) {
+                    innerLine.style.zIndex = 10;
+                }
+                
+                parentGroup.appendChild(innerLine);
+                elements.push(innerLine);
+                
+                // Calculate points for middle to outer circle lines
+                const outerPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.outerRadius, angle);
+                
+                // We don't render the middle segment anymore (between middle and outer circles)
+                // to avoid overlapping with zodiac signs
+                
+                // Calculate point for extended line outside of the outer circle
+                const extendedPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.extendedRadius, angle);
+                
+                // Create line from outer circle to extended point
+                const outerLine = this.svgUtils.createSVGElement("line", {
+                    x1: outerPoint.x,
+                    y1: outerPoint.y,
+                    x2: extendedPoint.x,
+                    y2: extendedPoint.y,
+                    class: `house-element house-division-line outer ${axisClass}`
+                });
+                
+                // Ensure cardinal points render above zodiac lines
+                if (axisClass.includes('axis')) {
+                    outerLine.style.zIndex = 10;
+                }
+                
+                parentGroup.appendChild(outerLine);
+                elements.push(outerLine);
+            }
+            
+            return elements;
+        }
+
+        /**
+         * Renders the house numbers.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @param {number} rotationAngle - Rotation angle for the house system.
+         * @returns {Array<Element>} Array containing the created text elements.
+         */
+        renderNumbers(parentGroup, rotationAngle) {
+            const elements = [];
+            let ascendantAlignmentOffset = 0;
+            
+            // Log house data for debugging
+            console.log("HouseRenderer: House data for numbers:", this.houseData);
+            
+            // Calculate offset only if house data is present
+            if (this.houseData && this.houseData.length >= 12) {
+                const ascendantLon = this.getHouseLongitude(this.houseData[0]);
+                // Offset needed to place Ascendant (house 1 cusp) at 0 degrees (top side)
+                ascendantAlignmentOffset = (360 - ascendantLon) % 360;
+            }
+            
+            // Add Roman numerals for house numbers
+            for (let i = 0; i < 12; i++) {
+                // Get house angle with rotation
+                let baseHouseAngle;
+                if (this.houseData && this.houseData.length >= 12) {
+                    baseHouseAngle = this.getHouseLongitude(this.houseData[i]);
+                } else {
+                    baseHouseAngle = i * 30; // Default if no data
+                }
+                 // Apply alignment offset and user rotation
+                const houseAngle = (baseHouseAngle + ascendantAlignmentOffset + rotationAngle) % 360;
+                
+                // Offset text from house line clockwise
+                const angle = (houseAngle + 15) % 360; // Place in middle of house segment, apply modulo
+                
+                // Calculate position for house number
+                const point = this.svgUtils.pointOnCircle(this.centerX, this.centerY, this.numberRadius, angle);
+                
+                // Create text element for house number
+                const text = this.svgUtils.createSVGElement("text", {
+                    x: point.x,
+                    y: point.y,
+                    class: "house-element house-number"
+                });
+                
+                // Set text alignment based on position
+                if ((angle >= 315 || angle < 45)) {
+                    text.setAttribute("text-anchor", "middle");
+                    text.setAttribute("dominant-baseline", "auto");
+                }
+                // For right side (houses on right)
+                else if (angle >= 45 && angle < 135) {
+                    text.setAttribute("text-anchor", "start");
+                    text.setAttribute("dominant-baseline", "middle");
+                }
+                // For bottom half (houses at bottom)
+                else if (angle >= 135 && angle < 225) {
+                    text.setAttribute("text-anchor", "middle");
+                    text.setAttribute("dominant-baseline", "hanging");
+                }
+                // For left side (houses on left)
+                else {
+                    text.setAttribute("text-anchor", "end");
+                    text.setAttribute("dominant-baseline", "middle");
+                }
+                
+                // Set house number as text (Roman numeral)
+                text.textContent = AstrologyUtils.houseToRoman(i + 1);
+                
+                // Add tooltip with house information
+                this.svgUtils.addTooltip(text, `House ${i + 1}`);
+                
+                parentGroup.appendChild(text);
+                elements.push(text);
+            }
+            
+            return elements;
+        }
+        
+        /**
+         * Helper method to get the longitude from various house data formats
+         * @param {Object|number} houseData - House cusp data (can be object with lon property or direct number)
+         * @returns {number} The house cusp longitude in degrees
+         */
+        getHouseLongitude(houseData) {
+            // Handle different data formats
+            if (houseData === null || houseData === undefined) {
+                console.warn("HouseRenderer: Null or undefined house data");
+                return 0;
+            }
+            
+            // If it's an object with a lon property (legacy format)
+            if (typeof houseData === 'object' && houseData !== null && 'lon' in houseData) {
+                return houseData.lon;
+            }
+            
+            // If it's a direct number (new format from HouseCalculator)
+            if (typeof houseData === 'number') {
+                return houseData;
+            }
+            
+            // If it's some other format we don't recognize
+            console.warn("HouseRenderer: Unrecognized house data format", houseData);
+            return 0;
+        }
+    }
+
+    /**
+     * BasePlanetRenderer.js
+     * Base class for all planet renderers, extending BaseRenderer.
+     * Contains common functionality used by specialized planet renderers.
+     */
+    class BasePlanetRenderer extends BaseRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {string} options.svgNS - SVG namespace.
+         * @param {ChartConfig} options.config - Chart configuration object.
+         * @param {string} options.assetBasePath - Base path for assets.
+         * @param {IconProvider} [options.iconProvider] - Icon provider service.
+         */
+        constructor(options) {
+            super(options);
+            if (!options.assetBasePath) {
+                throw new Error(`${this.constructor.name}: Missing required option assetBasePath`);
+            }
+            
+            // Store the icon provider
+            this.iconProvider = options.iconProvider;
+        }
+
+        /**
+         * Calculate base positions (dot and icon) for planets.
+         * @param {Array} planets - Array of planet objects.
+         * @param {number} dotRadius - Radius for planet dots
+         * @param {number} iconRadius - Radius for planet icons
+         */
+        calculateBasePositions(planets, dotRadius, iconRadius) {
+            planets.forEach(planet => {
+                // Convert position to radians (0 degrees = East, anti-clockwise)
+                // Subtract 90 to make 0 degrees = North (top)
+                const radians = (planet.position - 90) * (Math.PI / 180);
+                planet.radians = radians;
+
+                // Calculate position on the dot radius circle
+                const point = this.svgUtils.pointOnCircle(this.centerX, this.centerY, dotRadius, planet.position);
+                planet.x = point.x;
+                planet.y = point.y;
+
+                // Calculate base position for the planet icon
+                const iconPoint = this.svgUtils.pointOnCircle(this.centerX, this.centerY, iconRadius, planet.position);
+                planet.iconX = iconPoint.x;
+                planet.iconY = iconPoint.y;
+
+                // Initialize adjusted coordinates to base coordinates
+                planet.adjustedIconX = planet.iconX;
+                planet.adjustedIconY = planet.iconY;
+            });
+        }
+
+        /**
+         * Prepare planet data with common properties.
+         * @param {Array} planetsData - Raw planet data
+         * @param {string} planetType - Type of planet ('primary' or 'secondary')
+         * @param {number} dotRadius - Radius for planet dots
+         * @param {number} iconRadius - Radius for planet icons
+         * @returns {Array} - Prepared planet data with calculated properties
+         */
+        preparePlanetData(planetsData, planetType, dotRadius, iconRadius) {
+            return planetsData.map(p => ({
+                ...p,
+                name: p.name || 'unknown',
+                position: p.position !== undefined ? p.position : 0,
+                // Fields to be calculated:
+                x: 0, y: 0, // Dot coordinates
+                iconX: 0, iconY: 0, // Base icon coordinates
+                adjustedIconX: 0, adjustedIconY: 0, // Icon coordinates after overlap adjustment
+                radians: 0,
+                // Calculate sign index and get name from AstrologyUtils
+                zodiacSign: AstrologyUtils.getZodiacSigns()[Math.floor(p.position / 30) % 12],
+                position_in_sign: p.position % 30, // Calculate position within sign
+                isPrimary: planetType === 'primary',
+                type: planetType,
+                color: p.color || '#000000',
+                // Track which radius this planet is being rendered at
+                dotRadius: dotRadius,
+                iconRadius: iconRadius
+            }));
+        }
+
+        /**
+         * Abstract method to be implemented by subclasses.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @param {Array} planetsData - Array of planet objects { name: string, position: number }.
+         * @param {number} houseRotationAngle - House system rotation angle.
+         * @param {Object} options - Additional rendering options.
+         * @returns {Array} - Array of planet objects with added coordinates.
+         */
+        render(parentGroup, planetsData, houseRotationAngle = 0, options = {}) {
+            throw new Error(`${this.constructor.name}: render() not implemented.`);
+        }
+    }
+
+    /**
+     * PlanetSymbolRenderer.js
+     * Class for rendering planet symbols and glyphs.
+     */
+    class PlanetSymbolRenderer extends BasePlanetRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         */
+        constructor(options) {
+            super(options);
+        }
+        
+        /**
+         * Renders a symbol for a planet
+         * @param {Element} parentGroup - The parent SVG group
+         * @param {Object} planet - Planet object with calculated positions
+         * @param {number} iconSize - Size of the icon in pixels
+         * @returns {Element} - The created symbol element
+         */
+        renderPlanetSymbol(parentGroup, planet, iconSize = 24) {
+            // Get the icon path using IconProvider if available
+            let iconPath;
+            if (this.iconProvider) {
+                iconPath = this.iconProvider.getPlanetIconPath(planet.name);
+            } else {
+                // Fallback to old path construction if IconProvider is not available
+                iconPath = `${this.options.assetBasePath}svg/zodiac/zodiac-planet-${planet.name.toLowerCase()}.svg`;
+            }
+            
+            // Calculate top-left position of the icon (centered on the calculated point)
+            const iconX = planet.adjustedIconX - iconSize/2;
+            const iconY = planet.adjustedIconY - iconSize/2;
+            
+            // Get planet type for CSS classes
+            const typeClass = planet.isPrimary ? 'primary' : 'secondary';
+            
+            const icon = this.svgUtils.createSVGElement("image", {
+                x: iconX,
+                y: iconY,
+                width: iconSize,
+                height: iconSize,
+                href: iconPath,
+                class: `planet-icon planet-${planet.name}-icon planet-${typeClass}-icon`
+            });
+            
+            // Add error handling for missing icons
+            icon.addEventListener('error', () => {
+                console.warn(`Planet icon not found: ${iconPath}`);
+                icon.setAttribute('href', ''); // Remove broken link
+                
+                // Create a text fallback with first letter
+                const fallbackText = planet.name.charAt(0).toUpperCase();
+                
+                // Use IconProvider's createTextFallback if available
+                let textIcon;
+                if (this.iconProvider) {
+                    textIcon = this.iconProvider.createTextFallback(
+                        this.svgUtils,
+                        {
+                            x: planet.adjustedIconX,
+                            y: planet.adjustedIconY,
+                            size: `${iconSize}px`,
+                            color: planet.color || '#000000',
+                            className: `planet-symbol planet-${planet.name}-symbol planet-${typeClass}-symbol`
+                        },
+                        fallbackText
+                    );
+                } else {
+                    // Legacy fallback if IconProvider is not available
+                    textIcon = this.svgUtils.createSVGElement("text", {
+                        x: planet.adjustedIconX,
+                        y: planet.adjustedIconY,
+                        'text-anchor': 'middle',
+                        'dominant-baseline': 'middle',
+                        'font-size': `${iconSize}px`,
+                        class: `planet-symbol planet-${planet.name}-symbol planet-${typeClass}-symbol`,
+                        fill: planet.color || '#000000'
+                    });
+                    textIcon.textContent = planet.name.charAt(0).toUpperCase();
+                }
+                
+                parentGroup.appendChild(textIcon);
+            });
+            
+            return icon;
+        }
+        
+        /**
+         * Renders a dot to mark the exact planet position
+         * @param {Element} parentGroup - The parent SVG group
+         * @param {Object} planet - Planet object with calculated positions
+         * @param {number} dotSize - Size of the dot in pixels
+         * @returns {Element} - The created dot element
+         */
+        renderPlanetDot(parentGroup, planet, dotSize = 3) {
+            // Get planet type for CSS classes
+            const typeClass = planet.isPrimary ? 'primary' : 'secondary';
+            
+            // Draw the position dot (small circle at exact planet position)
+            const dot = this.svgUtils.createSVGElement("circle", {
+                cx: planet.x,
+                cy: planet.y,
+                r: dotSize, // Small fixed size for position indicator
+                class: `planet-dot planet-${planet.name}-dot planet-${typeClass}-dot`,
+                fill: planet.color || '#000000'
+            });
+            
+            return dot;
+        }
+        
+        /**
+         * Renders a connector line between the dot and symbol if they're far enough apart
+         * @param {Element} parentGroup - The parent SVG group
+         * @param {Object} planet - Planet object with calculated positions
+         * @param {number} minDistance - Minimum distance required to draw a connector
+         * @returns {Element|null} - The created connector element or null if not needed
+         */
+        renderConnector(parentGroup, planet, iconSize, minDistanceFactor = 0.3) {
+            // Get planet type for CSS classes
+            const typeClass = planet.isPrimary ? 'primary' : 'secondary';
+            
+            // Calculate distance between dot and adjusted icon position
+            const distX = planet.x - planet.adjustedIconX;
+            const distY = planet.y - planet.adjustedIconY;
+            const distance = Math.sqrt(distX * distX + distY * distY);
+            
+            // Only draw connector if the distance is significant
+            if (distance > iconSize * minDistanceFactor) {
+                const connector = this.svgUtils.createSVGElement('line', {
+                    x1: planet.x,
+                    y1: planet.y,
+                    x2: planet.adjustedIconX,
+                    y2: planet.adjustedIconY,
+                    class: `planet-element planet-${planet.name.toLowerCase()} planet-connector planet-${typeClass}-connector`,
+                    stroke: planet.color || '#000000',
+                    'stroke-width': 0.75,
+                    'stroke-opacity': 0.5
+                });
+                
+                return connector;
+            }
+            
+            return null;
+        }
+        
+        /**
+         * Adds a tooltip to a planet element
+         * @param {Element} element - Element to add tooltip to
+         * @param {Object} planet - Planet object
+         */
+        addPlanetTooltip(element, planet) {
+            const typeLabel = planet.isPrimary ? "Primary" : "Secondary";
+            const tooltipText = `${typeLabel} ${AstrologyUtils.getPlanetFullName(planet.name)}: ${planet.position.toFixed(1)}° ${planet.zodiacSign.toUpperCase()} (${planet.position_in_sign.toFixed(1)}°)`;
+            this.svgUtils.addTooltip(element, tooltipText);
+        }
+        
+        /**
+         * Render method implementation from BasePlanetRenderer
+         * This should not be called directly in this class, but is needed to fulfill the interface
+         */
+        render(parentGroup, planetsData, houseRotationAngle = 0, options = {}) {
+            throw new Error(`${this.constructor.name}: This is a utility renderer, use specific rendering methods instead.`);
+        }
+    }
+
+    /**
+     * PlanetPositionCalculator.js
+     * Utility class for calculating planet positions on any circle
+     */
+
+    class PlanetPositionCalculator {
+        /**
+         * Calculate position for a planet on a circle
+         * @param {Object} params - Position parameters
+         * @param {number} params.centerX - X coordinate of center
+         * @param {number} params.centerY - Y coordinate of center
+         * @param {number} params.radius - Circle radius 
+         * @param {number} params.longitude - Planet longitude in degrees
+         * @param {number} params.iconSize - Size of the icon (optional)
+         * @returns {Object} Position data with dot and icon coordinates
+         */
+        static calculatePosition(params) {
+            const { centerX, centerY, radius, longitude, iconSize = 24 } = params;
+            const svgUtils = new SvgUtils();
+            
+            // Calculate point on circle
+            const point = svgUtils.pointOnCircle(centerX, centerY, radius, longitude);
+            
+            // Calculate icon position (centered on the point)
+            const iconX = point.x - (iconSize / 2);
+            const iconY = point.y - (iconSize / 2);
+            
+            return {
+                x: point.x,           // Dot center X
+                y: point.y,           // Dot center Y
+                iconX: iconX,         // Icon top-left X
+                iconY: iconY,         // Icon top-left Y
+                iconCenterX: point.x, // Icon center X
+                iconCenterY: point.y, // Icon center Y
+                longitude: longitude, // Original longitude
+                radius: radius        // Original radius
+            };
+        }
+        
+        /**
+         * Detects if planets are too close to each other
+         * @param {Array} positions - Array of position objects
+         * @param {number} minDistance - Minimum distance between planets
+         * @returns {Array} Arrays of overlapping planet indices
+         */
+        static detectOverlaps(positions, minDistance = 24) {
+            const clusters = [];
+            const processed = new Set();
+            
+            // Check each pair of planets
+            for (let i = 0; i < positions.length; i++) {
+                if (processed.has(i)) continue;
+                
+                const cluster = [i];
+                processed.add(i);
+                
+                for (let j = 0; j < positions.length; j++) {
+                    if (i === j || processed.has(j)) continue;
+                    
+                    const distance = Math.sqrt(
+                        Math.pow(positions[i].x - positions[j].x, 2) + 
+                        Math.pow(positions[i].y - positions[j].y, 2)
+                    );
+                    
+                    if (distance < minDistance) {
+                        cluster.push(j);
+                        processed.add(j);
+                    }
+                }
+                
+                if (cluster.length > 1) {
+                    clusters.push(cluster);
+                }
+            }
+            
+            return clusters;
+        }
+        
+        /**
+         * Adjusts positions to resolve overlaps using improved clustering algorithm
+         * @param {Array} positions - Array of position objects
+         * @param {Object} options - Adjustment options
+         * @returns {Array} Adjusted positions
+         */
+        static adjustOverlaps(positions, options = {}) {
+            const { 
+                minDistance = 24,
+                centerX,
+                centerY,
+                baseRadius,
+                iconSize = 24
+            } = options;
+            
+            if (!positions || positions.length <= 1) {
+                return positions; // Nothing to adjust with 0 or 1 planets
+            }
+            
+            if (!centerX || !centerY || !baseRadius) {
+                console.error("PlanetPositionCalculator: Missing required parameters (centerX, centerY, or baseRadius)");
+                return positions; // Return original positions if missing required parameters
+            }
+            
+            console.log(`PlanetPositionCalculator: Adjusting overlaps for ${positions.length} positions`);
+            
+            // Make a copy to not modify originals
+            const adjustedPositions = [...positions];
+            
+            // The minimum angular distance needed to prevent overlap at base radius
+            const minAngularDistance = (minDistance / baseRadius) * (180 / Math.PI);
+            console.log(`PlanetPositionCalculator: Minimum angular distance: ${minAngularDistance.toFixed(2)}°`);
+            
+            // Sort positions by longitude for overlap detection
+            const sortedPositionIndices = adjustedPositions
+                .map((pos, idx) => ({ pos, idx }))
+                .sort((a, b) => a.pos.longitude - b.pos.longitude);
+            
+            const sortedPositions = sortedPositionIndices.map(item => ({
+                ...adjustedPositions[item.idx],
+                originalIndex: item.idx
+            }));
+            
+            // Find clusters of planets that are too close angularly
+            const clusters = this._findOverlappingClusters(sortedPositions, minAngularDistance);
+            console.log(`PlanetPositionCalculator: Found ${clusters.length} clusters of overlapping positions`);
+            clusters.forEach((cluster, i) => {
+                console.log(`PlanetPositionCalculator: Cluster ${i+1} has ${cluster.length} positions`);
+            });
+            
+            // Process each cluster
+            clusters.forEach((cluster, clusterIndex) => {
+                console.log(`PlanetPositionCalculator: Processing cluster ${clusterIndex+1}`);
+                
+                if (cluster.length <= 1) {
+                    // Single planet - just place at exact base radius with no angle change
+                    const planet = cluster[0];
+                    console.log(`PlanetPositionCalculator: Single position in cluster, keeping at original longitude ${planet.longitude.toFixed(2)}°`);
+                    this._setExactPosition(planet, planet.longitude, baseRadius, centerX, centerY, iconSize);
+                } else {
+                    // Handle cluster with multiple planets - distribute by angle
+                    console.log(`PlanetPositionCalculator: Distributing ${cluster.length} positions in cluster`);
+                    this._distributeClusterByAngle(cluster, baseRadius, minAngularDistance, centerX, centerY, iconSize);
+                    
+                    // Log the distributions
+                    cluster.forEach((pos, i) => {
+                        console.log(`PlanetPositionCalculator: Position ${i+1} in cluster ${clusterIndex+1} adjusted from ${pos.longitude.toFixed(2)}° to ${pos.adjustedLongitude.toFixed(2)}°`);
+                    });
+                }
+            });
+            
+            // Copy adjusted positions back to the original array order
+            sortedPositions.forEach(pos => {
+                const origIndex = pos.originalIndex;
+                
+                // Only copy if we have valid data
+                if (origIndex !== undefined && origIndex >= 0 && origIndex < adjustedPositions.length) {
+                    adjustedPositions[origIndex].x = pos.x;
+                    adjustedPositions[origIndex].y = pos.y;
+                    adjustedPositions[origIndex].iconX = pos.iconX;
+                    adjustedPositions[origIndex].iconY = pos.iconY;
+                    adjustedPositions[origIndex].iconCenterX = pos.iconCenterX;
+                    adjustedPositions[origIndex].iconCenterY = pos.iconCenterY;
+                    
+                    // Also add any adjusted longitude for reference
+                    if (pos.adjustedLongitude !== undefined) {
+                        adjustedPositions[origIndex].adjustedLongitude = pos.adjustedLongitude;
+                    }
+                }
+            });
+            
+            return adjustedPositions;
+        }
+        
+        /**
+         * Find clusters of positions that are too close angularly
+         * @private
+         * @param {Array} sortedPositions - Positions sorted by longitude
+         * @param {number} minAngularDistance - Minimum angular separation needed
+         * @returns {Array} Array of arrays containing positions in each cluster
+         */
+        static _findOverlappingClusters(sortedPositions, minAngularDistance) {
+            if (!sortedPositions.length) return [];
+            if (sortedPositions.length === 1) return [sortedPositions];
+            
+            const clusters = [];
+            let currentCluster = [sortedPositions[0]];
+            const posCount = sortedPositions.length;
+            
+            // Check for wrap-around at the edges (e.g., planet at 359° and another at 1°)
+            // Add the first planet to the end of the array for checking wraparound
+            [...sortedPositions];
+            ({...sortedPositions[0], longitude: sortedPositions[0].longitude + 360});
+            
+            // First identify standard clusters within the 0-360° range
+            for (let i = 1; i < posCount; i++) {
+                const prevPosition = sortedPositions[i-1];
+                const currPosition = sortedPositions[i];
+                
+                // Check angular distance, considering wrap-around at 360°
+                let angleDiff = currPosition.longitude - prevPosition.longitude;
+                if (angleDiff < 0) angleDiff += 360;
+                
+                if (angleDiff < minAngularDistance) {
+                    // Too close - add to current cluster
+                    currentCluster.push(currPosition);
+                } else {
+                    // Far enough - finish current cluster and start a new one
+                    if (currentCluster.length > 0) {
+                        clusters.push(currentCluster);
+                    }
+                    currentCluster = [currPosition];
+                }
+            }
+            
+            // Add the final regular cluster if it exists
+            if (currentCluster.length > 0) {
+                clusters.push(currentCluster);
+            }
+            
+            // Check for a wrap-around cluster (where last and first planets are close)
+            const lastPlanet = sortedPositions[posCount - 1];
+            const firstPlanetOriginal = sortedPositions[0];
+            
+            let wrapDiff = (firstPlanetOriginal.longitude + 360) - lastPlanet.longitude;
+            if (wrapDiff < 0) wrapDiff += 360;
+            
+            if (wrapDiff < minAngularDistance) {
+                // We have a wraparound cluster
+                // If first and last clusters both exist, merge them
+                if (clusters.length >= 2) {
+                    const firstCluster = clusters[0];
+                    const lastCluster = clusters[clusters.length - 1];
+                    
+                    // If first element is in first cluster and last element is in last cluster
+                    if (firstCluster.includes(firstPlanetOriginal) && lastCluster.includes(lastPlanet)) {
+                        // Merge the first and last clusters
+                        const mergedCluster = [...lastCluster, ...firstCluster];
+                        clusters.pop(); // Remove last cluster
+                        clusters[0] = mergedCluster; // Replace first cluster with merged
+                    }
+                }
+            }
+            
+            return clusters;
+        }
+        
+        /**
+         * Distribute positions in a cluster by adjusting only their angles
+         * @private
+         * @param {Array} positions - Array of positions in the cluster
+         * @param {number} radius - The exact radius to place all positions
+         * @param {number} minAngularDistance - Minimum angular distance needed
+         * @param {number} centerX - X coordinate of center
+         * @param {number} centerY - Y coordinate of center
+         * @param {number} iconSize - Size of the icon
+         */
+        static _distributeClusterByAngle(positions, radius, minAngularDistance, centerX, centerY, iconSize) {
+            const n = positions.length;
+            
+            // Sort positions by their original longitude to maintain order
+            positions.sort((a, b) => a.longitude - b.longitude);
+            
+            // Calculate central angle and total span needed
+            const firstPos = positions[0].longitude;
+            const lastPos = positions[n-1].longitude;
+            let totalArc = lastPos - firstPos;
+            
+            // Handle wrap-around case (e.g., positions at 350° and 10°)
+            if (totalArc < 0 || totalArc > 180) {
+                totalArc = (360 + lastPos - firstPos) % 360;
+            }
+            
+            // Calculate the center of the cluster
+            let centerAngle = (firstPos + totalArc/2) % 360;
+            
+            // Determine minimum arc needed for n planets with minimum spacing
+            const minRequiredArc = (n - 1) * minAngularDistance;
+            
+            // Calculate total span to use (either natural spacing or minimum required)
+            const spanToUse = Math.max(totalArc, minRequiredArc);
+            
+            // Calculate start angle (center - half of span)
+            const startAngle = (centerAngle - spanToUse/2 + 360) % 360;
+            
+            // Distribute planets evenly from the start angle
+            for (let i = 0; i < n; i++) {
+                // If only one planet, keep its original position
+                if (n === 1) {
+                    this._setExactPosition(positions[i], positions[i].longitude, radius, centerX, centerY, iconSize);
+                    continue;
+                }
+                
+                const angle = (startAngle + i * (spanToUse / (n-1))) % 360;
+                this._setExactPosition(positions[i], angle, radius, centerX, centerY, iconSize);
+            }
+        }
+        
+        /**
+         * Set a position's exact coordinates at the given angle and radius
+         * @private
+         * @param {Object} position - The position object to update
+         * @param {number} angle - The angle in degrees (0-360)
+         * @param {number} radius - The exact radius to place the position
+         * @param {number} centerX - X coordinate of center
+         * @param {number} centerY - Y coordinate of center
+         * @param {number} iconSize - Size of the icon
+         */
+        static _setExactPosition(position, angle, radius, centerX, centerY, iconSize) {
+            const svgUtils = new SvgUtils();
+            const point = svgUtils.pointOnCircle(centerX, centerY, radius, angle);
+            
+            position.x = point.x;
+            position.y = point.y;
+            position.iconCenterX = point.x;
+            position.iconCenterY = point.y;
+            position.iconX = point.x - (iconSize / 2);
+            position.iconY = point.y - (iconSize / 2);
+            position.adjustedLongitude = angle;
+        }
+    }
+
+    /**
+     * PrimaryPlanetRenderer.js
+     * Class for rendering primary planets on the inner circle of the chart.
+     */
+    class PrimaryPlanetRenderer extends BasePlanetRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {PlanetSymbolRenderer} options.symbolRenderer - The symbol renderer to use.
+         */
+        constructor(options) {
+            super(options);
+            
+            this.symbolRenderer = options.symbolRenderer;
+            
+            // Define the circle configuration for primary planets
+            this.circleConfig = {
+                circle: 'inner'
+            };
+        }
+        
+        /**
+         * Calculates actual radius values based on circle configuration and chart dimensions
+         * @param {Object} config - Chart configuration with radius values
+         * @returns {Object} Object with calculated dotRadius and iconRadius
+         */
+        calculateRadii(config = null) {
+            const baseRadius = config?.radius?.inner || this.innerRadius;
+            const nextRadius = config?.radius?.middle || this.middleRadius;
+            
+            // Fixed relationship between circle and dots/icons
+            // - Dots are placed exactly on the circle
+            // - Icons are placed halfway between this circle and the next
+            const dotRadius = baseRadius;
+            const iconRadius = baseRadius + (nextRadius - baseRadius) / 2;
+            
+            return { dotRadius, iconRadius };
+        }
+        
+        /**
+         * Adjusts the positions of overlapping planets.
+         * @param {Array} planets - Array of planet objects.
+         */
+        adjustOverlappingPlanets(planets) {
+            if (planets.length <= 1) return; // Nothing to adjust with 0 or 1 planets
+            
+            // Define parameters for collision detection and distribution
+            const iconSize = 24;
+            const baseRadius = planets[0].iconRadius; // Use the iconRadius from the first planet
+            const minDistance = iconSize * 1.2;
+            
+            // Prepare planets array in format expected by PlanetPositionCalculator
+            const positions = planets.map((planet, index) => ({
+                x: planet.iconX,
+                y: planet.iconY,
+                iconX: planet.iconX,
+                iconY: planet.iconY,
+                iconCenterX: planet.iconX,
+                iconCenterY: planet.iconY,
+                longitude: planet.position,
+                radius: baseRadius,
+                originalIndex: index,
+                name: planet.name
+            }));
+            
+            // Use the PlanetPositionCalculator for overlap adjustment
+            const adjustedPositions = PlanetPositionCalculator.adjustOverlaps(positions, {
+                minDistance: minDistance,
+                centerX: this.centerX,
+                centerY: this.centerY,
+                baseRadius: baseRadius,
+                iconSize: iconSize
+            });
+            
+            // Apply the adjusted positions back to the planets
+            adjustedPositions.forEach((pos, idx) => {
+                const planet = planets[idx];
+                planet.position;
+                
+                // Set the adjusted icon position
+                planet.adjustedIconX = pos.iconCenterX;
+                planet.adjustedIconY = pos.iconCenterY;
+                
+                // If there was an adjustment, store it
+                if (pos.adjustedLongitude !== undefined) {
+                    planet.adjustedPosition = pos.adjustedLongitude;
+                }
+            });
+        }
+        
+        /**
+         * Renders primary planets on the chart.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @param {Array} planetsData - Array of planet objects { name: string, position: number }.
+         * @param {number} houseRotationAngle - House system rotation angle.
+         * @param {Object} options - Additional rendering options.
+         * @returns {Array} Array of planet objects with added coordinates.
+         */
+        render(parentGroup, planetsData, houseRotationAngle = 0, options = {}) {
+            if (!parentGroup) {
+                console.error("PrimaryPlanetRenderer: parentGroup is null or undefined.");
+                return [];
+            }
+            
+            // Calculate radii based on circle configuration
+            const { dotRadius, iconRadius } = options.dotRadius && options.iconRadius 
+                ? { dotRadius: options.dotRadius, iconRadius: options.iconRadius } 
+                : this.calculateRadii(options.config || this.config);
+            
+            if (!dotRadius || !iconRadius) {
+                console.error("PrimaryPlanetRenderer: Could not determine radius values");
+                return [];
+            }
+            
+            // Clear the group before rendering new planets
+            this.clearGroup(parentGroup);
+            
+            // Prepare planets with additional properties
+            const planets = this.preparePlanetData(planetsData, 'primary', dotRadius, iconRadius);
+            
+            // Sort planets by position for overlap calculations
+            planets.sort((a, b) => a.position - b.position);
+            
+            // Calculate base positions (dot and icon)
+            this.calculateBasePositions(planets, dotRadius, iconRadius);
+            
+            // Calculate adjustments for overlapping planets
+            this.adjustOverlappingPlanets(planets);
+            
+            // Draw the planets onto the SVG group
+            this.drawPlanets(parentGroup, planets);
+            
+            // Return the planets array with calculated coordinates
+            return planets;
+        }
+        
+        /**
+         * Draw the planets on the SVG group with their dots and icons.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @param {Array} planets - Array of planet objects with calculated positions.
+         */
+        drawPlanets(parentGroup, planets) {
+            const iconSize = 24; // Standard icon size
+            
+            planets.forEach(planet => {
+                // Create group for this planet (contains dot, symbol, and connector)
+                const planetGroup = this.svgUtils.createSVGElement("g", {
+                    'data-planet': planet.name,
+                    'data-type': planet.type,
+                    class: `planet-element planet-${planet.name} planet-primary`,
+                    transform: `translate(0,0)`
+                });
+                
+                // Render planet dot 
+                const dot = this.symbolRenderer.renderPlanetDot(planetGroup, planet);
+                planetGroup.appendChild(dot);
+                
+                // Render planet symbol
+                const icon = this.symbolRenderer.renderPlanetSymbol(planetGroup, planet, iconSize);
+                planetGroup.appendChild(icon);
+                
+                // Add tooltip
+                this.symbolRenderer.addPlanetTooltip(planetGroup, planet);
+                
+                // Render connector if needed
+                const connector = this.symbolRenderer.renderConnector(planetGroup, planet, iconSize);
+                if (connector) {
+                    planetGroup.appendChild(connector);
+                }
+                
+                // Add to parent group
+                parentGroup.appendChild(planetGroup);
+            });
+        }
+    }
+
+    /**
+     * SecondaryPlanetRenderer.js
+     * Class for rendering secondary planets on the innermost circle of the chart.
+     */
+    class SecondaryPlanetRenderer extends BasePlanetRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {PlanetSymbolRenderer} options.symbolRenderer - The symbol renderer to use.
+         */
+        constructor(options) {
+            super(options);
+            
+            this.symbolRenderer = options.symbolRenderer;
+            
+            // Define the circle configuration for secondary planets
+            this.circleConfig = {
+                circle: 'innermost'
+            };
+        }
+        
+        /**
+         * Calculates actual radius values based on circle configuration and chart dimensions
+         * @param {Object} config - Chart configuration with radius values
+         * @returns {Object} Object with calculated dotRadius and iconRadius
+         */
+        calculateRadii(config = null) {
+            const baseRadius = config?.radius?.innermost || (this.innerRadius * 0.5); // Fallback
+            const nextRadius = config?.radius?.zodiacInner || this.innerRadius;
+            
+            // Fixed relationship between circle and dots/icons
+            // - Dots are placed exactly on the circle
+            // - Icons are placed halfway between this circle and the next
+            const dotRadius = baseRadius;
+            const iconRadius = baseRadius + (nextRadius - baseRadius) / 2;
+            
+            return { dotRadius, iconRadius };
+        }
+        
+        /**
+         * Adjusts the positions of overlapping planets.
+         * @param {Array} planets - Array of planet objects.
+         */
+        adjustOverlappingPlanets(planets) {
+            if (planets.length <= 1) return; // Nothing to adjust with 0 or 1 planets
+            
+            // Define parameters for collision detection and distribution
+            const iconSize = 18; // Smaller size for secondary planets
+            const baseRadius = planets[0].iconRadius; // Use the iconRadius from the first planet
+            const minDistance = iconSize * 1.1; // Slightly tighter packing
+            
+            // Prepare planets array in format expected by PlanetPositionCalculator
+            const positions = planets.map((planet, index) => ({
+                x: planet.iconX,
+                y: planet.iconY,
+                iconX: planet.iconX,
+                iconY: planet.iconY,
+                iconCenterX: planet.iconX,
+                iconCenterY: planet.iconY,
+                longitude: planet.position,
+                radius: baseRadius,
+                originalIndex: index,
+                name: planet.name
+            }));
+            
+            // Use the PlanetPositionCalculator for overlap adjustment
+            const adjustedPositions = PlanetPositionCalculator.adjustOverlaps(positions, {
+                minDistance: minDistance,
+                centerX: this.centerX,
+                centerY: this.centerY,
+                baseRadius: baseRadius,
+                iconSize: iconSize
+            });
+            
+            // Apply the adjusted positions back to the planets
+            adjustedPositions.forEach((pos, idx) => {
+                const planet = planets[idx];
+                
+                // Set the adjusted icon position
+                planet.adjustedIconX = pos.iconCenterX;
+                planet.adjustedIconY = pos.iconCenterY;
+                
+                // If there was an adjustment, store it
+                if (pos.adjustedLongitude !== undefined) {
+                    planet.adjustedPosition = pos.adjustedLongitude;
+                }
+            });
+        }
+        
+        /**
+         * Renders secondary planets on the chart.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @param {Array} planetsData - Array of planet objects { name: string, position: number }.
+         * @param {number} houseRotationAngle - House system rotation angle.
+         * @param {Object} options - Additional rendering options.
+         * @returns {Array} Array of planet objects with added coordinates.
+         */
+        render(parentGroup, planetsData, houseRotationAngle = 0, options = {}) {
+            if (!parentGroup) {
+                console.error("SecondaryPlanetRenderer: parentGroup is null or undefined.");
+                return [];
+            }
+            
+            // Calculate radii based on circle configuration
+            const { dotRadius, iconRadius } = options.dotRadius && options.iconRadius 
+                ? { dotRadius: options.dotRadius, iconRadius: options.iconRadius } 
+                : this.calculateRadii(options.config || this.config);
+            
+            if (!dotRadius || !iconRadius) {
+                console.error("SecondaryPlanetRenderer: Could not determine radius values");
+                return [];
+            }
+            
+            // Clear the group before rendering new planets
+            this.clearGroup(parentGroup);
+            
+            // Prepare planets with additional properties
+            const planets = this.preparePlanetData(planetsData, 'secondary', dotRadius, iconRadius);
+            
+            // Sort planets by position for overlap calculations
+            planets.sort((a, b) => a.position - b.position);
+            
+            // Calculate base positions (dot and icon)
+            this.calculateBasePositions(planets, dotRadius, iconRadius);
+            
+            // Calculate adjustments for overlapping planets
+            this.adjustOverlappingPlanets(planets);
+            
+            // Draw the planets onto the SVG group
+            this.drawPlanets(parentGroup, planets);
+            
+            // Return the planets array with calculated coordinates
+            return planets;
+        }
+        
+        /**
+         * Draw the planets on the SVG group with their dots and icons.
+         * @param {Element} parentGroup - The parent SVG group.
+         * @param {Array} planets - Array of planet objects with calculated positions.
+         */
+        drawPlanets(parentGroup, planets) {
+            const iconSize = 18; // Smaller icon size for secondary planets
+            
+            planets.forEach(planet => {
+                // Create group for this planet (contains dot, symbol, and connector)
+                const planetGroup = this.svgUtils.createSVGElement("g", {
+                    'data-planet': planet.name,
+                    'data-type': planet.type,
+                    class: `planet-element planet-${planet.name} planet-secondary`,
+                    transform: `translate(0,0)`
+                });
+                
+                // Render planet dot with smaller size
+                const dot = this.symbolRenderer.renderPlanetDot(planetGroup, planet, 2);
+                planetGroup.appendChild(dot);
+                
+                // Render planet symbol with smaller size
+                const icon = this.symbolRenderer.renderPlanetSymbol(planetGroup, planet, iconSize);
+                planetGroup.appendChild(icon);
+                
+                // Add tooltip
+                this.symbolRenderer.addPlanetTooltip(planetGroup, planet);
+                
+                // Render connector if needed
+                const connector = this.symbolRenderer.renderConnector(planetGroup, planet, iconSize);
+                if (connector) {
+                    planetGroup.appendChild(connector);
+                }
+                
+                // Add to parent group
+                parentGroup.appendChild(planetGroup);
+            });
+        }
+    }
+
+    /**
+     * PlanetRendererCoordinator.js
+     * Coordinator class that maintains the original PlanetRenderer API
+     * but delegates rendering tasks to specialized renderers.
+     */
+    class PlanetRendererCoordinator extends BasePlanetRenderer {
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {PrimaryPlanetRenderer} options.primaryRenderer - Primary planet renderer.
+         * @param {SecondaryPlanetRenderer} options.secondaryRenderer - Secondary planet renderer.
+         * @param {PlanetSymbolRenderer} options.symbolRenderer - Planet symbol renderer.
+         */
+        constructor(options) {
+            super(options);
+            
+            this.primaryRenderer = options.primaryRenderer;
+            this.secondaryRenderer = options.secondaryRenderer;
+            this.symbolRenderer = options.symbolRenderer;
+            
+            // Define the circle configurations - which circle each planet type should be placed on
+            this.circleConfigs = {
+                // Primary planets placed on inner circle
+                primary: {
+                    circle: 'inner'
+                },
+                // Secondary planets placed on innermost circle
+                secondary: {
+                    circle: 'innermost'
+                }
+            };
+        }
+        
+        /**
+         * Calculates actual radius values based on circle configuration and chart dimensions
+         * @param {string} planetType - Type of planet (primary, secondary, etc.)
+         * @param {Object} config - Chart configuration with radius values
+         * @returns {Object} Object with calculated dotRadius and iconRadius
+         */
+        calculateRadii(planetType, config = null) {
+            const circleConfig = this.circleConfigs[planetType];
+            if (!circleConfig) {
+                console.error(`PlanetRendererCoordinator: No circle configuration found for planet type: ${planetType}`);
+                return { dotRadius: null, iconRadius: null };
+            }
+            
+            switch (planetType) {
+                case 'primary':
+                    return this.primaryRenderer.calculateRadii(config);
+                case 'secondary':
+                    return this.secondaryRenderer.calculateRadii(config);
+                default:
+                    console.error(`PlanetRendererCoordinator: Unknown planet type: ${planetType}`);
+                    return { dotRadius: null, iconRadius: null };
+            }
+        }
+        
+        /**
+         * Renders planets on the chart. Delegates to the appropriate specialized renderer.
+         * @param {Element} parentGroup - The parent SVG group element.
+         * @param {Array} planetsData - Array of planet objects { name: string, position: number }.
+         * @param {number} houseRotationAngle - House system rotation angle.
+         * @param {Object} options - Additional rendering options.
+         * @returns {Array} Array of planet objects with added coordinates.
+         */
+        render(parentGroup, planetsData, houseRotationAngle = 0, options = {}) {
+            // Determine planet type (primary or secondary)
+            const planetType = options.type || 'primary';
+            
+            console.log(`PlanetRendererCoordinator: Rendering ${planetType} planets, count:`, planetsData.length);
+            
+            // Delegate to appropriate renderer based on planet type
+            switch (planetType) {
+                case 'primary':
+                    return this.primaryRenderer.render(parentGroup, planetsData, houseRotationAngle, options);
+                case 'secondary':
+                    return this.secondaryRenderer.render(parentGroup, planetsData, houseRotationAngle, options);
+                default:
+                    console.error(`PlanetRendererCoordinator: Unknown planet type: ${planetType}`);
+                    return [];
+            }
+        }
+        
+        /**
+         * Renders both primary and secondary planets in one call.
+         * This consolidated method handles rendering all planets.
+         * 
+         * @param {Object} params - Rendering parameters
+         * @param {SVGManager} params.svgManager - SVG manager instance
+         * @param {Object} params.planetsData - Planet data object
+         * @param {Object} params.config - Chart configuration with radii
+         * @param {boolean} params.primaryEnabled - Whether primary planets are enabled
+         * @param {boolean} params.secondaryEnabled - Whether secondary planets are enabled
+         * @returns {Object} Object containing both sets of rendered planets
+         */
+        renderAllPlanetTypes(params) {
+            const { 
+                svgManager, 
+                planetsData, 
+                config,
+                enabledTypes = { primary: true, secondary: true }
+            } = params;
+            
+            if (!svgManager || !planetsData || !config) {
+                console.error("PlanetRendererCoordinator: Missing required parameters");
+                return {};
+            }
+            
+            // Convert planet data to array format, filtering by visibility
+            const planetsArray = Object.entries(planetsData)
+                .filter(([name, data]) => config.planetSettings.visible?.[name] !== false)
+                .map(([name, data]) => ({
+                    name: name,
+                    position: data.lon,
+                    color: data.color || '#000000'
+                }));
+            
+            const result = {};
+            
+            // Save and update center coordinates
+            const originalCenterX = this.centerX;
+            const originalCenterY = this.centerY;
+            this.centerX = config.svg.center.x;
+            this.centerY = config.svg.center.y;
+            
+            // Update center coordinates in specialized renderers too
+            this.primaryRenderer.centerX = this.centerX;
+            this.primaryRenderer.centerY = this.centerY;
+            this.secondaryRenderer.centerX = this.centerX;
+            this.secondaryRenderer.centerY = this.centerY;
+            
+            // Render primary planets if enabled
+            if (enabledTypes.primary) {
+                const primaryGroup = svgManager.getGroup('primaryPlanets');
+                result.primary = this.primaryRenderer.render(primaryGroup, planetsArray, 0, {
+                    config: config
+                });
+                console.log(`PlanetRendererCoordinator: Rendered ${result.primary.length} primary planets`);
+            } else {
+                result.primary = [];
+            }
+            
+            // Render secondary planets if enabled
+            if (enabledTypes.secondary) {
+                const secondaryGroup = svgManager.getGroup('secondaryPlanets');
+                result.secondary = this.secondaryRenderer.render(secondaryGroup, planetsArray, 0, {
+                    config: config
+                });
+                console.log(`PlanetRendererCoordinator: Rendered ${result.secondary.length} secondary planets`);
+            } else {
+                result.secondary = [];
+            }
+            
+            // Restore original center values
+            this.centerX = originalCenterX;
+            this.centerY = originalCenterY;
+            this.primaryRenderer.centerX = originalCenterX;
+            this.primaryRenderer.centerY = originalCenterY;
+            this.secondaryRenderer.centerX = originalCenterX;
+            this.secondaryRenderer.centerY = originalCenterY;
+            
+            return result;
+        }
+        
+        /**
+         * Legacy method - deprecated, use renderAllPlanetTypes instead
+         */
+        renderAllPlanets(params) {
+            console.warn("PlanetRendererCoordinator: renderAllPlanets is deprecated, use renderAllPlanetTypes instead");
+            return this.renderAllPlanetTypes(params);
+        }
+    }
+
+    /**
+     * ClientSideAspectRenderer.js
+     * Renders aspects based on client-side calculations using planet coordinates.
+     */
+    class ClientSideAspectRenderer extends BaseRenderer { // No longer extends IAspectRenderer
+        /**
+         * Constructor
+         * @param {Object} options - Renderer options.
+         * @param {string} options.svgNS - SVG namespace.
+         * @param {ChartConfig} options.config - Chart configuration object. Contains aspect settings like orb.
+         * @param {string} options.assetBasePath - Base path for assets (unused here but standard).
+         * @param {IconProvider} [options.iconProvider] - Icon provider service.
+         */
+        constructor(options) {
+            super(options);
+            this.astrologyUtils = AstrologyUtils; // Assuming AstrologyUtils is available
+            this.renderedAspects = []; // Store calculated aspects
+            this._aspectCacheKey = null; // Cache key for aspect calculations
+            this._aspectCache = [];      // Cached aspect results
+            this.assetBasePath = options.assetBasePath || ''; // Store asset base path
+            this.iconProvider = options.iconProvider; // Store the icon provider
+            
+            // Define major aspects and their angles (can be overridden/extended by config)
+            this.defaultAspectDefinitions = {
+                'conjunction': { angle: 0, orb: 8, color: '#FF4500', abbr: 'CON' }, // OrangeRed
+                'opposition': { angle: 180, orb: 6, color: '#DC143C', abbr: 'OPP' }, // Crimson
+                'trine': { angle: 120, orb: 6, color: '#2E8B57', abbr: 'TRI' }, // SeaGreen
+                'square': { angle: 90, orb: 6, color: '#FF0000', abbr: 'SQR' }, // Red
+                'sextile': { angle: 60, orb: 4, color: '#4682B4', abbr: 'SEX' }, // SteelBlue
+                 // Add minors if needed
+                 // 'semisextile': { angle: 30, orb: 2, color: '#90EE90', abbr: 'SSX' }, // LightGreen
+                 // 'quincunx': { angle: 150, orb: 2, color: '#DAA520', abbr: 'QCX' }  // Goldenrod
+            };
+        }
+
+        /**
+         * Calculates the angular distance between two positions (0-180 degrees).
+         * @param {number} pos1 - Position 1 (degrees).
+         * @param {number} pos2 - Position 2 (degrees).
+         * @returns {number} The smallest angle between pos1 and pos2 (0-180).
+         */
+        _angularDistance(pos1, pos2) {
+            const diff = Math.abs(pos1 - pos2) % 360;
+            return Math.min(diff, 360 - diff);
+        }
+
+        /**
+         * Calculates aspects between planets based on their positions.
+         * @param {Array} planets - Array of planet objects MUST include `position` property.
+         * @returns {Array} Array of calculated aspect objects.
+         */
+        calculateAspects(planets) {
+            const aspects = [];
+            if (!planets || planets.length < 2) {
+                return aspects;
+            }
+
+            // Generate a cache key based on aspectSettings and planet positions
+            const settingsString = JSON.stringify(this.config.aspectSettings);
+            const planetKey = planets.map(p => `${p.name}:${p.position}`).join('|');
+            const cacheKey = `${settingsString}|${planetKey}`;
+            if (cacheKey === this._aspectCacheKey) {
+                console.log(`ClientSideAspectRenderer: Using cached aspects (${this._aspectCache.length})`);
+                return this._aspectCache;
+            }
+
+            // Get aspect types and orbs from config, falling back to defaults
+            const aspectSettings = this.config.aspectSettings || {};
+            const calculationOrb = aspectSettings.orb || 6; // Default orb if not specified per aspect
+            const aspectTypes = aspectSettings.types || this.defaultAspectDefinitions;
+
+            // Iterate through all unique pairs of planets
+            for (let i = 0; i < planets.length; i++) {
+                for (let j = i + 1; j < planets.length; j++) {
+                    const p1 = planets[i];
+                    const p2 = planets[j];
+
+                    const angleDiff = this._angularDistance(p1.position, p2.position);
+
+                    // Check against each defined aspect type
+                    for (const aspectName in aspectTypes) {
+                        const aspectDef = aspectTypes[aspectName];
+                        const targetAngle = aspectDef.angle;
+                        const orb = aspectDef.orb !== undefined ? aspectDef.orb : calculationOrb; // Use specific orb or default
+
+                        if (Math.abs(angleDiff - targetAngle) <= orb) {
+                            // Aspect found!
+                            aspects.push({
+                                planet1: p1.name,
+                                planet2: p2.name,
+                                type: aspectName,
+                                angle: targetAngle, // The ideal angle of the aspect type
+                                angleDiff: angleDiff, // The actual angle difference between planets
+                                orb: Math.abs(angleDiff - targetAngle), // How exact the aspect is
+                                // Include planet objects for coordinate lookup during rendering
+                                p1: p1,
+                                p2: p2,
+                                // Add default color/style from definition
+                                color: aspectDef.color || '#888', // Default color
+                                lineStyle: aspectDef.lineStyle, // e.g., 'dashed', 'dotted' (used later in styling)
+                                abbr: aspectDef.abbr || aspectName.substring(0, 3).toUpperCase() // Use abbreviation from definition or default
+                            });
+                        }
+                    }
+                }
+            }
+            console.log(`ClientSideAspectRenderer: Calculated ${aspects.length} aspects.`);
+            // Cache results and key
+            this._aspectCacheKey = cacheKey;
+            this._aspectCache = aspects;
+            return aspects;
+        }
+
+
+        /**
+         * Renders aspect lines based on planet coordinates.
+         * @param {Element} parentGroup - The parent SVG group for aspect lines.
+         * @param {Array} planetsWithCoords - Array of planet objects returned by PlanetRenderer, MUST include `x`, `y`, `name`, and `position`.
+         * @returns {Array<Element>} Array containing the created line elements.
+         */
+        render(parentGroup, planetsWithCoords) {
+             if (!parentGroup) {
+                 console.error("ClientSideAspectRenderer.render: parentGroup is null or undefined.");
+                 return [];
+             }
+             this.clearGroup(parentGroup); // Clear previous aspects
+             const renderedElements = [];
+
+             if (!planetsWithCoords || planetsWithCoords.length < 2) {
+                 console.warn("ClientSideAspectRenderer: Not enough planet data with coordinates to render aspects.");
+                 this.renderedAspects = [];
+                 return [];
+             }
+
+            // Calculate aspects based on planet positions
+            const aspects = this.calculateAspects(planetsWithCoords);
+            this.renderedAspects = aspects; // Store the calculated aspects
+
+            console.log(`ClientSideAspectRenderer: Rendering ${aspects.length} aspects.`);
+
+            // Get enabled aspect types from config
+            const aspectSettings = this.config.aspectSettings || {};
+            const aspectTypesConfig = aspectSettings.types || {};
+
+            // Map planets by name for quick coordinate lookup
+            const planetCoords = {};
+            planetsWithCoords.forEach(p => {
+                planetCoords[p.name] = { x: p.x, y: p.y }; // Use the dot coordinates (p.x, p.y)
+            });
+
+            aspects.forEach(aspect => {
+                const coords1 = planetCoords[aspect.planet1];
+                const coords2 = planetCoords[aspect.planet2];
+
+                // Check if aspect type is enabled in config (and handle default case)
+                const aspectDef = aspectTypesConfig[aspect.type];
+                const isEnabled = aspectDef ? (aspectDef.enabled !== false) : true; // Default to true if not specified
+                const lineStyle = aspectDef ? aspectDef.lineStyle : 'solid'; // Get style from config or default to solid
+
+                if (!isEnabled || lineStyle === 'none') {
+                    // If aspect type is disabled or style is none, don't render line or icon
+                    return;
+                }
+
+                if (!coords1 || !coords2) {
+                    console.warn(`ClientSideAspectRenderer: Could not find coordinates for aspect: ${aspect.planet1} ${aspect.type} ${aspect.planet2}`);
+                    return; // Skip this aspect if coordinates are missing
+                }
+
+                // Sanitize planet names for CSS classes
+                const p1SafeName = (aspect.planet1 || '').toLowerCase().replace(/[^a-z0-9]/g, '-');
+                const p2SafeName = (aspect.planet2 || '').toLowerCase().replace(/[^a-z0-9]/g, '-');
+
+                // Define stroke dash array based on lineStyle
+                let strokeDasharray = 'none';
+                if (lineStyle === 'dashed') {
+                    strokeDasharray = '5, 5';
+                } else if (lineStyle === 'dotted') {
+                    strokeDasharray = '1, 3';
+                }
+
+                const line = this.svgUtils.createSVGElement("line", {
+                    x1: coords1.x,
+                    y1: coords1.y,
+                    x2: coords2.x,
+                    y2: coords2.y,
+                    class: `aspect-element aspect-line aspect-${aspect.type} aspect-planet-${p1SafeName} aspect-planet-${p2SafeName}`, // Add classes for type and involved planets
+                    stroke: aspect.color || '#888888', // Apply color from definition or default
+                    'stroke-dasharray': strokeDasharray // Apply calculated dash style
+                });
+
+                // Add tooltip with details
+                const tooltipText = `${this.astrologyUtils.capitalizeFirstLetter(aspect.planet1)} ${aspect.type} ${this.astrologyUtils.capitalizeFirstLetter(aspect.planet2)} (${aspect.angleDiff.toFixed(1)}°, orb ${aspect.orb.toFixed(1)}°)`;
+                this.svgUtils.addTooltip(line, tooltipText);
+
+                parentGroup.appendChild(line);
+                renderedElements.push(line);
+
+                // Optionally add aspect glyphs at the midpoint
+                 this._addAspectIcon(parentGroup, aspect, coords1, coords2, tooltipText);
+            });
+            
+            return renderedElements;
+        }
+
+        /**
+         * Overrides the BaseRenderer clearGroup method to ensure custom cleanup.
+         * @param {Element} parentGroup - The parent SVG group to clear.
+         */
+        clearGroup(parentGroup) {
+            super.clearGroup(parentGroup);
+            // Additional cleanup here if needed
+        }
+
+        /**
+         * Gets the currently rendered aspects
+         * @returns {Array} Array of aspect objects
+         */
+        getCurrentAspects() {
+            return this.renderedAspects;
+        }
+
+        /**
+         * Adds an aspect icon at the midpoint of the aspect line
+         * @private
+         * @param {Element} parentGroup - The SVG group for aspect lines
+         * @param {Object} aspect - The aspect object
+         * @param {Object} coords1 - Coordinates of first planet
+         * @param {Object} coords2 - Coordinates of second planet
+         * @param {string} tooltipText - Tooltip text
+         */
+        _addAspectIcon(parentGroup, aspect, coords1, coords2, tooltipText) {
+            // Calculate midpoint of the line
+            const midX = (coords1.x + coords2.x) / 2;
+            const midY = (coords1.y + coords2.y) / 2;
+            
+            // Calculate distance from center to place the icon correctly
+            const dx = midX - this.centerX;
+            const dy = midY - this.centerY;
+            const distanceFromCenter = Math.sqrt(dx * dx + dy * dy);
+            
+            // Only add icon if not too close to center (to avoid clutter)
+            if (distanceFromCenter < 20) {
+                return; // Skip icon if too close to center
+            }
+            
+            // Define the icon size
+            const iconSize = 16;
+            
+            // Get icon path using IconProvider if available
+            let iconPath;
+            if (this.iconProvider) {
+                iconPath = this.iconProvider.getAspectIconPath(aspect.type);
+            } else {
+                // Fallback to old path construction
+                iconPath = `${this.assetBasePath}/svg/zodiac/zodiac-aspect-${aspect.type}.svg`;
+            }
+            
+            // Create the aspect glyph/symbol image
+            const symbol = this.svgUtils.createSVGElement("image", {
+                x: midX - iconSize/2, // Offset by half the icon width
+                y: midY - iconSize/2, // Offset by half the icon height
+                width: iconSize,
+                height: iconSize,
+                href: iconPath,
+                class: `aspect-element aspect-symbol aspect-${aspect.type}`
+            });
+            
+            // Add error handling for image loading
+            symbol.addEventListener('error', () => {
+                console.warn(`Failed to load aspect icon for ${aspect.type} from path: ${iconPath}`);
+                
+                // Get the abbreviation for text fallback from aspect definition or default to first 3 letters
+                const aspectDef = this.defaultAspectDefinitions[aspect.type];
+                const fallbackText = aspectDef && aspectDef.abbr 
+                    ? aspectDef.abbr 
+                    : aspect.type.substring(0, 3).toUpperCase();
+                
+                // Use IconProvider's createTextFallback if available
+                let textSymbol;
+                if (this.iconProvider) {
+                    textSymbol = this.iconProvider.createTextFallback(
+                        this.svgUtils,
+                        {
+                            x: midX,
+                            y: midY,
+                            size: '12px',
+                            color: aspect.color || '#888888',
+                            className: `aspect-element aspect-symbol aspect-${aspect.type}`
+                        },
+                        fallbackText
+                    );
+                } else {
+                    // Legacy fallback
+                    textSymbol = this.svgUtils.createSVGElement("text", {
+                        x: midX,
+                        y: midY,
+                        'text-anchor': 'middle',
+                        'dominant-baseline': 'middle',
+                        'font-size': '12px',
+                        'font-weight': 'bold',
+                        class: `aspect-element aspect-symbol aspect-${aspect.type}`,
+                        fill: aspect.color || '#888888'
+                    });
+                    textSymbol.textContent = fallbackText;
+                }
+                
+                // Add tooltip
+                this.svgUtils.addTooltip(textSymbol, tooltipText);
+                
+                // Add to parent group
+                parentGroup.appendChild(textSymbol);
+            });
+            
+            // Add tooltip
+            this.svgUtils.addTooltip(symbol, tooltipText);
+            
+            parentGroup.appendChild(symbol);
+        }
+    }
+
+    /**
+     * RendererFactory.js
+     * Factory class for creating renderer instances with proper dependency injection.
+     */
+
+    class RendererFactory {
+        /**
+         * Constructor
+         * @param {Object} config - Chart configuration
+         * @param {string} svgNS - SVG namespace
+         */
+        constructor(config, svgNS) {
+            this.config = config;
+            this.svgNS = svgNS;
+            this.svgUtils = ServiceRegistry.getSvgUtils();
+            this.iconProvider = ServiceRegistry.getIconProvider(config.assets?.basePath);
+        }
+        
+        /**
+         * Creates a ZodiacRenderer instance
+         * @param {Object} options - Additional options for the renderer
+         * @returns {ZodiacRenderer} The ZodiacRenderer instance
+         */
+        createZodiacRenderer(options = {}) {
+            return new ZodiacRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                ...options
+            });
+        }
+        
+        /**
+         * Creates a HouseRenderer instance
+         * @param {Object} options - Additional options for the renderer
+         * @returns {HouseRenderer} The HouseRenderer instance
+         */
+        createHouseRenderer(options = {}) {
+            return new HouseRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                ...options
+            });
+        }
+        
+        /**
+         * Creates a PlanetRenderer instance
+         * This now creates a PlanetRendererCoordinator with specialized renderers
+         * @param {Object} options - Additional options for the renderer
+         * @returns {PlanetRendererCoordinator} The PlanetRendererCoordinator instance
+         */
+        createPlanetRenderer(options = {}) {
+            // First create the symbol renderer
+            const symbolRenderer = new PlanetSymbolRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                assetBasePath: options.assetBasePath || this.config.assets?.basePath,
+                ...options
+            });
+            
+            // Create primary planet renderer
+            const primaryRenderer = new PrimaryPlanetRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                symbolRenderer: symbolRenderer,
+                assetBasePath: options.assetBasePath || this.config.assets?.basePath,
+                ...options
+            });
+            
+            // Create secondary planet renderer
+            const secondaryRenderer = new SecondaryPlanetRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                symbolRenderer: symbolRenderer,
+                assetBasePath: options.assetBasePath || this.config.assets?.basePath,
+                ...options
+            });
+            
+            // Create and return the coordinator
+            return new PlanetRendererCoordinator({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                primaryRenderer: primaryRenderer,
+                secondaryRenderer: secondaryRenderer,
+                symbolRenderer: symbolRenderer,
+                assetBasePath: options.assetBasePath || this.config.assets?.basePath,
+                ...options
+            });
+        }
+        
+        /**
+         * Creates a ClientSideAspectRenderer instance
+         * @param {Object} options - Additional options for the renderer
+         * @returns {ClientSideAspectRenderer} The ClientSideAspectRenderer instance
+         */
+        createAspectRenderer(options = {}) {
+            return new ClientSideAspectRenderer({
+                svgNS: this.svgNS,
+                config: this.config,
+                svgUtils: this.svgUtils,
+                iconProvider: this.iconProvider,
+                ...options
+            });
+        }
+    }
+
+    /**
+     * RenderingCoordinator.js
+     * Coordinates all rendering operations for the chart
+     */
+
+    class RenderingCoordinator {
+        /**
+         * Constructor
+         * @param {Object} options - Configuration options
+         * @param {Object} options.config - Chart configuration
+         * @param {Object} options.svgManager - SVG manager instance
+         * @param {Object} options.planets - Planet data
+         * @param {Array} options.houses - House data
+         */
+        constructor(options) {
+            this.config = options.config;
+            this.svgManager = options.svgManager;
+            this.planets = options.planets || {};
+            this.houses = options.houses || [];
+            
+            // Initialize renderers dictionary
+            this.renderers = {};
+            
+            // Initialize renderers if SVG manager is available
+            if (this.svgManager && this.svgManager.getSVG()) {
+                this._initializeRenderers();
+            }
+        }
+        
+        /**
+         * Initializes all renderers using the factory
+         * @private
+         */
+        _initializeRenderers() {
+            // Create renderer factory
+            this.rendererFactory = new RendererFactory(
+                this.config, 
+                this.svgManager.svgNS
+            );
+            
+            // Initialize zodiac renderer
+            this.renderers.zodiac = this.rendererFactory.createZodiacRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+            
+            // Initialize house renderer with house data
+            const houseCusps = this.config.getHouseCusps();
+            const houseData = (houseCusps && houseCusps.length > 0) 
+                ? houseCusps 
+                : this.houses;
+            
+            this.renderers.house = this.rendererFactory.createHouseRenderer({
+                houseData: houseData
+            });
+            
+            // Initialize planet renderer
+            this.renderers.planet = this.rendererFactory.createPlanetRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+            
+            // Initialize aspect renderer
+            this.renderers.aspect = this.rendererFactory.createAspectRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+        }
+        
+        /**
+         * Updates planet data
+         * @param {Object} planets - New planet data
+         */
+        updatePlanets(planets) {
+            this.planets = planets;
+        }
+        
+        /**
+         * Updates house data
+         * @param {Array} houses - New house data
+         */
+        updateHouses(houses) {
+            this.houses = houses;
+            if (this.renderers.house) {
+                this.renderers.house.houseData = this.houses;
+            }
+        }
+        
+        /**
+         * Renders all chart elements
+         */
+        renderAll() {
+            if (!this.svgManager.getSVG()) {
+                return;
+            }
+            
+            // Clear all groups
+            Object.values(this.svgManager.getAllGroups()).forEach(group => {
+                group.innerHTML = '';
+            });
+            
+            this.renderZodiac();
+            this.renderHouses();
+            const planetsWithCoords = this.renderPlanets();
+            this.renderAspects(planetsWithCoords);
+            
+            console.log("RenderingCoordinator: Chart rendered");
+        }
+        
+        /**
+         * Renders the zodiac ring
+         * @returns {boolean} Success indicator
+         */
+        renderZodiac() {
+            if (!this.config.zodiacSettings.enabled || !this.renderers.zodiac) {
+                return false;
+            }
+            
+            this.renderers.zodiac.render(this.svgManager.getGroup('zodiac'));
+            return true;
+        }
+        
+        /**
+         * Renders the houses
+         * @returns {boolean} Success indicator
+         */
+        renderHouses() {
+            if (!this.config.houseSettings.enabled || !this.renderers.house) {
+                return false;
+            }
+            
+            const houseGroup = this.svgManager.getGroup('houses');
+            const houseDivisionsGroup = this.svgManager.getGroup('houseDivisions');
+            
+            // Get the current house cusps based on selected system
+            const houseCusps = this.config.getHouseCusps();
+            if (houseCusps && houseCusps.length > 0) {
+                // Update house renderer with current house system cusps
+                this.renderers.house.houseData = houseCusps;
+            }
+            
+            // Render house divisions and numbers
+            this.renderers.house.renderDivisions(houseDivisionsGroup, this.config.houseSettings.rotationAngle);
+            this.renderers.house.renderNumbers(houseGroup, this.config.houseSettings.rotationAngle);
+            
+            return true;
+        }
+        
+        /**
+         * Renders the planets
+         * @returns {Array} Array of rendered planets with coordinates for aspect calculation
+         */
+        renderPlanets() {
+            if (!this.config.planetSettings.enabled || !this.renderers.planet) {
+                return [];
+            }
+            
+            // Get the enabled states for primary and secondary planets
+            const primaryEnabled = this.config.planetSettings.primaryEnabled !== false;
+            const secondaryEnabled = this.config.planetSettings.secondaryEnabled !== false;
+            
+            // Use the consolidated renderAllPlanetTypes method
+            const renderedPlanets = this.renderers.planet.renderAllPlanetTypes({
+                svgManager: this.svgManager,
+                planetsData: this.planets,
+                config: this.config,
+                primaryEnabled: primaryEnabled,
+                secondaryEnabled: secondaryEnabled
+            });
+            
+            console.log(`RenderingCoordinator: Rendered ${renderedPlanets.primary.length} primary planets and ${renderedPlanets.secondary.length} secondary planets`);
+            
+            // For aspect rendering, use primary planets by default
+            return renderedPlanets.primary;
+        }
+        
+        /**
+         * Renders the aspects between planets
+         * @param {Array} planetsWithCoords - Array of planets with coordinates
+         * @returns {boolean} Success indicator
+         */
+        renderAspects(planetsWithCoords) {
+            if (!this.config.aspectSettings.enabled || !this.renderers.aspect) {
+                return false;
+            }
+            
+            this.renderers.aspect.render(this.svgManager.getGroup('aspects'), planetsWithCoords);
+            return true;
+        }
+    }
+
+    /**
+     * ChartStateManager.js
+     * Manages the state and configuration settings for the chart
+     */
+
+    class ChartStateManager {
+        /**
+         * Constructor
+         * @param {Object} options - Configuration options
+         * @param {Object} options.config - Chart configuration
+         * @param {Object} options.svgManager - SVG manager instance
+         */
+        constructor(options) {
+            this.config = options.config;
+            this.svgManager = options.svgManager;
+        }
+        
+        /**
+         * Updates chart configuration
+         * @param {Object} configUpdate - Configuration updates
+         * @returns {boolean} Success indicator
+         */
+        updateConfig(configUpdate) {
+            this.config.mergeConfig(configUpdate);
+            
+            // Update aspect settings specifically if provided
+            if (configUpdate.aspectSettings) {
+                this.config.updateAspectSettings(configUpdate.aspectSettings);
+            }
+            
+            console.log("ChartStateManager: Updated configuration");
+            return true;
+        }
+        
+        /**
+         * Toggles the visibility of a planet
+         * @param {string} planetName - Name of the planet to toggle
+         * @param {boolean} visible - Visibility state
+         * @returns {boolean} Success indicator
+         */
+        togglePlanetVisibility(planetName, visible) {
+            this.config.togglePlanetVisibility(planetName, visible);
+            return true;
+        }
+        
+        /**
+         * Toggles the visibility of houses
+         * @param {boolean} visible - Visibility state
+         * @returns {boolean} Success indicator
+         */
+        toggleHousesVisibility(visible) {
+            this.config.toggleHousesVisibility(visible);
+            return true;
+        }
+        
+        /**
+         * Toggles the visibility of aspects
+         * @param {boolean} visible - Visibility state
+         * @returns {boolean} Success indicator
+         */
+        toggleAspectsVisibility(visible) {
+            this.config.toggleAspectsVisibility(visible);
+            return true;
+        }
+        
+        /**
+         * Sets the house system rotation angle
+         * @param {number} angle - Rotation angle in degrees
+         * @returns {boolean} Success indicator
+         */
+        setHouseRotation(angle) {
+            this.config.houseSettings.rotationAngle = angle;
+            return true;
+        }
+        
+        /**
+         * Sets the house system
+         * @param {string} systemName - Name of the house system to use
+         * @returns {boolean} Success indicator
+         */
+        setHouseSystem(systemName) {
+            return this.config.setHouseSystem(systemName);
+        }
+        
+        /**
+         * Gets the available house systems
+         * @returns {Array} Array of available house system names
+         */
+        getAvailableHouseSystems() {
+            return this.config.getAvailableHouseSystems();
+        }
+        
+        /**
+         * Gets the current house system
+         * @returns {string} Current house system name
+         */
+        getCurrentHouseSystem() {
+            return this.config.getHouseSystem();
+        }
+        
+        /**
+         * Toggles the visibility of primary planets (inner circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {boolean} Success indicator
+         */
+        togglePrimaryPlanets(visible) {
+            // Update the config settings
+            this.config.togglePrimaryPlanetsVisibility(visible);
+            
+            // Update the group visibility in the DOM if svgManager is available
+            if (this.svgManager) {
+                const primaryGroup = this.svgManager.getGroup('primaryPlanets');
+                if (primaryGroup) {
+                    primaryGroup.style.display = visible ? 'block' : 'none';
+                }
+            }
+            
+            console.log(`ChartStateManager: Primary planets ${visible ? 'enabled' : 'disabled'}`);
+            return true;
+        }
+        
+        /**
+         * Toggles the visibility of secondary planets (innermost circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {boolean} Success indicator
+         */
+        toggleSecondaryPlanets(visible) {
+            // Update the config settings
+            this.config.toggleSecondaryPlanetsVisibility(visible);
+            
+            // Update the group visibility in the DOM if svgManager is available
+            if (this.svgManager) {
+                const secondaryGroup = this.svgManager.getGroup('secondaryPlanets');
+                if (secondaryGroup) {
+                    secondaryGroup.style.display = visible ? 'block' : 'none';
+                }
+                
+                // Update the innermost circle visibility
+                const innermostCircle = document.querySelector('.chart-innermost-circle');
+                if (innermostCircle) {
+                    innermostCircle.style.display = visible ? 'block' : 'none';
+                }
+            }
+            
+            console.log(`ChartStateManager: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
+            return true;
+        }
+    }
+
+    /**
+     * ChartManager.js
+     * Main class for the nocturna-wheel.js library.
+     * Serves as the facade for all chart rendering operations.
+     */
+
+    class ChartManager {
+        /**
+         * Constructor
+         * @param {Object} options - Configuration options
+         * @param {string|Element} options.container - Container element or selector
+         * @param {Object} options.planets - Planet positions data
+         * @param {Array} options.houses - House cusps data (optional)
+         * @param {Object} options.aspectSettings - Aspect calculation settings (optional)
+         * @param {Object} options.config - Additional configuration (optional)
+         */
+        constructor(options) {
+            if (!options || !options.container) {
+                throw new Error("ChartManager: Container element or selector is required");
+            }
+
+            this.options = options;
+            this.container = typeof options.container === 'string' 
+                ? document.querySelector(options.container)
+                : options.container;
+                
+            if (!this.container) {
+                throw new Error(`ChartManager: Container not found: ${options.container}`);
+            }
+
+            // Initialize configuration
+            this.config = new ChartConfig(options.config || {});
+            
+            // Set data
+            this.planets = options.planets || {};
+            this.houses = options.houses || [];
+            
+            // Override aspect settings if provided
+            if (options.aspectSettings) {
+                this.config.updateAspectSettings(options.aspectSettings);
+            }
+            
+            // Initialize services
+            ServiceRegistry.initializeServices();
+            
+            // Initialize SVG manager with shared svgUtils instance
+            const svgUtils = ServiceRegistry.getSvgUtils();
+            this.svgManager = new SVGManager({ svgUtils });
+            
+            // Initialize component classes
+            this.renderingCoordinator = new RenderingCoordinator({
+                config: this.config,
+                svgManager: this.svgManager,
+                planets: this.planets,
+                houses: this.houses
+            });
+            
+            this.stateManager = new ChartStateManager({
+                config: this.config,
+                svgManager: this.svgManager
+            });
+            
+            console.log("ChartManager: Initialized");
+        }
+
+        /**
+         * Initializes and sets up the chart
+         * @private
+         */
+        _initialize() {
+            const svgOptions = {
+                width: this.config.svg.width,
+                height: this.config.svg.height,
+                viewBox: this.config.svg.viewBox
+            };
+            
+            // Create SVG element
+            this.svgManager.initialize(this.container, svgOptions);
+            
+            // Create standard layer groups
+            this.svgManager.createStandardGroups();
+        }
+
+        /**
+         * Renders the chart
+         * @returns {ChartManager} - Instance for chaining
+         */
+        render() {
+            if (!this.svgManager.getSVG()) {
+                this._initialize();
+            }
+            
+            // Delegate to rendering coordinator
+            this.renderingCoordinator.renderAll();
+            
+            console.log("ChartManager: Chart rendered");
+            return this;
+        }
+
+        /**
+         * Updates chart configuration
+         * @param {Object} config - New configuration
+         * @returns {ChartManager} - Instance for chaining
+         */
+        update(config) {
+            if (config.planets) {
+                this.planets = config.planets;
+                this.renderingCoordinator.updatePlanets(this.planets);
+            }
+            
+            if (config.houses) {
+                this.houses = config.houses;
+                this.renderingCoordinator.updateHouses(this.houses);
+            }
+            
+            if (config.config) {
+                this.stateManager.updateConfig(config.config);
+            }
+            
+            // Re-render the chart
+            this.render();
+            
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of a planet
+         * @param {string} planetName - Name of the planet to toggle
+         * @param {boolean} visible - Visibility state
+         * @returns {ChartManager} - Instance for chaining
+         */
+        togglePlanet(planetName, visible) {
+            this.stateManager.togglePlanetVisibility(planetName, visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of houses
+         * @param {boolean} visible - Visibility state
+         * @returns {ChartManager} - Instance for chaining
+         */
+        toggleHouses(visible) {
+            this.stateManager.toggleHousesVisibility(visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of aspects
+         * @param {boolean} visible - Visibility state
+         * @returns {ChartManager} - Instance for chaining
+         */
+        toggleAspects(visible) {
+            this.stateManager.toggleAspectsVisibility(visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Sets the house system rotation angle
+         * @param {number} angle - Rotation angle in degrees
+         * @returns {ChartManager} - Instance for chaining
+         */
+        setHouseRotation(angle) {
+            this.stateManager.setHouseRotation(angle);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Destroys the chart and cleans up resources
+         */
+        destroy() {
+            // Remove the SVG element
+            if (this.svgManager.getSVG()) {
+                this.svgManager.getSVG().remove();
+            }
+            
+            // Clear references
+            this.renderingCoordinator = null;
+            this.stateManager = null;
+            this.planets = {};
+            this.houses = [];
+            
+            console.log("ChartManager: Destroyed");
+        }
+
+        /**
+         * Updates chart data (planets, houses)
+         * @param {Object} data - Object containing new data, e.g., { planets: {...}, houses: [...] }
+         * @returns {ChartManager} - Instance for chaining
+         */
+        updateData(data) {
+            if (data.planets) {
+                // Update internal planets data
+                // Ensure it matches the format expected internally (object)
+                if (typeof data.planets === 'object' && !Array.isArray(data.planets)) {
+                    this.planets = { ...this.planets, ...data.planets };
+                    this.renderingCoordinator.updatePlanets(this.planets);
+                    console.log("ChartManager: Updated planets data.");
+                } else {
+                    console.warn("ChartManager.updateData: Invalid planets data format. Expected object.");
+                }
+            }
+            if (data.houses) {
+                 // Update internal houses data
+                 if (Array.isArray(data.houses)) {
+                     this.houses = data.houses;
+                     this.renderingCoordinator.updateHouses(this.houses);
+                     console.log("ChartManager: Updated houses data.");
+                 } else {
+                     console.warn("ChartManager.updateData: Invalid houses data format. Expected array.");
+                 }
+            }
+            // Re-render the chart with updated data
+            this.render();
+            return this;
+        }
+
+        /**
+         * Updates chart configuration (aspects, assets, etc.)
+         * @param {Object} configUpdate - Object containing configuration updates
+         * @returns {ChartManager} - Instance for chaining
+         */
+        updateConfig(configUpdate) {
+            this.stateManager.updateConfig(configUpdate);
+            
+            console.log("ChartManager: Updated configuration.");
+            // Re-render the chart with updated configuration
+            this.render();
+            return this;
+        }
+
+        /**
+         * Sets the house system
+         * @param {string} systemName - Name of the house system to use
+         * @returns {ChartManager} - Instance for chaining
+         */
+        setHouseSystem(systemName) {
+            this.stateManager.setHouseSystem(systemName);
+            this.render();
+            return this;
+        }
+        
+        /**
+         * Gets the available house systems
+         * @returns {Array} - Array of available house system names
+         */
+        getAvailableHouseSystems() {
+            return this.stateManager.getAvailableHouseSystems();
+        }
+        
+        /**
+         * Gets the current house system
+         * @returns {string} - Current house system name
+         */
+        getCurrentHouseSystem() {
+            return this.stateManager.getCurrentHouseSystem();
+        }
+
+        /**
+         * Toggles the visibility of primary planets (inner circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {ChartManager} - Instance for chaining
+         */
+        togglePrimaryPlanets(visible) {
+            this.stateManager.togglePrimaryPlanets(visible);
+            this.render();
+            return this;
+        }
+        
+        /**
+         * Toggles the visibility of secondary planets (innermost circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {ChartManager} - Instance for chaining
+         */
+        toggleSecondaryPlanets(visible) {
+            this.stateManager.toggleSecondaryPlanets(visible);
+            this.render();
+            return this;
+        }
+    }
+
+    /**
+     * NocturnaWheel.js
+     * Main class for the nocturna-wheel.js library.
+     * Serves as the facade for all chart rendering operations.
+     */
+
+    class NocturnaWheel {
+        /**
+         * Constructor
+         * @param {Object} options - Configuration options
+         * @param {string|Element} options.container - Container element or selector
+         * @param {Object} options.planets - Planet positions data
+         * @param {Array} options.houses - House cusps data (optional)
+         * @param {Object} options.aspectSettings - Aspect calculation settings (optional)
+         * @param {Object} options.config - Additional configuration (optional)
+         */
+        constructor(options) {
+            if (!options || !options.container) {
+                throw new Error("NocturnaWheel: Container element or selector is required");
+            }
+
+            this.options = options;
+            this.container = typeof options.container === 'string' 
+                ? document.querySelector(options.container)
+                : options.container;
+                
+            if (!this.container) {
+                throw new Error(`NocturnaWheel: Container not found: ${options.container}`);
+            }
+
+            // Initialize configuration
+            this.config = new ChartConfig(options.config || {});
+            
+            // Set data
+            this.planets = options.planets || {};
+            this.houses = options.houses || [];
+            
+            // Override aspect settings if provided
+            if (options.aspectSettings) {
+                this.config.updateAspectSettings(options.aspectSettings);
+            }
+            
+            // Initialize services
+            ServiceRegistry.initializeServices();
+            
+            // Initialize SVG manager with shared svgUtils instance
+            const svgUtils = ServiceRegistry.getSvgUtils();
+            this.svgManager = new SVGManager({ svgUtils });
+            
+            // Initialize renderers dictionary
+            this.renderers = {};
+            
+            console.log("NocturnaWheel: Initialized");
+        }
+
+        /**
+         * Initializes and sets up the chart
+         * @private
+         */
+        _initialize() {
+            const svgOptions = {
+                width: this.config.svg.width,
+                height: this.config.svg.height,
+                viewBox: this.config.svg.viewBox
+            };
+            
+            // Create SVG element
+            this.svgManager.initialize(this.container, svgOptions);
+            
+            // Create standard layer groups
+            this.svgManager.createStandardGroups();
+            
+            // Initialize renderers
+            this._initializeRenderers();
+        }
+
+        /**
+         * Initializes all renderers using the factory
+         * @private
+         */
+        _initializeRenderers() {
+            // Create renderer factory
+            this.rendererFactory = new RendererFactory(
+                this.config, 
+                this.svgManager.svgNS
+            );
+            
+            // Initialize zodiac renderer
+            this.renderers.zodiac = this.rendererFactory.createZodiacRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+            
+            // Initialize house renderer with house data
+            const houseCusps = this.config.getHouseCusps();
+            const houseData = (houseCusps && houseCusps.length > 0) 
+                ? houseCusps 
+                : this.houses;
+            
+            this.renderers.house = this.rendererFactory.createHouseRenderer({
+                houseData: houseData
+            });
+            
+            // Initialize planet renderer
+            this.renderers.planet = this.rendererFactory.createPlanetRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+            
+            // Initialize aspect renderer
+            this.renderers.aspect = this.rendererFactory.createAspectRenderer({
+                assetBasePath: this.config.assets.basePath
+            });
+        }
+
+        /**
+         * Renders the chart
+         */
+        render() {
+            if (!this.svgManager.getSVG()) {
+                this._initialize();
+            }
+            
+            // Clear all groups
+            Object.values(this.svgManager.getAllGroups()).forEach(group => {
+                group.innerHTML = '';
+            });
+            
+            // Render zodiac if enabled
+            if (this.config.zodiacSettings.enabled) {
+                this.renderers.zodiac.render(this.svgManager.getGroup('zodiac'));
+            }
+            
+            // Render houses if enabled
+            if (this.config.houseSettings.enabled) {
+                const houseGroup = this.svgManager.getGroup('houses');
+                const houseDivisionsGroup = this.svgManager.getGroup('houseDivisions');
+                
+                // Get the current house cusps based on selected system
+                const houseCusps = this.config.getHouseCusps();
+                if (houseCusps && houseCusps.length > 0) {
+                    // Update house renderer with current house system cusps
+                    this.renderers.house.houseData = houseCusps;
+                }
+                
+                // Render house divisions and numbers
+                this.renderers.house.renderDivisions(houseDivisionsGroup, this.config.houseSettings.rotationAngle);
+                this.renderers.house.renderNumbers(houseGroup, this.config.houseSettings.rotationAngle);
+            }
+            
+            // Render planets using the consolidated approach
+            let planetsWithCoords = [];
+            if (this.config.planetSettings.enabled) {
+                // Get the enabled states for primary and secondary planets
+                const primaryEnabled = this.config.planetSettings.primaryEnabled !== false;
+                const secondaryEnabled = this.config.planetSettings.secondaryEnabled !== false;
+                
+                // Use the consolidated renderAllPlanetTypes method
+                const renderedPlanets = this.renderers.planet.renderAllPlanetTypes({
+                    svgManager: this.svgManager,
+                    planetsData: this.planets,
+                    config: this.config,
+                    primaryEnabled: primaryEnabled,
+                    secondaryEnabled: secondaryEnabled
+                });
+                
+                // For aspect rendering, use primary planets by default
+                planetsWithCoords = renderedPlanets.primary;
+                
+                console.log(`NocturnaWheel: Rendered ${renderedPlanets.primary.length} primary planets and ${renderedPlanets.secondary.length} secondary planets`);
+            }
+            
+            // Render aspects if enabled, passing planets with coordinates
+            if (this.config.aspectSettings.enabled) {
+                this.renderers.aspect.render(this.svgManager.getGroup('aspects'), planetsWithCoords);
+            }
+            
+            console.log("NocturnaWheel: Chart rendered");
+            return this;
+        }
+
+        /**
+         * Updates chart configuration
+         * @param {Object} config - New configuration
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        update(config) {
+            if (config.planets) {
+                this.planets = config.planets;
+            }
+            
+            if (config.houses) {
+                this.houses = config.houses;
+                if (this.renderers.house) {
+                    this.renderers.house.houseData = this.houses;
+                }
+            }
+            
+            if (config.config) {
+                this.config.mergeConfig(config.config);
+            }
+            
+            // Re-render the chart
+            this.render();
+            
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of a planet
+         * @param {string} planetName - Name of the planet to toggle
+         * @param {boolean} visible - Visibility state
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        togglePlanet(planetName, visible) {
+            this.config.togglePlanetVisibility(planetName, visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of houses
+         * @param {boolean} visible - Visibility state
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        toggleHouses(visible) {
+            this.config.toggleHousesVisibility(visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Toggles the visibility of aspects
+         * @param {boolean} visible - Visibility state
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        toggleAspects(visible) {
+            this.config.toggleAspectsVisibility(visible);
+            this.render();
+            return this;
+        }
+
+        /**
+         * Sets the house system rotation angle
+         * @param {number} angle - Rotation angle in degrees
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        setHouseRotation(angle) {
+            this.config.houseSettings.rotationAngle = angle;
+            this.render();
+            return this;
+        }
+
+        /**
+         * Destroys the chart and cleans up resources
+         */
+        destroy() {
+            // Remove the SVG element
+            if (this.svgManager.getSVG()) {
+                this.svgManager.getSVG().remove();
+            }
+            
+            // Clear references
+            this.renderers = {};
+            this.planets = {};
+            this.houses = [];
+            
+            console.log("NocturnaWheel: Destroyed");
+        }
+
+        /**
+         * Updates chart data (planets, houses)
+         * @param {Object} data - Object containing new data, e.g., { planets: {...}, houses: [...] }
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        updateData(data) {
+            if (data.planets) {
+                // Update internal planets data
+                // Ensure it matches the format expected internally (object)
+                if (typeof data.planets === 'object' && !Array.isArray(data.planets)) {
+                    this.planets = { ...this.planets, ...data.planets };
+                    console.log("NocturnaWheel: Updated planets data.");
+                } else {
+                    console.warn("NocturnaWheel.updateData: Invalid planets data format. Expected object.");
+                }
+            }
+            if (data.houses) {
+                 // Update internal houses data
+                 if (Array.isArray(data.houses)) {
+                     this.houses = data.houses;
+                     // Need to inform HouseRenderer if it holds its own copy
+                     if (this.renderers.house) {
+                         this.renderers.house.houseData = this.houses;
+                     }
+                     console.log("NocturnaWheel: Updated houses data.");
+                 } else {
+                     console.warn("NocturnaWheel.updateData: Invalid houses data format. Expected array.");
+                 }
+            }
+            // Re-render the chart with updated data
+            this.render();
+            return this;
+        }
+
+        /**
+         * Updates chart configuration (aspects, assets, etc.)
+         * @param {Object} configUpdate - Object containing configuration updates
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        updateConfig(configUpdate) {
+            this.config.mergeConfig(configUpdate); // Use the existing mergeConfig method
+            
+            // Update aspect settings specifically if provided
+            if (configUpdate.aspectSettings) {
+                this.config.updateAspectSettings(configUpdate.aspectSettings);
+            }
+            
+            console.log("NocturnaWheel: Updated configuration.");
+            // Re-render the chart with updated configuration
+            this.render();
+            return this;
+        }
+
+        /**
+         * Sets the house system
+         * @param {string} systemName - Name of the house system to use
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        setHouseSystem(systemName) {
+            this.config.setHouseSystem(systemName);
+            this.render();
+            return this;
+        }
+        
+        /**
+         * Gets the available house systems
+         * @returns {Array} - Array of available house system names
+         */
+        getAvailableHouseSystems() {
+            return this.config.getAvailableHouseSystems();
+        }
+        
+        /**
+         * Gets the current house system
+         * @returns {string} - Current house system name
+         */
+        getCurrentHouseSystem() {
+            return this.config.getHouseSystem();
+        }
+
+        /**
+         * Toggles the visibility of primary planets (inner circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        togglePrimaryPlanets(visible) {
+            // Use the config's method to update the settings
+            this.config.togglePrimaryPlanetsVisibility(visible);
+            
+            // Update the group visibility in the DOM
+            const primaryGroup = this.svgManager.getGroup('primaryPlanets');
+            if (primaryGroup) {
+                primaryGroup.style.display = visible ? 'block' : 'none';
+            }
+            
+            console.log(`NocturnaWheel: Primary planets ${visible ? 'enabled' : 'disabled'}`);
+            return this;
+        }
+        
+        /**
+         * Toggles the visibility of secondary planets (innermost circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {NocturnaWheel} - Instance for chaining
+         */
+        toggleSecondaryPlanets(visible) {
+            // Use the config's method to update the settings
+            this.config.toggleSecondaryPlanetsVisibility(visible);
+            
+            // Update the group visibility in the DOM
+            const secondaryGroup = this.svgManager.getGroup('secondaryPlanets');
+            if (secondaryGroup) {
+                secondaryGroup.style.display = visible ? 'block' : 'none';
+            }
+
+            // Update the innermost circle visibility
+            const innermostCircle = document.querySelector('.chart-innermost-circle');
+            if (innermostCircle) {
+                innermostCircle.style.display = visible ? 'block' : 'none';
+            }
+            
+            console.log(`NocturnaWheel: Secondary planets ${visible ? 'enabled' : 'disabled'}`);
+            return this;
+        }
+    }
+
+    // Export for module environments or expose globally for browser
+    // if (typeof module !== 'undefined' && module.exports) {
+    // module.exports = NocturnaWheel;
+    // } else {
+    // window.NocturnaWheel = NocturnaWheel;
+    // }
+
+    /**
+     * ChartRenderer.js
+     * Responsible for rendering chart elements
+     */
+
+    class ChartRenderer {
+        /**
+         * Constructor
+         * @param {WheelChart} wheelChart - WheelChart instance
+         * @param {Object} options - Chart options
+         */
+        constructor(wheelChart, options = {}) {
+            this.wheelChart = wheelChart;  // Store reference to WheelChart instance
+            this.chart = wheelChart.chart; // Store direct reference to underlying NocturnaWheel instance
+            this.options = options;
+            this.svgUtils = new SvgUtils();
+            console.log("ChartRenderer: Initialized with chart", this.chart);
+        }
+        
+        /**
+         * Renders inner circle and planets
+         */
+        renderInnerElements() {
+            // Make sure we have a valid NocturnaWheel instance with svgManager
+            if (!this.chart || !this.chart.svgManager) {
+                console.error("ChartRenderer: Invalid chart or missing svgManager");
+                return;
+            }
+            
+            const svg = this.chart.svgManager.getSVG();
+            if (!svg) {
+                console.error("ChartRenderer: SVG not found");
+                return;
+            }
+            
+            const zodiacGroup = this.chart.svgManager.getGroup('zodiac');
+            if (!zodiacGroup) {
+                console.error("ChartRenderer: Zodiac group not found");
+                return;
+            }
+            
+            // Remove only the previous innermost circle if it exists
+            const prevCircle = zodiacGroup.querySelector('.chart-innermost-circle');
+            if (prevCircle) {
+                zodiacGroup.removeChild(prevCircle);
+            }
+
+            const centerX = this.chart.config.svg.center.x;
+            const centerY = this.chart.config.svg.center.y;
+            const c3Radius = this.chart.config.radius.innermost;     // C3
+            
+            // Only draw the innermost circle if secondary planets are enabled
+            if (this.chart.config.planetSettings.secondaryEnabled !== false) {
+                this.drawInnermostCircle(zodiacGroup, this.svgUtils, centerX, centerY, c3Radius);
+            }
+            
+            // Note: Planet rendering is now fully handled by NocturnaWheel.js
+            // using the PlanetRenderer.renderAllPlanetTypes method
+            console.log('ChartRenderer: Innermost circle rendered (if enabled). Planet rendering is now handled by NocturnaWheel.');
+        }
+        
+        /**
+         * Draws the innermost circle
+         * @param {SVGElement} zodiacGroup - SVG group for zodiac elements
+         * @param {SvgUtils} svgUtils - SVG utilities
+         * @param {number} centerX - X coordinate of center
+         * @param {number} centerY - Y coordinate of center
+         * @param {number} radius - Radius of circle
+         */
+        drawInnermostCircle(zodiacGroup, svgUtils, centerX, centerY, radius) {
+            const innermostCircle = svgUtils.createSVGElement('circle', {
+                cx: centerX,
+                cy: centerY,
+                r: radius,
+                class: 'zodiac-element chart-innermost-circle'
+            });
+            zodiacGroup.appendChild(innermostCircle);
+        }
+        
+        /**
+         * @deprecated Planet rendering is now fully handled by NocturnaWheel
+         */
+        renderPlanets(centerX, centerY, dotRadius, iconRadius) {
+            console.warn('ChartRenderer: renderPlanets is deprecated. Planet rendering is now handled by NocturnaWheel.');
+            return [];
+        }
+        
+        /**
+         * @deprecated Use renderPlanets instead
+         */
+        drawPlanetsAndIcons(svgUtils, centerX, centerY, dotRadius, iconRadius) {
+            console.warn('ChartRenderer: drawPlanetsAndIcons is deprecated, use renderPlanets instead');
+            return this.renderPlanets(centerX, centerY, dotRadius, iconRadius);
+        }
+        
+        /**
+         * @deprecated 
+         */
+        drawPlanetDot(svgUtils, planetGroup, x, y, name, color) {
+            console.warn('ChartRenderer: drawPlanetDot is deprecated');
+            // No implementation - method kept for backward compatibility
+        }
+        
+        /**
+         * @deprecated 
+         */
+        drawPlanetIcon(svgUtils, planetGroup, x, y, name) {
+            console.warn('ChartRenderer: drawPlanetIcon is deprecated');
+            // No implementation - method kept for backward compatibility
+        }
+        
+        /**
+         * @deprecated 
+         */
+        drawConnector(svgUtils, planetGroup, x1, y1, x2, y2, name, color) {
+            console.warn('ChartRenderer: drawConnector is deprecated');
+            // No implementation - method kept for backward compatibility
+        }
+    }
+
+    /**
+     * WheelChart.js
+     * Component class for rendering astrological wheel chart with customizable circles
+     */
+
+    class WheelChart {
+        /**
+         * Constructor
+         * @param {Object} options - Configuration options
+         * @param {string|Element} options.container - Container element or selector
+         * @param {Object} options.planets - Planet positions data
+         * @param {Array} options.houses - House cusps data (optional)
+         * @param {Object} options.aspectSettings - Aspect calculation settings (optional)
+         * @param {Object} options.config - Additional configuration (optional)
+         * @param {Function} [chartFactory=null] - Factory function to create the chart instance
+         *                                        Function signature: (options) => ChartInstance
+         */
+        constructor(options, chartFactory = null) {
+            if (!options || !options.container) {
+                throw new Error("WheelChart: Container element or selector is required");
+            }
+
+            this.options = options;
+            
+            // Initialize configuration
+            const config = options.config || {};
+            
+            // Use the factory function if provided
+            if (typeof chartFactory === 'function') {
+                console.log("WheelChart: Using provided chart factory function");
+                this.chart = chartFactory(options);
+            } else {
+                // Fallback to the original behavior for backward compatibility
+                console.log("WheelChart: Using default chart creation");
+                
+                // Create a new NocturnaWheel instance directly using the imported class
+                this.chart = new NocturnaWheel({
+                    ...options,
+                    config: config
+                });
+            }
+            
+            // Validate the created chart instance has required methods
+            if (!this.chart || typeof this.chart.render !== 'function') {
+                throw new Error("WheelChart: Invalid chart instance created. Missing required methods.");
+            }
+            
+            // Create the renderer
+            this.renderer = new ChartRenderer(this, options);
+            
+            console.log("WheelChart: Initialized");
+        }
+        
+        /**
+         * Renders the chart
+         * @returns {WheelChart} - Instance for chaining
+         */
+        render() {
+            // First render the base chart
+            this.chart.render();
+            
+            // Add the innermost circle after rendering the main chart
+            // Wrap in setTimeout to ensure the chart rendering has completed
+            setTimeout(() => {
+                try {
+                    console.log("WheelChart: Rendering inner elements");
+                    this.renderer.renderInnerElements();
+                } catch (error) {
+                    console.error("WheelChart: Error rendering inner elements:", error);
+                }
+            }, 0);
+            
+            console.log("WheelChart: Chart rendered with inner circle");
+            return this;
+        }
+        
+        /**
+         * Updates chart configuration
+         * @param {Object} config - New configuration
+         * @returns {WheelChart} - Instance for chaining
+         */
+        update(config) {
+            this.chart.update(config);
+            
+            // Redraw the innermost circle
+            this.renderer.renderInnerElements();
+            
+            return this;
+        }
+        
+        /**
+         * Delegates method calls to the NocturnaWheel instance
+         * @param {string} method - Method name
+         * @param {Array} args - Method arguments
+         * @returns {*} - Return value from the method
+         */
+        _delegateToChart(method, ...args) {
+            if (typeof this.chart[method] === 'function') {
+                return this.chart[method](...args);
+            }
+            throw new Error(`WheelChart: Method ${method} not found in NocturnaWheel`);
+        }
+        
+        /**
+         * Delegates method calls and redraws inner circle
+         * @param {string} method - Method name
+         * @param {Array} args - Method arguments
+         * @returns {*} - Return value from the method
+         * @private
+         */
+        _delegateAndRedraw(method, ...args) {
+            const result = this._delegateToChart(method, ...args);
+            this.renderer.renderInnerElements();
+            return result;
+        }
+        
+        // Delegate common methods to the NocturnaWheel instance
+        togglePlanet(planetName, visible) {
+            return this._delegateAndRedraw('togglePlanet', planetName, visible);
+        }
+        
+        toggleHouses(visible) {
+            return this._delegateAndRedraw('toggleHouses', visible);
+        }
+        
+        toggleAspects(visible) {
+            return this._delegateAndRedraw('toggleAspects', visible);
+        }
+        
+        /**
+         * Toggles the visibility of primary planets (inner circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {WheelChart} - Instance for chaining
+         */
+        togglePrimaryPlanets(visible) {
+            return this._delegateAndRedraw('togglePrimaryPlanets', visible);
+        }
+        
+        /**
+         * Toggles the visibility of secondary planets (innermost circle)
+         * @param {boolean} visible - Visibility state
+         * @returns {WheelChart} - Instance for chaining
+         */
+        toggleSecondaryPlanets(visible) {
+            // First delegate to NocturnaWheel instance
+            const result = this._delegateToChart('toggleSecondaryPlanets', visible);
+            
+            // Explicitly handle innermost circle visibility
+            try {
+                const container = typeof this.options.container === 'string' ?
+                    document.querySelector(this.options.container) :
+                    this.options.container;
+                    
+                if (container) {
+                    const innermostCircle = container.querySelector('.chart-innermost-circle');
+                    if (innermostCircle) {
+                        console.log(`WheelChart: Setting innermost circle display to ${visible ? 'block' : 'none'}`);
+                        innermostCircle.style.display = visible ? 'block' : 'none';
+                    } else {
+                        console.log('WheelChart: No innermost circle found to toggle visibility');
+                    }
+                }
+            } catch (error) {
+                console.error('WheelChart: Error toggling innermost circle visibility:', error);
+            }
+            
+            // Also redraw inner elements to ensure everything is in sync
+            this.renderer.renderInnerElements();
+            
+            return result;
+        }
+        
+        setHouseRotation(angle) {
+            return this._delegateAndRedraw('setHouseRotation', angle);
+        }
+        
+        destroy() {
+            return this._delegateToChart('destroy');
+        }
+        
+        setHouseSystem(systemName) {
+            return this._delegateAndRedraw('setHouseSystem', systemName);
+        }
+        
+        // Add direct access to the chart's config for convenience
+        get config() {
+            return this.chart.config;
+        }
+        
+        // Add direct access to updateData method
+        updateData(data) {
+            return this._delegateAndRedraw('updateData', data);
+        }
+        
+        // Add direct access to getCurrentHouseSystem method
+        getCurrentHouseSystem() {
+            return this.chart.getCurrentHouseSystem();
+        }
+    }
+
+    /**
+     * Nocturna Wheel JS - Main Entry Point
+     * 
+     * This file serves as the primary entry point for the Nocturna Wheel library.
+     * It provides a clean public API with ES module exports.
+     * 
+     * Factory Injection Pattern:
+     * The WheelChart supports Factory Injection for better decoupling:
+     * 
+     * ```javascript
+     * // Example usage with factory injection
+     * const chartFactory = (opts) => new CustomChart(opts);
+     * const chart = new WheelChart(options, chartFactory);
+     * ```
+     * 
+     * See examples/factory-injection-example.js for more advanced usage patterns.
+     */
+
+    // Initialize core services immediately
+    ServiceRegistry.initializeServices();
+
+    // Library version
+    const VERSION = '0.2.0';
+
+    /**
+     * Main entry point for the Nocturna Wheel development environment
+     * This file sets up the chart and handles hot module replacement for Vite
+     */
+
+    // Sample chart data - for development and testing
+    const chartData = {
+      planets: {
+        sun: { lon: 0, lat: 0, color: '#F9A825' },
+        moon: { lon: 45, lat: 0, color: '#CFD8DC' },
+        mercury: { lon: 15, lat: 0, color: '#7E57C2' },
+        venus: { lon: 30, lat: 0, color: '#26A69A' },
+        mars: { lon: 60, lat: 0, color: '#EF5350' },
+        jupiter: { lon: 90, lat: 0, color: '#5C6BC0' },
+        saturn: { lon: 120, lat: 0, color: '#455A64' },
+        uranus: { lon: 150, lat: 0, color: '#42A5F5' },
+        neptune: { lon: 180, lat: 0, color: '#29B6F6' },
+        pluto: { lon: 210, lat: 0, color: '#8D6E63' }
+      },
+      houses: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330],
+      config: {
+        zodiacSettings: {
+          enabled: true
+        },
+        houseSettings: {
+          enabled: true,
+          rotationAngle: 0
+        },
+        planetSettings: {
+          enabled: true
+        },
+        aspectSettings: {
+          enabled: true
+        }
+      }
+    };
+
+    // Chart instance
+    let chart;
+
+    /**
+     * Initialize the chart
+     */
+    function initChart() {
+      // Get the container element
+      const container = document.getElementById('chart-container');
+      
+      // Configuration for the chart
+      const options = {
+        container: container,
+        planets: chartData.planets,
+        houses: chartData.houses,
+        config: chartData.config
+      };
+      
+      // Initialize the chart with the new ChartManager
+      chart = new ChartManager(options);
+      
+      // Render the chart
+      chart.render();
+      
+      // Setup event listeners for controls
+      setupEventListeners();
+    }
+
+    /**
+     * Setup event listeners for various controls
+     */
+    function setupEventListeners() {
+      // Example: House system selector
+      const houseSystemSelect = document.getElementById('house-system');
+      if (houseSystemSelect) {
+        houseSystemSelect.addEventListener('change', (e) => {
+          chart.setHouseSystem(e.target.value);
+        });
+      }
+      
+      // Initialize secondary planets toggle to match current state (enabled)
+      const secondaryPlanetsToggle = document.getElementById('toggle-secondary-planets');
+      if (secondaryPlanetsToggle) {
+        secondaryPlanetsToggle.checked = true;
+      }
+      
+      // Add more event listeners for other controls as needed
+    }
+
+    /**
+     * Clean up resources when the module is replaced (for Vite HMR)
+     */
+    function cleanup() {
+      if (chart) {
+        chart.destroy();
+        chart = null;
+      }
+    }
+
+    // Initialize the chart when the DOM is ready
+    document.addEventListener('DOMContentLoaded', initChart);
+
+    // Handle hot module replacement for Vite
+    if (undefined) {
+      undefined.accept((newModule) => {
+        console.log('HMR update for main.js');
+        cleanup();
+        initChart();
+      });
+      
+      // Cleanup when disposing
+      undefined.dispose(() => {
+        console.log('HMR dispose for main.js');
+        cleanup();
+      });
+    }
+
+    // Default export for easier imports
+    var main = {
+        ChartManager,
+        NocturnaWheel, // For backward compatibility
+        WheelChart,
+        ChartConfig,
+        ServiceRegistry,
+        SvgUtils,
+        AstrologyUtils
+    };
+
+    exports.AstrologyUtils = AstrologyUtils;
+    exports.ChartConfig = ChartConfig;
+    exports.ChartManager = ChartManager;
+    exports.NocturnaWheel = NocturnaWheel;
+    exports.ServiceRegistry = ServiceRegistry;
+    exports.SvgUtils = SvgUtils;
+    exports.VERSION = VERSION;
+    exports.WheelChart = WheelChart;
+    exports["default"] = main;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=nocturna-wheel.umd.js.map