@kabmo-labs/kabmo 0.0.0-stage → 0.0.1

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

@@ -0,0 +1,228 @@
+import type { RefObject } from 'preact';
+import { AlertTriangle, FileX, Loader2 } from 'lucide-preact';
+import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
+import { FileDocument } from '@/client/components/workspace/editor/FileDocument';
+import { PluginFileViewBody, type ResolvedPluginFileView } from '@/client/components/workspace/editor/plugin-file-view';
+import { ImageViewer } from '@/client/components/common/image-viewer';
+import { ViewerSurface, hasViewerSurface } from '@/client/components/workspace/editor/viewers/dispatch';
+import type { CodeSurfaceHandle } from '@/client/components/common/code-surface';
+import type { UseFileEditorResult } from '@/client/hooks/editor/use-file-editor';
+import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
+import type { TextRange } from '@/shared/lib/code/editor/commands';
+import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
+import { EDITOR_MAX_FONT_SIZE, EDITOR_MIN_FONT_SIZE } from '@/shared/lib/code/editor/typography';
+import { RENDERED_VIEWERS, type ViewerKind } from '@/shared/lib/fs/document-kind';
+import type { OpenedFile } from '@/shared/types/fs';
+
+interface FilePaneProps {
+  activeFile: OpenedFile;
+  editor: UseFileEditorResult;
+  find: EditorFindState;
+  surfaceRef: RefObject<CodeSurfaceHandle>;
+  /** The plugin view for this file, or null when none claims it. */
+  pluginFileView: ResolvedPluginFileView | null;
+  wordWrap: boolean;
+  setWordWrap: (next: boolean) => void;
+  /** The surface this file's kind is drawn by (see `document-kind`). */
+  viewerKind: ViewerKind;
+  isPreview: boolean;
+  isMaximized: boolean;
+  setIsMaximized: (next: boolean) => void;
+  zoomLevel: number;
+  setZoomLevel: (update: (current: number) => number) => void;
+  occurrences: readonly TextRange[];
+  setOccurrences: (next: readonly TextRange[]) => void;
+  paletteOpen: boolean;
+  setPaletteOpen: (open: boolean) => void;
+  runCommand: (command: EditorCommand) => void;
+  editorFontFamily: string;
+  togglePreview: () => void;
+  /** A search hit was jumped to in this file, so its matches are painted. */
+  revealActive: boolean;
+  /** The file this tab names is gone from disk (see `useMissingFiles`). */
+  missing: boolean;
+}
+
+/**
+ * One plain (non-diff) file tab's body: the toolbar, then whichever surface the
+ * file's kind selects.
+ *
+ * The surface order is the dispatch, and every branch before the code surface
+ * exists because the code surface would render the file WRONG rather than
+ * merely worse:
+ *
+ * - a byte viewer (image, PDF, DOCX, workbook) fetches its own bytes and has no
+ *   text buffer to draw;
+ * - a rendered text view (markdown, CSV grid, SVG) is the same buffer drawn as
+ *   what the file IS, so it is gated on `isPreview` — the eye toggle;
+ * - a plugin's contributed view replaces the code surface for the files it
+ *   claims.
+ */
+export function FilePane({
+  activeFile,
+  editor,
+  find,
+  surfaceRef,
+  pluginFileView,
+  wordWrap,
+  setWordWrap,
+  viewerKind,
+  isPreview,
+  isMaximized,
+  setIsMaximized,
+  zoomLevel,
+  setZoomLevel,
+  occurrences,
+  setOccurrences,
+  paletteOpen,
+  setPaletteOpen,
+  runCommand,
+  editorFontFamily,
+  togglePreview,
+  revealActive,
+  missing,
+}: FilePaneProps) {
+  // A byte viewer owns the whole surface and has no buffer, so Save, find,
+  // wrap and font zoom are all hidden — the toolbar reads this same flag.
+  const byteViewer = viewerKind === 'image' || viewerKind === 'pdf' || viewerKind === 'docx' || viewerKind === 'spreadsheet';
+  // The rendered text views are the ones the eye toggle switches.
+  const hasPreview = RENDERED_VIEWERS[viewerKind] === true;
+
+  return (
+    <>
+      <EditorToolbar
+        path={activeFile.path}
+        saveStatus={editor.saveStatus}
+        wordWrap={wordWrap}
+        hasPreview={hasPreview}
+        isPreview={isPreview}
+        copied={editor.copied}
+        byteViewer={byteViewer}
+        saveDisabled={Boolean(editor.loadError) || editor.handleMissing}
+        unsupported={Boolean(editor.unsupported)}
+        handleMissing={editor.handleMissing}
+        isMaximized={isMaximized}
+        findOpen={find.open}
+        onToggleFind={() => (find.open ? find.close() : find.openFind())}
+        onSave={editor.saveNow}
+        onTogglePreview={togglePreview}
+        onToggleWordWrap={() => setWordWrap(!wordWrap)}
+        onZoomIn={() => setZoomLevel((z) => Math.min(EDITOR_MAX_FONT_SIZE, z + 1))}
+        onZoomOut={() => setZoomLevel((z) => Math.max(EDITOR_MIN_FONT_SIZE, z - 1))}
+        onCopy={editor.copy}
+        onDownload={editor.download}
+        onToggleMaximize={() => setIsMaximized(!isMaximized)}
+      />
+
+      {/* The tab strip says a deleted file is gone, but it is a small target in
+          a crowded row — the banner states the same fact where the user is
+          looking, and names the one thing that is still possible. */}
+      {missing && (
+        <div className="flex items-start gap-2 px-3 py-2 border-b border-error/30 bg-error/10 text-error">
+          <AlertTriangle size={14} className="shrink-0 mt-0.5" />
+          <div className="min-w-0">
+            <div className="text-[11.5px] font-sans">This file was deleted from disk.</div>
+            <div className="text-[11px] font-sans text-error/80">
+              The buffer is still here. Saving recreates the file — autosave is off until then.
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* A launched file's handle dies with the page, so after a reload the tab
+          can read and edit but cannot write. Saying so is the whole point: the
+          Save button is disabled, and a user who is not told why would read it
+          as a broken file. */}
+      {editor.handleMissing && (
+        <div className="flex items-start gap-2 px-3 py-2 border-b border-warning/30 bg-warning/10 text-warning">
+          <AlertTriangle size={14} className="shrink-0 mt-0.5" />
+          <div className="min-w-0">
+            <div className="text-[11.5px] font-sans">This file was opened by the system, not from a workspace.</div>
+            <div className="text-[11px] font-sans text-warning/80">
+              Its write permission ended with the last page load. Reopen the file from the OS to edit it again.
+            </div>
+          </div>
+        </div>
+      )}
+
+      {editor.isImage && editor.imageUrl ? (
+        // A workspace image: the raw URL is what `<img>` paints, and the picture
+        // owns its own pan/zoom, so it must NOT sit inside the scrolling text
+        // container — a wheel there would scroll the pane instead of zooming it.
+        <ImageViewer src={editor.imageUrl} name={activeFile.name} className="flex-1 min-h-0" />
+      ) : editor.isImage ? (
+        // A picture the OS handed over (a drop, a launch) has no server path:
+        // its bytes come from the live handle, so it goes through the viewer
+        // dispatch (which wraps them in an object URL).
+        <ViewerSurface
+          kind="image"
+          path={activeFile.path}
+          name={activeFile.name}
+          source={editor.byteSource}
+          content={editor.content}
+          revision={editor.revision}
+        />
+      ) : editor.isLoading ? (
+        <div className="flex-1 flex items-center justify-center gap-2 text-ink/40 text-xs font-mono">
+          <Loader2 size={14} className="animate-spin" />
+          <span>Loading file content…</span>
+        </div>
+      ) : editor.unsupported ? (
+        // The server refused this file for its KIND, which is not the same fact
+        // as a read that failed — saying "Could not read" over a zip describes a
+        // problem the file does not have. Save is disabled for the same reason
+        // it is after any failed read (an empty buffer), which the toolbar's own
+        // title states.
+        <div className="flex-1 flex flex-col items-center justify-center gap-2 px-6 text-center">
+          <FileX size={20} className="text-ink/40" />
+          <span className="text-xs text-ink/70 font-sans">{activeFile.name} cannot be opened here</span>
+          <span className="text-[11px] text-ink/50 font-sans max-w-[42ch]">{editor.unsupported}</span>
+        </div>
+      ) : editor.loadError ? (
+        // A read that failed must say so. Without this the pane rendered an
+        // empty (or substituted) buffer, and the next save wrote it over the
+        // real file.
+        <div className="flex-1 flex flex-col items-center justify-center gap-2 px-6 text-center">
+          <AlertTriangle size={20} className="text-error" />
+          <span className="text-xs text-error font-sans">Could not read {activeFile.name}</span>
+          <span className="text-[11px] text-ink/50 font-mono break-all">{editor.loadError}</span>
+        </div>
+      ) : pluginFileView && !editor.isImage ? (
+        // A plugin's contributed view keeps priority over the built-in viewers
+        // (its `fileOpener` is documented as "replace the editor's view for the
+        // files it claims"), so it sits here rather than after them.
+        <PluginFileViewBody view={pluginFileView} />
+      ) : hasViewerSurface(viewerKind) && (byteViewer || isPreview) ? (
+        // The byte viewers always draw (there is no source form to toggle to);
+        // the rendered text views draw only in preview mode, because their
+        // "source" is the code surface below.
+        <ViewerSurface
+          kind={viewerKind}
+          path={activeFile.path}
+          name={activeFile.name}
+          source={editor.byteSource}
+          content={editor.content}
+          revision={editor.revision}
+        />
+      ) : (
+        <FileDocument
+          activeFile={activeFile}
+          editor={editor}
+          find={find}
+          surfaceRef={surfaceRef}
+          paletteOpen={paletteOpen}
+          onClosePalette={() => setPaletteOpen(false)}
+          onRunCommand={runCommand}
+          wordWrap={wordWrap}
+          zoomLevel={zoomLevel}
+          editorFontFamily={editorFontFamily}
+          occurrences={occurrences}
+          onOccurrencesChange={setOccurrences}
+          isPreview={isPreview}
+          viewerKind={viewerKind}
+          revealActive={revealActive}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,262 @@
+/**
+ * @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}`),
+    revealMatch: (request) => calls.push(`revealMatch:${request.line}`),
+    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(() => {
+  if (container) 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']);
+  });
+});