md-redline 0.1.0

package/src/lib/mermaid-renderer.test.ts

@@ -0,0 +1,114 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect } from 'vitest';
+import DOMPurify from 'dompurify';
+import { getMermaidTheme, hasMermaidBlocks } from './mermaid-renderer';
+import { ALL_THEMES } from './themes';
+
+describe('getMermaidTheme', () => {
+  it('maps "light" to "default"', () => {
+    expect(getMermaidTheme('light')).toBe('default');
+  });
+
+  it('maps "dark" to "dark"', () => {
+    expect(getMermaidTheme('dark')).toBe('dark');
+  });
+
+  it('maps "sepia" to "neutral"', () => {
+    expect(getMermaidTheme('sepia')).toBe('neutral');
+  });
+
+  it('maps "nord" to "dark"', () => {
+    expect(getMermaidTheme('nord')).toBe('dark');
+  });
+
+  it('maps "rose-pine" to "dark"', () => {
+    expect(getMermaidTheme('rose-pine')).toBe('dark');
+  });
+
+  it('maps "solarized" to "default"', () => {
+    expect(getMermaidTheme('solarized')).toBe('default');
+  });
+
+  it('maps "github" to "default"', () => {
+    expect(getMermaidTheme('github')).toBe('default');
+  });
+
+  it('maps "catppuccin" to "dark"', () => {
+    expect(getMermaidTheme('catppuccin')).toBe('dark');
+  });
+
+  it('falls back to "default" for unknown themes', () => {
+    expect(getMermaidTheme('unknown-theme')).toBe('default');
+    expect(getMermaidTheme('')).toBe('default');
+  });
+
+  it('returns a valid mermaid theme for every app theme in themes.ts', () => {
+    const validMermaidThemes = ['default', 'dark', 'forest', 'neutral', 'base'];
+    for (const theme of ALL_THEMES) {
+      const result = getMermaidTheme(theme.key);
+      expect(
+        validMermaidThemes.includes(result),
+        `getMermaidTheme("${theme.key}") returned "${result}" — add it to THEME_MAP in mermaid-renderer.ts`,
+      ).toBe(true);
+    }
+  });
+});
+
+describe('hasMermaidBlocks', () => {
+  it('returns true when markdown contains a mermaid code block', () => {
+    expect(hasMermaidBlocks('# Title\n\n```mermaid\ngraph TD\nA-->B\n```\n')).toBe(true);
+  });
+
+  it('returns true when mermaid block is at the start', () => {
+    expect(hasMermaidBlocks('```mermaid\nflowchart LR\n```')).toBe(true);
+  });
+
+  it('returns false when no mermaid blocks exist', () => {
+    expect(hasMermaidBlocks('# Title\n\n```js\nconst x = 1;\n```\n')).toBe(false);
+  });
+
+  it('returns false for empty string', () => {
+    expect(hasMermaidBlocks('')).toBe(false);
+  });
+
+  it('returns false for inline mermaid mention', () => {
+    expect(hasMermaidBlocks('Use mermaid for diagrams')).toBe(false);
+  });
+
+  it('returns false when mermaid is not at line start', () => {
+    expect(hasMermaidBlocks('  ```mermaid\ngraph TD\n```')).toBe(false);
+  });
+});
+
+describe('SVG sanitization (DOMPurify config)', () => {
+  // These tests verify the exact DOMPurify config used by renderMermaidBlock.
+  // The config must NOT include ADD_TAGS: ['foreignObject'] because foreignObject
+  // can contain arbitrary HTML that bypasses rehype-sanitize.
+  const sanitize = (svg: string) =>
+    DOMPurify.sanitize(svg, {
+      USE_PROFILES: { html: true, svg: true, svgFilters: true },
+    });
+
+  it('strips foreignObject elements from SVG', () => {
+    const malicious = '<svg><foreignObject><div onclick="alert(1)">XSS</div></foreignObject></svg>';
+    const clean = sanitize(malicious);
+    expect(clean).not.toContain('foreignObject');
+    expect(clean).not.toContain('onclick');
+  });
+
+  it('strips script elements from SVG', () => {
+    const malicious = '<svg><script>alert(1)</script><rect width="10" height="10"/></svg>';
+    const clean = sanitize(malicious);
+    expect(clean).not.toContain('<script');
+    expect(clean).toContain('<rect');
+  });
+
+  it('preserves safe SVG elements', () => {
+    const safe = '<svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="blue"/><text x="10" y="50">Hello</text></svg>';
+    const clean = sanitize(safe);
+    expect(clean).toContain('<rect');
+    expect(clean).toContain('<text');
+    expect(clean).toContain('Hello');
+  });
+});

