@kabmo-labs/kabmo 0.8.0 → 0.9.0

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -21,6 +21,7 @@ import {
   EDITOR_MIN_FONT_SIZE,
 } from '@/shared/lib/code/editor/typography';
 import { useEditorFontStack } from '@/client/hooks/editor/font';
+import { useEditorTheme } from '@/client/hooks/editor/theme';
 import { MOBILE_SCROLL_POSITIONS_KEY } from '@/shared/lib/workspace/scroll-positions';
 import { ViewerSurface, hasViewerSurface } from '@/client/components/workspace/editor/viewers/dispatch';
 import { BINARY_VIEWERS, RENDERED_VIEWERS, VIEWER_LABELS, viewerKindFor } from '@/shared/lib/fs/document-kind';
@@ -49,6 +50,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
   const [fontSize, setFontSize] = useState(EDITOR_DEFAULT_FONT_SIZE);
   const [wordWrap, setWordWrap] = useState(true);
   const editorFontFamily = useEditorFontStack();
+  const editorTheme = useEditorTheme();
 
   const isMd = viewerKind === 'markdown';
   // A byte viewer (image, PDF, DOCX, workbook) owns the whole surface and has
@@ -76,6 +78,12 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     missing,
   });
 
+  /**
+   * The code surface's scroller, which belongs to CodeMirror and appears only
+   * once its view mounts.
+   */
+  const [codeScroller, setCodeScroller] = useState<HTMLElement | null>(null);
+
   // Closing and reopening the same file is a remount, so the offset is restored
   // from the session's own state — the phone shows one file at a time, and its
   // key is that file's path (a rendered view keeps its own offset, as on the
@@ -88,6 +96,9 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     // and the desktop drops entries when a tab closes — against ids that mean
     // nothing here.
     slot: MOBILE_SCROLL_POSITIONS_KEY,
+    // The code surface's scroller belongs to CodeMirror and appears only once
+    // its view mounts; the markdown preview owns its own container.
+    element: isMd && isPreview ? undefined : codeScroller,
   });
 
   // A search row on the phone opens this full-screen editor, so the hand-off
@@ -135,9 +146,15 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
   // The sheet's own list, from the LIVE buffer — the same derivation the
   // desktop section uses, so the two cannot disagree about what a state means.
   // A byte viewer has no text buffer to scan, which is its own sentence.
