@bendyline/squisq-editor-react 1.6.0 → 1.6.1

package/src/PreviewPanel.tsx

@@ -48,6 +48,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     activeTheme,
     activeTransformStyle,
     activeCaptionStyle,
+    activeCaptionsEnabled,
   } = usePreviewSettings();
 
   // Build the player-ready Doc whenever the parsed doc changes.
@@ -108,10 +109,15 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  // Page mode renders directly from markdown — it doesn't depend on the
-  // parsed Doc tree or the player preview build, so let it fall through
-  // even when those aren't ready yet.
-  if (!previewDoc && activeDisplayMode !== 'page') {
+  // The public DisplayMode values predate the current labels: raw `page`
+  // is the plain Document preview, while raw `linear` is the styled Page view.
+  const isDocumentMode = activeDisplayMode === 'page';
+  const isPageMode = activeDisplayMode === 'linear';
+
+  // Document mode renders directly from markdown — it doesn't depend on the
+  // parsed Doc tree or the player preview build, so let it fall through even
+  // when those aren't ready yet.
+  if (!previewDoc && !isDocumentMode) {
     return (
       <div className={`squisq-preview-status ${className || ''}`} data-testid="preview-panel">
         <p>No content to preview. Start typing in the editor.</p>
@@ -119,8 +125,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
     );
   }
 
-  const fillsContainer =
-    activeDisplayMode === 'linear' || activeDisplayMode === 'page' ? 'stretch' : 'center';
+  const fillsContainer = isDocumentMode || isPageMode ? 'stretch' : 'center';
 
   return (
     <div
@@ -147,7 +152,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           minHeight: 0,
         }}
       >
