refactor: Migrate preview fit mode state management and UI updates to an Alpine.js store.

src/js/app.js

@@ -303,20 +303,6 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     });
 
-    // View mode toggle buttons (now handled by Alpine.js in index.html)
-
-    // Preview fit mode buttons
-    document.getElementById('preview-fit-default').addEventListener('click', () => {
-        setPreviewFitMode('default');
-    });
-
-    document.getElementById('preview-fit-width').addEventListener('click', () => {
-        setPreviewFitMode('width');
-    });
-
-    document.getElementById('preview-fit-full').addEventListener('click', () => {
-        setPreviewFitMode('full');
-    });
 
     // Publish and Revert buttons
     document.getElementById('publish-btn').addEventListener('click', publishDraft);

src/js/config.js

@@ -187,6 +187,11 @@ document.addEventListener('alpine:init', () => {
             return icons[type] || icons.info;
         }
     });
+
+    // Preview panel fit mode store
+    Alpine.store('preview', {
+        fitMode: 'default' // 'default' | 'width' | 'full'
+    });
 });
 
 // Toast Notification System (now backed by Alpine store)
@@ -327,4 +332,3 @@ const sampleSpec = {
         "y": { "field": "value", "type": "quantitative" }
     }
 };
-

src/js/editor.js

@@ -194,15 +194,14 @@ function updateRenderDebounce(newDebounce) {
 function setPreviewFitMode(mode) {
     previewFitMode = mode;
 
-    // Update button states
-    document.getElementById('preview-fit-default').classList.toggle('active', mode === 'default');
-    document.getElementById('preview-fit-width').classList.toggle('active', mode === 'width');
-    document.getElementById('preview-fit-full').classList.toggle('active', mode === 'full');
+
+    // Sync with Alpine store if available
+    if (typeof Alpine !== 'undefined' && Alpine.store('preview')) {
+        Alpine.store('preview').fitMode = mode;
+    }
 
     // Save to settings
-    if (typeof updateSetting === 'function') {
-        updateSetting('ui.previewFitMode', mode);
-    }
+    updateSetting('ui.previewFitMode', mode);
 
     // Re-render with new fit mode
     renderVisualization();