-  const { symbols: outlineSymbols, notice: outlineNotice } = useOutlineView({
+  const {
+    symbols: outlineSymbols,
+    total: outlineTotal,
+    truncated: outlineTruncated,
+    notice: outlineNotice,
+  } = useOutlineView({
     content,
     language: lang,
+    path: file.path ?? null,
     state: byteViewer ? 'not-a-document' : editor.loadError ? 'error' : editor.loaded ? 'ready' : 'loading',
     note: byteViewer
       ? `${VIEWER_LABELS[viewerKind]} files have no text outline.`
@@ -148,6 +165,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
     <div
       className="fixed inset-x-0 top-0 h-dvh z-[60] bg-paper flex flex-col font-mono text-xs select-none"
       {...drop.dropProps}
+      {...drop.captureDropProps}
     >
       <EditorDropOverlay visible={drop.isDragging} />
       
@@ -208,7 +226,9 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
           content={editor.content}
           revision={editor.revision}
         />
-      ) : (
+      ) : editor.isLoading || editor.unsupported || editor.loadError || (isMd && isPreview) ? (
+        // The states that draw their own scrolling content — and the markdown
+        // preview, which is a document, not an editor — share one scroller.
         <div
           ref={scroll.ref}
           onScroll={scroll.onScroll}
@@ -233,7 +253,7 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
               <span className="text-xs text-error font-sans">Could not read {file.name}</span>
               <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
             </div>
-          ) : isMd && isPreview ? (
+          ) : (
             /* Markdown Preview Mode — styled by `.prose-content` (the chat
                timeline's system), see the desktop editor for why there is no
                `prose` wrapper. */
@@ -244,42 +264,41 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
                 scope={{ path: file.path ?? file.name, root: file.root, repo: file.repo }}
               />
             </div>
-          ) : (
-            /* Code Editor with Line Numbers - Desktop styled: gutter bg-canvas border-r border-ink/10 */
-            <CodeSurface
-              ref={surfaceRef}
-              value={content}
-              onValueChange={editor.onChange}
-              language={lang}
-              wordWrap={wordWrap}
-              marks={revealMarks}
-              currentMark={currentMark}
-              rootClassName="flex min-h-full bg-paper"
-              // The gutter auto-sizes to its widest number rather than taking a
-              // fixed width: the numbers scale with the zoom control, and a
-              // pinned `w-10` clipped a 3-digit line number at 18px.
-              gutterClassName="flex flex-col text-right pr-2 select-none text-ink/30 bg-canvas border-r border-ink/10 font-mono flex-shrink-0"
-              gutterLineClassName="min-w-[1.5rem]"
-              gutterStyle={{
-                fontSize,
-                paddingTop: 12,
-                paddingBottom: 12,
-                lineHeight: EDITOR_LINE_HEIGHT,
-                fontFamily: editorFontFamily,
-              }}
-              editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
-              editorClassName="focus:outline-none"
-              editorStyle={{
-                fontFamily: editorFontFamily,
-                fontSize,
-                lineHeight: EDITOR_LINE_HEIGHT,
-                backgroundColor: 'transparent',
-                minHeight: '100%',
-                color: 'var(--theme-ink)',
-              }}
-            />
           )}
         </div>
+      ) : (
+        /* The code surface owns its own scroller (CodeMirror's), so it is NOT
+           wrapped in one: an outer `overflow-auto` resolves the editor's
+           `height: 100%` against an auto-height box, so the editor grew to the
+           document's full height and the panel had nothing to scroll. */
+        <CodeSurface
+          ref={surfaceRef}
+          value={content}
+          onValueChange={editor.onChange}
+          language={lang}
+          wordWrap={wordWrap}
+          documentKey={fileKey}
+          marks={revealMarks}
+          currentMark={currentMark}
+          onScroller={setCodeScroller}
+          scrollTestId="editor-scroller"
+          // No `bg-paper`: an explicit editor theme paints its own surface, and
+          // the panel's colour under it would be a border of the wrong shade.
+          // `select-text` is the desktop pane's rule, and it matters more here:
+          // the sheet's own root is `select-none` (it is a header-and-status
+          // layout), and the editor is now a `contenteditable` whose selection
+          // and caret are the BROWSER's business — an inherited `user-select:
+          // none` is the one thing that can take that away on a phone.
+          className="flex-1 min-h-0 text-ink select-text"
+          themeVars={editorTheme.vars}
+          themes={editorTheme.themes}
+          padding={12}
+          style={{
+            fontFamily: editorFontFamily,
+            fontSize: `${fontSize}px`,
+            lineHeight: EDITOR_LINE_HEIGHT,
+          }}
+        />
       )}
 
       {/* The outline is a floating control rather than a panel section: on a
@@ -289,7 +308,13 @@ export function MobileFullEditor({ file, missing = false, onClose, onFileSaved,
           target over the content, list in a sheet. Hidden for a byte viewer,
           which has no text to outline. */}
       {!byteViewer && (
-        <MobileOutlineButton path={file.path ?? null} symbols={outlineSymbols} emptyNotice={outlineNotice} />
+        <MobileOutlineButton
+          path={file.path ?? null}
+          symbols={outlineSymbols}
+          total={outlineTotal}
+          truncated={outlineTruncated}
+          emptyNotice={outlineNotice}
+        />
       )}
 
       <EditorStatusBar

