Add distributed settings and workspace import/export (M5)

src/app/components/LivePreview.tsx

@@ -26,12 +26,11 @@ import { useAppStore } from '../stores/AppStore';
 import { useDatasetStore } from '../stores/DatasetStore';
 import { usePreviewStore } from '../stores/PreviewStore';
 import { selectShownText, useSnippetStore } from '../stores/SnippetStore';
+import { useUserSettingsStore } from '../stores/UserSettingsStore';
 import { SegmentedControl, type SegmentedOption } from './SegmentedControl';
+import { RangeControl, SettingRow, SettingsPopover } from './SettingsPopover';
 import styles from './LivePreview.module.css';
 
-/** Render debounce (ms). Becomes the configurable `renderDebounce` setting in M5. */
-const RENDER_DEBOUNCE_MS = 300;
-
 /** The four fit modes in display order (spec §04 → Fit / Sizing Modes). */
 const FIT_OPTIONS: ReadonlyArray<SegmentedOption<FitMode>> = [
   { value: 'default', label: 'Original' },
@@ -68,6 +67,27 @@ function FitControl() {
   );
 }
 
+/** Preview settings cluster (spec §07 → Performance), disclosed beside Fit. */
+function PreviewSettings() {
+  const renderDebounce = useUserSettingsStore((s) => s.saved.performance.renderDebounce);
+  const setPerformance = useUserSettingsStore((s) => s.setPerformance);
+  return (
+    <SettingsPopover id="preview-settings" label="Preview settings" title="Preview">
+      <SettingRow label="Render debounce" htmlFor="set-debounce">
+        <RangeControl
+          id="set-debounce"
+          min={500}
+          max={5000}
+          step={100}
+          value={renderDebounce}
+          suffix="ms"
+          onChange={(renderDebounce) => setPerformance({ renderDebounce })}
+        />
+      </SettingRow>
+    </SettingsPopover>
+  );
+}
+
 export function LivePreview() {
   const hostRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<RenderHandle | null>(null);
@@ -84,6 +104,8 @@ export function LivePreview() {
   // two are unchanged the change is typing and the debounce applies.
   const bufferEpoch = useSnippetStore((s) => s.bufferEpoch);
   const editorView = useSnippetStore((s) => s.editorView);
+  // User-tunable render debounce (spec §07 → Performance).
+  const renderDebounce = useUserSettingsStore((s) => s.saved.performance.renderDebounce);
   // Seed with a sentinel epoch so the very first paint counts as a load (immediate).
   const lastLoadRef = useRef({ bufferEpoch: -1, editorView });
   const error = usePreviewStore((s) => s.error);
@@ -102,7 +124,7 @@ export function LivePreview() {
     const prevLoad = lastLoadRef.current;
     const immediate = bufferEpoch !== prevLoad.bufferEpoch || editorView !== prevLoad.editorView;
     lastLoadRef.current = { bufferEpoch, editorView };
-    const delay = immediate ? 0 : RENDER_DEBOUNCE_MS;
+    const delay = immediate ? 0 : renderDebounce;
 
     // The debounced body is async; wrap in a void IIFE so the timer callback
     // returns void (it handles its own errors internally — nothing awaits it).
@@ -165,7 +187,7 @@ export function LivePreview() {
     }, delay);
 
     return () => clearTimeout(timer);
-  }, [shownText, fitMode, uiTheme, datasets, setError, bufferEpoch, editorView]);
+  }, [shownText, fitMode, uiTheme, datasets, setError, bufferEpoch, editorView, renderDebounce]);
 
   // Re-fit the chart when its container resizes (e.g. a pane drag). Vega doesn't
   // observe the element, so we do: one observer on the stable host node for the
@@ -198,6 +220,7 @@ export function LivePreview() {
     <div className={styles.preview}>
       <div className={styles.header}>
         <FitControl />
+        <PreviewSettings />
       </div>
       <div className={styles.body}>
         {/* Frame is React-owned and carries the fit-sizing class; the inner host