## ADDED Requirements

### Requirement: Refs for event handler closure values
The CandleChart component SHALL use `useRef` for state values that are read inside event handlers (`drawingState`, `selectedLineId`, `dragState`, `annotations`). The ref SHALL be updated alongside every `setState` call. Event handlers SHALL read from the ref instead of the closure variable.

#### Scenario: Click handler reads current state
- **WHEN** the user clicks on the chart after state has changed
- **THEN** the click handler reads the current value from the ref (not a stale closure value)

#### Scenario: Reduced re-subscription frequency
- **WHEN** refs are used for mutable state in event handlers
- **THEN** the `useEffect` dependency array for chart event subscriptions is smaller, reducing re-subscription frequency

### Requirement: Theme change without chart re-creation
The CandleChart component SHALL apply theme changes using `chart.applyOptions()` instead of destroying and re-creating the entire chart instance. This preserves scroll position, zoom level, and attached primitives.

#### Scenario: Theme toggle preserves state
- **WHEN** the user toggles between light and dark theme
- **THEN** the chart colors update without losing scroll position, zoom level, or annotation primitives

### Requirement: Dynamic candle interval detection
The CandleChart component SHALL determine the actual candle interval from the data (by examining the time difference between consecutive candles) instead of hardcoding 60 seconds. The detected interval SHALL be used for span annotation iteration loops.

#### Scenario: 1-minute candles
- **WHEN** candle data has 60-second intervals
- **THEN** the span iteration step is 60 seconds

#### Scenario: 1-hour candles
- **WHEN** candle data has 3600-second intervals
- **THEN** the span iteration step is 3600 seconds (not 60)

#### Scenario: No performance degradation on high timeframes
- **WHEN** iterating over a span on daily candles
- **THEN** the loop iterates over actual candle count (not 1440x more iterations)

### Requirement: Named constants for magic numbers
The CandleChart component SHALL extract hardcoded magic numbers (8px padding, 60s interval, color values) into named constants at the module level.

#### Scenario: Constants used instead of magic numbers
- **WHEN** the CandleChart source is inspected
- **THEN** magic numbers like `8`, `60`, hardcoded colors are replaced with descriptive constant names

### Requirement: Module-level empty Set default
The `new Set<string>()` default prop value SHALL be defined as a module-level constant instead of being recreated on every render.

#### Scenario: Stable default reference
- **WHEN** CandleChart renders without `hiddenLabels` prop
- **THEN** it uses a module-level `EMPTY_SET` constant (same reference across renders)
