refactor: simplify state structure by removing AxesConfig wrapper

src/components/table.js

@@ -149,7 +149,7 @@ export function setupSpectrogramImage(instance, imageUrl) {
  */
 export function updateSVGLayout(instance) {
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
 
   if (!naturalWidth || !naturalHeight) {
     return
@@ -208,7 +208,7 @@ export function updateSVGLayout(instance) {
 export function applyZoomTransform(instance) {
   const { level, centerX, centerY } = instance.state.zoom
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
 
   if (!instance.spectrogramImage) {
     return
@@ -273,7 +273,7 @@ export function renderAxes(instance) {
   instance.axesGroup.innerHTML = ''
 
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
 
   if (!naturalWidth || !naturalHeight) {
     return
@@ -297,7 +297,7 @@ export function renderAxes(instance) {
 export function calculateVisibleDataRange(instance) {
   const { timeMin, timeMax, freqMin, freqMax } = instance.state.config
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
   const zoomLevel = instance.state.zoom.level
 
   if (zoomLevel === 1.0) {

src/core/events.js

@@ -25,7 +25,7 @@ function screenToDataWithZoom(instance, event) {
   const svgCoords = screenToSVGCoordinates(screenX, screenY, instance.svg, instance.state.imageDetails)
 
   // Convert to data coordinates (accounting for margins and zoom)
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
   const zoomLevel = instance.state.zoom.level
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
 

src/core/keyboardControl.js

@@ -166,7 +166,7 @@ function moveSelectedMarker(instance, markerId, movement) {
     instance.state.config,
     instance.state.imageDetails,
     instance.state.rate,
-    instance.state.axes.margins
+    instance.state.margins
   )
 
   // Apply movement in SVG space
@@ -182,7 +182,7 @@ function moveSelectedMarker(instance, markerId, movement) {
     instance.state.config,
     instance.state.imageDetails,
     instance.state.rate,
-    instance.state.axes.margins
+    instance.state.margins
   )
 
   // Update marker position
@@ -242,7 +242,7 @@ function moveSelectedHarmonicSet(instance, harmonicSetId, movement) {
     // Convert current anchor time to SVG coordinates
     const { naturalHeight } = instance.state.imageDetails
     const { timeMin, timeMax } = instance.state.config
-    const margins = instance.state.axes.margins
+    const margins = instance.state.margins
 
     // Calculate current anchor position in SVG space
     const normalizedTime = 1.0 - (harmonicSet.anchorTime - timeMin) / (timeMax - timeMin)

src/core/state.js

@@ -58,13 +58,11 @@ export const initialState = {
     width: 0,
     height: 0
   },
-  axes: {
-    margins: {
-      left: 60,    // Space for time axis labels
-      bottom: 50,  // Space for frequency axis labels  
-      right: 15,   // Small right margin
-      top: 15      // Small top margin
-    }
+  margins: {
+    left: 60,    // Space for time axis labels
+    bottom: 50,  // Space for frequency axis labels  
+    right: 15,   // Small right margin
+    top: 15      // Small top margin
   },
   // Simple zoom state for transform-based zoom
   zoom: {

src/modes/BaseMode.js

@@ -186,7 +186,7 @@ export class BaseMode {
    */
   getViewport() {
     return {
-      margins: this.instance.state.axes.margins,
+      margins: this.instance.state.margins,
       imageDetails: this.instance.state.imageDetails,
       config: this.instance.state.config,
       zoom: this.instance.state.zoom

src/modes/doppler/DopplerMode.js

@@ -712,7 +712,7 @@ export class DopplerMode extends BaseMode {
     this.instance.cursorGroup.appendChild(path)
 
     // Vertical extensions - clip to intersection of zoomed view and spectrogram data area
-    const margins = this.instance.state.axes.margins
+    const margins = this.instance.state.margins
     const { naturalHeight } = this.instance.state.imageDetails
     const zoomLevel = this.instance.state.zoom.level
 

src/modes/harmonics/HarmonicsMode.js

@@ -635,7 +635,7 @@ export class HarmonicsMode extends BaseMode {
    */
   calculateHarmonicLineDimensions(harmonicSet) {
     const { naturalHeight } = this.state.imageDetails
-    const margins = this.state.axes.margins
+    const margins = this.state.margins
     const zoomLevel = this.state.zoom.level
     const { timeMin, timeMax } = this.state.config
 

src/modes/pan/PanMode.js

@@ -93,7 +93,7 @@ export class PanMode extends BaseMode {
 
     // Convert pixel delta to normalized delta (considering zoom level)
     const { naturalWidth, naturalHeight } = this.state.imageDetails
-    const margins = this.state.axes.margins
+    const margins = this.state.margins
     const svgRect = this.instance.svg.getBoundingClientRect()
 
     // Scale factor based on current zoom and SVG size

src/rendering/cursors.js

@@ -38,7 +38,7 @@ export function updateCursorIndicators(instance) {
  * @param {DataCoordinates} endPoint - Current drag end point
  */
 export function drawDopplerPreview(instance, startPoint, endPoint) {
-  const margins = instance.state.axes.margins
+  const margins = instance.state.margins
   const { naturalWidth, naturalHeight } = instance.state.imageDetails
   const { timeMin, timeMax, freqMin, freqMax } = instance.state.config
 

src/types.js

@@ -134,11 +134,6 @@
  * @property {number} top - Top margin
  */
 
-/**
- * Axes configuration
- * @typedef {Object} AxesConfig
- * @property {AxesMargins} margins - Margin configuration for axes
- */
 
 /**
  * Zoom state configuration
@@ -186,7 +181,7 @@
  * @property {ImageDetails} imageDetails - Image source and dimensions
  * @property {Config} config - Time and frequency configuration
  * @property {DisplayDimensions} displayDimensions - Current display dimensions
- * @property {AxesConfig} axes - Axes configuration
+ * @property {AxesMargins} margins - Axes margin configuration
  * @property {ZoomState} zoom - Zoom state configuration
  */