fix(website): address Copilot review — factual errors and broken examples

- changelog: replace '— Current' header with real release dates (3.0.2:
  2023-08-17, 3.0.1: 2023-07-20, 3.0.0: 2023-07-10)
- changelog: remove false claim that AstroData/AspectData/Dignity are
  exported from the package entry point (only Chart, AspectCalculator,
  and Settings are)
- changelog: add real 3.0.2 fix: SNode and Fortune symbol positions
- changelog: correct ADD_CLICK_AREA entry — remove mention of the
  non-existent radix.on() event API
- click-events: rewrite guide to use real DOM addEventListener pattern
  with predictable element IDs ({chartId}-radix-planets-{Name} /
  {chartId}-radix-cusps-{index}) instead of fictional radix.on() API
- custom.css: rename .chart-demo selectors to .chart-demo-wrapper to
  match the class actually used by ChartDemo.astro (dead CSS fix)
- vue.md: replace broken `import type { AstroData }` (not exported) with
  derived type: Parameters<InstanceType<typeof Chart>['radix']>[0]
- ChartDemo.astro: fix package name in all 4 code snippets
  ('astrochart' → '@astrodraw/astrochart')
- ChartDemo.astro: fix animate snippet — replace no-arg transit.animate()
  call with a valid call showing all required parameters

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

Author: afucher

website/src/components/ChartDemo.astro

