@eaprelsky/nocturna-wheel 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Nocturna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,250 @@
+# Nocturna Wheel
+
+A JavaScript library for rendering astrological natal charts.
+
+## Features
+
+- Responsive SVG-based chart rendering
+- Zodiac sign display with customizable styling
+- House system rendering with multiple system options
+- Planet placement with customizable icons and colors
+- Aspect calculation and visualization
+- Interactive tooltips for celestial objects
+
+## Installation
+
+### Direct Script Include
+
+```html
+<!-- Include the Nocturna Wheel stylesheet -->
+<link rel="stylesheet" href="path/to/nocturna-wheel.css">
+
+<!-- Include the Nocturna Wheel library -->
+<script src="path/to/nocturna-wheel.min.js"></script>
+```
+
+### NPM Installation
+
+```bash
+npm install nocturna-wheel
+```
+
+## Basic Usage
+
+### ES Module (Recommended)
+
+```javascript
+import { WheelChart } from 'nocturna-wheel';
+
+const chart = new WheelChart({
+  container: "#chart-container",
+  planets: {
+    sun: { lon: 85.83 },
+    moon: { lon: 133.21 }
+  },
+  houses: [
+    { lon: 300.32 },  // 1st house cusp
+    { lon: 330.15 },  // 2nd house cusp
+    { lon: 355.24 },  // 3rd house cusp
+    { lon: 20.32 },   // 4th house cusp
+    { lon: 45.15 },   // 5th house cusp
+    { lon: 75.24 },   // 6th house cusp
+    { lon: 120.32 },  // 7th house cusp
+    { lon: 150.15 },  // 8th house cusp
+    { lon: 175.24 },  // 9th house cusp
+    { lon: 200.32 },  // 10th house cusp
+    { lon: 225.15 },  // 11th house cusp
+    { lon: 255.24 }   // 12th house cusp
+  ]
+});
+
+chart.render();
+```
+
+### Browser Script
+
+```html
+<div id="chart-container"></div>
+
+<script>
+  // The library exports a NocturnaWheel object with all components
+  const { WheelChart } = NocturnaWheel;
+  
+  const chart = new WheelChart({
+    container: "#chart-container",
+    planets: {
+      sun: { lon: 85.83 },
+      moon: { lon: 133.21 }
+    },
+    houses: [
+      { lon: 300.32 },  // 1st house cusp
+      { lon: 330.15 },  // 2nd house cusp
+      { lon: 355.24 },  // 3rd house cusp
+      { lon: 20.32 },   // 4th house cusp
+      { lon: 45.15 },   // 5th house cusp
+      { lon: 75.24 },   // 6th house cusp
+      { lon: 120.32 },  // 7th house cusp
+      { lon: 150.15 },  // 8th house cusp
+      { lon: 175.24 },  // 9th house cusp
+      { lon: 200.32 },  // 10th house cusp
+      { lon: 225.15 },  // 11th house cusp
+      { lon: 255.24 }   // 12th house cusp
+    ]
+  });
+  
+  chart.render();
+</script>
+```
+
+## API Documentation
+
+### WheelChart Class
+
+Main class for creating and managing astrological charts.
+
+#### Constructor Options
+
+- `container`: String selector or DOM element for the chart container
+- `planets`: Object containing planet positions and properties
+- `houses`: Array of house cusp positions
+- `aspectSettings`: Object with aspect calculation settings
+- `config`: Additional configuration options
+
+```javascript
+const chart = new NocturnaWheel.WheelChart({
+  container: "#chart-container",
+  planets: {
+    sun: { lon: 85.83, color: "#ff0000" },
+    moon: { lon: 133.21 }
+  },
+  houses: [{ lon: 300.32 }, ...],
+  aspectSettings: {
+    enabled: true,
+    orb: 6,
+    types: {
+      conjunction: { angle: 0, orb: 8, color: "#000000", enabled: true }
+    }
+  },
+  config: {
+    zodiacSettings: { enabled: true },
+    planetSettings: { enabled: true }
+  }
+});
+```
+
+#### Methods
+
+- `render()`: Renders the chart
+- `update(config)`: Updates chart configuration
+- `togglePlanet(name, visible)`: Toggles visibility of a planet
+- `toggleHouses(visible)`: Toggles visibility of houses
+- `toggleAspects(visible)`: Toggles visibility of aspects
+- `togglePrimaryPlanets(visible)`: Toggles primary planets
+- `toggleSecondaryPlanets(visible)`: Toggles secondary planets
+- `setHouseRotation(angle)`: Sets house system rotation
+- `setHouseSystem(name)`: Changes the house system
+- `destroy()`: Removes the chart and cleans up resources
+
+## Advanced Configuration
+
+### ChartConfig Options
+
+```javascript
+const chartConfig = {
+  // Astronomical data
+  astronomicalData: {
+    ascendant: 0,
+    mc: 90,
+    latitude: 51.5,
+    houseSystem: "Placidus"
+  },
+  
+  // Aspect settings
+  aspectSettings: {
+    enabled: true,
+    orb: 6,
+    types: {
+      conjunction: { angle: 0, orb: 8, color: "#ff0000", enabled: true },
+      opposition: { angle: 180, orb: 8, color: "#0000ff", enabled: true }
+    }
+  },
+  
+  // Visual settings
+  zodiacSettings: {
+    enabled: true,
+    colors: {
+      aries: "#ff6666",
+      taurus: "#66cc66"
+      // Other signs...
+    }
+  },
+  
+  // SVG dimensions
+  svg: {
+    width: 460,
+    height: 460,
+    viewBox: "0 0 460 460",
+    center: { x: 230, y: 230 }
+  },
+  
+  // Asset paths
+  assets: {
+    basePath: "./assets/",
+    zodiacIconPath: "svg/zodiac/"
+  }
+};
+```
+
+## Library Integration
+
+The Nocturna Wheel library is available as both UMD and ES modules bundles for easy integration into modern web applications.
+
+### Using with Module Bundlers (Webpack, Rollup, Vite)
+
+```javascript
+// Import specific components
+import { WheelChart, ChartConfig } from 'nocturna-wheel';
+
+// Create a chart instance
+const chart = new WheelChart({
+  container: '#chart-container',
+  planets: {
+    sun: { lon: 85.83 },
+    moon: { lon: 133.21 }
+  }
+});
+
+// Render the chart
+chart.render();
+```
+
+### Using with Factory Injection Pattern
+
+The library supports Factory Injection for better decoupling and testability:
+
+```javascript
+import { WheelChart, NocturnaWheel } from 'nocturna-wheel';
+
+// Create a custom factory
+const chartFactory = (options) => {
+  console.log("Creating chart with custom factory");
+  return new NocturnaWheel({
+    ...options,
+    // Apply custom configurations
+    config: {
+      ...options.config,
+      theme: 'dark'
+    }
+  });
+};
+
+// Use the factory when creating WheelChart
+const chart = new WheelChart(options, chartFactory);
+chart.render();
+```
+
+See MODULE_ARCHITECTURE.md for more details on the library's architecture.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details. 

