md-redline 0.1.0

package/src/hooks/usePageVisible.test.ts

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createElement, act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { usePageVisible } from './usePageVisible';
+
+let root: Root;
+let container: HTMLDivElement;
+
+function TestComponent() {
+  return createElement('div', undefined, usePageVisible() ? 'visible' : 'hidden');
+}
+
+function setVisibility(state: DocumentVisibilityState) {
+  Object.defineProperty(document, 'visibilityState', {
+    value: state,
+    writable: true,
+    configurable: true,
+  });
+  act(() => {
+    document.dispatchEvent(new Event('visibilitychange'));
+  });
+}
+
+beforeEach(() => {
+  Object.defineProperty(document, 'visibilityState', {
+    value: 'visible',
+    writable: true,
+    configurable: true,
+  });
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  root?.unmount();
+  container?.remove();
+});
+
+describe('usePageVisible', () => {
+  it('returns true when the page is visible', () => {
+    act(() => root.render(createElement(TestComponent)));
+    expect(container.textContent).toBe('visible');
+  });
+
+  it('returns false after the page becomes hidden', () => {
+    act(() => root.render(createElement(TestComponent)));
+    setVisibility('hidden');
+    expect(container.textContent).toBe('hidden');
+  });
+
+  it('returns true again when the page becomes visible', () => {
+    act(() => root.render(createElement(TestComponent)));
+    setVisibility('hidden');
+    expect(container.textContent).toBe('hidden');
+    setVisibility('visible');
+    expect(container.textContent).toBe('visible');
+  });
+
+  it('cleans up the event listener on unmount', () => {
+    act(() => root.render(createElement(TestComponent)));
+    const spy = vi.spyOn(document, 'removeEventListener');
+    act(() => root.unmount());
+    expect(spy).toHaveBeenCalledWith('visibilitychange', expect.any(Function));
+    spy.mockRestore();
+  });
+});

package/src/hooks/usePageVisible.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Returns true when the browser tab is visible.
+ * SSE connections should be gated on this to avoid exhausting
+ * the browser's per-origin HTTP/1.1 connection limit (6) when
+ * multiple browser tabs point at the same server.
+ */
+export function usePageVisible(): boolean {
+  const [visible, setVisible] = useState(() => document.visibilityState === 'visible');
+
+  useEffect(() => {
+    const handler = () => setVisible(document.visibilityState === 'visible');
+    document.addEventListener('visibilitychange', handler);
+    return () => document.removeEventListener('visibilitychange', handler);
+  }, []);
+
+  return visible;
+}

package/src/hooks/usePaneLayout.test.ts

@@ -0,0 +1,108 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { load, save } from './usePaneLayout';
+
+const store: Record<string, string> = {};
+const localStorageMock = {
+  getItem: vi.fn((key: string) => store[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    store[key] = value;
+  }),
+  removeItem: vi.fn((key: string) => {
+    delete store[key];
+  }),
+  clear: vi.fn(() => {
+    for (const key in store) delete store[key];
+  }),
+  get length() {
+    return Object.keys(store).length;
+  },
+  key: vi.fn((i: number) => Object.keys(store)[i] ?? null),
+};
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
+
+const DEFAULTS = {
+  explorerVisible: true,
+  sidebarVisible: true,
+  leftPanelView: 'explorer' as const,
+  viewMode: 'rendered' as const,
+};
+
+beforeEach(() => {
+  localStorageMock.clear();
+  vi.clearAllMocks();
+});
+
+describe('load', () => {
+  it('returns defaults when localStorage is empty', () => {
+    expect(load()).toEqual(DEFAULTS);
+  });
+
+  it('returns defaults on invalid JSON', () => {
+    store['md-redline-pane-layout'] = 'not-json!!!';
+    expect(load()).toEqual(DEFAULTS);
+  });
+
+  it('preserves valid boolean explorerVisible', () => {
+    store['md-redline-pane-layout'] = JSON.stringify({ explorerVisible: false });
+    expect(load().explorerVisible).toBe(false);
+  });
+
+  it('falls back to default for non-boolean explorerVisible', () => {
+    store['md-redline-pane-layout'] = JSON.stringify({ explorerVisible: 'yes' });
+    expect(load().explorerVisible).toBe(true);
+  });
+
+  it('preserves valid boolean sidebarVisible', () => {
+    store['md-redline-pane-layout'] = JSON.stringify({ sidebarVisible: false });
+    expect(load().sidebarVisible).toBe(false);
+  });
+
+  it('only accepts "outline" or "explorer" for leftPanelView', () => {
+    store['md-redline-pane-layout'] = JSON.stringify({ leftPanelView: 'outline' });
+    expect(load().leftPanelView).toBe('outline');
+
+    store['md-redline-pane-layout'] = JSON.stringify({ leftPanelView: 'invalid' });
+    expect(load().leftPanelView).toBe('explorer');
+  });
+
+  it('only accepts valid viewMode values', () => {
+    for (const mode of ['rendered', 'raw']) {
+      store['md-redline-pane-layout'] = JSON.stringify({ viewMode: mode });
+      expect(load().viewMode).toBe(mode);
+    }
+
+    // Legacy 'diff' migrates to 'raw'
+    store['md-redline-pane-layout'] = JSON.stringify({ viewMode: 'diff' });
+    expect(load().viewMode).toBe('raw');
+
+    store['md-redline-pane-layout'] = JSON.stringify({ viewMode: 'invalid' });
+    expect(load().viewMode).toBe('rendered');
+  });
+});
+
+describe('save', () => {
+  it('persists layout to localStorage', () => {
+    const layout = {
+      explorerVisible: false,
+      sidebarVisible: true,
+      leftPanelView: 'outline' as const,
+      viewMode: 'raw' as const,
+    };
+    save(layout);
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      'md-redline-pane-layout',
+      JSON.stringify(layout),
+    );
+  });
+
+  it('round-trips through load', () => {
+    const layout = {
+      explorerVisible: false,
+      sidebarVisible: false,
+      leftPanelView: 'outline' as const,
+      viewMode: 'raw' as const,
+    };
+    save(layout);
+    expect(load()).toEqual(layout);
+  });
+});

