@adecore/editor-react 0.31.11 → 0.32.0

package/dist/PeekPanel.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { ChevronDown, ChevronRight, X } from 'lucide-react';
@@ -8,100 +8,703 @@ import { FileIcon, IconButton, Tooltip } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.js';
 import { shikiLanguageOfPath } from './language-ids.js';
-import { PathText } from './PathText.js';
-import { PanelResizeHandle } from './PanelResizeHandle.js';
+import { PathText } from "./PathText.js";
+import { PanelResizeHandle } from "./PanelResizeHandle.js";
 import { usePanelBody } from './use-panel-body.js';
 import { PANEL_BODY_HEIGHT } from './panel-size.js';
 import { PEEK_HEIGHT } from './peek.js';
 import { distinguishingFolders, visualColumnOf } from './peek-model.js';
 import { useEditorRendering } from './rendering-context.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TAB_SIZE = 4;
 const CODE = 'font-mono text-(length:--code-font-size) [tab-size:4] [&_.line]:block [&_.line]:h-(--code-line-height) [&_.line]:leading-(--code-line-height) [&_pre]:m-0 [&_pre]:bg-transparent! [&_pre]:p-0 [&_pre]:whitespace-pre [&_code]:font-mono';
 /* The code around the active reference, drawn like the editor's own rows: its gutter, the line the reference is on and the name marked. */
