ompchamber 3.0.0 → 3.1.1

package/src/client/components/workspace/editor/CommandPalette.test.ts

@@ -0,0 +1,242 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The command palette's rendering.
+ *
+ * The list itself is built and filtered in `shared/lib/code/editor/palette`
+ * (tested there); what this covers is the interaction — that the field takes
+ * focus, that a filter narrows the list, that the arrow keys move the highlight
+ * without leaving the list, and that Enter runs the command that is actually
+ * highlighted rather than the first one.
+ *
+ * Rendered directly with `h()` (no JSX) against happy-dom; the component module
+ * is imported dynamically, after those globals exist.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { ComponentChildren, h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { buildPaletteEntries } from '@/shared/lib/code/editor/palette';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+
+let CommandPalette: (props: { onRun: (command: EditorCommand) => void; onClose: () => void }) => ComponentChildren;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let container: HTMLElement;
+const ran: EditorCommand[] = [];
+let closes = 0;
+
+async function mount() {
+  await act(async () => {
+    render(h(CommandPalette, { onRun: (command) => ran.push(command), onClose: () => closes++ }), container);
+  });
+}
+
+function field(): HTMLInputElement | null {
+  return container.querySelector('input[aria-label="Command palette"]');
+}
+
+/** The visible rows, in order, as their label text. */
+function rows(): string[] {
+  return Array.from(container.querySelectorAll('button')).map((button) => button.textContent ?? '');
+}
+
+/** The row the palette currently highlights (it renders a return-key glyph). */
+function activeRow(): string {
+  return rows().find((text) => text.length > 0 && container.querySelector('button .lucide-corner-down-left') !== null)
+    ? (Array.from(container.querySelectorAll('button')).find((button) => button.querySelector('.lucide-corner-down-left'))?.textContent ?? '')
+    : '';
+}
+
+async function typeQuery(value: string) {
+  const input = field();
+  if (!input) return;
+  input.value = value;
+  await act(async () => {
+    input.dispatchEvent(new globalThis.Event('input', { bubbles: true }));
+  });
+}
+
+async function pressKey(key: string) {
+  await act(async () => {
+    field()?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key, bubbles: true }));
+  });
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+    HTMLInputElement: win.HTMLInputElement,
+    Event: win.Event,
+    MouseEvent: win.MouseEvent,
+    KeyboardEvent: win.KeyboardEvent,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ CommandPalette } = await import('@/client/components/workspace/editor/CommandPalette'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  ran.length = 0;
+  closes = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+describe('CommandPalette', () => {
+  test('takes focus on open, so the palette is usable without a click', async () => {
+    await mount();
+
+    expect(document.activeElement).toBe(field());
+  });
+
+  test('lists the keymap’s commands with their chords', async () => {
+    await mount();
+    const text = rows().join('\n');
+
+    expect(text).toContain('Add selection to next find match');
+    // The chord is the platform's own. Asserted through the palette's own
+    // builder so the expectation is the platform's real answer rather than a
+    // guess at which machine the suite is running on — the runner is Linux and a
+    // developer's laptop is a Mac, and a Mac-only literal passes on exactly one
+    // of them.
+    expect(text).toContain(buildPaletteEntries(isMacPlatform()).find((entry) => entry.command === 'selectNextOccurrence')!.chord);
+    expect(rows().length).toBeGreaterThan(20);
+  });
+
+  test('every command it lists is one the keymap binds', async () => {
+    await mount();
+
+    // The palette is a VIEW of the keymap; an entry with no binding would be a
+    // command that does nothing when it is run.
+    for (const entry of buildPaletteEntries(true)) {
+      expect(EDITOR_KEY_BINDINGS.some((binding) => binding.command === entry.command)).toBe(true);
+    }
+    expect(rows().length).toBeGreaterThan(20);
+  });
+
+  test('a query narrows the list', async () => {
+    await mount();
+    const before = rows().length;
+    await typeQuery('occurrence');
+
+    expect(rows().length).toBeLessThan(before);
+    expect(rows().join('\n')).toContain('Select all occurrences');
+  });
+
+  test('a query nothing matches says so instead of listing everything', async () => {
+    await mount();
+    await typeQuery('zzzz');
+
+    expect(rows()).toEqual([]);
+    expect(container.textContent).toContain('No matching command');
+  });
+
+  test('Enter runs the highlighted command and closes the palette', async () => {
+    await mount();
+    await typeQuery('toggle line comment');
+    await pressKey('Enter');
+
+    expect(ran).toEqual(['toggleComment']);
+    expect(closes).toBe(1);
+  });
+
+  test('the arrow keys move the highlight, and Enter runs the moved-to command', async () => {
+    await mount();
+    await typeQuery('occurrence');
+    const first = activeRow();
+    await pressKey('ArrowDown');
+    const second = activeRow();
+
+    expect(second).not.toBe(first);
+
+    await pressKey('Enter');
+    // Whichever row was highlighted is the one that ran — not the first match.
+    expect(ran.length).toBe(1);
+    expect(second).toContain(ran[0] === 'selectAllOccurrences' ? 'Select all' : 'Add selection');
+  });
+
+  test('the highlight wraps at the end of the list', async () => {
+    await mount();
+    await typeQuery('undo');
+    const only = activeRow();
+    await pressKey('ArrowDown');
+
+    // One row: stepping wraps onto itself rather than falling off the list.
+    expect(activeRow()).toBe(only);
+  });
+
+  test('ArrowUp from the top wraps to the last row', async () => {
+    await mount();
+    await typeQuery('line');
+    const list = rows();
+    await pressKey('ArrowUp');
+    const active = activeRow();
+
+    expect(active.length).toBeGreaterThan(0);
+    expect(list.length).toBeGreaterThan(1);
+  });
+
+  test('Escape closes without running anything', async () => {
+    await mount();
+    await pressKey('Escape');
+
+    expect(closes).toBe(1);
+    expect(ran).toEqual([]);
+  });
+
+  test('clicking a row runs that row’s command', async () => {
+    await mount();
+    await typeQuery('copy line down');
+    const row = container.querySelector('button');
+    await act(async () => {
+      row?.dispatchEvent(new globalThis.MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(ran).toEqual(['copyLineDown']);
+    expect(closes).toBe(1);
+  });
+
+  test('find-bar commands are marked, so a reader knows where they land', async () => {
+    await mount();
+    await typeQuery('replace');
+
+    expect(container.textContent).toContain('find bar');
+  });
+});

package/src/client/components/workspace/editor/CommandPalette.tsx

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The editor's command palette (⌘⇧P).
+ *
+ * Every editor command this app implements is listed here with the chord that
+ * reaches it, both derived from the same keymap table the textarea matches
+ * against. The palette is therefore a VIEW of the keymap rather than a second
+ * list to keep in sync — a command cannot be listed here and unbound there, and
+ * a chord cannot be shown that does not work.
+ *
+ * Commands this editor deliberately does not have (folding, go-to-definition,
+ * the `⌘K` prefix chords) are absent rather than listed and inert: a palette
+ * entry that does nothing is worse than no entry, because the user concludes
+ * the editor is broken rather than that the feature is missing.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { TargetedKeyboardEvent } from 'preact';
+import { CornerDownLeft, Search } from 'lucide-preact';
+
+import { isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { buildPaletteEntries, filterPaletteEntries, type PaletteEntry } from '@/shared/lib/code/editor/palette';
+import { isMacPlatform } from '@/shared/lib/util/platform';
+
+interface CommandPaletteProps {
+  onRun: (command: EditorCommand) => void;
+  onClose: () => void;
+}
+
+export function CommandPalette({ onRun, onClose }: CommandPaletteProps) {
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const listRef = useRef<HTMLDivElement | null>(null);
+
+  // Built once per mount from the keymap, so a filter can never offer something
+  // the keymap does not have.
+  const entries = useMemo(() => buildPaletteEntries(isMacPlatform()), []);
+  const matches = useMemo(() => filterPaletteEntries(entries, query), [entries, query]);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  // Keep the highlighted row in view while the filter shrinks the list under it.
+  useEffect(() => {
+    const list = listRef.current;
+    const active = list?.children[activeIndex] as HTMLElement | undefined;
+    active?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex, matches.length]);
+
+  useEffect(() => {
+    setActiveIndex((previous) => Math.min(previous, Math.max(matches.length - 1, 0)));
+  }, [matches.length]);
+
+  const commit = (entry: PaletteEntry | undefined) => {
+    if (!entry) return;
+    onClose();
+    onRun(entry.command);
+  };
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      setActiveIndex((previous) => (matches.length === 0 ? 0 : (previous + 1) % matches.length));
+      return;
+    }
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      setActiveIndex((previous) => (matches.length === 0 ? 0 : (previous - 1 + matches.length) % matches.length));
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commit(matches[activeIndex]);
+      return;
+    }
+    if (event.key === 'Escape') {
+      // Handled on the panel's capture phase, but stopping here too keeps the
+      // key from reaching the document if the palette is ever mounted alone.
+      event.preventDefault();
+      event.stopPropagation();
+      onClose();
+    }
+  };
+
+  return (
+    <div className="absolute inset-0 z-40 flex items-start justify-center pt-12 bg-ink/10" onClick={onClose}>
+      <div
+        className="w-[520px] max-w-[92%] bg-paper border border-ink/15 rounded-lg shadow-2xl flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center gap-2 px-3 py-2 border-b border-ink/10">
+          <Search size={14} className="text-ink/40 flex-shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onInput={(e) => setQuery(e.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+            placeholder="Type a command or a shortcut"
+            aria-label="Command palette"
+            className="flex-1 min-w-0 bg-transparent text-xs font-sans text-ink focus:outline-none placeholder-ink/40"
+          />
+        </div>
+
+        <div ref={listRef} className="max-h-[320px] overflow-y-auto py-1">
+          {matches.length === 0 ? (
+            <div className="px-3 py-4 text-center text-xs text-ink/40 font-sans">No matching command</div>
+          ) : (
+            matches.map((entry, index) => (
+              <button
+                key={entry.command}
+                type="button"
+                onMouseEnter={() => setActiveIndex(index)}
+                onClick={() => commit(entry)}
+                className={`w-full flex items-center justify-between gap-3 px-3 py-1.5 text-left text-xs font-sans transition-colors ${
+                  index === activeIndex ? 'bg-ink/5 text-ink' : 'text-ink/80'
+                }`}
+              >
+                <span className="flex items-center gap-2 min-w-0">
+                  {index === activeIndex ? <CornerDownLeft size={12} className="text-ink/40 flex-shrink-0" /> : <span className="w-3" />}
+                  <span className="truncate">{entry.label}</span>
+                  {isFindBarCommand(entry.command) ? <span className="text-[10px] text-ink/40 flex-shrink-0">find bar</span> : null}
+                </span>
+                <span className="font-mono text-[10px] text-ink/50 flex-shrink-0">{entry.chord}</span>
+              </button>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/editor/FindWidget.test.ts

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The find bar's rendering.
+ *
+ * The arithmetic lives in `shared/lib/code/editor/find-status` and the state in
+ * `use-editor-find`; what this covers is the bar itself — that every toggle
+ * carries its own `aria-pressed`, that the chord in a tooltip comes from the
+ * keymap rather than a hand-written string, and that Enter and the buttons reach
+ * the hook rather than doing nothing.
+ *
+ * Rendered directly with `h()` (no JSX) against happy-dom; the component modules
+ * are imported dynamically, after those globals exist.
+ */
+
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { ComponentChildren, h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
+
+let FindWidget: (props: { find: EditorFindState }) => ComponentChildren;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let container: HTMLElement;
+/** Calls the widget made into the hook, so the wiring is observable. */
+const calls: string[] = [];
+
+/** A find state whose every action records itself, so a click is provable. */
+function findState(overrides: Partial<EditorFindState> = {}): EditorFindState {
+  return {
+    open: true,
+    replaceOpen: false,
+    query: '',
+    replacement: '',
+    options: { matchCase: false, wholeWord: false, isRegex: false },
+    matches: [],
+    truncated: false,
+    invalid: false,
+    currentIndex: -1,
+    setQuery: (value) => calls.push(`setQuery:${value}`),
+    setReplacement: (value) => calls.push(`setReplacement:${value}`),
+    openFind: () => calls.push('openFind'),
+    openReplace: () => calls.push('openReplace'),
+    toggleReplace: () => calls.push('toggleReplace'),
+    focusRequest: 0,
+    close: () => calls.push('close'),
+    runCommand: (command) => calls.push(`runCommand:${command}`),
+    toggleOption: (key) => calls.push(`toggleOption:${key}`),
+    step: (direction) => calls.push(`step:${direction}`),
+    replaceCurrent: () => calls.push('replaceCurrent'),
+    replaceAll: () => calls.push('replaceAll'),
+    ...overrides,
+  };
+}
+
+async function mount(find: EditorFindState) {
+  await act(async () => {
+    render(h(FindWidget, { find }), container);
+  });
+}
+
+function byLabel(label: string): HTMLElement | null {
+  return container.querySelector(`[aria-label="${label}"]`);
+}
+
+/** The BUTTON with this label — `Replace` also names the text field. */
+function buttonByLabel(label: string): HTMLButtonElement | null {
+  return container.querySelector(`button[aria-label="${label}"]`);
+}
+
+/** The element whose label starts with `prefix` — the toggles carry a chord suffix. */
+function byLabelPrefix(prefix: string): HTMLElement | null {
+  return container.querySelector(`[aria-label^="${prefix}"]`);
+}
+
+async function click(element: HTMLElement | null) {
+  await act(async () => {
+    element?.dispatchEvent(new globalThis.MouseEvent('click', { bubbles: true }));
+  });
+}
+
+/** Type into a field the way the browser reports it. */
+async function type(input: HTMLElement | null, value: string) {
+  if (!input) return;
+  (input as HTMLInputElement).value = value;
+  await act(async () => {
+    input.dispatchEvent(new globalThis.Event('input', { bubbles: true }));
+  });
+}
+
+async function press(input: HTMLElement | null, key: string, shiftKey = false) {
+  await act(async () => {
+    input?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key, shiftKey, bubbles: true }));
+  });
+}
+
+function domGlobals(win: Window): Record<string, unknown> {
+  return {
+    window: win,
+    document: win.document,
+    navigator: win.navigator,
+    Node: win.Node,
+    Element: win.Element,
+    HTMLElement: win.HTMLElement,
+    HTMLInputElement: win.HTMLInputElement,
+    Event: win.Event,
+    MouseEvent: win.MouseEvent,
+    KeyboardEvent: win.KeyboardEvent,
+  };
+}
+
+const installed: Record<string, unknown> = {};
+const displaced: Record<string, unknown> = {};
+
+beforeAll(async () => {
+  const win = new Window({ url: 'http://localhost' });
+  for (const [key, value] of Object.entries(domGlobals(win))) {
+    displaced[key] = (globalThis as Record<string, unknown>)[key];
+    installed[key] = value;
+    (globalThis as Record<string, unknown>)[key] = value;
+  }
+  ({ FindWidget } = await import('@/client/components/workspace/editor/FindWidget'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of Object.keys(installed)) {
+    if (displaced[key] === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = displaced[key];
+  }
+});
+
+beforeEach(() => {
+  calls.length = 0;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
+describe('FindWidget', () => {
+  test('focuses the query field on mount, so ⌘F needs no second click', async () => {
+    await mount(findState());
+
+    expect(document.activeElement).toBe(byLabel('Find'));
+  });
+
+  test('typing in the query reaches the hook', async () => {
+    await mount(findState());
+    await type(byLabel('Find'), 'alpha');
+
+    expect(calls).toEqual(['setQuery:alpha']);
+  });
+
+  test('the replace row is hidden until it is asked for', async () => {
+    await mount(findState());
+
+    expect(byLabel('Replace')).toBeNull();
+    expect(byLabelPrefix('Show replace')).not.toBeNull();
+  });
+
+  test('with the replace row open, typing the replacement reaches the hook', async () => {
+    await mount(findState({ replaceOpen: true }));
+    await type(byLabel('Replace'), 'OMEGA');
+
+    expect(calls).toEqual(['setReplacement:OMEGA']);
+  });
+
+  test('each toggle reports its own state and its own shortcut', async () => {
+    await mount(findState({ options: { matchCase: true, wholeWord: false, isRegex: true } }));
+
+    const matchCase = byLabelPrefix('Match case');
+    const wholeWord = byLabelPrefix('Match whole word');
+    const regex = byLabelPrefix('Use regular expression');
+
+    expect(matchCase?.getAttribute('aria-pressed')).toBe('true');
+    expect(wholeWord?.getAttribute('aria-pressed')).toBe('false');
+    expect(regex?.getAttribute('aria-pressed')).toBe('true');
+    // The chord is derived from the keymap, so a tooltip cannot name a key that
+    // is not bound.
+    expect(matchCase?.getAttribute('aria-label')).toMatch(/[⌘⌥⇧]|Alt\+/);
+  });
+
+  test('clicking a toggle names the option it flips', async () => {
+    await mount(findState());
+    await click(byLabelPrefix('Match whole word'));
+
+    expect(calls).toEqual(['toggleOption:wholeWord']);
+  });
+
+  test('Enter steps forward and ⇧Enter steps back, keeping focus in the field', async () => {
+    await mount(findState({ matches: [{ start: 0, end: 5 }], currentIndex: 0 }));
+
+    await press(byLabel('Find'), 'Enter');
+    await press(byLabel('Find'), 'Enter', true);
+
+    expect(calls).toEqual(['step:1', 'step:-1']);
+  });
+
+  test('a chorded Enter is left to the panel, which owns ⌘⏎', async () => {
+    await mount(findState({ matches: [{ start: 0, end: 5 }], currentIndex: 0 }));
+    const input = byLabel('Find');
+    await act(async () => {
+      input?.dispatchEvent(new globalThis.KeyboardEvent('keydown', { key: 'Enter', metaKey: true, bubbles: true }));
+    });
+
+    expect(calls).toEqual([]);
+  });
+
+  test('the stepper buttons are disabled with nothing to step to', async () => {
+    await mount(findState());
+
+    expect(buttonByLabel('Next match')?.disabled).toBe(true);
+    expect(buttonByLabel('Previous match')?.disabled).toBe(true);
+  });
+
+  test('the replace buttons are disabled with nothing to replace', async () => {
+    await mount(findState({ replaceOpen: true }));
+
+    expect(buttonByLabel('Replace')?.disabled).toBe(true);
+    expect(buttonByLabel('Replace all')?.disabled).toBe(true);
+  });
+
+  test('the count is announced and reads as the widget’s own status', async () => {
+    await mount(findState({ query: 'alpha', matches: [{ start: 0, end: 5 }, { start: 9, end: 14 }], currentIndex: 1 }));
+
+    const status = container.querySelector('[aria-live="polite"]');
+    expect(status?.textContent).toBe('2 of 2');
+  });
+
+  test('an invalid pattern is marked on the field, not only in the status', async () => {
+    // The user has to see WHICH field is wrong, not just that something is.
+    await mount(findState({ query: 'a(', invalid: true }));
+
+    expect(byLabel('Find')?.className).toContain('border-error');
+  });
+
+  test('the close button asks the hook to close', async () => {
+    await mount(findState());
+    await click(buttonByLabel('Close find'));
+
+    expect(calls).toEqual(['close']);
+  });
+
+  test('the expander toggles the replace row', async () => {
+    await mount(findState());
+    await click(byLabelPrefix('Show replace'));
+
+    expect(calls).toEqual(['toggleReplace']);
+  });
+});