@eaprelsky/nocturna-wheel 0.2.0

package/dist/nocturna-wheel.es.js

@@ -0,0 +1,4580 @@
+/**
+ * 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 (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    console.log('HMR update for main.js');
+    cleanup();
+    initChart();
+  });
+  
+  // Cleanup when disposing
+  import.meta.hot.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
+};
+
+export { AstrologyUtils, ChartConfig, ChartManager, NocturnaWheel, ServiceRegistry, SvgUtils, VERSION, WheelChart, main as default };
+//# sourceMappingURL=nocturna-wheel.es.js.map