-export function Preview({ preview }) {
-    const { theme, highlight } = useEditorRendering();
-    const scroller = useRef(null);
-    const [html, setHtml] = useState(null);
-    const path = preview === null ? null : fileUriToPath(preview.uri);
-    const key = preview === null ? '' : `${theme}\0${path}\0${preview.text}`;
-    useEffect(() => {
-        if (preview === null || highlight === undefined) {
-            return;
+export function Preview(t0) {
+  const $ = _c(51);
+  const {
+    preview
+  } = t0;
+  const {
+    theme,
+    highlight
+  } = useEditorRendering();
+  const scroller = useRef(null);
+  const [html, setHtml] = useState(null);
+  let t1;
+  if ($[0] !== preview) {
+    t1 = preview === null ? null : fileUriToPath(preview.uri);
+    $[0] = preview;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const path = t1;
+  const key = preview === null ? "" : `${theme}\0${path}\0${preview.text}`;
+  let t2;
+  let t3;
+  if ($[2] !== highlight || $[3] !== key || $[4] !== path || $[5] !== preview || $[6] !== theme) {
+    t2 = () => {
+      if (preview === null || highlight === undefined) {
+        return;
+      }
+      let alive = true;
+      highlight(preview.text, shikiLanguageOfPath(path ?? preview.uri), theme).then(result => alive && setHtml({
+        key,
+        html: result
+      })).catch(_temp);
+      return () => {
+        alive = false;
+      };
+    };
+    t3 = [preview, path, theme, key, highlight];
+    $[2] = highlight;
+    $[3] = key;
+    $[4] = path;
+    $[5] = preview;
+    $[6] = theme;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t2 = $[7];
+    t3 = $[8];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      scroller.current?.scrollTo(0, 0);
+    };
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== preview) {
+    t5 = [preview];
+    $[10] = preview;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  useEffect(t4, t5);
+  if (preview === null) {
+    let t6;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = /*#__PURE__*/_jsx("div", {
+        className: "min-w-0 flex-1"
+      });
+      $[12] = t6;
+    } else {
+      t6 = $[12];
+    }
+    return t6;
+  }
+  let name;
+  let t10;
+  let t11;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[13] !== preview.active || $[14] !== preview.name || $[15] !== preview.startLine || $[16] !== preview.text) {
+    const lines = preview.text.split("\n");
+    name = preview.name === null ? null : columnsOf(lines[preview.active] ?? "", preview.name);
+    t10 = scroller;
+    t11 = "relative min-w-0 flex-1 overflow-auto pt-1";
+    t8 = "relative flex min-w-max";
+    const t12 = `calc(${preview.active} * var(--code-line-height))`;
+    if ($[24] !== t12) {
+      t9 = /*#__PURE__*/_jsx("div", {
+        className: "absolute inset-x-0 bg-surface-hover",
+        style: {
+          top: t12,
+          height: "var(--code-line-height)"
         }
-        let alive = true;
-        highlight(preview.text, shikiLanguageOfPath(path ?? preview.uri), theme)
-            .then((result) => alive && setHtml({ key, html: result }))
-            .catch(() => undefined);
-        return () => {
-            alive = false;
-        };
-    }, [preview, path, theme, key, highlight]);
-    useEffect(() => {
-        scroller.current?.scrollTo(0, 0);
-    }, [preview]);
-    if (preview === null) {
-        return _jsx("div", { className: "min-w-0 flex-1" });
+      });
+      $[24] = t12;
+      $[25] = t9;
+    } else {
+      t9 = $[25];
     }
-    const lines = preview.text.split('\n');
-    const name = preview.name === null ? null : columnsOf(lines[preview.active] ?? '', preview.name);
-    return (_jsx("div", { ref: scroller, className: "relative min-w-0 flex-1 overflow-auto pt-1", children: _jsxs("div", { className: "relative flex min-w-max", children: [_jsx("div", { className: "absolute inset-x-0 bg-surface-hover", style: { top: `calc(${preview.active} * var(--code-line-height))`, height: 'var(--code-line-height)' } }), _jsx("div", { className: "sticky left-0 z-10 w-16 shrink-0 pr-4 text-right font-mono text-(length:--code-font-size) text-text-faint select-none", children: lines.map((_, index) => (_jsx("div", { className: `h-(--code-line-height) leading-(--code-line-height) ${index === preview.active ? 'bg-surface-hover text-text' : 'bg-surface'}`, children: preview.startLine + index + 1 }, index))) }), _jsxs("div", { className: "relative", children: [name !== null && (_jsx("div", { className: "absolute rounded-sm bg-(--editor-occurrence) font-mono text-(length:--code-font-size)", style: {
-                                top: `calc(${preview.active} * var(--code-line-height))`,
-                                height: 'var(--code-line-height)',
-                                left: `${name.start}ch`,
-                                width: `${name.end - name.start}ch`
-                            } })), html?.key === key ? (_jsx("div", { className: `relative ${CODE}`, dangerouslySetInnerHTML: { __html: html.html } })) : (_jsx("div", { className: `relative ${CODE} whitespace-pre`, children: preview.text }))] })] }) }));
+    t6 = "sticky left-0 z-10 w-16 shrink-0 pr-4 text-right font-mono text-(length:--code-font-size) text-text-faint select-none";
+    let t13;
+    if ($[26] !== preview.active || $[27] !== preview.startLine) {
+      t13 = (_, index) => /*#__PURE__*/_jsx("div", {
+        className: `h-(--code-line-height) leading-(--code-line-height) ${index === preview.active ? "bg-surface-hover text-text" : "bg-surface"}`,
+        children: preview.startLine + index + 1
+      }, index);
+      $[26] = preview.active;
+      $[27] = preview.startLine;
+      $[28] = t13;
+    } else {
+      t13 = $[28];
+    }
+    t7 = lines.map(t13);
+    $[13] = preview.active;
+    $[14] = preview.name;
+    $[15] = preview.startLine;
+    $[16] = preview.text;
+    $[17] = name;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    name = $[17];
+    t10 = $[18];
+    t11 = $[19];
+    t6 = $[20];
+    t7 = $[21];
+    t8 = $[22];
+    t9 = $[23];
+  }
+  let t12;
+  if ($[29] !== t6 || $[30] !== t7) {
+    t12 = /*#__PURE__*/_jsx("div", {
+      className: t6,
+      children: t7
+    });
+    $[29] = t6;
+    $[30] = t7;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  let t13;
+  if ($[32] !== name || $[33] !== preview.active) {
+    t13 = name !== null && /*#__PURE__*/_jsx("div", {
+      className: "absolute rounded-sm bg-(--editor-occurrence) font-mono text-(length:--code-font-size)",
+      style: {
+        top: `calc(${preview.active} * var(--code-line-height))`,
+        height: "var(--code-line-height)",
+        left: `${name.start}ch`,
+        width: `${name.end - name.start}ch`
+      }
+    });
+    $[32] = name;
+    $[33] = preview.active;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  let t14;
+  if ($[35] !== html || $[36] !== key || $[37] !== preview.text) {
+    t14 = html?.key === key ? /*#__PURE__*/_jsx("div", {
+      className: `relative ${CODE}`,
+      dangerouslySetInnerHTML: {
+        __html: html.html
+      }
+    }) : /*#__PURE__*/_jsx("div", {
+      className: `relative ${CODE} whitespace-pre`,
+      children: preview.text
+    });
+    $[35] = html;
+    $[36] = key;
+    $[37] = preview.text;
+    $[38] = t14;
+  } else {
+    t14 = $[38];
+  }
+  let t15;
+  if ($[39] !== t13 || $[40] !== t14) {
+    t15 = /*#__PURE__*/_jsxs("div", {
+      className: "relative",
+      children: [t13, t14]
+    });
+    $[39] = t13;
+    $[40] = t14;
+    $[41] = t15;
+  } else {
+    t15 = $[41];
+  }
+  let t16;
+  if ($[42] !== t12 || $[43] !== t15 || $[44] !== t8 || $[45] !== t9) {
+    t16 = /*#__PURE__*/_jsxs("div", {
+      className: t8,
+      children: [t9, t12, t15]
+    });
+    $[42] = t12;
+    $[43] = t15;
+    $[44] = t8;
+    $[45] = t9;
+    $[46] = t16;
+  } else {
+    t16 = $[46];
+  }
+  let t17;
+  if ($[47] !== t10 || $[48] !== t11 || $[49] !== t16) {
+    t17 = /*#__PURE__*/_jsx("div", {
+      ref: t10,
+      className: t11,
+      children: t16
+    });
+    $[47] = t10;
+    $[48] = t11;
+    $[49] = t16;
+    $[50] = t17;
+  } else {
+    t17 = $[50];
+  }
+  return t17;
 }
 /* The name's stretch of a line in monospace columns, which is what the code is laid out in. */
+function _temp() {}
 function columnsOf(line, name) {
-    const start = visualColumnOf(line, name.start, TAB_SIZE);
-    return { start, end: visualColumnOf(line, name.end, TAB_SIZE) };
+  const start = visualColumnOf(line, name.start, TAB_SIZE);
+  return {
+    start,
+    end: visualColumnOf(line, name.end, TAB_SIZE)
+  };
 }
 function folderOf(path) {
-    return path.slice(0, Math.max(0, path.lastIndexOf('/')));
+  return path.slice(0, Math.max(0, path.lastIndexOf('/')));
 }
 /* A line of code with its name in the text color and the rest muted. */
-function PlaceText({ place }) {
-    if (place.text === '') {
-        return _jsx("span", { className: "min-w-0 truncate text-text-muted", children: `:${place.line + 1}` });
+function PlaceText(t0) {
+  const $ = _c(20);
+  const {
+    place
+  } = t0;
+  if (place.text === "") {
+    const t1 = `:${place.line + 1}`;
+    let t2;
+    if ($[0] !== t1) {
+      t2 = /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate text-text-muted",
+        children: t1
+      });
+      $[0] = t1;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
     }
-    const { name } = place;
-    if (name === null) {
-        return _jsx("span", { className: "min-w-0 truncate text-text-muted", children: place.text });
+    return t2;
+  }
+  const {
+    name
+  } = place;
+  if (name === null) {
+    let t1;
+    if ($[2] !== place.text) {
+      t1 = /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate text-text-muted",
+        children: place.text
+      });
+      $[2] = place.text;
+      $[3] = t1;
+    } else {
+      t1 = $[3];
     }
-    return (_jsxs("span", { className: "min-w-0 truncate text-text-muted", children: [place.text.slice(0, name.start), _jsx("span", { className: "font-semibold text-text", children: place.text.slice(name.start, name.end) }), place.text.slice(name.end)] }));
+    return t1;
+  }
+  let t1;
+  if ($[4] !== name.start || $[5] !== place.text) {
+    t1 = place.text.slice(0, name.start);
+    $[4] = name.start;
+    $[5] = place.text;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  let t2;
+  if ($[7] !== name.end || $[8] !== name.start || $[9] !== place.text) {
+    t2 = place.text.slice(name.start, name.end);
+    $[7] = name.end;
+    $[8] = name.start;
+    $[9] = place.text;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== t2) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "font-semibold text-text",
+      children: t2
+    });
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== name.end || $[14] !== place.text) {
+    t4 = place.text.slice(name.end);
+    $[13] = name.end;
+    $[14] = place.text;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== t1 || $[17] !== t3 || $[18] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("span", {
+      className: "min-w-0 truncate text-text-muted",
+      children: [t1, t3, t4]
+    });
+    $[16] = t1;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  return t5;
 }
-function Places({ language, view }) {
-    const { t } = useTranslation('editor');
-    const activeRow = useRef(null);
-    const folder = language.project.folder;
-    const paths = useMemo(() => view.files.map((file) => relativeTo(fileUriToPath(file.uri) ?? file.uri, folder)), [view.files, folder]);
-    const folders = useMemo(() => distinguishingFolders(paths), [paths]);
-    useEffect(() => {
-        activeRow.current?.scrollIntoView({ block: 'nearest' });
-    }, [view.active]);
-    return (_jsx("div", { className: "w-1/3 shrink-0 overflow-y-auto border-l border-border py-1", children: view.files.map((file, fileIndex) => {
-            const collapsed = view.collapsed.includes(file.uri);
-            return (_jsxs("div", { children: [_jsx(Tooltip, { label: paths[fileIndex], side: "left", children: _jsxs("div", { className: "flex h-[22px] items-center pr-3 pl-1 text-xs", children: [_jsx(IconButton, { icon: collapsed ? ChevronRight : ChevronDown, size: "2xs", label: t(collapsed ? 'language.peek.expand' : 'language.peek.collapse'), onClick: () => language.peek.toggleFile(file.uri) }), _jsx(FileIcon, { path: paths[fileIndex], size: 14, className: "ml-0.5 shrink-0" }), _jsx("span", { className: "ml-1 max-w-full shrink-0 truncate", children: basenameOf(paths[fileIndex]) }), _jsx("span", { className: "ml-1.5 shrink-0 text-text-muted", children: formatNumber(file.places.length) }), folders[fileIndex] !== '' && _jsx("span", { className: "ml-2 min-w-0 flex-1 truncate text-text-faint", children: folders[fileIndex] })] }) }), !collapsed &&
-                        file.places.map((place) => (_jsx("button", { ref: place.id === view.active ? activeRow : undefined, type: "button", "data-active": place.id === view.active, className: "flex h-[22px] w-full items-center pr-3 pl-9 text-left font-mono text-code hover:bg-surface-hover data-[active=true]:bg-accent-soft", onClick: () => (place.id === view.active ? language.peek.go(place.id) : language.peek.select(place.id)), onDoubleClick: () => language.peek.go(place.id), children: _jsx(PlaceText, { place: place }) }, place.id)))] }, file.uri));
-        }) }));
+function Places(t0) {
+  const $ = _c(7);
+  const {
+    language,
+    view
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const activeRow = useRef(null);
+  const folder = language.project.folder;
+  let t1;
+  if ($[0] !== folder) {
+    t1 = file => relativeTo(fileUriToPath(file.uri) ?? file.uri, folder);
+    $[0] = folder;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const paths = view.files.map(t1);
+  const folders = distinguishingFolders(paths);
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      activeRow.current?.scrollIntoView({
+        block: "nearest"
+      });
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== view.active) {
+    t3 = [view.active];
+    $[3] = view.active;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  useEffect(t2, t3);
+  const t4 = "w-1/3 shrink-0 overflow-y-auto border-l border-border py-1";
+  const t5 = view.files.map((file_0, fileIndex) => {
+    const collapsed = view.collapsed.includes(file_0.uri);
+    return /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        label: paths[fileIndex],
+        side: "left",
+        children: /*#__PURE__*/_jsxs("div", {
+          className: "flex h-[22px] items-center pr-3 pl-1 text-xs",
+          children: [/*#__PURE__*/_jsx(IconButton, {
+            icon: collapsed ? ChevronRight : ChevronDown,
+            size: "2xs",
+            label: t(collapsed ? "language.peek.expand" : "language.peek.collapse"),
+            onClick: () => language.peek.toggleFile(file_0.uri)
+          }), /*#__PURE__*/_jsx(FileIcon, {
+            path: paths[fileIndex],
+            size: 14,
+            className: "ml-0.5 shrink-0"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "ml-1 max-w-full shrink-0 truncate",
+            children: basenameOf(paths[fileIndex])
+          }), /*#__PURE__*/_jsx("span", {
+            className: "ml-1.5 shrink-0 text-text-muted",
+            children: formatNumber(file_0.places.length)
+          }), folders[fileIndex] !== "" && /*#__PURE__*/_jsx("span", {
+            className: "ml-2 min-w-0 flex-1 truncate text-text-faint",
+            children: folders[fileIndex]
+          })]
+        })
+      }), !collapsed && file_0.places.map(place => /*#__PURE__*/_jsx("button", {
+        ref: place.id === view.active ? activeRow : undefined,
+        type: "button",
+        "data-active": place.id === view.active,
+        className: "flex h-[22px] w-full items-center pr-3 pl-9 text-left font-mono text-code hover:bg-surface-hover data-[active=true]:bg-accent-soft",
+        onClick: () => place.id === view.active ? language.peek.go(place.id) : language.peek.select(place.id),
+        onDoubleClick: () => language.peek.go(place.id),
+        children: /*#__PURE__*/_jsx(PlaceText, {
+          place: place
+        })
+      }, place.id))]
+    }, file_0.uri);
+  });
+  let t6;
+  if ($[5] !== t5) {
+    t6 = /*#__PURE__*/_jsx("div", {
+      className: t4,
+      children: t5
+    });
+    $[5] = t5;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  return t6;
 }
 /*
  * The references of a name in the row the editor leaves under the line: the code around the active one on
  * the left and every place on the right. It portals into that row, which the editor makes again when it
  * scrolls back into view, and has no edge of its own, so it reads as part of the file.
  */
-export function PeekPanel({ language, view }) {
-    const { t } = useTranslation('editor');
-    const active = view.files.flatMap((file) => file.places).find((place) => place.id === view.active);
-    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(_jsxs("div", { className: "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text", style: { height: PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height }, onPointerDown: (event) => event.preventDefault(), children: [_jsx("div", { className: "peek-hatch h-[14px]" }), _jsxs("div", { className: "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm", children: [_jsx("span", { className: "shrink-0 font-medium", children: path === null ? '' : basenameOf(path) }), _jsx(PathText, { path: shown, className: "text-text-muted" }), _jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx("span", { className: "text-text-muted", children: t(view.kind === 'definitions' ? 'language.peek.definitions' : 'language.peek.references', {
-                                    count: view.count,
-                                    formatted: formatNumber(view.count)
-                                }) }), _jsx(IconButton, { icon: X, size: "xs", label: t('language.peek.close'), onClick: () => language.peek.close() })] })] }), _jsxs("div", { className: "flex shrink-0", style: { height: body.height }, children: [_jsx(Preview, { preview: view.preview }), _jsx(Places, { language: language, view: view })] }), _jsx("div", { className: "peek-hatch relative h-[14px]", children: _jsx(PanelResizeHandle, { container: view.container, height: body.height, onHeight: body.set, onCommit: body.commit }) })] }), view.container);
+export function PeekPanel(t0) {
+  const $ = _c(56);
+  const {
+    language,
+    view
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  let t1;
+  if ($[0] !== view.active) {
+    t1 = place => place.id === view.active;
+    $[0] = view.active;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const active = view.files.flatMap(_temp2).find(t1);
+  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;
+  }
+  const t2 = createPortal;
+  const t3 = "flex flex-col bg-surface pt-[2px] font-sans text-xs text-text";
+  const t4 = PEEK_HEIGHT - PANEL_BODY_HEIGHT + body.height;
+  let t5;
+  if ($[2] !== t4) {
+    t5 = {
+      height: t4
+    };
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const t6 = _temp3;
+  let t7;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/_jsx("div", {
+      className: "peek-hatch h-[14px]"
+    });
+    $[4] = t7;
+  } else {
+    t7 = $[4];
+  }
+  const t8 = "flex h-[31px] shrink-0 items-center gap-2 border-b border-border pr-2 pl-3 text-sm";
+  const t9 = "shrink-0 font-medium";
+  const t10 = path === null ? "" : basenameOf(path);
+  let t11;
+  if ($[5] !== t10) {
+    t11 = /*#__PURE__*/_jsx("span", {
+      className: t9,
+      children: t10
+    });
+    $[5] = t10;
+    $[6] = t11;
+  } else {
+    t11 = $[6];
+  }
+  let t12;
+  if ($[7] !== shown) {
+    t12 = /*#__PURE__*/_jsx(PathText, {
+      path: shown,
+      className: "text-text-muted"
+    });
+    $[7] = shown;
+    $[8] = t12;
+  } else {
+    t12 = $[8];
+  }
+  const t13 = view.kind === "definitions" ? "language.peek.definitions" : "language.peek.references";
+  let t14;
+  if ($[9] !== t || $[10] !== t13 || $[11] !== view.count) {
+    t14 = t(t13, {
+      count: view.count,
+      formatted: formatNumber(view.count)
+    });
+    $[9] = t;
+    $[10] = t13;
+    $[11] = view.count;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  let t15;
+  if ($[13] !== t14) {
+    t15 = /*#__PURE__*/_jsx("span", {
+      className: "text-text-muted",
+      children: t14
+    });
+    $[13] = t14;
+    $[14] = t15;
+  } else {
+    t15 = $[14];
+  }
+  let t16;
+  if ($[15] !== t) {
+    t16 = t("language.peek.close");
+    $[15] = t;
+    $[16] = t16;
+  } else {
+    t16 = $[16];
+  }
+  let t17;
+  if ($[17] !== language.peek) {
+    t17 = () => language.peek.close();
+    $[17] = language.peek;
+    $[18] = t17;
+  } else {
+    t17 = $[18];
+  }
+  let t18;
+  if ($[19] !== t16 || $[20] !== t17) {
+    t18 = /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "xs",
+      label: t16,
+      onClick: t17
+    });
+    $[19] = t16;
+    $[20] = t17;
+    $[21] = t18;
+  } else {
+    t18 = $[21];
+  }
+  let t19;
+  if ($[22] !== t15 || $[23] !== t18) {
+    t19 = /*#__PURE__*/_jsxs("div", {
+      className: "ml-auto flex shrink-0 items-center gap-1",
+      children: [t15, t18]
+    });
+    $[22] = t15;
+    $[23] = t18;
+    $[24] = t19;
+  } else {
+    t19 = $[24];
+  }
+  let t20;
+  if ($[25] !== t11 || $[26] !== t12 || $[27] !== t19) {
+    t20 = /*#__PURE__*/_jsxs("div", {
+      className: t8,
+      children: [t11, t12, t19]
+    });
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t19;
+    $[28] = t20;
+  } else {
+    t20 = $[28];
+  }
+  let t21;
+  if ($[29] !== body.height) {
+    t21 = {
+      height: body.height
+    };
+    $[29] = body.height;
+    $[30] = t21;
+  } else {
+    t21 = $[30];
+  }
+  let t22;
+  if ($[31] !== view.preview) {
+    t22 = /*#__PURE__*/_jsx(Preview, {
+      preview: view.preview
+    });
+    $[31] = view.preview;
+    $[32] = t22;
+  } else {
+    t22 = $[32];
+  }
+  let t23;
+  if ($[33] !== language || $[34] !== view) {
+    t23 = /*#__PURE__*/_jsx(Places, {
+      language: language,
+      view: view
+    });
+    $[33] = language;
+    $[34] = view;
+    $[35] = t23;
+  } else {
+    t23 = $[35];
+  }
+  let t24;
+  if ($[36] !== t21 || $[37] !== t22 || $[38] !== t23) {
+    t24 = /*#__PURE__*/_jsxs("div", {
+      className: "flex shrink-0",
+      style: t21,
+      children: [t22, t23]
+    });
+    $[36] = t21;
+    $[37] = t22;
+    $[38] = t23;
+    $[39] = t24;
+  } else {
+    t24 = $[39];
+  }
+  let t25;
+  if ($[40] !== body.commit || $[41] !== body.height || $[42] !== body.set || $[43] !== view.container) {
+    t25 = /*#__PURE__*/_jsx("div", {
+      className: "peek-hatch relative h-[14px]",
+      children: /*#__PURE__*/_jsx(PanelResizeHandle, {
+        container: view.container,
+        height: body.height,
+        onHeight: body.set,
+        onCommit: body.commit
+      })
+    });
+    $[40] = body.commit;
+    $[41] = body.height;
+    $[42] = body.set;
+    $[43] = view.container;
+    $[44] = t25;
+  } else {
+    t25 = $[44];
+  }
+  let t26;
+  if ($[45] !== t20 || $[46] !== t24 || $[47] !== t25 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7) {
+    t26 = /*#__PURE__*/_jsxs("div", {
+      className: t3,
+      style: t5,
+      onPointerDown: t6,
+      children: [t7, t20, t24, t25]
+    });
+    $[45] = t20;
+    $[46] = t24;
+    $[47] = t25;
+    $[48] = t5;
+    $[49] = t6;
+    $[50] = t7;
+    $[51] = t26;
+  } else {
+    t26 = $[51];
+  }
+  let t27;
+  if ($[52] !== t2 || $[53] !== t26 || $[54] !== view.container) {
+    t27 = t2(t26, view.container);
+    $[52] = t2;
+    $[53] = t26;
+    $[54] = view.container;
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  return t27;
+}
+function _temp3(event) {
+  return event.preventDefault();
 }
+function _temp2(file) {
+  return file.places;
+}