@kabmo-labs/kabmo 0.8.0 → 0.9.0

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

@@ -3,12 +3,12 @@ import { FilePane } from '@/client/components/workspace/editor/FilePane';
 import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
 import type { UseFileEditorResult } from '@/client/hooks/editor/use-file-editor';
 import type { ResolvedPluginFileView } from '@/client/components/workspace/editor/plugin-file-view';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
 import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
 import type { CodeSurfaceHandle } from '@/client/components/common/code-surface';
 import type { RefObject } from 'preact';
 import type { ViewerKind } from '@/shared/lib/fs/document-kind';
 import type { OpenedFile } from '@/shared/types/fs';
+import type { EditorThemeState } from '@/client/hooks/editor/theme';
 
 interface EditorBodyProps {
   activeFile: OpenedFile | undefined;
@@ -25,12 +25,11 @@ interface EditorBodyProps {
   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;
+  editorTheme: EditorThemeState;
   togglePreview: () => void;
   revealActive: boolean;
   missing: boolean;
@@ -60,12 +59,11 @@ export function EditorBody({
   setIsMaximized,
   zoomLevel,
   setZoomLevel,
-  occurrences,
-  setOccurrences,
   paletteOpen,
   setPaletteOpen,
   runCommand,
   editorFontFamily,
+  editorTheme,
   togglePreview,
   revealActive,
   missing,
@@ -113,12 +111,11 @@ export function EditorBody({
       setIsMaximized={setIsMaximized}
       zoomLevel={zoomLevel}
       setZoomLevel={setZoomLevel}
-      occurrences={occurrences}
-      setOccurrences={setOccurrences}
       paletteOpen={paletteOpen}
       setPaletteOpen={setPaletteOpen}
       runCommand={runCommand}
       editorFontFamily={editorFontFamily}
+      editorTheme={editorTheme}
       togglePreview={togglePreview}
       revealActive={revealActive}
       missing={missing}

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

@@ -7,8 +7,8 @@
  * 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
+ * reaches it, both derived from the same keymap table the editor binds 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.
  *

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

@@ -1,3 +1,4 @@
+import { useState } from 'preact/hooks';
 import type { RefObject } from 'preact';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { CodeSurface, type CodeSurfaceHandle } from '@/client/components/common/code-surface';
@@ -8,8 +9,8 @@ import type { UseFileEditorResult } from '@/client/hooks/editor/use-file-editor'
 import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
 import { EDITOR_LINE_HEIGHT } from '@/shared/lib/code/editor/typography';
 import type { ViewerKind } from '@/shared/lib/fs/document-kind';
-import type { TextRange } from '@/shared/lib/code/editor/commands';
 import type { EditorCommand } from '@/shared/lib/code/editor/keymap';
+import type { EditorThemeState } from '@/client/hooks/editor/theme';
 
 interface FileDocumentProps {
   activeFile: { id: number | string; name: string; path: string; root?: string; repo?: string };
@@ -22,8 +23,7 @@ interface FileDocumentProps {
   wordWrap: boolean;
   zoomLevel: number;
   editorFontFamily: string;
-  occurrences: readonly TextRange[];
-  onOccurrencesChange: (next: readonly TextRange[]) => void;
+  editorTheme: EditorThemeState;
   /** The surface this file's kind is drawn by (see `document-kind`). */
   viewerKind: ViewerKind;
   /** The rendered view is on for the active file — render it, not the source. */
@@ -57,8 +57,7 @@ export function FileDocument({
   wordWrap,
   zoomLevel,
   editorFontFamily,
-  occurrences,
-  onOccurrencesChange,
+  editorTheme,
   viewerKind,
   isPreview,
   revealActive,
@@ -67,6 +66,12 @@ export function FileDocument({
   // SVG picture are drawn by the viewer dispatch instead (they replace the code
   // surface rather than living inside its scroller).
   const isMd = viewerKind === 'markdown';
+  /**
+   * The code surface's scroller, which belongs to CodeMirror and appears only
+   * once its view mounts. Reported through `onScroller` because a `ref` cannot
+   * reach a node the component does not render.
+   */
+  const [codeScroller, setCodeScroller] = useState<HTMLElement | null>(null);
   // The document owns its scroller, so it remembers where the reader left it.
   // One offset per SURFACE: the rendered markdown and its source are different
   // documents in the same container and share neither a line nor a height.
@@ -74,26 +79,29 @@ export function FileDocument({
     tabKey: String(activeFile.id),
     surface: isMd && isPreview ? 'rendered' : 'code',
     ready: editor.loaded,
+    // `undefined` on the markdown branch, which owns its own scroller and uses
+    // the binding's `ref` instead.
+    element: isMd && isPreview ? undefined : codeScroller,
   });
 
   return (
     <div className="relative flex-1 min-h-0 flex flex-col">
       {find.open ? <FindWidget find={find} /> : null}
       {paletteOpen ? <CommandPalette onRun={onRunCommand} onClose={onClosePalette} /> : null}
-      <div
-        ref={scroll.ref}
-        onScroll={scroll.onScroll}
-        // No accessible name exists for a scroll container, so the E2E layer
-        // addresses it by testid (see `tests/e2e/fixtures/selectors.ts`).
-        data-testid="editor-scroller"
-        className="flex-1 overflow-auto bg-paper flex"
-      >
-        {isMd && isPreview ? (
-          // No `prose` wrapper: markdown is styled by `.prose-content` alone
-          // (the same system the chat timeline uses). The typography plugin
-          // fought it — `.prose img` added 2em vertical margins that ballooned
-          // a badge row into its own line box, and `--tw-prose-*` colors
-          // ignored the theme.
+      {isMd && isPreview ? (
+        <div
+          ref={scroll.ref}
+          onScroll={scroll.onScroll}
+          // No accessible name exists for a scroll container, so the E2E layer
+          // addresses it by testid (see `tests/e2e/fixtures/selectors.ts`).
+          data-testid="editor-scroller"
+          className="flex-1 overflow-auto bg-paper flex"
+        >
+          {/* No `prose` wrapper: markdown is styled by `.prose-content` alone
+              (the same system the chat timeline uses). The typography plugin
+              fought it — `.prose img` added 2em vertical margins that ballooned
+              a badge row into its own line box, and `--tw-prose-*` colors
+              ignored the theme. */}
           <div className="p-6 max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
             <MarkdownRenderer
               content={editor.content}
@@ -101,50 +109,37 @@ export function FileDocument({
               scope={{ path: activeFile.path, root: activeFile.root, repo: activeFile.repo }}
             />
           </div>
-        ) : (
-          <CodeSurface
-            ref={surfaceRef}
-            value={editor.content}
-            onValueChange={editor.onChange}
-            language={editor.language}
-            wordWrap={wordWrap}
-            marks={find.open || revealActive ? find.matches : undefined}
-            currentMark={find.currentIndex}
-            occurrences={occurrences}
-            onOccurrencesChange={onOccurrencesChange}
-            onCommand={onRunCommand}
-            rootClassName="flex"
-            gutterClassName="flex flex-col text-right pl-4 pr-3 select-none text-ink/30 font-mono border-r border-ink/10 bg-canvas sticky left-0 z-10"
-            gutterStyle={{
-              fontSize: zoomLevel,
-              paddingTop: 16,
-              paddingBottom: 16,
-              lineHeight: EDITOR_LINE_HEIGHT,
-              fontFamily: editorFontFamily,
-            }}
-            gutterLineClassName="min-w-[1.5rem]"
-            // `min-w-max` keeps a long line intact and lets the panel scroll
-            // sideways; while wrapping it would instead widen the column past
-            // the panel, so the toggle had no effect at all.
-            editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
-            editorPadding={16}
-            editorClassName="font-mono focus:outline-none"
-            editorStyle={{
-              fontFamily: editorFontFamily,
-              fontSize: zoomLevel,
-              lineHeight: EDITOR_LINE_HEIGHT,
-              minHeight: '100%',
-              // Breathing room under the last line. It has to live on the
-              // surface, not on the scroll container: a scroll container's own
-              // bottom padding is not part of its scrollable overflow, so
-              // `pb-*` on the scroller left the last line flush with the
-              // panel's edge (measured: padding-bottom 32px did not change
-              // scrollHeight by a single pixel).
-              paddingBottom: 16,
-            }}
-          />
-        )}
-      </div>
+        </div>
+      ) : (
+        // The code surface owns its own scroller (CodeMirror's), so it is NOT
+        // wrapped in one: an outer `overflow-auto` would take the document's
+        // height and the editor's viewport would be the whole file.
+        <CodeSurface
+          ref={surfaceRef}
+          value={editor.content}
+          onValueChange={editor.onChange}
+          language={editor.language}
+          wordWrap={wordWrap}
+          documentKey={String(activeFile.id)}
+          marks={find.open || revealActive ? find.matches : undefined}
+          currentMark={find.currentIndex}
+          onCommand={onRunCommand}
+          onScroller={setCodeScroller}
+          scrollTestId="editor-scroller"
+          // The editor theme paints its own surface, so the app's `bg-paper`
+          // must not sit under it: an explicit theme's background is opaque and
+          // would be a rectangle inside the panel's own colour.
+          className="flex-1 min-h-0 text-ink select-text"
+          themeVars={editorTheme.vars}
+          themes={editorTheme.themes}
+          padding={16}
+          style={{
+            fontFamily: editorFontFamily,
+            fontSize: `${zoomLevel}px`,
+            lineHeight: EDITOR_LINE_HEIGHT,
+          }}
+        />
+      )}
     </div>
   );
 }

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

@@ -8,11 +8,11 @@ import { ViewerSurface, hasViewerSurface } from '@/client/components/workspace/e
 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';
+import type { EditorThemeState } from '@/client/hooks/editor/theme';
 
 interface FilePaneProps {
   activeFile: OpenedFile;
@@ -30,12 +30,11 @@ interface FilePaneProps {
   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;
+  editorTheme: EditorThemeState;
   togglePreview: () => void;
   /** A search hit was jumped to in this file, so its matches are painted. */
   revealActive: boolean;
@@ -72,12 +71,11 @@ export function FilePane({
   setIsMaximized,
   zoomLevel,
   setZoomLevel,
-  occurrences,
-  setOccurrences,
   paletteOpen,
   setPaletteOpen,
   runCommand,
   editorFontFamily,
+  editorTheme,
   togglePreview,
   revealActive,
   missing,
@@ -216,8 +214,7 @@ export function FilePane({
           wordWrap={wordWrap}
           zoomLevel={zoomLevel}
           editorFontFamily={editorFontFamily}
-          occurrences={occurrences}
-          onOccurrencesChange={setOccurrences}
+          editorTheme={editorTheme}
           isPreview={isPreview}
           viewerKind={viewerKind}
           revealActive={revealActive}

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

@@ -22,7 +22,7 @@ import { EDITOR_KEY_BINDINGS, type EditorCommand } from '@/shared/lib/code/edito
 import { describeBinding } from '@/shared/lib/ui/key-binding';
 import { isMacPlatform } from '@/shared/lib/util/platform';
 import type { EditorFindState } from '@/client/hooks/editor/use-editor-find';
-import type { FindOptions } from '@/shared/lib/code/editor/find';
+import type { FindOptions } from '@/shared/lib/code/editor/find-scan';
 
 const BUTTON_CLASS =
   'flex items-center justify-center p-1 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40';
@@ -112,7 +112,12 @@ export function FindWidget({ find }: FindWidgetProps) {
   );
 
   return (
-    <div className="absolute top-2 right-4 z-30 flex flex-col gap-1 bg-paper border border-ink/15 rounded-md shadow-lg p-1.5 text-xs text-ink font-sans w-[330px]">
+    // `w-[330px]` was wider than the panel's own default (320px), so the bar's
+    // leftmost control — Show replace — hung past the panel's edge and its click
+    // landed on whatever was beside it. A max width keeps the bar inside the
+    // panel it belongs to at any width, and `min-w-0` lets the fields shrink
+    // with it instead of pushing the buttons out.
+    <div className="absolute top-2 right-2 z-30 flex w-[330px] max-w-[calc(100%-1rem)] min-w-0 flex-col gap-1 bg-paper border border-ink/15 rounded-md shadow-lg p-1.5 text-xs text-ink font-sans">
       <div className="flex items-center gap-1">
         <button
           type="button"