-        {activeDisplayMode === 'page' ? (
+        {isDocumentMode ? (
           <PlainHtmlPreview
             markdown={markdownSource}
             title={(doc?.frontmatter?.title as string | undefined) ?? undefined}
@@ -155,7 +160,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
             mediaRevision={mediaRevision}
             theme={activeTheme}
           />
-        ) : activeDisplayMode === 'linear' ? (
+        ) : isPageMode ? (
           <LinearDocView
             doc={doc!}
             basePath={basePath}
@@ -164,7 +169,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           />
         ) : (
           <DocPlayer
-            script={previewDoc!}
+            doc={previewDoc!}
             basePath={basePath}
             showControls
             muted
@@ -172,6 +177,7 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
             displayMode={activeDisplayMode}
             theme={activeTheme}
             captionStyle={activeCaptionStyle}
+            captionsEnabled={activeCaptionsEnabled}
           />
         )}
       </div>

package/src/RawEditor.tsx

@@ -56,8 +56,14 @@ const SQUISQ_THEMES: Record<string, string> = {
 };
 
 export interface RawEditorProps {
-  /** Monaco editor theme (default: 'vs-dark') */
-  theme?: string;
+  /**
+   * Monaco editor theme name (default: `'vs'`). Accepts Monaco's built-in
+   * theme ids (`'vs'`, `'vs-dark'`, `'hc-black'`) — which are transparently
+   * mapped to the Squisq-tinted variants — or any custom theme registered
+   * via `monaco.editor.defineTheme`. This is the *code editor* color
+   * theme, distinct from the shell's light/dark `colorScheme`.
+   */
+  monacoTheme?: string;
   /** Show minimap (default: false) */
   minimap?: boolean;
   /** Font size in pixels (default: 14) */
@@ -80,7 +86,7 @@ export interface RawEditorProps {
  * Binds to the shared EditorContext for source synchronization.
  */
 export function RawEditor({
-  theme = 'vs',
+  monacoTheme = 'vs',
   minimap = false,
   fontSize = 14,
   wordWrap = 'on',
@@ -640,7 +646,7 @@ export function RawEditor({
     }
   }, [editorSource, language, monacoNs]);
 
-  const effectiveTheme = SQUISQ_THEMES[theme] ?? theme;
+  const effectiveTheme = SQUISQ_THEMES[monacoTheme] ?? monacoTheme;
 
   // Wait for the lazy monaco namespace + `loader.config()` to settle
   // before mounting `<Editor>`. Without this gate, the @monaco-editor/

package/src/Toolbar.tsx

@@ -52,6 +52,10 @@ export interface ToolbarProps {
   onToggleFiles?: () => void;
   /** Content rendered at the left edge of the toolbar, before the view tabs. */
   slotLeft?: ReactNode;
+  /** Content rendered immediately after the view tabs, on the left side of the
+   *  toolbar (before the formatting controls). Used for the preview mode
+   *  switch in Play view. */
+  slotAfterTabs?: ReactNode;
   /** Content rendered after the formatting controls (in the middle area). */
   slotAfterActions?: ReactNode;
   /** Content rendered at the rightmost end of the toolbar, after all other elements. */
@@ -371,6 +375,7 @@ export function Toolbar({
   showFiles,
   onToggleFiles,
   slotLeft,
+  slotAfterTabs,
   slotAfterActions,
   slotRight,
   showPlayTab = true,
@@ -388,7 +393,7 @@ export function Toolbar({
     versioning,
     allowRecording,
     documentLinkProvider,
-    theme,
+    colorScheme,
   } = useEditorContext();
   // When a canvas textbox is being edited, its Tiptap instance takes over
   // the formatting buttons; otherwise they drive the document editor. The
@@ -826,18 +831,18 @@ export function Toolbar({
             // A diagram is just a heading with the `{[diagram]}` template
             // annotation; the WYSIWYG view renders its editable canvas.
             replacement = '\n## Diagram {[diagram]}\n';
-            newCursorOffset = 4; // start of "Diagram" (after \n## )
+            newCursorOffset = replacement.length;
             break;
           }
           case 'drawing': {
             replacement = '\n## Drawing {[drawing]}\n';
-            newCursorOffset = 4; // start of "Drawing"
+            newCursorOffset = replacement.length;
             break;
           }
           case 'layout': {
             // Seed a starter text layer (a child sub-block) so it isn't blank.
             replacement = LAYOUT_STARTER_MARKDOWN;
-            newCursorOffset = 4; // start of "Layout" in the parent heading
+            newCursorOffset = replacement.length;
             break;
           }
         }
@@ -846,13 +851,13 @@ export function Toolbar({
         const range = selection;
         monacoEditor.executeEdits('toolbar', [{ range, text: replacement }]);
 
-        // If no selection, select the placeholder text so user can type over it
+        // If no selection, move the cursor to the command's preferred edit point.
         if (!hasSelection && newCursorOffset > 0) {
           const startPos = model.getPositionAt(
             model.getOffsetAt(range.getStartPosition()) + newCursorOffset,
           );
-          // Just place cursor after the prefix
           monacoEditor.setPosition(startPos);
+          monacoEditor.revealPositionInCenterIfOutsideViewport(startPos);
         }
 
         monacoEditor.focus();
@@ -1436,6 +1441,8 @@ export function Toolbar({
           ))}
         </div>
       )}
+      {/* After-tabs slot — left side, before formatting controls (preview mode switch) */}
+      {slotAfterTabs}
       {/* Formatting buttons — hidden in preview mode and code mode */}
       {!isPreview && !isCodeMode && (
         <div className="squisq-toolbar-actions" ref={actionsRef}>
@@ -1813,9 +1820,12 @@ export function Toolbar({
 
       {/* After-actions slot — after formatting controls */}
       {slotAfterActions}
-      {/* Spacer — only needed when the actions container (which has flex:1
-          and already pushes right-side items to the end) isn't rendered. */}
-      {(isPreview || isCodeMode) && <div style={{ flex: 1 }} />}
+      {/* Spacer — pushes right-side items to the end when the flex:1 actions
+          container isn't rendered. In preview mode PreviewToolbarControls
+          supplies its own flex:1 filler (and measures that leftover width to
+          decide whether to collapse), so a second spacer here would split the
+          slack and make the controls collapse too early. */}
+      {isCodeMode && <div style={{ flex: 1 }} />}
       {/* Version history — renders only when the host enabled versioning
           and a container is wired up. The component owns its own button
           and popover; we just give it a slot in the toolbar. */}
@@ -1897,7 +1907,7 @@ export function Toolbar({
           <div
             ref={insertMenuRef}
             className="squisq-insert-menu"
-            data-theme={theme}
+            data-theme={colorScheme}
             style={{ position: 'fixed', top: insertMenuAnchor.top, left: insertMenuAnchor.left }}
             role="menu"
           >
@@ -1937,7 +1947,7 @@ export function Toolbar({
             onSelect={handleEmojiSelect}
             onClose={closeEmojiPicker}
             anchorRef={emojiButtonRef as React.RefObject<HTMLElement>}
-            theme={theme === 'dark' ? 'dark' : 'light'}
+            theme={colorScheme === 'dark' ? 'dark' : 'light'}
             style={{
               position: 'fixed',
               top: emojiPickerAnchor.top,

package/src/VersionHistoryPanel.tsx

@@ -115,7 +115,7 @@ function formatBytes(n: number): string {
 }
 
 export function VersionHistoryPanel() {
-  const { versioning, replaceAll, markdownSource, theme } = useEditorContext();
+  const { versioning, replaceAll, markdownSource, colorScheme } = useEditorContext();
   const [open, setOpen] = useState(false);
   const [state, setState] = useState<PanelState>(initialState);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -214,7 +214,7 @@ export function VersionHistoryPanel() {
     [markdownSource],
   );
   const hasDiff = state.selected !== null;
-  const diffTheme = theme === 'dark' ? 'vs-dark' : 'vs';
+  const diffTheme = colorScheme === 'dark' ? 'vs-dark' : 'vs';
 
   if (!versioning) return null;
 

package/src/__tests__/codeContextSectionView.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { CodeContextSectionView } from '../codeContext/CodeContextSectionView';
+
+const noop = () => {};
+
+const baseSection = {
+  id: 'foo@10',
+  summaryMarkdown: '**foo** — does things · ↓2 imported-by',
+  markdown: 'Body text with [`a.ts`](gezel-nav:src%2Fa.ts) and [line 4](#L4).',
+};
+
+function renderView(over: Partial<Parameters<typeof CodeContextSectionView>[0]> = {}) {
+  const props = {
+    section: baseSection,
+    expanded: false,
+    onToggle: vi.fn(),
+    linkSchemes: ['gezel-nav'] as const,
+    onLinkClick: vi.fn(),
+    onRevealLine: vi.fn(),
+    onMeasure: noop,
+    ...over,
+  };
+  const utils = render(<CodeContextSectionView {...props} />);
+  return { ...utils, props };
+}
+
+describe('<CodeContextSectionView>', () => {
+  it('renders the strip collapsed, body absent (lazy)', () => {
+    const { container } = renderView();
+    expect(container.querySelector('.squisq-ccx-strip')).toBeTruthy();
+    expect(container.textContent).toContain('foo');
+    expect(container.querySelector('.squisq-ccx-body')).toBeNull();
+  });
+
+  it('strip click calls onToggle with the section id', () => {
+    const { container, props } = renderView();
+    fireEvent.click(container.querySelector('.squisq-ccx-strip')!);
+    expect(props.onToggle).toHaveBeenCalledWith('foo@10');
+  });
+
+  it('expanded body renders markdown with host-scheme links as real anchors', () => {
+    const { container } = renderView({ expanded: true });
+    const body = container.querySelector('.squisq-ccx-body')!;
+    expect(body.textContent).toContain('Body text');
+    const anchors = [...body.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).toContain('gezel-nav:src%2Fa.ts');
+    expect(anchors).toContain('#L4');
+  });
+
+  it('expanded without markdown shows the loading row', () => {
+    const { container } = renderView({
+      expanded: true,
+      section: { ...baseSection, markdown: undefined },
+    });
+    expect(container.querySelector('.squisq-ccx-body--loading')?.textContent).toBe('Loading…');
+  });
+
+  it('link clicks are intercepted: handled by default, defaulted on false', () => {
+    const onLinkClick = vi.fn(() => undefined);
+    const { container } = renderView({ expanded: true, onLinkClick });
+    const nav = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === 'gezel-nav:src%2Fa.ts',
+    )!;
+    const first = fireEvent.click(nav);
+    expect(onLinkClick).toHaveBeenCalledWith('gezel-nav:src%2Fa.ts', { sectionId: 'foo@10' });
+    expect(first).toBe(false); // preventDefault was called
+
+    onLinkClick.mockReturnValue(false as unknown as undefined);
+    const second = fireEvent.click(nav);
+    expect(second).toBe(true); // host declined — default navigation allowed
+  });
+
+  it('#L links reveal natively and never reach onLinkClick', () => {
+    const onLinkClick = vi.fn();
+    const onRevealLine = vi.fn();
+    const { container } = renderView({ expanded: true, onLinkClick, onRevealLine });
+    const line = [...container.querySelectorAll('a')].find(
+      (a) => a.getAttribute('href') === '#L4',
+    )!;
+    fireEvent.click(line);
+    expect(onRevealLine).toHaveBeenCalledWith(4);
+    expect(onLinkClick).not.toHaveBeenCalled();
+  });
+
+  it('without linkSchemes, custom-scheme links render blocked (no anchor)', () => {
+    const { container } = renderView({ expanded: true, linkSchemes: undefined });
+    const anchors = [...container.querySelectorAll('a')].map((a) => a.getAttribute('href'));
+    expect(anchors).not.toContain('gezel-nav:src%2Fa.ts');
+    expect(container.querySelector('.squisq-md-link--blocked')).toBeTruthy();
+  });
+});

package/src/__tests__/codeContextZoneManager.test.ts

@@ -0,0 +1,127 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Exercises the zone manager against a fake Monaco editor with a recording
+ * changeViewZones accessor — batch semantics, delegate mutation on move and
+ * height changes, model-change rebuild, and dispose cleanup.
+ */
+import { describe, expect, it, vi } from 'vitest';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+import { CodeContextZoneManager } from '../codeContext/CodeContextZoneManager';
+
+type Zone = MonacoEditorNs.IViewZone & { ordinal?: number };
+
+function fakeEditor() {
+  const zones = new Map<string, Zone>();
+  const layoutCalls: string[] = [];
+  let counter = 0;
+  let batches = 0;
+  let modelCb: (() => void) | null = null;
+  const accessor = {
+    addZone: (zone: Zone) => {
+      const id = `z${++counter}`;
+      zones.set(id, zone);
+      return id;
+    },
+    removeZone: (id: string) => {
+      zones.delete(id);
+    },
+    layoutZone: (id: string) => {
+      layoutCalls.push(id);
+    },
+  };
+  const editor = {
+    changeViewZones: (cb: (a: typeof accessor) => void) => {
+      batches++;
+      cb(accessor);
+    },
+    onDidChangeModel: (cb: () => void) => {
+      modelCb = cb;
+      return { dispose: vi.fn() };
+    },
+  } as unknown as MonacoEditorNs.IStandaloneCodeEditor;
+  return {
+    editor,
+    zones,
+    layoutCalls,
+    get batches() {
+      return batches;
+    },
+    fireModelChange: () => modelCb?.(),
+  };
+}
+
+describe('CodeContextZoneManager', () => {
+  it('creates zones above the anchor line in one batch, with dom nodes', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'file', line: 0, ordinal: 0 },
+      { id: 'foo@10', line: 10, ordinal: 1 },
+    ]);
+    expect(fake.batches).toBe(1);
+    expect(fake.zones.size).toBe(2);
+    const list = [...fake.zones.values()];
+    expect(list.map((z) => z.afterLineNumber)).toEqual([0, 9]);
+    expect(list.map((z) => z.ordinal)).toEqual([0, 1]);
+    expect(list.every((z) => z.suppressMouseDown)).toBe(true);
+    expect(mgr.getDomNode('foo@10')?.className).toBe('squisq-ccx-zone');
+  });
+
+  it('sync with no changes performs no batch', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(fake.batches).toBe(1);
+  });
+
+  it('moves mutate the delegate and layoutZone — dom node survives', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    const nodeBefore = mgr.getDomNode('a');
+    mgr.sync([{ id: 'a', line: 8, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(1);
+    expect([...fake.zones.values()][0]!.afterLineNumber).toBe(7);
+    expect(fake.layoutCalls.length).toBe(1);
+    expect(mgr.getDomNode('a')).toBe(nodeBefore);
+  });
+
+  it('setHeight mutates heightInPx and lays out; sub-pixel deltas are ignored', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    mgr.setHeight('a', 120);
+    expect([...fake.zones.values()][0]!.heightInPx).toBe(120);
+    expect(fake.layoutCalls.length).toBe(1);
+    mgr.setHeight('a', 119.5); // ceils back to 120 — no relayout
+    expect(fake.layoutCalls.length).toBe(1);
+  });
+
+  it('a model change drops bookkeeping; the next sync recreates zones', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    const onChange = vi.fn();
+    mgr.onDidChangeZones(onChange);
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    fake.fireModelChange();
+    expect(onChange).toHaveBeenCalledTimes(2); // sync + model change
+    expect(mgr.getDomNode('a')).toBeUndefined();
+    mgr.sync([{ id: 'a', line: 3, ordinal: 1 }]);
+    expect(mgr.getDomNode('a')).toBeDefined();
+  });
+
+  it('dispose removes every zone and goes inert', () => {
+    const fake = fakeEditor();
+    const mgr = new CodeContextZoneManager(fake.editor);
+    mgr.sync([
+      { id: 'a', line: 1, ordinal: 1 },
+      { id: 'b', line: 2, ordinal: 2 },
+    ]);
+    mgr.dispose();
+    expect(fake.zones.size).toBe(0);
+    mgr.sync([{ id: 'c', line: 3, ordinal: 1 }]);
+    expect(fake.zones.size).toBe(0);
+  });
+});

package/src/__tests__/diffContextSections.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { diffContextSections, type ZoneSpec } from '../codeContext/diffContextSections';
+
+const spec = (id: string, line: number, ordinal = 0): ZoneSpec => ({ id, line, ordinal });
+
+describe('diffContextSections', () => {
+  it('adds everything on first sync', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('b', 5)]);
+    expect(d.add.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('is a no-op for identical specs', () => {
+    const specs = [spec('a', 1, 1), spec('b', 5, 2)];
+    const d = diffContextSections(
+      specs,
+      specs.map((s) => ({ ...s })),
+    );
+    expect(d.add).toEqual([]);
+    expect(d.remove).toEqual([]);
+    expect(d.move).toEqual([]);
+  });
+
+  it('moves when a line or ordinal changes, removes vanished ids', () => {
+    const d = diffContextSections(
+      [spec('a', 1, 1), spec('b', 5, 2), spec('c', 9, 3)],
+      [spec('a', 2, 1), spec('b', 5, 4)],
+    );
+    expect(d.move.map((z) => z.id)).toEqual(['a', 'b']);
+    expect(d.remove).toEqual(['c']);
+    expect(d.add).toEqual([]);
+  });
+
+  it('duplicate ids in next: first occurrence wins, no double-add', () => {
+    const d = diffContextSections([], [spec('a', 1), spec('a', 7)]);
+    expect(d.add).toEqual([spec('a', 1)]);
+  });
+});

package/src/__tests__/editorShellCodeContext.test.tsx

@@ -0,0 +1,86 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Prop-contract test for `codeContext`: the shell threads it to the
+ * CodeContextZones bridge in code mode only (mirrors the submitOnEnter
+ * threading tests). Heavy surfaces are stubbed.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import type { CodeContext } from '../codeContext/types';
+
+const zoneOptions: CodeContext[] = [];
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: () => <div data-testid="raw-editor-stub" />,
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-stub" />,
+}));
+vi.mock('../codeContext/CodeContextZones', () => ({
+  CodeContextZones: ({ options }: { options: CodeContext }) => {
+    zoneOptions.push(options);
+    return <div data-testid="code-context-stub" />;
+  },
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  zoneOptions.length = 0;
+  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+const codeContext: CodeContext = {
+  sections: [{ id: 'foo@2', line: 2, summaryMarkdown: '**foo**', markdown: 'body' }],
+};
+
+describe('<EditorShell> codeContext prop', () => {
+  it('mounts CodeContextZones with the options in code mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeTruthy();
+    expect(zoneOptions[0]).toBe(codeContext);
+  });
+
+  it('does not mount without the prop', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="const x = 1;" fileName="a.ts" />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+
+  it('ignores codeContext in markdown mode', () => {
+    const { queryByTestId } = render(
+      <EditorShell initialMarkdown="# hi" fileName="a.md" codeContext={codeContext} />,
+    );
+    expect(queryByTestId('code-context-stub')).toBeNull();
+  });
+});

package/src/__tests__/editorShellProps.test.tsx

@@ -0,0 +1,96 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * Prop-contract tests for the v1.5 naming renames:
+ *   - `<EditorShell>`'s light/dark chrome prop is `colorScheme` (was
+ *     `theme`), and it drives the `data-theme` attribute on the shell root.
+ *   - `<RawEditor>`'s Monaco theme-string prop is `monacoTheme` (was
+ *     `theme`); the shell maps `colorScheme` → `monacoTheme` (`'dark'` →
+ *     `'vs-dark'`, `'light'` → `'vs'`).
+ *
+ * The heavy editing surfaces are stubbed so the shell mounts under jsdom
+ * without dragging in monaco-editor or Tiptap. The RawEditor stub records
+ * the props it receives so we can assert `monacoTheme` reaches it.
+ */
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import type { RawEditorProps } from '../RawEditor';
+
+// Records the props the shell passes to RawEditor on each render.
+const rawEditorProps: RawEditorProps[] = [];
+
+vi.mock('../RawEditor', () => ({
+  RawEditor: (props: RawEditorProps) => {
+    rawEditorProps.push(props);
+    return <div data-testid="raw-editor-stub" />;
+  },
+}));
+vi.mock('../WysiwygEditor', () => ({
+  WysiwygEditor: () => <div data-testid="wysiwyg-editor-stub" />,
+}));
+vi.mock('../PreviewPanel', () => ({
+  PreviewPanel: () => <div data-testid="preview-stub" />,
+}));
+
+import { EditorShell } from '../EditorShell';
+
+beforeEach(() => {
+  rawEditorProps.length = 0;
+  // jsdom lacks matchMedia / ResizeObserver, which the Toolbar uses.
+  if (typeof window !== 'undefined' && typeof window.matchMedia !== 'function') {
+    Object.defineProperty(window, 'matchMedia', {
+      configurable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(() => false),
+      }),
+    });
+  }
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    class ResizeObserverStub {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    }
+    (globalThis as unknown as { ResizeObserver: typeof ResizeObserverStub }).ResizeObserver =
+      ResizeObserverStub;
+  }
+});
+
+describe('<EditorShell> colorScheme prop', () => {
+  it('applies dark chrome via data-theme when colorScheme="dark"', () => {
+    const { container } = render(
+      <EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />,
+    );
+    const shell = container.querySelector('.squisq-editor-shell');
+    expect(shell?.getAttribute('data-theme')).toBe('dark');
+  });
+
+  it('defaults to light chrome when colorScheme is omitted', () => {
+    const { container } = render(<EditorShell initialMarkdown="# hi" initialView="raw" />);
+    const shell = container.querySelector('.squisq-editor-shell');
+    expect(shell?.getAttribute('data-theme')).toBe('light');
+  });
+});
+
+describe('RawEditor monacoTheme prop', () => {
+  it('maps colorScheme="dark" to monacoTheme="vs-dark"', () => {
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="dark" />);
+    expect(screen.getByTestId('raw-editor-stub')).toBeTruthy();
+    const last = rawEditorProps[rawEditorProps.length - 1];
+    expect(last?.monacoTheme).toBe('vs-dark');
+  });
+
+  it('maps colorScheme="light" to monacoTheme="vs"', () => {
+    render(<EditorShell initialMarkdown="# hi" initialView="raw" colorScheme="light" />);
+    expect(screen.getByTestId('raw-editor-stub')).toBeTruthy();
+    const last = rawEditorProps[rawEditorProps.length - 1];
+    expect(last?.monacoTheme).toBe('vs');
+  });
+});