package/src/lib/mermaid-renderer.ts

@@ -0,0 +1,89 @@
+import DOMPurify from 'dompurify';
+
+let mermaidModule: typeof import('mermaid') | null = null;
+let initTheme: string | null = null;
+let themeChangePromise: Promise<void> | null = null;
+
+const FLOWCHART_CONFIG = {
+  useMaxWidth: true,
+  wrappingWidth: 200,
+  rankSpacing: 70,
+} as const;
+
+async function getMermaid() {
+  if (!mermaidModule) {
+    mermaidModule = await import('mermaid');
+    mermaidModule.default.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: 'default',
+      htmlLabels: true,
+      flowchart: FLOWCHART_CONFIG,
+    });
+    initTheme = 'default';
+  }
+  return mermaidModule.default;
+}
+
+// Maps app theme keys (from src/lib/themes.ts) to mermaid theme names.
+// Keep in sync when adding new themes.
+const THEME_MAP: Record<string, string> = {
+  light: 'default',
+  dark: 'dark',
+  sepia: 'neutral',
+  nord: 'dark',
+  'rose-pine': 'dark',
+  solarized: 'default',
+  github: 'default',
+  catppuccin: 'dark',
+};
+
+export function getMermaidTheme(appTheme: string): string {
+  return THEME_MAP[appTheme] || 'default';
+}
+
+let renderCounter = 0;
+
+export async function renderMermaidBlock(
+  source: string,
+  appTheme: string,
+): Promise<{ svg: string } | { error: string }> {
+  try {
+    const mermaid = await getMermaid();
+    const mermaidTheme = getMermaidTheme(appTheme);
+
+    // Serialize theme changes to avoid concurrent re-initialization races.
+    // After awaiting a pending promise, re-check in case a newer theme was
+    // requested while we were waiting (rapid toggling).
+    while (mermaidTheme !== initTheme) {
+      if (!themeChangePromise) {
+        themeChangePromise = (async () => {
+          mermaid.initialize({
+            startOnLoad: false,
+            securityLevel: 'strict',
+            theme: mermaidTheme as Parameters<typeof mermaid.initialize>[0]['theme'],
+            htmlLabels: true,
+            flowchart: FLOWCHART_CONFIG,
+          });
+          initTheme = mermaidTheme;
+          themeChangePromise = null;
+        })();
+      }
+      await themeChangePromise;
+    }
+
+    const id = `mermaid-svg-${++renderCounter}`;
+    const { svg } = await mermaid.render(id, source.trim());
+    const cleanSvg = DOMPurify.sanitize(svg, {
+      USE_PROFILES: { html: true, svg: true, svgFilters: true },
+    });
+    return { svg: cleanSvg };
+  } catch (e) {
+    return { error: e instanceof Error ? e.message : String(e) };
+  }
+}
+
+/** Quick check if clean markdown contains any mermaid fenced code blocks */
+export function hasMermaidBlocks(markdown: string): boolean {
+  return /^```mermaid\s*$/m.test(markdown);
+}

package/src/lib/path-utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { getPathBasename } from './path-utils';
+
+describe('getPathBasename', () => {
+  it('returns the basename for POSIX paths', () => {
+    expect(getPathBasename('/tmp/docs/spec.md')).toBe('spec.md');
+  });
+
+  it('returns the basename for Windows paths', () => {
+    expect(getPathBasename('C:\\docs\\spec.md')).toBe('spec.md');
+  });
+
+  it('trims trailing separators before reading the basename', () => {
+    expect(getPathBasename('/tmp/docs/')).toBe('docs');
+    expect(getPathBasename('C:\\docs\\')).toBe('docs');
+  });
+});

package/src/lib/path-utils.ts

@@ -0,0 +1,7 @@
+export function getPathBasename(path: string): string {
+  if (!path) return '';
+  const trimmed = path.replace(/[\\/]+$/, '');
+  if (!trimmed) return path;
+  const parts = trimmed.split(/[\\/]/);
+  return parts[parts.length - 1] || trimmed;
+}

package/src/lib/platform.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { isApplePlatform, getPrimaryModifierLabel } from './platform';
+
+const originalPlatform = Object.getOwnPropertyDescriptor(navigator, 'platform');
+const originalUserAgent = Object.getOwnPropertyDescriptor(navigator, 'userAgent');
+
+function mockNavigator(platform?: string, userAgent?: string) {
+  if (platform !== undefined) {
+    Object.defineProperty(navigator, 'platform', { value: platform, configurable: true });
+  }
+  if (userAgent !== undefined) {
+    Object.defineProperty(navigator, 'userAgent', { value: userAgent, configurable: true });
+  }
+}
+
+afterEach(() => {
+  if (originalPlatform) Object.defineProperty(navigator, 'platform', originalPlatform);
+  if (originalUserAgent) Object.defineProperty(navigator, 'userAgent', originalUserAgent);
+});
+
+describe('isApplePlatform', () => {
+  it('returns true for MacIntel platform', () => {
+    mockNavigator('MacIntel', '');
+    expect(isApplePlatform()).toBe(true);
+  });
+
+  it('returns true for iPhone userAgent', () => {
+    mockNavigator('', 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)');
+    expect(isApplePlatform()).toBe(true);
+  });
+
+  it('returns true for iPad userAgent', () => {
+    mockNavigator('', 'Mozilla/5.0 (iPad; CPU OS 16_0 like Mac OS X)');
+    expect(isApplePlatform()).toBe(true);
+  });
+
+  it('returns false for Windows platform', () => {
+    mockNavigator('Win32', 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)');
+    expect(isApplePlatform()).toBe(false);
+  });
+
+  it('returns false for Linux platform', () => {
+    mockNavigator('Linux x86_64', 'Mozilla/5.0 (X11; Linux x86_64)');
+    expect(isApplePlatform()).toBe(false);
+  });
+});
+
+describe('getPrimaryModifierLabel', () => {
+  it('returns "Cmd" on Apple platforms', () => {
+    mockNavigator('MacIntel', '');
+    expect(getPrimaryModifierLabel()).toBe('Cmd');
+  });
+
+  it('returns "Ctrl" on non-Apple platforms', () => {
+    mockNavigator('Win32', 'Mozilla/5.0 (Windows NT 10.0)');
+    expect(getPrimaryModifierLabel()).toBe('Ctrl');
+  });
+});

package/src/lib/platform.ts

@@ -0,0 +1,14 @@
+function getNavigatorValue(key: 'platform' | 'userAgent'): string {
+  if (typeof navigator === 'undefined') return '';
+  return navigator[key] ?? '';
+}
+
+export function isApplePlatform(): boolean {
+  const platform = getNavigatorValue('platform');
+  const userAgent = getNavigatorValue('userAgent');
+  return /Mac|iPhone|iPad|iPod/.test(platform || userAgent);
+}
+
+export function getPrimaryModifierLabel(): 'Cmd' | 'Ctrl' {
+  return isApplePlatform() ? 'Cmd' : 'Ctrl';
+}

package/src/lib/preferences-client.test.ts

@@ -0,0 +1,177 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import {
+  fetchPreferences,
+  savePreferencesToDisk,
+  migrateLocalStorageToDisk,
+} from './preferences-client';
+
+// Mock localStorage
+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 mockFetch = vi.fn();
+vi.stubGlobal('fetch', mockFetch);
+
+beforeEach(() => {
+  localStorageMock.clear();
+  mockFetch.mockReset();
+  vi.clearAllMocks();
+});
+
+function jsonResponse(body: unknown, init?: ResponseInit) {
+  return new Response(JSON.stringify(body), {
+    headers: { 'Content-Type': 'application/json' },
+    ...init,
+  });
+}
+
+describe('fetchPreferences', () => {
+  it('returns parsed JSON on successful response', async () => {
+    mockFetch.mockResolvedValue(jsonResponse({ author: 'Alice', theme: 'dark' }));
+    const result = await fetchPreferences();
+    expect(result).toEqual({ author: 'Alice', theme: 'dark' });
+  });
+
+  it('returns empty object when response is not ok', async () => {
+    mockFetch.mockResolvedValue(jsonResponse({ error: 'boom' }, { status: 500 }));
+    const result = await fetchPreferences();
+    expect(result).toEqual({});
+  });
+
+  it('returns empty object on invalid JSON response', async () => {
+    mockFetch.mockResolvedValue(new Response('', { status: 502 }));
+    const result = await fetchPreferences();
+    expect(result).toEqual({});
+  });
+
+  it('returns empty object on network error', async () => {
+    mockFetch.mockRejectedValue(new Error('Network error'));
+    const result = await fetchPreferences();
+    expect(result).toEqual({});
+  });
+});
+
+describe('savePreferencesToDisk', () => {
+  it('sends PUT request with correct body', async () => {
+    mockFetch.mockResolvedValue({ ok: true });
+    await expect(savePreferencesToDisk({ author: 'Bob' })).resolves.toBe(true);
+    expect(mockFetch).toHaveBeenCalledWith('/api/preferences', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ author: 'Bob' }),
+    });
+  });
+
+  it('returns false on network error', async () => {
+    mockFetch.mockRejectedValue(new Error('Network error'));
+    await expect(savePreferencesToDisk({ author: 'Bob' })).resolves.toBe(false);
+  });
+
+  it('returns false on non-ok response', async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 500 });
+    await expect(savePreferencesToDisk({ author: 'Bob' })).resolves.toBe(false);
+  });
+});
+
+describe('migrateLocalStorageToDisk', () => {
+  it('skips migration when already migrated', async () => {
+    store['md-redline-migrated-to-disk'] = '1';
+    await migrateLocalStorageToDisk();
+    expect(mockFetch).not.toHaveBeenCalled();
+  });
+
+  it('skips migration when disk has existing data', async () => {
+    mockFetch.mockResolvedValue(jsonResponse({ author: 'Existing' }));
+    await migrateLocalStorageToDisk();
+    expect(store['md-redline-migrated-to-disk']).toBe('1');
+    // Should not have called PUT
+    expect(mockFetch).toHaveBeenCalledTimes(1); // Only the GET
+  });
+
+  it('migrates settings, theme, and recentFiles from localStorage', async () => {
+    // Mock disk as empty
+    mockFetch.mockResolvedValueOnce(jsonResponse({}));
+    // Mock save
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    store['md-redline-settings'] = JSON.stringify({ enableResolve: true });
+    store['theme'] = 'dark';
+    store['md-redline-recent-files'] = JSON.stringify([
+      { path: '/test.md', name: 'test.md', openedAt: '2026-01-01' },
+    ]);
+
+    await migrateLocalStorageToDisk();
+
+    // Verify PUT was called with migrated data
+    expect(mockFetch).toHaveBeenCalledTimes(2);
+    const putCall = mockFetch.mock.calls[1];
+    expect(putCall[0]).toBe('/api/preferences');
+    const body = JSON.parse(putCall[1].body);
+    expect(body.settings).toEqual({ enableResolve: true });
+    expect(body.theme).toBe('dark');
+    expect(body.recentFiles).toHaveLength(1);
+  });
+
+  it('does not migrate legacy author from localStorage', async () => {
+    mockFetch.mockResolvedValueOnce(jsonResponse({}));
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    store['md-redline-author'] = 'PersistentUser';
+
+    await migrateLocalStorageToDisk();
+
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(store['md-redline-migrated-to-disk']).toBe('1');
+  });
+
+  it('removes migrated keys from localStorage except theme', async () => {
+    mockFetch.mockResolvedValueOnce(jsonResponse({}));
+    mockFetch.mockResolvedValueOnce({ ok: true });
+
+    store['md-redline-author'] = 'Alice';
+    store['theme'] = 'dark';
+
+    await migrateLocalStorageToDisk();
+
+    expect(localStorageMock.removeItem).toHaveBeenCalledWith('md-redline-author');
+    // Theme should NOT be removed (next-themes reads it synchronously)
+    expect(localStorageMock.removeItem).not.toHaveBeenCalledWith('theme');
+  });
+
+  it('sets migrated flag after successful migration', async () => {
+    mockFetch.mockResolvedValueOnce(jsonResponse({}));
+    await migrateLocalStorageToDisk();
+    expect(store['md-redline-migrated-to-disk']).toBe('1');
+  });
+
+  it('keeps local data and retries later when saving to disk fails', async () => {
+    mockFetch.mockResolvedValueOnce(jsonResponse({}));
+    mockFetch.mockResolvedValueOnce({ ok: false, status: 500 });
+
+    store['md-redline-author'] = 'Alice';
+    store['md-redline-settings'] = JSON.stringify({ enableResolve: true });
+    store['theme'] = 'dark';
+
+    await migrateLocalStorageToDisk();
+
+    expect(store['md-redline-settings']).toBe(JSON.stringify({ enableResolve: true }));
+    expect(store['theme']).toBe('dark');
+    expect(store['md-redline-migrated-to-disk']).toBeUndefined();
+  });
+});

package/src/lib/preferences-client.ts

@@ -0,0 +1,94 @@
+import { readJsonResponse } from './http';
+
+export interface RecentFileEntry {
+  path: string;
+  name: string;
+  openedAt: string;
+}
+
+export interface DiskPreferences {
+  author?: string;
+  settings?: Record<string, unknown>;
+  theme?: string;
+  recentFiles?: RecentFileEntry[];
+}
+
+export async function fetchPreferences(): Promise<DiskPreferences> {
+  try {
+    const res = await fetch('/api/preferences');
+    const data = await readJsonResponse<DiskPreferences>(res);
+    if (!res.ok || !data) return {};
+    return data;
+  } catch {
+    return {};
+  }
+}
+
+export async function savePreferencesToDisk(patch: Partial<DiskPreferences>): Promise<boolean> {
+  try {
+    const res = await fetch('/api/preferences', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    });
+    return res.ok;
+  } catch {
+    // Server unavailable — silently fail, localStorage is the fallback
+    return false;
+  }
+}
+
+const MIGRATED_KEY = 'md-redline-migrated-to-disk';
+
+export async function migrateLocalStorageToDisk(): Promise<void> {
+  // Skip if already migrated
+  if (localStorage.getItem(MIGRATED_KEY)) return;
+
+  try {
+    const existing = await fetchPreferences();
+    // If dotfile already has data, mark as migrated and skip
+    if (Object.keys(existing).length > 0) {
+      localStorage.setItem(MIGRATED_KEY, '1');
+      return;
+    }
+
+    // Collect from localStorage
+    const patch: DiskPreferences = {};
+
+    const settingsRaw = localStorage.getItem('md-redline-settings');
+    if (settingsRaw) {
+      try {
+        patch.settings = JSON.parse(settingsRaw);
+      } catch {
+        /* ignore */
+      }
+    }
+
+    const theme = localStorage.getItem('theme');
+    if (theme) patch.theme = theme;
+
+    const recentRaw = localStorage.getItem('md-redline-recent-files');
+    if (recentRaw) {
+      try {
+        patch.recentFiles = JSON.parse(recentRaw);
+      } catch {
+        /* ignore */
+      }
+    }
+
+    if (Object.keys(patch).length > 0) {
+      const saved = await savePreferencesToDisk(patch);
+      if (!saved) return;
+    }
+
+    // Remove migrated keys from localStorage (keep theme for next-themes flash-free init)
+    localStorage.removeItem('md-redline-author');
+    localStorage.removeItem('md-redline-settings');
+    localStorage.removeItem('md-redline-recent-files');
+    // Note: do NOT remove 'theme' — next-themes reads it synchronously on startup
+
+    localStorage.setItem(MIGRATED_KEY, '1');
+  } catch {
+    // Migration failed — will retry next load
+  }
+}

package/src/lib/selection-resolver.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { resolveSelection } from './selection-resolver';
+
+// jsdom's Range doesn't implement getBoundingClientRect — stub it.
+if (!Range.prototype.getBoundingClientRect) {
+  Range.prototype.getBoundingClientRect = () =>
+    ({
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      toJSON: () => {},
+    }) as DOMRect;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+});
+
+function mockSelection(
+  opts: {
+    collapsed?: boolean;
+    text?: string;
+    range?: Range;
+  } | null,
+) {
+  const sel = opts
+    ? {
+        isCollapsed: opts.collapsed ?? false,
+        toString: () => opts.text ?? '',
+        getRangeAt: () => opts.range!,
+        rangeCount: opts.range ? 1 : 0,
+      }
+    : null;
+  vi.spyOn(window, 'getSelection').mockReturnValue(sel as unknown as Selection);
+}
+
+describe('resolveSelection', () => {
+  it('returns null when no selection', () => {
+    mockSelection(null);
+    const container = document.createElement('div');
+    expect(resolveSelection(container)).toBeNull();
+  });
+
+  it('returns null when selection is collapsed', () => {
+    mockSelection({ collapsed: true, text: '' });
+    const container = document.createElement('div');
+    expect(resolveSelection(container)).toBeNull();
+  });
+
+  it('returns null when text is less than 2 chars', () => {
+    document.body.innerHTML = '<div id="root">A</div>';
+    const container = document.getElementById('root')!;
+    const textNode = container.firstChild!;
+
+    const range = document.createRange();
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 1);
+
+    mockSelection({ text: 'A', range });
+    expect(resolveSelection(container)).toBeNull();
+  });
+
+  it('returns correct contextBefore and contextAfter for a mid-document selection', () => {
+    const content = 'The quick brown fox jumps over the lazy dog and then some more text follows';
+    document.body.innerHTML = `<div id="root">${content}</div>`;
+    const container = document.getElementById('root')!;
+    const textNode = container.firstChild!;
+
+    // Select "fox jumps"
+    const selStart = content.indexOf('fox jumps');
+    const selEnd = selStart + 'fox jumps'.length;
+
+    const range = document.createRange();
+    range.setStart(textNode, selStart);
+    range.setEnd(textNode, selEnd);
+
+    mockSelection({ text: 'fox jumps', range });
+
+    const result = resolveSelection(container);
+    expect(result).not.toBeNull();
+    expect(result!.text).toBe('fox jumps');
+    expect(result!.contextBefore).toBe(content.slice(Math.max(0, selStart - 40), selStart));
+    expect(result!.contextAfter).toBe(content.slice(selEnd, selEnd + 40));
+    expect(result!.offset).toBe(selStart);
+  });
+
+  it('handles leading whitespace in selection correctly', () => {
+    // Simpler: content "Hello  World Goodbye"
+    document.body.innerHTML = '<div id="root">Hello  World Goodbye</div>';
+    const container2 = document.getElementById('root')!;
+    const textNode2 = container2.firstChild!;
+
+    // Select "  World" (positions 5-12) — raw has leading spaces, trim gives "World"
+    const range = document.createRange();
+    range.setStart(textNode2, 5);
+    range.setEnd(textNode2, 12);
+
+    mockSelection({ text: '  World', range });
+
+    const result = resolveSelection(container2);
+    expect(result).not.toBeNull();
+    // Trimmed text should be "World"
+    expect(result!.text).toBe('World');
+    // Leading whitespace is 2 chars, so adjustedStart = 5 + 2 = 7
+    // contextBefore should be content[max(0, 7-40) .. 7] = "Hello  "
+    expect(result!.contextBefore).toBe('Hello  ');
+    // selEnd = 7 + 5 = 12, contextAfter = content[12..52] = " Goodbye"
+    expect(result!.contextAfter).toBe(' Goodbye');
+    expect(result!.offset).toBe(7);
+  });
+});