package/src/client/components/mobile/mobile-right-sidebar/OutlineButton.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The phone's outline sheet.
+ *
+ * Same two facts the desktop section shows, on a surface that cannot share its
+ * markup (the drawer has no room for a section pinned to a floor, so this is a
+ * floating button and a modal). Both are pinned here because each fails
+ * silently:
+ *
+ * - **the button names the TOTAL**, so a truncated list cannot read as "this
+ *   file has 500 symbols";
+ * - **a truncated list says what it is not showing**, in the sheet, where the
+ *   reader is actually looking.
+ *
+ * Rendered with `h()` against happy-dom. `Modal` is the shared shell every
+ * dialog in the app uses, so opening one here is the same code path a phone
+ * takes.
+ */
+
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { MobileOutlineButton } from '@/client/components/mobile/mobile-right-sidebar/OutlineButton';
+import { MAX_OUTLINE_ROWS, outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
+import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { installDomGlobals, restoreDomGlobals } from '@/test-support/pristine-globals';
+
+let container: HTMLElement;
+
+beforeAll(() => {
+  installDomGlobals(new Window({ url: 'http://localhost' }));
+});
+
+afterEach(() => {
+  if (container) {
+    render(null, container);
+    container.remove();
+  }
+});
+
+afterAll(() => {
+  restoreDomGlobals();
+});
+
+function symbols(count: number): OutlineSymbol[] {
+  return Array.from({ length: count }, (_, i) => ({
+    name: `fn${i}`,
+    kind: 'function' as const,
+    line: i + 1,
+    column: 0,
+    depth: 0,
+  }));
+}
+
+async function mount(props: {
+  symbols: OutlineSymbol[];
+  total?: number;
+  truncated?: boolean;
+  path?: string | null;
+  emptyNotice?: string;
+}): Promise<void> {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(
+      h(MobileOutlineButton, {
+        path: props.path === undefined ? 'src/a.ts' : props.path,
+        symbols: props.symbols,
+        total: props.total ?? props.symbols.length,
+        truncated: props.truncated ?? false,
+        emptyNotice: props.emptyNotice ?? 'No symbols found.',
+      }),
+      container,
+    );
+  });
+}
+
+function trigger(): HTMLButtonElement {
+  const el = container.querySelector('button[aria-label^="Outline"]');
+  if (!el) throw new Error('no outline trigger rendered');
+  return el as HTMLButtonElement;
+}
+
+async function open(): Promise<void> {
+  await act(async () => {
+    trigger().click();
+  });
+  for (let i = 0; i < 4; i += 1) await act(async () => {});
+}
+
+describe('MobileOutlineButton', () => {
+  test('no path means no control — an attachment chip has nothing to outline', async () => {
+    await mount({ symbols: symbols(3), path: null });
+
+    expect(container.querySelector('button[aria-label^="Outline"]')).toBeNull();
+  });
+
+  test('the trigger names the TOTAL, not the window', async () => {
+    await mount({ symbols: symbols(MAX_OUTLINE_ROWS), total: 63_618, truncated: true });
+
+    // The accessible name is what a screen reader announces and what a spec
+    // addresses; a window count here would describe the panel, not the file.
+    expect(trigger().getAttribute('aria-label')).toBe('Outline (63618 symbols)');
+  });
+
+  test('a truncated sheet renders the window and says what it is not showing', async () => {
+    await mount({ symbols: symbols(MAX_OUTLINE_ROWS), total: 700, truncated: true });
+    await open();
+
+    const rows = container.querySelectorAll('button[aria-label*=", line "]');
+    expect(rows).toHaveLength(MAX_OUTLINE_ROWS);
+    expect(container.textContent).toContain(outlineTruncatedNotice(700));
+    // The header count reads window/total, so it cannot be mistaken for the
+    // number of symbols the file has.
+    expect(container.textContent).toContain(`${MAX_OUTLINE_ROWS}/700`);
+  });
+
+  test('a complete list shows no truncation sentence', async () => {
+    await mount({ symbols: symbols(4) });
+    await open();
+
+    expect(container.querySelectorAll('button[aria-label*=", line "]')).toHaveLength(4);
+    expect(container.textContent).not.toContain('Showing the first');
+  });
+
+  test('an empty list prints the reason it is empty, not a blank sheet', async () => {
+    await mount({ symbols: [], emptyNotice: 'This tab has no outline.' });
+    await open();
+
+    expect(container.textContent).toContain('This tab has no outline.');
+  });
+});

package/src/client/components/mobile/mobile-right-sidebar/OutlineButton.tsx

@@ -27,15 +27,21 @@ import { Modal } from '@/client/components/common/Modal';
 import { OutlineKindIcon, outlineKindLabel } from '@/client/components/common/outline-kind-icon';
 import { setLineReveal } from '@/client/lib/line-reveal';
 import type { OutlineSymbol } from '@/shared/lib/code/outline/types';