package/dist/assets/css/demo.css

@@ -0,0 +1,466 @@
+:root {
+    --nocturna-primary: #79a0c1;
+    --nocturna-secondary: #6c757d;
+    --nocturna-dark: #212529;
+    --nocturna-light: #f8f9fa;
+    --nocturna-hover: #6789ab;
+    
+    /* Default stroke widths for aspects */
+    --aspect-conjunction-width: 1px;
+    --aspect-opposition-width: 1px;
+    --aspect-trine-width: 1px;
+    --aspect-square-width: 1px;
+    --aspect-sextile-width: 1px;
+}
+
+body {
+    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: #f8f9fa;
+    color: var(--nocturna-dark);
+    line-height: 1.4;
+}
+
+.navbar {
+    background-color: #ffffff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    padding: 0.25rem 0;
+    margin-bottom: 0.25rem;
+}
+
+.navbar-brand {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    height: 32px;
+    overflow: hidden;
+}
+
+.logo {
+    height: 48px;
+    width: auto;
+    max-width: 160px;
+    object-fit: contain;
+}
+
+.brand-text {
+    margin-left: 0.5rem;
+    font-size: 0.9rem;
+    color: #555;
+    font-weight: 400;
+}
+
+.navbar-nav .nav-item {
+    margin: 0 0.25rem;
+}
+
+.navbar-nav .nav-link {
+    padding: 0.25rem 0.5rem;
+}
+
+.navbar-nav .nav-link:hover, 
+.navbar-nav .nav-link:focus {
+    color: var(--nocturna-primary);
+}
+
+.navbar-nav .nav-link.active {
+    color: var(--nocturna-primary);
+    font-weight: 600;
+}
+
+.login-btn {
+    background-color: var(--nocturna-primary);
+    color: #ffffff;
+    border: none;
+    font-weight: 500;
+    padding: 0.5rem 1.25rem;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.login-btn:hover, 
+.login-btn:focus {
+    background-color: var(--nocturna-hover);
+    color: #ffffff;
+}
+
+.main-container {
+    padding-top: 0;
+}
+
+.demo-card {
+    background-color: #fff;
+    border-radius: 6px;
+    padding: 1rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    margin-bottom: 0.5rem;
+}
+
+.intro-card {
+    padding: 0.5rem 0.75rem;
+    margin-bottom: 0.5rem;
+}
+
+.intro-card .demo-title {
+    font-size: 1.1rem;
+    margin-bottom: 0.35rem;
+    padding-bottom: 0.35rem;
+}
+
+.intro-card p {
+    font-size: 0.8rem;
+    margin-bottom: 0;
+    line-height: 1.2;
+}
+
+.demo-title {
+    margin-bottom: 0.75rem;
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: #333;
+    padding-bottom: 0.35rem;
+    border-bottom: 1px solid rgba(121, 160, 193, 0.2);
+}
+
+.chart-container {
+    height: 420px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.control-panel {
+    background-color: #fff;
+    border-radius: 6px;
+    padding: 0.75rem;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    height: 420px;
+    overflow-y: auto;
+}
+
+.control-section {
+    margin-bottom: 10px;
+    border: 1px solid rgba(121, 160, 193, 0.2);
+    border-radius: 4px;
+    padding: 0.5rem;
+}
+
+.control-title {
+    font-weight: 600;
+    margin-bottom: 6px;
+    color: #333;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.control-title i {
+    transition: transform 0.3s ease;
+}
+
+.control-title.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.planet-checkbox, .aspect-checkbox {
+    margin-right: 5px;
+}
+
+footer {
+    background-color: var(--nocturna-dark);
+    color: var(--nocturna-light);
+    padding: 20px 0;
+    margin-top: 2rem;
+}
+
+.github-link {
+    color: var(--nocturna-light);
+    text-decoration: none;
+    transition: color 0.3s;
+}
+
+.github-link:hover {
+    color: #fff;
+}
+
+.rotation-control {
+    margin-top: 15px;
+}
+
+.btn-primary {
+    background-color: var(--nocturna-primary);
+    border-color: var(--nocturna-primary);
+    padding: 0.6rem 1.5rem;
+    font-weight: 500;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.btn-primary:hover {
+    background-color: var(--nocturna-hover);
+    border-color: var(--nocturna-hover);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form-check-input:checked {
+    background-color: var(--nocturna-primary);
+    border-color: var(--nocturna-primary);
+}
+
+.code-block {
+    background-color: #f8f9fa;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 15px;
+}
+
+/* Custom styles for color pickers */
+.color-picker-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.color-preview {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.color-preview input[type="color"] {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+}
+
+.section-body {
+    padding-top: 10px;
+}
+
+.planet-item, .aspect-item {
+    margin-bottom: 8px;
+    background-color: rgba(248, 249, 250, 0.5);
+    padding: 6px;
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+}
+
+.controls-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    margin-top: 6px;
+}
+
+.control-group {
+    flex: 1;
+    min-width: 100px;
+}
+
+.control-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #666;
+    margin-bottom: 2px;
+}
+
+.form-check {
+    margin-bottom: 0.25rem;
+}
+
+.form-check-label {
+    font-size: 0.85rem;
+}
+
+/* CSS to control aspect line thickness */
+#chart-container svg line[stroke="#FF0000"],
+#chart-container svg path[stroke="#FF0000"] {
+    stroke-width: var(--aspect-opposition-width);
+}
+
+#chart-container svg line[stroke="#008000"],
+#chart-container svg path[stroke="#008000"] {
+    stroke-width: var(--aspect-trine-width);
+}
+
+/* Additional styling for specific aspect types based on color and styles */
+#chart-container svg line[stroke-dasharray],
+#chart-container svg path[stroke-dasharray] {
+    stroke-width: var(--aspect-square-width);
+}
+
+/* The most specific selector for aspects */
+#chart-container svg g[id^="aspects"] line,
+#chart-container svg g[class*="aspect"] line {
+    stroke-width: var(--aspect-sextile-width);
+}
+
+/* Individual styling for each aspect type to override any shared colors */
+#chart-container svg .aspect-line-opposition {
+    stroke-width: var(--aspect-opposition-width) !important;
+}
+
+#chart-container svg .aspect-line-trine {
+    stroke-width: var(--aspect-trine-width) !important;
+}
+
+#chart-container svg .aspect-line-square {
+    stroke-width: var(--aspect-square-width) !important;
+}
+
+#chart-container svg .aspect-line-sextile {
+    stroke-width: var(--aspect-sextile-width) !important;
+}
+
+#chart-container svg .aspect-line-conjunction {
+    stroke-width: var(--aspect-conjunction-width) !important;
+}
+
+/* Additional style to ensure specificity */
+.aspect-line-thickness-applied {
+    transition: stroke-width 0.2s ease;
+}
+
+.control-group {
+    margin-bottom: 15px;
+}
+
+.form-select-sm {
+    height: calc(1.4em + 0.5rem + 2px);
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+    font-size: 0.8rem;
+    border-radius: 0.2rem;
+}
+
+.form-select:focus {
+    border-color: var(--nocturna-primary);
+    box-shadow: 0 0 0 0.25rem rgba(121, 160, 193, 0.25);
+}
+
+#house-system-description {
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.25rem;
+    min-height: 2.4rem;
+    display: block;
+}
+
+.row {
+    --bs-gutter-x: 0.75rem;
+    --bs-gutter-y: 0.75rem;
+}
+
+@media (min-width: 992px) {
+    .g-4 {
+        --bs-gutter-x: 0.75rem;
+        --bs-gutter-y: 0.75rem;
+    }
+} /* Fix for aspect selector overlap issues */
+.aspect-item .form-check {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 6px;
+    position: relative;
+}
+
+.aspect-item .form-check-input {
+    margin-top: 3px;
+    flex-shrink: 0;
+    z-index: 1;
+    margin-right: 8px;
+}
+
+.aspect-item .form-check-label {
+    display: flex;
+    align-items: center;
+    padding-left: 0;
+    position: relative;
+    z-index: 1;
+}
+
+.aspect-item .aspect-name {
+    padding-left: 2px;
+    display: inline-block;
+    display: flex;
+    align-items: center;
+}
+
+.aspect-indicator {
+    display: inline-block; 
+    width: 12px; 
+    height: 12px;
+    margin-right: 6px;
+    border-radius: 2px;
+    border: 1px solid #ccc;
+    flex-shrink: 0;
+}
+
+/* Ensure controls row has enough space and doesn't overlap */
+.aspect-item .controls-row {
+    margin-top: 8px;
+    padding-top: 6px;
+    border-top: 1px solid rgba(0,0,0,0.05);
+}
+
+/* Ensure color picker doesn't overlap */
+.aspect-item .color-picker-wrapper {
+    margin-top: 2px;
+}
+
+/* Fix Line Style dropdowns layout */
+.aspect-item .control-group {
+    margin-bottom: 8px;
+}
+
+/* Visually hidden class for accessibility */
+.visually-hidden {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip: rect(0, 0, 0, 0) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+}
+
+/* Fix for aspect item spacing */
+#aspect-types {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+/* Additional styling for aspect types container */
+.aspect-types-container {
+    padding-top: 4px;
+    max-height: 280px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+}
+
+/* Ensure aspect items are well-spaced */
+.aspect-item {
+    padding: 8px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+    background-color: rgba(248, 249, 250, 0.7);
+}
+
+/* Fix form-check alignment */
+.form-check {
+    display: flex;
+    align-items: flex-start;
+}