package/src/hooks/usePaneLayout.ts

@@ -0,0 +1,102 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import type { ViewMode } from '../components/Toolbar';
+
+export type LeftPanelView = 'explorer' | 'outline';
+
+interface PaneLayout {
+  explorerVisible: boolean;
+  sidebarVisible: boolean;
+  leftPanelView: LeftPanelView;
+  viewMode: ViewMode;
+}
+
+const STORAGE_KEY = 'md-redline-pane-layout';
+
+const DEFAULTS: PaneLayout = {
+  explorerVisible: true,
+  sidebarVisible: true,
+  leftPanelView: 'explorer',
+  viewMode: 'rendered',
+};
+
+export function load(): PaneLayout {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULTS;
+    const parsed = JSON.parse(raw);
+    return {
+      explorerVisible:
+        typeof parsed.explorerVisible === 'boolean'
+          ? parsed.explorerVisible
+          : DEFAULTS.explorerVisible,
+      sidebarVisible:
+        typeof parsed.sidebarVisible === 'boolean'
+          ? parsed.sidebarVisible
+          : DEFAULTS.sidebarVisible,
+      leftPanelView: parsed.leftPanelView === 'outline' ? 'outline' : 'explorer',
+      viewMode: parsed.viewMode === 'raw' || parsed.viewMode === 'diff' ? 'raw' : 'rendered',
+    };
+  } catch {
+    return DEFAULTS;
+  }
+}
+
+export function save(layout: PaneLayout) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(layout));
+  } catch {
+    /* ignore */
+  }
+}
+
+export function usePaneLayout() {
+  const [layout, setLayout] = useState<PaneLayout>(load);
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+
+  // Persist on every change
+  useEffect(() => {
+    save(layout);
+  }, [layout]);
+
+  const setExplorerVisible = useCallback((v: boolean | ((prev: boolean) => boolean)) => {
+    setLayout((prev) => {
+      const next = typeof v === 'function' ? v(prev.explorerVisible) : v;
+      return { ...prev, explorerVisible: next };
+    });
+  }, []);
+
+  const setSidebarVisible = useCallback((v: boolean | ((prev: boolean) => boolean)) => {
+    setLayout((prev) => {
+      const next = typeof v === 'function' ? v(prev.sidebarVisible) : v;
+      return { ...prev, sidebarVisible: next };
+    });
+  }, []);
+
+  const setLeftPanelView = useCallback((v: LeftPanelView) => {
+    setLayout((prev) => ({ ...prev, leftPanelView: v }));
+  }, []);
+
+  const setViewMode = useCallback((v: ViewMode | ((prev: ViewMode) => ViewMode)) => {
+    setLayout((prev) => {
+      const next = typeof v === 'function' ? v(prev.viewMode) : v;
+      return { ...prev, viewMode: next };
+    });
+  }, []);
+
+  // Diff overlay is transient — not persisted to localStorage
+  const [diffEnabled, setDiffEnabled] = useState(false);
+
+  return {
+    explorerVisible: layout.explorerVisible,
+    sidebarVisible: layout.sidebarVisible,
+    leftPanelView: layout.leftPanelView,
+    viewMode: layout.viewMode,
+    diffEnabled,
+    setExplorerVisible,
+    setSidebarVisible,
+    setLeftPanelView,
+    setViewMode,
+    setDiffEnabled,
+  };
+}