+import { outlineTruncatedNotice } from '@/shared/lib/code/outline/rows';
 
 interface MobileOutlineButtonProps {
   path: string | null;
+  /** The rows to render — already bounded by the hook. */
   symbols: OutlineSymbol[];
+  /** Every symbol found, so the button can say when it is showing a window. */
+  total: number;
+  /** True when `symbols` is only the first `MAX_OUTLINE_ROWS`. */
+  truncated: boolean;
   /** Why there is nothing to list, when `symbols` is empty. */
   emptyNotice: string;
 }
 
-export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlineButtonProps) {
+export function MobileOutlineButton({ path, symbols, total, truncated, emptyNotice }: MobileOutlineButtonProps) {
   const [open, setOpen] = useState(false);
   if (!path) return null;
 
@@ -52,7 +58,7 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
         <button
           type="button"
           onClick={() => setOpen(true)}
-          aria-label={`Outline (${symbols.length} symbols)`}
+          aria-label={`Outline (${total} symbols)`}
           title="Outline"
           className="flex h-9 w-9 items-center justify-center rounded-full border border-ink/20 bg-paper text-ink/60 shadow-sm transition-all hover:bg-ink/5 hover:text-ink active:scale-95"
         >
@@ -69,7 +75,9 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
             <div className="flex min-w-0 items-center gap-2">
               <ListTree size={15} className="flex-shrink-0 text-ink/50" />
               <span className="text-sm font-medium">Outline</span>
-              <span className="font-mono text-[11px] text-ink/40">{symbols.length}</span>
+              <span className="font-mono text-[11px] text-ink/40">
+                {truncated ? `${symbols.length}/${total}` : total}
+              </span>
             </div>
           }
         >
@@ -92,6 +100,9 @@ export function MobileOutlineButton({ path, symbols, emptyNotice }: MobileOutlin
                 </button>
               ))
             )}
+            {truncated && (
+              <div className="px-4 py-2 text-[11px] italic text-ink/40">{outlineTruncatedNotice(total)}</div>
+            )}
           </div>
         </Modal>
       )}

package/src/client/components/mobile/mobile-session-sidebar/Footer.tsx

@@ -1,10 +1,7 @@
-import { Download, Info, Monitor, Settings } from 'lucide-preact';
+import { Info, Monitor, Settings } from 'lucide-preact';
 import packageJson from '@/../package.json';