@@ -28,26 +28,30 @@ const {
 // Generate code snippet based on mode
 const getCodeSnippet = () => {
   if (mode === 'radix') {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 chart.radix(data)`
   } else if (mode === 'transit') {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 chart.radix(radixData).transit(transitData)`
   } else if (mode === 'aspects') {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 chart.radix(data).aspects()`
   } else {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 const transit = chart.radix(radixData).transit(transitData)
-transit.animate()`
+
+// animate(targetData, durationSeconds, isReverse, onComplete)
+transit.animate(newTransitData, 2, false, () => {
+  console.log('animation complete')
+})`
   }
 }
 

website/src/content/docs/changelog.md

@@ -12,20 +12,17 @@ This project adheres to [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ---
 
-## [3.0.2] — Current
+## [3.0.2] — 2023-08-17
 
 ### Fixed
 - Corrected planet collision-avoidance logic when `SYMBOL_SCALE` is set to a value other than `1`
 - Resolved an edge case where `DIGNITIES_EXACT_EXALTATION_DEFAULT` positions were not applied when custom dignity data was provided
 - Minor SVG attribute type-coercion fixes for strict browser environments
-
-### Changed
-- Improved TypeScript type exports — `AstroData`, `AspectData`, `Dignity`, and `Settings` interfaces are now all publicly exported from the package entry point
-- Internal SVG group IDs (`ID_*` settings) are now overridable without side-effects
+- Fixed `SNode` and `Fortune` symbol positions being rendered at incorrect ecliptic angles
 
 ---
 
-## [3.0.1]
+## [3.0.1] — 2023-07-20
 
 ### Fixed
 - Transit chart rendering when cusps array contains boundary values at 0° or 360°
@@ -38,12 +35,12 @@ This project adheres to [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ---
 
-## [3.0.0]
+## [3.0.0] — 2023-07-10
 
 ### Added
 - Full TypeScript rewrite — all public APIs are typed; ships with `.d.ts` declaration files
 - `CUSTOM_SYMBOL_FN` setting for replacing any planet or sign symbol with a custom SVG element
-- `ADD_CLICK_AREA` setting plus `radix.on('click:planet', ...)` and `radix.on('click:cusp', ...)` event API
+- `ADD_CLICK_AREA` setting — adds transparent `<rect>` hit areas around planet and cusp symbols, enabling external DOM `click` event listeners
 - `STROKE_ONLY` rendering mode for monochrome / print output
 - `SHOW_DIGNITIES_TEXT` setting and configurable dignity label characters (`r`, `d`, `e`, `E`, `f`)
 - `ANIMATION_CUSPS_ROTATION_SPEED` setting for transit rotation animation

website/src/content/docs/guides/click-events.md

@@ -1,11 +1,11 @@
 ---
 title: Click Events
-description: Add interactivity to chart elements with click event handlers.
+description: Add interactivity to chart elements with click event listeners.
 ---
 
 # Click Events
 
-AstroChart can fire events when a user clicks on a planet or cusp. You must opt-in by setting `ADD_CLICK_AREA: true` when constructing the chart — without this flag no click areas are added and no events will fire.
+AstroChart supports click interactivity via the `ADD_CLICK_AREA` setting. When enabled, transparent `<rect>` hit areas are rendered on top of each planet and cusp symbol. You attach standard DOM `click` listeners to those elements using their predictable `id` attributes.
 
 ---
 
@@ -16,39 +16,93 @@ Pass `ADD_CLICK_AREA: true` in your settings object:
 ```javascript
 import { Chart } from '@astrodraw/astrochart'
 
-const settings = {
-  ADD_CLICK_AREA: true
-}
+const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
+chart.radix(data)
+```
+
+Without this setting no `<rect>` elements are rendered and there are no click targets.
+
+---
+
+## How Click Areas Work
+
+When `ADD_CLICK_AREA: true` is set, AstroChart injects a transparent `<rect>` element
+on top of each planet symbol and each cusp. These elements get predictable `id` attributes
+derived from the chart container `id` and the `ID_*` settings:
+
+| Element | ID pattern | Example (chart id = `'chart'`) |
+|---|---|---|
+| Planet | `{chartId}-radix-planets-{PlanetName}` | `chart-radix-planets-Sun` |
+| Cusp | `{chartId}-radix-cusps-{index}` (0-based) | `chart-radix-cusps-0` (house 1) |
+
+> If you override `ID_RADIX`, `ID_POINTS`, or `ID_CUSPS` in your settings, the IDs
+> change accordingly — update your selectors to match.
+
+---
+
+## Listening for a Single Planet Click
+
+```javascript
+import { Chart } from '@astrodraw/astrochart'
+
+const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
+chart.radix(data)
 
-const chart = new Chart('chart', 600, 600, settings)
-const radix = chart.radix(data)
+document.getElementById('chart-radix-planets-Sun')
+  ?.addEventListener('click', (event) => {
+    console.log('Sun clicked', event)
+  })
 ```
 
 ---
 
-## Listening for Planet Clicks
+## Listening for All Planets via Event Delegation
 
-Use `radix.on('click:planet', handler)` to respond when a planet symbol is clicked. The handler receives the planet name and the original DOM `MouseEvent`:
+Attach one listener to the SVG container and inspect the target `id` to determine which
+planet was clicked:
 
 ```javascript
-radix.on('click:planet', (name, event) => {
-  console.log('Planet clicked:', name)
-  console.log('DOM event:', event)
+import { Chart } from '@astrodraw/astrochart'
+
+const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
+chart.radix(data)
+
+document.getElementById('chart')?.addEventListener('click', (event) => {
+  const id = (event.target as Element)?.id ?? ''
+  const match = id.match(/^chart-radix-planets-(.+)$/)
+  if (match) {
+    const planetName = match[1]
+    console.log('Planet clicked:', planetName)
+  }
 })
 ```
 
-The `name` argument matches the planet key from your `AstroData` (e.g. `'Sun'`, `'Moon'`, `'Mars'`).
-
 ---
 
 ## Listening for Cusp Clicks
 
-Use `radix.on('click:cusp', handler)` to respond when a house cusp is clicked. The handler receives the zero-based cusp index (0–11) and the `MouseEvent`:
+Cusp indices are zero-based — house 1 = index `0`, house 12 = index `11`.
 
 ```javascript
-radix.on('click:cusp', (index, event) => {
-  const houseNumber = index + 1
-  console.log('House clicked:', houseNumber)
+import { Chart } from '@astrodraw/astrochart'
+
+const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
+chart.radix(data)
+
+// House 1 (index 0)
+document.getElementById('chart-radix-cusps-0')
+  ?.addEventListener('click', (event) => {
+    console.log('House 1 cusp clicked', event)
+  })
+
+// All cusps via delegation
+document.getElementById('chart')?.addEventListener('click', (event) => {
+  const id = (event.target as Element)?.id ?? ''
+  const match = id.match(/^chart-radix-cusps-(\d+)$/)
+  if (match) {
+    const houseNumber = Number(match[1]) + 1
+    console.log('House clicked:', houseNumber)
+  }
 })
 ```
 
@@ -61,28 +115,33 @@ import { Chart } from '@astrodraw/astrochart'
 
 const data = {
   planets: {
-    Sun:     [120.5],
-    Moon:    [45.2],
-    Mercury: [110.3],
-    Venus:   [98.7, -1], // retrograde
-    Mars:    [200.1],
+    Sun:     [120.5, 0],
+    Moon:    [45.2, 0],
+    Mercury: [110.3, 0],
+    Venus:   [98.7, -1],
+    Mars:    [200.1, 0],
   },
   cusps: [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
 }
 
 const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
-const radix = chart.radix(data)
-
-// Planet click — show a tooltip or highlight
-radix.on('click:planet', (name, event) => {
-  event.stopPropagation()
-  alert(`You clicked: ${name}`)
-})
-
-// Cusp click — display house info
-radix.on('click:cusp', (index, event) => {
-  event.stopPropagation()
-  console.log(`House ${index + 1} cusp starts at ${data.cusps[index]}°`)
+chart.radix(data)
+
+// Event delegation — handles all planets and cusps with one listener
+document.getElementById('chart')?.addEventListener('click', (event) => {
+  const id = (event.target as Element)?.id ?? ''
+
+  const planetMatch = id.match(/^chart-radix-planets-(.+)$/)
+  if (planetMatch) {
+    alert(`You clicked: ${planetMatch[1]}`)
+    return
+  }
+
+  const cuspMatch = id.match(/^chart-radix-cusps-(\d+)$/)
+  if (cuspMatch) {
+    const houseNumber = Number(cuspMatch[1]) + 1
+    console.log(`House ${houseNumber} cusp starts at ${data.cusps[Number(cuspMatch[1])]}°`)
+  }
 })
 ```
 
@@ -96,15 +155,18 @@ HTML:
 
 ## Notes
 
-- **`ADD_CLICK_AREA: true` is required.** If this setting is omitted or set to `false`, no click areas are rendered and the `on()` handlers will never fire.
-- Events are standard DOM `MouseEvent` objects so you have access to `event.target`, `event.clientX`, `event.clientY`, etc.
-- The `click:planet` event fires for all planets present in your `AstroData.planets` map.
-- The `click:cusp` index is zero-based — house 1 is index `0`, house 12 is index `11`.
+- **`ADD_CLICK_AREA: true` is required.** Without it no transparent hit areas are rendered.
+- The click target is the `<rect>` element, not the planet symbol itself. Use the `id`
+  attribute on `event.target` to identify which planet or cusp was clicked.
+- Events are standard DOM `MouseEvent` objects — `event.clientX`, `event.clientY`,
+  `event.target`, etc. are all available.
+- If you customise `ID_RADIX`, `ID_POINTS`, or `ID_CUSPS` in your settings, the element
+  IDs change. Adjust your regex patterns or selectors accordingly.
 
 ---
 
 ## Next Steps
 
 - **[Custom Settings](./custom-settings)** — Configure `ADD_CLICK_AREA` and other options
 - **[Framework Integrations](./frameworks/react)** — Use click events with React, Vue, and Angular
-- **[API Reference](../api/chart)** — See all chart methods
+- **[Settings API Reference](../api/settings)** — Full settings type documentation

website/src/content/docs/guides/frameworks/vue.md

@@ -17,7 +17,8 @@ Use a template ref and `onMounted`/`onUnmounted` to manage the chart lifecycle:
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { Chart } from '@astrodraw/astrochart'
-import type { AstroData } from '@astrodraw/astrochart'
+
+type AstroData = Parameters<InstanceType<typeof Chart>['radix']>[0]
 
 interface Props {
   data: AstroData

website/src/styles/custom.css

@@ -17,7 +17,7 @@
 }
 
 /* Chart demo containers */
-.chart-demo {
+.chart-demo-wrapper {
   display: flex;
   justify-content: center;
   margin: 2rem 0;
@@ -28,13 +28,13 @@
   padding: 1.5rem;
 }
 
-:root[data-theme="dark"] .chart-demo {
+:root[data-theme="dark"] .chart-demo-wrapper {
   background: hsl(240, 15%, 14%);
   border-color: hsl(240, 20%, 25%);
   box-shadow: 0 2px 16px 0 hsl(240, 40%, 5%, 0.6);
 }
 
-.chart-demo svg {
+.chart-demo-wrapper svg {
   max-width: 100%;
   height: auto;
 }