package/src/hooks/useRecentFiles.test.ts

@@ -0,0 +1,103 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+// Mock preferences-client before importing module under test
+vi.mock('../lib/preferences-client', () => ({
+  fetchPreferences: vi.fn(() => Promise.resolve({})),
+  savePreferencesToDisk: vi.fn(() => Promise.resolve()),
+}));
+
+import { loadFromStorage, mergeRecentFiles, saveToStorage } from './useRecentFiles';
+import { savePreferencesToDisk } from '../lib/preferences-client';
+
+const store: Record<string, string> = {};
+const localStorageMock = {
+  getItem: vi.fn((key: string) => store[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    store[key] = value;
+  }),
+  removeItem: vi.fn((key: string) => {
+    delete store[key];
+  }),
+  clear: vi.fn(() => {
+    for (const key in store) delete store[key];
+  }),
+  get length() {
+    return Object.keys(store).length;
+  },
+  key: vi.fn((i: number) => Object.keys(store)[i] ?? null),
+};
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
+
+beforeEach(() => {
+  localStorageMock.clear();
+  vi.clearAllMocks();
+});
+
+describe('loadFromStorage', () => {
+  it('returns empty array when localStorage is empty', () => {
+    expect(loadFromStorage()).toEqual([]);
+  });
+
+  it('returns empty array on invalid JSON', () => {
+    store['md-redline-recent-files'] = 'bad-json';
+    expect(loadFromStorage()).toEqual([]);
+  });
+
+  it('returns parsed array when valid', () => {
+    const files = [{ path: '/a.md', name: 'a.md', openedAt: '2026-01-01T00:00:00.000Z' }];
+    store['md-redline-recent-files'] = JSON.stringify(files);
+    expect(loadFromStorage()).toEqual(files);
+  });
+});
+
+describe('saveToStorage', () => {
+  it('persists files to localStorage as JSON', () => {
+    const files = [{ path: '/b.md', name: 'b.md', openedAt: '2026-01-01T00:00:00.000Z' }];
+    saveToStorage(files);
+    expect(localStorageMock.setItem).toHaveBeenCalledWith(
+      'md-redline-recent-files',
+      JSON.stringify(files),
+    );
+  });
+
+  it('calls savePreferencesToDisk with the files', () => {
+    const files = [{ path: '/c.md', name: 'c.md', openedAt: '2026-01-01T00:00:00.000Z' }];
+    saveToStorage(files);
+    expect(savePreferencesToDisk).toHaveBeenCalledWith({ recentFiles: files });
+  });
+
+  it('round-trips through loadFromStorage', () => {
+    const files = [
+      { path: '/d.md', name: 'd.md', openedAt: '2026-01-01T00:00:00.000Z' },
+      { path: '/e.md', name: 'e.md', openedAt: '2026-01-02T00:00:00.000Z' },
+    ];
+    saveToStorage(files);
+    expect(loadFromStorage()).toEqual(files);
+  });
+});
+
+describe('mergeRecentFiles', () => {
+  it('merges and sorts recents by most recent openedAt', () => {
+    const merged = mergeRecentFiles(
+      [{ path: '/a.md', name: 'a.md', openedAt: '2026-01-01T00:00:00.000Z' }],
+      [{ path: '/b.md', name: 'b.md', openedAt: '2026-01-02T00:00:00.000Z' }],
+    );
+
+    expect(merged.map((file) => file.path)).toEqual(['/b.md', '/a.md']);
+  });
+
+  it('keeps the newest timestamp when the same file exists in both sources', () => {
+    const merged = mergeRecentFiles(
+      [{ path: '/a.md', name: 'a.md', openedAt: '2026-01-03T00:00:00.000Z' }],
+      [
+        { path: '/a.md', name: 'a.md', openedAt: '2026-01-01T00:00:00.000Z' },
+        { path: '/b.md', name: 'b.md', openedAt: '2026-01-02T00:00:00.000Z' },
+      ],
+    );
+
+    expect(merged).toEqual([
+      { path: '/a.md', name: 'a.md', openedAt: '2026-01-03T00:00:00.000Z' },
+      { path: '/b.md', name: 'b.md', openedAt: '2026-01-02T00:00:00.000Z' },
+    ]);
+  });
+});