-import {
-  shellDownloadLabel,
-  shellDownloadShortLabel,
-  type ShellDownload,
-} from '@/client/hooks/ui/updates/shell-download';
+import type { ShellDownload } from '@/client/hooks/ui/updates/shell-download';
+import { ShellUpdateButton } from '@/client/components/common/shell-update-button';
 
 interface MobileSessionFooterProps {
   onSettings: () => void;
@@ -49,27 +46,18 @@ export function MobileSessionFooter({
           <span>About</span>
         </button>
         {shellDownload && (
-          // Directly after About, matching the desktop footer. An `<a>`, not a
-          // button: the download is the browser's (or the WebView's) job, and
-          // `target="_blank"` hands it to the system browser so the console is
-          // not replaced by a file download.
+          // Directly after About, matching the desktop footer.
           //
           // The visible word is the OFFER, not the file type: `APK` told a
           // reader what the bytes are but not what the control does, and on a
           // browser it is the only place the native shell is ever mentioned. An
           // iOS update is an IPA, so the word names the platform instead of a
           // file extension.
-          <a
-            href={shellDownload.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            title={shellDownloadLabel(shellDownload)}
-            aria-label={shellDownloadLabel(shellDownload)}
-            className="flex items-center space-x-1 hover:text-ink transition-colors"
-          >
-            <Download size={14} />
-            <span>{shellDownloadShortLabel(shellDownload)}</span>
-          </a>
+          //
+          // The shared control decides link-versus-button: a desktop shell that
+          // knows its architecture installs the artifact itself, and a link
+          // there would leave the file in Downloads.
+          <ShellUpdateButton download={shellDownload} variant="label" />
         )}
         {onDesktopToggle && (
           <button

package/src/client/components/settings/Modal.tsx

@@ -9,7 +9,9 @@ import { useRestartKabmo } from '@/client/hooks/settings/restart-kabmo';
 import { applyDocumentTheme } from '@/client/hooks/ui/theme';
 import { DEFAULT_THEME_ID } from '@/shared/lib/theme/catalog';
 import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import { EDITOR_DEFAULT_THEME_ID } from '@/shared/lib/code/editor/themes';
 import { EDITOR_FONT_CHANGED_EVENT } from '@/client/hooks/editor/font';
+import { EDITOR_THEME_CHANGED_EVENT } from '@/client/hooks/editor/theme';
 import { useKabmoEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -41,6 +43,7 @@ export interface SettingsModalProps {
 const DEFAULT_SETTINGS: SettingsState = {
   theme: DEFAULT_THEME_ID,
   editorFont: EDITOR_DEFAULT_FONT_FAMILY,
+  editorTheme: EDITOR_DEFAULT_THEME_ID,
   autoSessionTitle: true,
   soundAlerts: true,
   chatCompletionSound: true,
@@ -120,6 +123,11 @@ export function SettingsModal({
       if (typeof window !== 'undefined' && next.editorFont !== prev.editorFont) {
         window.dispatchEvent(new CustomEvent(EDITOR_FONT_CHANGED_EVENT, { detail: next.editorFont }));
       }
+      // Same rule for the editor's colour theme: it is visual, and every open
+      // editor subscribes rather than reading the boot-time `appSettings`.
+      if (typeof window !== 'undefined' && next.editorTheme !== prev.editorTheme) {
+        window.dispatchEvent(new CustomEvent(EDITOR_THEME_CHANGED_EVENT, { detail: next.editorTheme }));
+      }
       // Only the keys this update actually touched are persisted. The modal
       // holds a full `SettingsState` snapshot taken when it opened, so writing
       // the whole object back would also republish every value it read at that

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -3,6 +3,7 @@ import type { SettingsState } from '@/shared/types';
 import { resolveThemeId } from '@/shared/lib/theme/catalog';
 import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
 import { EditorFontSection } from '@/client/components/settings/categories/appearance-settings/EditorFontSection';
+import { EditorThemeSection } from '@/client/components/settings/categories/appearance-settings/EditorThemeSection';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -25,6 +26,8 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
       </section>
 
       <EditorFontSection settings={settings} onUpdate={onUpdate} />
+
+      <EditorThemeSection settings={settings} onUpdate={onUpdate} />
     </div>
   );
 }

package/src/client/components/settings/categories/appearance-settings/EditorThemeSection.test.tsx

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor theme picker.
+ *
+ * Three properties are invisible to a markup check and each is a bug if dropped:
+ *
+ * - **`Auto` is a card and is selected by default**, so an install that never
+ *   touches this section renders exactly what it did before the feature.
+ * - **The swatch is drawn from the row's own colours**, not from the app
+ *   palette: a card that previewed every theme in the app's ink would make 65
+ *   themes look identical, which is the whole point of the grid.
+ * - **A click writes the theme id through `onUpdate`**, which is what the modal
+ *   turns into the event an already-open editor subscribes to.
+ *
+ * Rendered with `h()` against happy-dom; the modal's write path is pinned in
+ * `settings/Modal`'s own suite.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+
+import { EditorThemeSection } from '@/client/components/settings/categories/appearance-settings/EditorThemeSection';
+import { EDITOR_AUTO_THEME_ID, EDITOR_THEMES, resolveEditorTheme } from '@/shared/lib/code/editor/themes';
+import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import type { SettingsState } from '@/shared/types';
+
+const DOM_GLOBALS = [
+  'window', 'document', 'navigator', 'HTMLElement', 'Element', 'Node', 'Event', 'CustomEvent',
+  'getComputedStyle',
+] as const;
+
+const native: Partial<Record<(typeof DOM_GLOBALS)[number], unknown>> = {};
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (!(key in native)) native[key] = target[key];
+    const value = (win as unknown as Record<string, unknown>)[key];
+    if (value !== undefined) target[key] = value;
+  }
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) {
+    if (native[key] === undefined) delete target[key];
+    else target[key] = native[key];
+  }
+});
+
+let container: HTMLElement | null = null;
+type Update = Partial<SettingsState> | ((prev: SettingsState) => SettingsState);
+let lastUpdate: Update | null = null;
+
+/** Reset through a function: assigning `null` inline would narrow the variable
+ *  at every later read, and the assertions below exist to see the VALUE. */
+function resetUpdate(): void {
+  lastUpdate = null;
+}
+
+/** What the last click asked to persist, as a value the assertions can read. */
+function lastPatch(): unknown {
+  return lastUpdate;
+}
+
+function settings(editorTheme: string): SettingsState {
+  return { editorTheme, editorFont: EDITOR_DEFAULT_FONT_FAMILY } as SettingsState;
+}
+
+async function mount(editorTheme: string): Promise<HTMLElement> {
+  if (container) render(null, container);
+  container = document.body.appendChild(document.createElement('div'));
+  await act(async () => {
+    render(
+      h(EditorThemeSection, {
+        settings: settings(editorTheme),
+        onUpdate: (update: Update) => {
+          lastUpdate = update;
+        },
+      }),
+      container!,
+    );
+  });
+  return container;
+}
+
+/** The card whose label starts with `label` (the label is the first text). */
+function card(root: HTMLElement, label: string): HTMLButtonElement | undefined {
+  return Array.from(root.querySelectorAll('button')).find((button) =>
+    (button.textContent ?? '').trim().startsWith(label),
+  );
+}
+
+describe('editor theme picker', () => {
+  test('Auto is a card, and it is the selected one by default', async () => {
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    const auto = card(root, 'Auto');
+    expect(auto).toBeDefined();
+    expect(auto!.getAttribute('aria-pressed')).toBe('true');
+    // Every shipped theme is offered beside it, so the grid is not a two-item
+    // list with the catalogue hidden behind a filter.
+    expect(root.querySelectorAll('button[aria-pressed]').length).toBe(EDITOR_THEMES.length + 1);
+  });
+
+  test('a stored theme is the selected card, and Auto is not', async () => {
+    const root = await mount('dracula');
+    expect(card(root, 'Dracula Theme')!.getAttribute('aria-pressed')).toBe('true');
+    expect(card(root, 'Auto')!.getAttribute('aria-pressed')).toBe('false');
+  });
+
+  test('the swatch is drawn in the theme’s OWN colours', async () => {
+    const root = await mount('dracula');
+    const theme = resolveEditorTheme('dracula');
+    expect(theme).not.toBeNull();
+    const swatch = Array.from(card(root, 'Dracula Theme')!.querySelectorAll('span')).find(
+      (node) => (node as HTMLElement).style.backgroundColor !== '',
+    ) as HTMLElement | undefined;
+    expect(swatch).toBeDefined();
+    // The card paints the theme's own surface, not the app's — which is what
+    // makes 65 themes distinguishable in one grid.
+    expect(swatch!.style.backgroundColor.toLowerCase()).toBe(theme!.bg.toLowerCase());
+  });
+
+  test('a click writes the theme id', async () => {
+    resetUpdate();
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    await act(async () => {
+      card(root, 'Nord')!.click();
+    });
+    expect(lastPatch()).toEqual({ editorTheme: 'nord' });
+  });
+
+  test('the Auto card writes the sentinel, not an empty string', async () => {
+    resetUpdate();
+    const root = await mount('nord');
+    await act(async () => {
+      card(root, 'Auto')!.click();
+    });
+    // An empty value would resolve to `auto` too, but it would also be a value
+    // no reader can distinguish from a missing setting.
+    expect(lastPatch()).toEqual({ editorTheme: EDITOR_AUTO_THEME_ID });
+  });
+
+  test('the light/dark filters narrow the grid without dropping Auto', async () => {
+    const root = await mount(EDITOR_AUTO_THEME_ID);
+    const darkFilter = Array.from(root.querySelectorAll('button')).find(
+      (button) => (button.textContent ?? '').trim() === 'Dark',
+    );
+    await act(async () => {
+      darkFilter!.click();
+    });
+    const labels = Array.from(root.querySelectorAll('button[aria-pressed]')).map((button) =>
+      (button.textContent ?? '').trim().split(/\d/)[0],
+    );
+    expect(labels.length).toBe(EDITOR_THEMES.filter((theme) => theme.variant === 'dark').length + 1);
+    expect(labels.some((label) => label.startsWith('GitHub Light'))).toBe(false);
+    // Auto is a choice, not a light/dark theme, so a variant filter keeps it.
+    expect(labels.some((label) => label.startsWith('Auto'))).toBe(true);
+  });
+});