@adecore/editor-react 0.23.0 → 0.24.0

package/src/CallHierarchyPanel.tsx

@@ -6,6 +6,9 @@ import { fileUriToPath } from '@adecore/lsp';
 import { Icon, IconButton, Segmented, Spinner, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { CALL_HIERARCHY_HEIGHT } from './call-hierarchy.ts';
+import { PanelResizeHandle } from './PanelResizeHandle.tsx';
+import { usePanelBody } from './use-panel-body.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 import { CALL_LEVEL_LIMIT, type CallDirection, type CallRow } from './call-hierarchy-model.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { basenameOf, relativeTo } from './paths.ts';
@@ -178,6 +181,7 @@ function StatusText({ row, direction }: { row: Extract<CallRow, { kind: 'status'
  */
 export function CallHierarchyPanel({ language, view }: { language: EditorLanguage; view: CallHierarchyView }) {
     const { t } = useTranslation('editor');
+    const body = usePanelBody(language);
     if (view.container === null) {
         return null;
     }
@@ -187,7 +191,7 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
     return createPortal(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
-            style={{ height: CALL_HIERARCHY_HEIGHT }}
+            style={{ height: CALL_HIERARCHY_HEIGHT - PANEL_BODY_HEIGHT + body.height }}
             onPointerDown={(event) => event.preventDefault()}
         >
             <div className="peek-hatch h-[14px]" />
@@ -227,11 +231,13 @@ export function CallHierarchyPanel({ language, view }: { language: EditorLanguag
                     <IconButton icon={X} size="xs" label={t('language.callHierarchy.close')} onClick={() => language.callHierarchy.close()} />
                 </div>
             </div>
-            <div className="flex h-[180px] shrink-0">
+            <div className="flex shrink-0" style={{ height: body.height }}>
                 <Tree language={language} view={view} />
                 <Preview preview={view.preview} />
             </div>
-            <div className="peek-hatch h-[14px]" />
+            <div className="peek-hatch relative h-[14px]">
+                <PanelResizeHandle container={view.container} height={body.height} onHeight={body.set} onCommit={body.commit} />
+            </div>
         </div>,
         view.container
     );

package/src/CodeAuthorsCard.tsx

@@ -2,20 +2,37 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GitCommitHorizontal, User, Users } from 'lucide-react';
 import { Button, Icon, Popover, Separator, Tooltip, useNow } from '@adecore/ui';
-import { formatNumber } from '@adecore/ui/format';
-import { relativeTime } from './relative-time.ts';
+import { formatAge, formatNumber } from '@adecore/ui/format';
 import type { EditorLanguage } from './editor-language.ts';
+import type { GitBlameCommit } from './host-types.ts';
 import type { AuthorsView } from './popups.ts';
 
 const MINUTE_MS = 60_000;
 
+/* The newest commit that touched the declaration. Its clock ticks here, so a minute redraws this block and not the card. */
+export function LatestCommit({ commit }: { commit: GitBlameCommit }) {
+    const { t } = useTranslation('editor');
+    const now = useNow(MINUTE_MS);
+
+    return (
+        <div className="flex flex-col gap-1">
+            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
+            <span className="text-text select-text">{commit.summary}</span>
+            <span className="flex items-center gap-1.5 text-text-muted">
+                <span className="font-mono select-text">{commit.shortHash}</span>
+                <span className="min-w-0 truncate">{commit.author}</span>
+                <span className="shrink-0">{formatAge(commit.at * 1000, now)}</span>
+            </span>
+        </div>
+    );
+}
+
 /*
  * Who wrote a declaration, by lines, and the newest commit that touched it. It opens beside the entry that
  * was pressed and closes on Escape or a press anywhere else; Escape hands the keyboard back to the editor.
  */
 export function CodeAuthorsCard({ language, view }: { language: EditorLanguage; view: AuthorsView }) {
     const { t } = useTranslation('editor');
-    const now = Math.floor(useNow(MINUTE_MS) / 1000);
     const { authors, uncommittedLines, latest } = view.authorship;
     const anchor = useMemo(() => {
         const { left, top, right, bottom } = view.anchor;
@@ -52,15 +69,7 @@ export function CodeAuthorsCard({ language, view }: { language: EditorLanguage;
                 {latest !== null && (
                     <>
                         <Separator />
-                        <div className="flex flex-col gap-1">
-                            <span className="text-text-muted">{t('language.codeVision.latest')}</span>
-                            <span className="text-text select-text">{latest.summary}</span>
-                            <span className="flex items-center gap-1.5 text-text-muted">
-                                <span className="font-mono select-text">{latest.shortHash}</span>
-                                <span className="min-w-0 truncate">{latest.author}</span>
-                                <span className="shrink-0">{relativeTime(latest.at, now)}</span>
-                            </span>
-                        </div>
+                        <LatestCommit commit={latest} />
                         {view.openCommit !== null && (
                             <div className="flex justify-end">
                                 <Popover.Close

package/src/CompletionPopup.tsx

@@ -1,11 +1,13 @@
 import { useId, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
+import { formatShortcut } from '@adecore/ui';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { kindLetterOf, kindToneOf, rowWindow, type KindTone } from './completion-model.ts';
 import { SourceLine, SymbolSections } from './HoverSections.tsx';
 import { PathText } from './PathText.tsx';
+import { keepFocusOutOfList } from './popup-focus.ts';
 import { placeBeside, placePopup } from './popup-placement.ts';
 import type { CompletionView } from './popups.ts';
 
@@ -64,6 +66,8 @@ const ROW_CHROME = 72;
  */
 export function CompletionPopup({ language, view, rect }: { language: EditorLanguage; view: CompletionView; rect: EditorRect }) {
     const { t } = useTranslation('editor');
+    const toggle = language.shortcuts.triggerCompletion;
+    const detailsKey = toggle === null ? null : formatShortcut(toggle, toggle.apple);
     const listId = useId();
     const list = useRef<HTMLDivElement>(null);
     const docs = useRef<HTMLDivElement>(null);
@@ -131,6 +135,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                 className={`${CARD} flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[340px] flex-col`}
                 style={{ visibility: 'hidden' }}
                 onPointerDown={(event) => event.preventDefault()}
+                {...keepFocusOutOfList(() => language.editor.focus())}
             >
                 {/* Sizes the list to the widest rows in the face the rows use; the rows themselves fill that width and truncate inside it. */}
                 <div
@@ -157,6 +162,7 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                                 ref={index === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"
+                                tabIndex={-1}
                                 aria-selected={index === view.active}
                                 aria-setsize={total}
                                 aria-posinset={index + 1}
@@ -182,7 +188,11 @@ export function CompletionPopup({ language, view, rect }: { language: EditorLang
                 <div className="flex items-center gap-3 border-t border-border px-2 py-1 text-xs whitespace-nowrap text-text-faint">
                     <span>↵ {t('language.completion.insert')}</span>
                     <span>⇥ {t('language.completion.replace')}</span>
-                    <span>^Space {t('language.completion.details')}</span>
+                    {detailsKey !== null && (
+                        <span>
+                            {detailsKey} {t('language.completion.details')}
+                        </span>
+                    )}
                     <span className="ml-auto">{view.server}</span>
                 </div>
             </div>

package/src/EditorView.tsx

@@ -2,47 +2,146 @@ import { createHolder } from './holder.ts';
 import { useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode, type Ref } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
-import type { Editor, EditorEngine, EditorMessages, EditorOptions } from '@adecore/editor';
-import { EditorLanguage } from './editor-language.ts';
+import {
+    DEFAULT_SMART_KEYS,
+    type Editor,
+    type EditorEngine,
+    type EditorIndentation,
+    type EditorMessages,
+    type EditorOptions,
+    type EditorSmartKeys
+} from '@adecore/editor';
+import { EditorLanguage, type EditorLanguageOptions } from './editor-language.ts';
 import { LanguagePopups } from './LanguagePopups.tsx';
 import type { ProjectLanguage } from './project-language.ts';
+import type { HoverView } from './popups.ts';
+import type { Timers } from './timers.ts';
 
 export interface EditorViewProps {
     engine: EditorEngine;
+    /* Read when the editor mounts; a later change of a setting the editor has a setter for reaches it in place. */
     options: EditorOptions;
     project?: ProjectLanguage;
     uri?: string;
     languageId?: string;
+    /* The clock of the language features, read when the editor mounts. */
+    timers?: Timers;
+    /* Read when the editor mounts. */
+    languageOptions?: EditorLanguageOptions;
     className?: string;
     ref?: Ref<HTMLDivElement>;
+    /* Read when the editor mounts, so an inline function does not mount it again. */
     onMount?(editor: Editor, language: EditorLanguage | null): void | (() => void);
     /* Rows of the app in the context menu, between the refactorings and the clipboard rows. */
     contextMenuItems?(language: EditorLanguage): ReactNode;
+    /* Sections of the app at the foot of the hover card, such as actions on its problems. */
+    hoverFooter?(view: HoverView, language: EditorLanguage): ReactNode;
 }
 
+interface MountInputs {
+    readonly options: EditorOptions;
+    readonly timers: Timers | undefined;
+    readonly languageOptions: EditorLanguageOptions | undefined;
+    readonly onMount: EditorViewProps['onMount'];
+}
+
+const DEFAULT_INDENTATION: EditorIndentation = { tabSize: 4, insertSpaces: true };
+
 /* The names of the fold controls in the editor's `{start}` and `{end}` placeholders, which the editor fills in per control. */
 function foldMessages(t: TFunction<'editor'>): Pick<EditorMessages, 'fold' | 'unfold'> {
     const lines = { start: '{start}', end: '{end}' };
     return { fold: t('language.fold.fold', lines), unfold: t('language.fold.unfold', lines) };
 }
 
-export function EditorView({ engine, options, project, uri, languageId, className, ref, onMount, contextMenuItems }: EditorViewProps) {
+function sameFields<T extends object>(left: T | undefined, right: T | undefined): boolean {
+    if (left === right) {
+        return true;
+    }
+    if (left === undefined || right === undefined) {
+        return false;
+    }
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)] as (keyof T)[]);
+    return [...keys].every((key) => left[key] === right[key]);
+}
+
+/* Hands the editor the settings that changed by value, so a new options object with the same values costs nothing. */
+function applyChangedOptions(editor: Editor, before: EditorOptions, after: EditorOptions): void {
+    if (before.theme !== after.theme) {
+        editor.setTheme(after.theme);
+    }
+    if (before.readOnly !== after.readOnly || before.readOnlyReason !== after.readOnlyReason) {
+        editor.setReadOnly(after.readOnly ?? false, after.readOnlyReason);
+    }
+    if (before.wrap !== after.wrap) {
+        editor.setWrap(after.wrap ?? false);
+    }
+    if (!sameFields(before.indentation, after.indentation)) {
+        editor.setIndentation(after.indentation ?? DEFAULT_INDENTATION);
+    }
+    if (!sameFields<Partial<EditorSmartKeys>>(before.smartKeys, after.smartKeys)) {
+        // The setter keeps the keys left out, where the options mean the default.
+        editor.setSmartKeys({ ...DEFAULT_SMART_KEYS, ...after.smartKeys });
+    }
+    if (before.guides !== after.guides) {
+        editor.setGuides(after.guides ?? true);
+    }
+    if (before.stickyScroll !== after.stickyScroll) {
+        editor.setStickyScroll?.(after.stickyScroll ?? true);
+    }
+    if (before.whitespace !== after.whitespace) {
+        editor.setWhitespace(after.whitespace ?? false);
+    }
+    if (before.rightMargin !== after.rightMargin) {
+        editor.setRightMargin(after.rightMargin ?? null);
+    }
+    if (before.foldOutline !== after.foldOutline) {
+        editor.setFoldOutline(after.foldOutline ?? 'hover');
+    }
+    if (after.label !== undefined && before.label !== after.label) {
+        editor.setLabel(after.label);
+    }
+}
+
+export function EditorView({
+    engine,
+    options,
+    project,
+    uri,
+    languageId,
+    timers,
+    languageOptions,
+    className,
+    ref,
+    onMount,
+    contextMenuItems,
+    hoverFooter
+}: EditorViewProps) {
     const { t } = useTranslation('editor');
     const element = useRef<HTMLDivElement>(null);
     const mounted = useRef<Editor | null>(null);
     const words = useRef(t);
+    const latest = useRef<MountInputs>({ options, timers, languageOptions, onMount });
+    const applied = useRef(options);
     const holder = useMemo(() => createHolder<EditorLanguage>(), []);
     const language = useSyncExternalStore(holder.subscribe, holder.get, holder.get);
+    useLayoutEffect(() => {
+        latest.current = { options, timers, languageOptions, onMount };
+    });
     useLayoutEffect(() => {
         const host = element.current;
         if (host === null) {
             return;
         }
-        const editor = engine.mount(host, { ...options, messages: { ...foldMessages(words.current), ...options.messages } });
+        const inputs = latest.current;
+        const editor = engine.mount(host, { ...inputs.options, messages: { ...foldMessages(words.current), ...inputs.options.messages } });
         mounted.current = editor;
-        const attached = project === undefined || uri === undefined || languageId === undefined ? null : new EditorLanguage(project, editor, uri, languageId);
+        applied.current = inputs.options;
+        const attached =
+            project === undefined || uri === undefined || languageId === undefined
+                ? null
+                : new EditorLanguage(project, editor, uri, languageId, inputs.timers, inputs.languageOptions);
         holder.set(attached);
-        const stop = onMount?.(editor, attached);
+        const stop = inputs.onMount?.(editor, attached);
         return () => {
             mounted.current = null;
             holder.set(null);
@@ -50,17 +149,29 @@ export function EditorView({ engine, options, project, uri, languageId, classNam
             attached?.dispose();
             editor.dispose();
         };
-    }, [engine, options, project, uri, languageId, holder, onMount]);
+    }, [engine, project, uri, languageId, holder]);
+    useLayoutEffect(() => {
+        const editor = mounted.current;
+        if (editor === null || applied.current === options) {
+            return;
+        }
+        applyChangedOptions(editor, applied.current, options);
+        applied.current = options;
+    });
+    const { fold, unfold, noMoreOccurrences } = options.messages ?? {};
     useLayoutEffect(() => {
         words.current = t;
-        const { fold, unfold } = options.messages ?? {};
         const localized = foldMessages(t);
-        mounted.current?.setMessages({ fold: fold ?? localized.fold, unfold: unfold ?? localized.unfold });
-    }, [t, options.messages]);
+        mounted.current?.setMessages({
+            fold: fold ?? localized.fold,
+            unfold: unfold ?? localized.unfold,
+            ...(noMoreOccurrences === undefined ? {} : { noMoreOccurrences })
+        });
+    }, [t, fold, unfold, noMoreOccurrences]);
     return (
         <div className={className} ref={ref} style={{ position: 'relative', minHeight: 0 }}>
             <div ref={element} style={{ position: 'absolute', inset: 0 }} />
-            {language !== null && <LanguagePopups language={language} contextMenuItems={contextMenuItems} />}
+            {language !== null && <LanguagePopups language={language} contextMenuItems={contextMenuItems} hoverFooter={hoverFooter} />}
         </div>
     );
 }

package/src/HoverCard.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CircleX, Info, TriangleAlert } from 'lucide-react';
 import { fileUriToPath, type Location } from '@adecore/lsp';
@@ -88,13 +89,16 @@ export function HoverCard({
     problems,
     info,
     anchor,
-    position
+    position,
+    footer
 }: {
     language: EditorLanguage;
     problems: readonly Problem[];
     info: HoverInfo | null;
     anchor: EditorPosition;
     position: EditorPosition;
+    /* Sections of the app below the problems, each with a divider above it. */
+    footer?: ReactNode;
 }) {
     const { t } = useTranslation('editor');
     return (
@@ -137,6 +141,7 @@ export function HoverCard({
             {problems.map((problem, index) => (
                 <ProblemSection key={index} problem={problem} language={language} />
             ))}
+            {footer}
         </div>
     );
 }

package/src/LanguagePopups.tsx

@@ -13,13 +13,24 @@ import { RenameCard } from './RenameCard.tsx';
 import { RenderedDocs } from './RenderedDocs.tsx';
 import { SymbolPicker } from './SymbolPicker.tsx';
 import { SignatureCard } from './SignatureCard.tsx';
+import type { HoverView } from './popups.ts';
+
+export interface LanguagePopupsProps<Language extends EditorLanguage = EditorLanguage> {
+    language: Language;
+    /* Rows of the app in the context menu, between the refactorings and the clipboard rows. */
+    contextMenuItems?(language: Language): ReactNode;
+    /* Sections of the app at the foot of the hover card, such as actions on its problems; each element gets a divider above it. */
+    hoverFooter?(view: HoverView, language: Language): ReactNode;
+    /* A layer of the app over the editor, drawn above the cards and below the rename field. */
+    children?: ReactNode;
+}
 
 /*
  * Every card a language feature opens over the editor. Each feature keeps its own state and these
  * only draw it, placed by the screen position of the character it belongs to, which is read again
- * whenever the editor scrolls or resizes. `contextMenuItems` adds rows of the app to the context menu.
+ * whenever the editor scrolls or resizes.
  */
-export function LanguagePopups({ language, contextMenuItems }: { language: EditorLanguage; contextMenuItems?: (language: EditorLanguage) => ReactNode }) {
+export function LanguagePopups<Language extends EditorLanguage>({ language, contextMenuItems, hoverFooter, children }: LanguagePopupsProps<Language>) {
     const [, redraw] = useReducer((count: number) => count + 1, 0);
     const hover = useStore(language.popups, (state) => state.hover);
     const completion = useStore(language.popups, (state) => state.completion);
@@ -27,7 +38,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
     const pick = useStore(language.popups, (state) => state.pick);
     const rename = useStore(language.popups, (state) => state.rename);
     const peek = useStore(language.popups, (state) => state.peek);
-    const callHierarchy = useStore(language.popups, (state) => state.callHierarchy ?? null);
+    const callHierarchy = useStore(language.popups, (state) => state.callHierarchy);
     const symbols = useStore(language.popups, (state) => state.symbols);
     const menu = useStore(language.popups, (state) => state.menu);
     const authors = useStore(language.popups, (state) => state.authors);
@@ -45,7 +56,14 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
             <RenderedDocs language={language} />
             {hover !== null && hoverRect !== null && (
                 <AnchoredPopup rect={hoverRect} onPointerEnter={() => language.hover.holdCard(true)} onPointerLeave={() => language.hover.holdCard(false)}>
-                    <HoverCard language={language} problems={hover.problems} info={hover.info} anchor={hover.anchor} position={hover.position} />
+                    <HoverCard
+                        language={language}
+                        problems={hover.problems}
+                        info={hover.info}
+                        anchor={hover.anchor}
+                        position={hover.position}
+                        footer={hoverFooter?.(hover, language)}
+                    />
                 </AnchoredPopup>
             )}
             {signature !== null && signatureRect !== null && (
@@ -64,6 +82,7 @@ export function LanguagePopups({ language, contextMenuItems }: { language: Edito
             {peek !== null && <PeekPanel language={language} view={peek} />}
             {callHierarchy !== null && <CallHierarchyPanel language={language} view={callHierarchy} />}
             {authors !== null && <CodeAuthorsCard language={language} view={authors} />}
+            {children}
             {rename !== null && renameRect !== null && <RenameCard language={language} view={rename} rect={renameRect} endRect={renameEnd} />}
         </>
     );

package/src/PanelResizeHandle.tsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PANEL_BODY_MIN, PANEL_KEY_STEP, availableHeightOf, clampPanelBody, panelBodyMax } from './panel-size.ts';
+import { realTimers, revealRow } from './timers.ts';
+
+interface Props {
+    container: HTMLElement;
+    height: number;
+    onHeight(height: number): void;
+    onCommit(height: number): void;
+}
+
+/* The bottom edge of a panel: a drag, or the arrow keys, change the height of its body. */
+export function PanelResizeHandle({ container, height, onHeight, onCommit }: Props) {
+    const { t } = useTranslation('editor');
+    const drag = useRef<{ startY: number; startHeight: number; lastY: number } | null>(null);
+    const [dragging, setDragging] = useState(false);
+    const [max, setMax] = useState(() => panelBodyMax(availableHeightOf(container)));
+
+    useEffect(() => {
+        const viewport = container.closest<HTMLElement>('.se-viewport');
+        const Observer = viewport?.ownerDocument.defaultView?.ResizeObserver;
+        if (viewport === null || viewport === undefined || Observer === undefined) {
+            return;
+        }
+        const observer = new Observer(() => setMax(panelBodyMax(availableHeightOf(container))));
+        observer.observe(viewport);
+        return () => observer.disconnect();
+    }, [container]);
+
+    function settle(value: number, from: number): void {
+        const next = clampPanelBody(value, availableHeightOf(container));
+        onHeight(next);
+        if (next !== from) {
+            onCommit(next);
+            revealRow(realTimers, container);
+        }
+    }
+
+    function heightAt(clientY: number): number {
+        return clampPanelBody(drag.current!.startHeight + clientY - drag.current!.startY, availableHeightOf(container));
+    }
+
+    function down(event: PointerEvent<HTMLDivElement>): void {
+        if (event.button !== 0) {
+            return;
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        drag.current = { startY: event.clientY, startHeight: height, lastY: event.clientY };
+        setDragging(true);
+    }
+
+    function move(event: PointerEvent<HTMLDivElement>): void {
+        if (drag.current !== null) {
+            drag.current.lastY = event.clientY;
+            onHeight(heightAt(event.clientY));
+        }
+    }
+
+    // Also the end of a drag whose capture was lost, such as a container that was replaced under the pointer.
+    function end(event: PointerEvent<HTMLDivElement>): void {
+        if (drag.current === null) {
+            return;
+        }
+        const { startHeight } = drag.current;
+        const next = heightAt(drag.current.lastY);
+        drag.current = null;
+        setDragging(false);
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        settle(next, startHeight);
+    }
+
+    function key(event: KeyboardEvent<HTMLDivElement>): void {
+        const step = event.shiftKey ? PANEL_KEY_STEP * 4 : PANEL_KEY_STEP;
+        const end = panelBodyMax(availableHeightOf(container));
+        const target = { ArrowUp: height - step, ArrowDown: height + step, Home: PANEL_BODY_MIN, End: end }[event.key];
+        if (target === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        settle(target, height);
+    }
+
+    return (
+        <div
+            role="separator"
+            aria-orientation="horizontal"
+            aria-label={t('language.panel.resize')}
+            aria-valuemin={PANEL_BODY_MIN}
+            aria-valuemax={max}
+            aria-valuenow={height}
+            tabIndex={0}
+            data-dragging={dragging}
+            className="absolute inset-x-0 bottom-0 z-10 h-1 cursor-row-resize touch-none outline-none hover:bg-accent-soft focus-visible:bg-accent-soft data-[dragging=true]:bg-accent-soft"
+            onPointerDown={down}
+            onPointerMove={move}
+            onPointerUp={end}
+            onPointerCancel={end}
+            onLostPointerCapture={end}
+            onKeyDown={key}
+        />
+    );
+}

package/src/PeekPanel.tsx

@@ -9,6 +9,9 @@ import { basenameOf, relativeTo } from './paths.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { shikiLanguageOfPath } from './language-ids.ts';
 import { PathText } from './PathText.tsx';
+import { PanelResizeHandle } from './PanelResizeHandle.tsx';
+import { usePanelBody } from './use-panel-body.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 import { PEEK_HEIGHT } from './peek.ts';
 import { distinguishingFolders, visualColumnOf, type NameRange, type PeekPlace } from './peek-model.ts';
 import type { PeekView } from './popups.ts';
@@ -179,13 +182,14 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; view:
     const path = active === undefined ? null : fileUriToPath(active.location.uri);
     const folder = language.project.folder;
     const shown = path === null ? '' : folderOf(relativeTo(path, folder));
+    const body = usePanelBody(language);
     if (view.container === null) {
         return null;
     }
     return createPortal(
         <div
             className="flex flex-col bg-surface pt-[2px] font-sans text-xs text-text"
-            style={{ height: PEEK_HEIGHT }}
+            style={{ height: PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height }}
             onPointerDown={(event) => event.preventDefault()}
         >
             <div className="peek-hatch h-[14px]" />
@@ -202,11 +206,13 @@ export function PeekPanel({ language, view }: { language: EditorLanguage; view:
                     <IconButton icon={X} size="xs" label={t('language.peek.close')} onClick={() => language.peek.close()} />
                 </div>
             </div>
-            <div className="flex h-[180px] shrink-0">
+            <div className="flex shrink-0" style={{ height: body.height }}>
                 <Preview preview={view.preview} />
                 <Places language={language} view={view} />
             </div>
-            <div className="peek-hatch h-[14px]" />
+            <div className="peek-hatch relative h-[14px]">
+                <PanelResizeHandle container={view.container} height={body.height} onHeight={body.set} onCommit={body.commit} />
+            </div>
         </div>,
         view.container
     );

package/src/PickPopup.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import type { EditorRect } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { PathText } from './PathText.tsx';
+import { keepFocusOutOfList } from './popup-focus.ts';
 import { placePopup } from './popup-placement.ts';
 import type { PickPreview, PickView } from './popups.ts';
 
@@ -80,7 +81,13 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
     }, [language, listId, activeId]);
 
     return createPortal(
-        <div ref={card} className={CARD} style={{ visibility: 'hidden' }} onPointerDown={(event) => event.preventDefault()}>
+        <div
+            ref={card}
+            className={CARD}
+            style={{ visibility: 'hidden' }}
+            onPointerDown={(event) => event.preventDefault()}
+            {...keepFocusOutOfList(() => language.editor.focus())}
+        >
             {view.title !== null && <div className="border-b border-border px-3 py-1.5 text-xs text-text-muted">{view.title}</div>}
             <div id={listId} role="listbox" className="min-h-0 flex-1 overflow-y-auto p-1">
                 {view.groups.map((group, groupIndex) => (
@@ -93,6 +100,7 @@ export function PickPopup({ language, view, rect }: { language: EditorLanguage;
                                 ref={row.id === view.active ? activeRow : undefined}
                                 type="button"
                                 role="option"
+                                tabIndex={-1}
                                 aria-selected={row.id === view.active}
                                 data-active={row.id === view.active}
                                 className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"