package/src/hooks/useRecentFiles.ts

@@ -0,0 +1,99 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { getPathBasename } from '../lib/path-utils';
+import { fetchPreferences, savePreferencesToDisk } from '../lib/preferences-client';
+
+const STORAGE_KEY = 'md-redline-recent-files';
+const MAX_RECENT = 10;
+
+export interface RecentFile {
+  path: string;
+  name: string;
+  openedAt: string; // ISO-8601
+}
+
+export function mergeRecentFiles(primary: RecentFile[], secondary: RecentFile[]): RecentFile[] {
+  const byPath = new Map<string, RecentFile>();
+
+  for (const file of [...primary, ...secondary]) {
+    const existing = byPath.get(file.path);
+    if (!existing || file.openedAt > existing.openedAt) {
+      byPath.set(file.path, file);
+    }
+  }
+
+  return Array.from(byPath.values())
+    .sort((a, b) => b.openedAt.localeCompare(a.openedAt))
+    .slice(0, MAX_RECENT);
+}
+
+export function loadFromStorage(): RecentFile[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+export function saveToStorage(files: RecentFile[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(files));
+  } catch {
+    /* Storage unavailable */
+  }
+  savePreferencesToDisk({ recentFiles: files });
+}
+
+export function useRecentFiles() {
+  const [recentFiles, setRecentFiles] = useState<RecentFile[]>(loadFromStorage);
+  const hasLocalMutationRef = useRef(false);
+
+  // Hydrate from disk on mount
+  useEffect(() => {
+    let cancelled = false;
+    fetchPreferences().then((prefs) => {
+      if (cancelled || hasLocalMutationRef.current) return;
+      if (prefs.recentFiles && Array.isArray(prefs.recentFiles) && prefs.recentFiles.length > 0) {
+        setRecentFiles((prev) => {
+          const next = mergeRecentFiles(prev, prefs.recentFiles as RecentFile[]);
+          try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+          } catch {
+            /* storage unavailable */
+          }
+          return next;
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const addRecentFile = useCallback((path: string) => {
+    hasLocalMutationRef.current = true;
+    setRecentFiles((prev) => {
+      const name = getPathBasename(path) || path;
+      const filtered = prev.filter((f) => f.path !== path);
+      const next = [{ path, name, openedAt: new Date().toISOString() }, ...filtered].slice(
+        0,
+        MAX_RECENT,
+      );
+      saveToStorage(next);
+      return next;
+    });
+  }, []);
+
+  const clearRecentFiles = useCallback(() => {
+    hasLocalMutationRef.current = true;
+    setRecentFiles([]);
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+    } catch {
+      /* storage unavailable */
+    }
+    savePreferencesToDisk({ recentFiles: [] });
+  }, []);
+
+  return { recentFiles, addRecentFile, clearRecentFiles };
+}

package/src/hooks/useResizablePanel.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { clamp, loadWidths } from './useResizablePanel';
+
+const store: Record<string, string> = {};
+const localStorageMock = {
+  getItem: vi.fn((key: string) => store[key] ?? null),
+  setItem: vi.fn((key: string, value: string) => {
+    store[key] = value;
+  }),
+  removeItem: vi.fn((key: string) => {
+    delete store[key];
+  }),
+  clear: vi.fn(() => {
+    for (const key in store) delete store[key];
+  }),
+  get length() {
+    return Object.keys(store).length;
+  },
+  key: vi.fn((i: number) => Object.keys(store)[i] ?? null),
+};
+Object.defineProperty(globalThis, 'localStorage', { value: localStorageMock, writable: true });
+
+beforeEach(() => {
+  localStorageMock.clear();
+  vi.clearAllMocks();
+});
+
+describe('clamp', () => {
+  it('returns value when within range', () => {
+    expect(clamp(5, 0, 10)).toBe(5);
+  });
+
+  it('returns min when value is below range', () => {
+    expect(clamp(-1, 0, 10)).toBe(0);
+  });
+
+  it('returns max when value is above range', () => {
+    expect(clamp(15, 0, 10)).toBe(10);
+  });
+
+  it('handles equal min and max', () => {
+    expect(clamp(5, 3, 3)).toBe(3);
+  });
+
+  it('returns boundary values exactly', () => {
+    expect(clamp(0, 0, 10)).toBe(0);
+    expect(clamp(10, 0, 10)).toBe(10);
+  });
+});
+
+describe('loadWidths', () => {
+  const DEFAULTS = { explorer: 224, sidebar: 320 };
+
+  it('returns defaults when localStorage is empty', () => {
+    expect(loadWidths()).toEqual(DEFAULTS);
+  });
+
+  it('returns defaults on invalid JSON', () => {
+    store['md-redline-panel-widths'] = 'bad-json';
+    expect(loadWidths()).toEqual(DEFAULTS);
+  });
+
+  it('clamps explorer width to bounds', () => {
+    store['md-redline-panel-widths'] = JSON.stringify({ explorer: 50, sidebar: 320 });
+    const result = loadWidths();
+    expect(result.explorer).toBe(160); // MIN_WIDTHS.explorer
+  });
+
+  it('clamps sidebar width to bounds', () => {
+    store['md-redline-panel-widths'] = JSON.stringify({ explorer: 224, sidebar: 999 });
+    const result = loadWidths();
+    expect(result.sidebar).toBe(560); // MAX_WIDTHS.sidebar
+  });
+
+  it('preserves valid widths', () => {
+    store['md-redline-panel-widths'] = JSON.stringify({ explorer: 300, sidebar: 400 });
+    expect(loadWidths()).toEqual({ explorer: 300, sidebar: 400 });
+  });
+
+  it('handles missing fields gracefully', () => {
+    store['md-redline-panel-widths'] = JSON.stringify({});
+    expect(loadWidths()).toEqual(DEFAULTS);
+  });
+});

package/src/hooks/useResizablePanel.ts

@@ -0,0 +1,118 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+const STORAGE_KEY = 'md-redline-panel-widths';
+
+interface PanelWidths {
+  explorer: number;
+  sidebar: number;
+}
+
+const DEFAULTS: PanelWidths = {
+  explorer: 224, // w-56
+  sidebar: 320, // w-80
+};
+
+const MIN_WIDTHS: PanelWidths = {
+  explorer: 160,
+  sidebar: 240,
+};
+
+const MAX_WIDTHS: PanelWidths = {
+  explorer: 480,
+  sidebar: 560,
+};
+
+export function loadWidths(): PanelWidths {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULTS;
+    const parsed = JSON.parse(raw);
+    return {
+      explorer: clamp(
+        parsed.explorer ?? DEFAULTS.explorer,
+        MIN_WIDTHS.explorer,
+        MAX_WIDTHS.explorer,
+      ),
+      sidebar: clamp(parsed.sidebar ?? DEFAULTS.sidebar, MIN_WIDTHS.sidebar, MAX_WIDTHS.sidebar),
+    };
+  } catch {
+    return DEFAULTS;
+  }
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function useResizablePanel() {
+  const [widths, setWidths] = useState<PanelWidths>(loadWidths);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragging = useRef<'explorer' | 'sidebar' | null>(null);
+  const startX = useRef(0);
+  const startWidth = useRef(0);
+
+  const persist = useCallback((w: PanelWidths) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(w));
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  const onMouseDown = useCallback(
+    (panel: 'explorer' | 'sidebar', e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = panel;
+      setIsDragging(true);
+      startX.current = e.clientX;
+      startWidth.current = widths[panel];
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+    },
+    [widths],
+  );
+
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      const panel = dragging.current;
+      if (!panel) return;
+
+      const delta = panel === 'explorer' ? e.clientX - startX.current : startX.current - e.clientX; // sidebar drags leftward to grow
+
+      const newWidth = clamp(startWidth.current + delta, MIN_WIDTHS[panel], MAX_WIDTHS[panel]);
+
+      setWidths((prev) => ({ ...prev, [panel]: newWidth }));
+    };
+
+    const onMouseUp = () => {
+      if (!dragging.current) return;
+      dragging.current = null;
+      setIsDragging(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      setWidths((prev) => {
+        persist(prev);
+        return prev;
+      });
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+      // Clean up body styles if component unmounts mid-drag
+      if (dragging.current) {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      }
+    };
+  }, [persist]);
+
+  return {
+    explorerWidth: widths.explorer,
+    sidebarWidth: widths.sidebar,
+    onResizeStart: onMouseDown,
+    isDragging,
+  };
+}