feat: add local export controls

src/components/ExportControls.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ExportControls } from './ExportControls.js';
+
+describe('ExportControls', () => {
+  it('offers every supported export and invokes the selected format', async () => {
+    const user = userEvent.setup();
+    const onExport = vi.fn().mockResolvedValue(undefined);
+    render(<ExportControls onExport={onExport} />);
+
+    expect(screen.getAllByRole('option')).toHaveLength(5);
+    await user.selectOptions(screen.getByLabelText('Format'), 'markdown');
+    await user.click(screen.getByRole('button', { name: 'Create export' }));
+
+    expect(onExport).toHaveBeenCalledWith('markdown');
+    expect(screen.getByText('The export download is ready.')).toBeVisible();
+  });
+
+  it('keeps a failed export recoverable', async () => {
+    const user = userEvent.setup();
+    const onExport = vi.fn().mockRejectedValue(new Error('Export limit hit'));
+    render(<ExportControls onExport={onExport} />);
+
+    await user.click(screen.getByRole('button', { name: 'Create export' }));
+
+    expect(screen.getByText('Export limit hit')).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Create export' })).toBeEnabled();
+  });
+});

src/components/ExportControls.tsx

@@ -0,0 +1,99 @@
+import { useId, useState, type ChangeEvent } from 'react';
+
+export type OneNoteExportFormat =
+  'static-zip' | 'json' | 'text' | 'markdown' | 'html';
+
+interface ExportControlsProps {
+  onExport(format: OneNoteExportFormat): Promise<void>;
+}
+
+const EXPORT_OPTIONS: ReadonlyArray<{
+  value: OneNoteExportFormat;
+  label: string;
+}> = [
+  { value: 'static-zip', label: 'Static notebook ZIP (recommended)' },
+  { value: 'json', label: 'Structured JSON' },
+  { value: 'text', label: 'Plain text' },
+  { value: 'markdown', label: 'Markdown' },
+  { value: 'html', label: 'Semantic HTML' },
+];
+
+type ExportStatus =
+  | { phase: 'idle' }
+  | { phase: 'preparing' }
+  | { phase: 'complete' }
+  | { phase: 'error'; message: string };
+
+export function ExportControls({ onExport }: ExportControlsProps) {
+  const selectId = useId();
+  const [format, setFormat] = useState<OneNoteExportFormat>('static-zip');
+  const [status, setStatus] = useState<ExportStatus>({ phase: 'idle' });
+
+  const changeFormat = (event: ChangeEvent<HTMLSelectElement>) => {
+    setFormat(event.target.value as OneNoteExportFormat);
+    setStatus({ phase: 'idle' });
+  };
+
+  const createExport = async () => {
+    setStatus({ phase: 'preparing' });
+    try {
+      await onExport(format);
+      setStatus({ phase: 'complete' });
+    } catch (error) {
+      setStatus({
+        phase: 'error',
+        message:
+          error instanceof Error
+            ? error.message
+            : 'The local export could not be created.',
+      });
+    }
+  };
+
+  return (
+    <section className="export-controls" aria-labelledby={`${selectId}-title`}>
+      <div>
+        <p className="eyebrow">Local export</p>
+        <h2 id={`${selectId}-title`}>Save readable notebook content</h2>
+        <p>
+          Exports include parser warnings and an unsupported-content summary.
+          They do not write OneNote files.
+        </p>
+      </div>
+      <div className="export-controls__actions">
+        <label htmlFor={selectId}>Format</label>
+        <select
+          id={selectId}
+          value={format}
+          disabled={status.phase === 'preparing'}
+          onChange={changeFormat}
+        >
+          {EXPORT_OPTIONS.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <button
+          type="button"
+          disabled={status.phase === 'preparing'}
+          onClick={() => void createExport()}
+        >
+          {status.phase === 'preparing' ? 'Preparing…' : 'Create export'}
+        </button>
+      </div>
+      <p
+        className={`export-controls__status${status.phase === 'error' ? ' export-controls__status--error' : ''}`}
+        aria-live="polite"
+      >
+        {status.phase === 'preparing'
+          ? 'Building the export in the local parser worker…'
+          : status.phase === 'complete'
+            ? 'The export download is ready.'
+            : status.phase === 'error'
+              ? status.message
+              : 'No notebook content leaves this browser.'}
+      </p>
+    </section>
+  );
+}