@adecore/editor-react 0.31.11 → 0.32.0

package/dist/RenameCard.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@@ -7,109 +7,703 @@ import { fileUriToPath } from '@adecore/lsp';
 import { Button, Icon } from '@adecore/ui';
 import { formatNumber } from '@adecore/ui/format';
 import { basenameOf, relativeTo } from './paths.js';
-import { AnchoredPopup } from './AnchoredPopup.js';
+import { AnchoredPopup } from "./AnchoredPopup.js";
 import { keepFocusOutOfList } from './popup-focus.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CARD_ATTRIBUTE = 'data-rename-card';
 /* Whether the focus moved to something that belongs to the rename, which is not leaving it. */
 function staysInside(target) {
-    return target instanceof Element && target.closest(`[${CARD_ATTRIBUTE}]`) !== null;
+  return target instanceof Element && target.closest(`[${CARD_ATTRIBUTE}]`) !== null;
 }
 /*
  * Suggested names from the host, in a list under the input; a press fills the input and the
  * typed name stays what Enter applies. While it is up the card says only its two keys.
  */
-function Suggestions({ names, active, onPick, onFocusBack }) {
-    const { t } = useTranslation('editor');
-    return (_jsxs("div", { className: "flex w-[250px] flex-col p-1.25", ...keepFocusOutOfList(onFocusBack), children: [_jsxs("div", { className: "flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint", children: [_jsx(Icon, { icon: Sparkles, size: 12, className: "shrink-0" }), t('language.rename.suggestions')] }), names.map((name, index) => (_jsxs("button", { type: "button", tabIndex: -1, className: `flex h-6.5 items-center gap-2 rounded-md px-2.25 text-left font-mono text-code text-text ${index === active ? 'bg-accent/20' : 'hover:bg-surface-hover'}`, onClick: () => onPick(name), children: [_jsx(Icon, { icon: Sparkles, size: 12, className: `shrink-0 ${index === active ? 'text-accent' : 'text-text-faint'}` }), name] }, name))), _jsxs("div", { className: "mt-1 flex gap-3 border-t border-border px-2.25 pt-1.75 pb-0.75 text-xs text-text-muted", children: [_jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E5 ", t('language.rename.useSuggestion')] })] })] }));
+function Suggestions(t0) {
+  const $ = _c(30);
+  const {
+    names,
+    active,
+    onPick,
+    onFocusBack
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  let t1;
+  if ($[0] !== onFocusBack) {
+    t1 = keepFocusOutOfList(onFocusBack);
+    $[0] = onFocusBack;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: Sparkles,
+      size: 12,
+      className: "shrink-0"
+    });
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== t) {
+    t3 = t("language.rename.suggestions");
+    $[3] = t;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== t3) {
+    t4 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-1.5 px-2.25 pt-1.25 pb-1 text-xs font-semibold text-text-faint",
+      children: [t2, t3]
+    });
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== active || $[8] !== names || $[9] !== onPick) {
+    let t6;
+    if ($[11] !== active || $[12] !== onPick) {
+      t6 = (name, index) => /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        tabIndex: -1,
+        className: `flex h-6.5 items-center gap-2 rounded-md px-2.25 text-left font-mono text-code text-text ${index === active ? "bg-accent/20" : "hover:bg-surface-hover"}`,
+        onClick: () => onPick(name),
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: Sparkles,
+          size: 12,
+          className: `shrink-0 ${index === active ? "text-accent" : "text-text-faint"}`
+        }), name]
+      }, name);
+      $[11] = active;
+      $[12] = onPick;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    t5 = names.map(t6);
+    $[7] = active;
+    $[8] = names;
+    $[9] = onPick;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[14] !== t) {
+    t6 = t("language.rename.rename");
+    $[14] = t;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== t6) {
+    t7 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21B5 ", t6]
+    });
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[18] !== t) {
+    t8 = t("language.rename.useSuggestion");
+    $[18] = t;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] !== t8) {
+    t9 = /*#__PURE__*/_jsxs("span", {
+      children: ["\u21E5 ", t8]
+    });
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t7 || $[23] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("div", {
+      className: "mt-1 flex gap-3 border-t border-border px-2.25 pt-1.75 pb-0.75 text-xs text-text-muted",
+      children: [t7, t9]
+    });
+    $[22] = t7;
+    $[23] = t9;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  let t11;
+  if ($[25] !== t1 || $[26] !== t10 || $[27] !== t4 || $[28] !== t5) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex w-[250px] flex-col p-1.25",
+      ...t1,
+      children: [t4, t5, t10]
+    });
+    $[25] = t1;
+    $[26] = t10;
+    $[27] = t4;
+    $[28] = t5;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  return t11;
 }
-function Hints({ view, active, onPick, onFocusBack }) {
-    const { t } = useTranslation('editor');
-    const { occurrences } = view;
-    return (_jsxs("div", { className: "flex flex-col", children: [view.error !== null && (_jsx("div", { role: "alert", className: "max-w-[420px] px-2.5 py-1.5 text-xs text-status-error", children: view.error })), view.suggestions.length > 0 ? (_jsx(Suggestions, { names: view.suggestions, active: active, onPick: onPick, onFocusBack: onFocusBack })) : (_jsxs("div", { className: "flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted", children: [occurrences !== null && (_jsx("span", { children: occurrences.files > 1
-                            ? t('language.rename.occurrencesFiles', {
-                                count: occurrences.count,
-                                formatted: formatNumber(occurrences.count),
-                                files: formatNumber(occurrences.files)
-                            })
-                            : t('language.rename.occurrences', { count: occurrences.count, formatted: formatNumber(occurrences.count) }) })), _jsxs("span", { children: ["\u21B5 ", t('language.rename.rename')] }), _jsxs("span", { children: ["\u21E7\u21B5 ", t('language.rename.preview')] })] }))] }));
+function Hints(t0) {
+  const $ = _c(12);
+  const {
+    view,
+    active,
+    onPick,
+    onFocusBack
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const {
+    occurrences
+  } = view;
+  let t1;
+  if ($[0] !== view.error) {
+    t1 = view.error !== null && /*#__PURE__*/_jsx("div", {
+      role: "alert",
+      className: "max-w-[420px] px-2.5 py-1.5 text-xs text-status-error",
+      children: view.error
+    });
+    $[0] = view.error;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== active || $[3] !== occurrences || $[4] !== onFocusBack || $[5] !== onPick || $[6] !== t || $[7] !== view.suggestions) {
+    t2 = view.suggestions.length > 0 ? /*#__PURE__*/_jsx(Suggestions, {
+      names: view.suggestions,
+      active: active,
+      onPick: onPick,
+      onFocusBack: onFocusBack
+    }) : /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-3 px-2.5 py-1.5 text-xs whitespace-nowrap text-text-muted",
+      children: [occurrences !== null && /*#__PURE__*/_jsx("span", {
+        children: occurrences.files > 1 ? t("language.rename.occurrencesFiles", {
+          count: occurrences.count,
+          formatted: formatNumber(occurrences.count),
+          files: formatNumber(occurrences.files)
+        }) : t("language.rename.occurrences", {
+          count: occurrences.count,
+          formatted: formatNumber(occurrences.count)
+        })
+      }), /*#__PURE__*/_jsxs("span", {
+        children: ["\u21B5 ", t("language.rename.rename")]
+      }), /*#__PURE__*/_jsxs("span", {
+        children: ["\u21E7\u21B5 ", t("language.rename.preview")]
+      })]
+    });
+    $[2] = active;
+    $[3] = occurrences;
+    $[4] = onFocusBack;
+    $[5] = onPick;
+    $[6] = t;
+    $[7] = view.suggestions;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== t1 || $[10] !== t2) {
+    t3 = /*#__PURE__*/_jsxs("div", {
+      className: "flex flex-col",
+      children: [t1, t2]
+    });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
 }
-function Preview({ language, view }) {
-    const { t } = useTranslation('editor');
-    const folder = language.project.folder;
-    const operations = view.operations ?? [];
-    const shownPath = (uri) => {
-        const path = fileUriToPath(uri);
-        return path === null ? uri : relativeTo(path, folder);
+function Preview(t0) {
+  const $ = _c(36);
+  const {
+    language,
+    view
+  } = t0;
+  const {
+    t
+  } = useTranslation("editor");
+  const folder = language.project.folder;
+  let t1;
+  if ($[0] !== view.operations) {
+    t1 = view.operations ?? [];
+    $[0] = view.operations;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const operations = t1;
+  let t2;
+  if ($[2] !== folder) {
+    t2 = uri => {
+      const path = fileUriToPath(uri);
+      return path === null ? uri : relativeTo(path, folder);
     };
-    return (_jsxs("div", { className: "flex w-[520px] max-w-full flex-col", onPointerDown: (event) => event.preventDefault(), children: [_jsxs("div", { className: "max-h-[320px] overflow-y-auto", children: [view.files.map((file) => {
-                        const path = fileUriToPath(file.uri);
-                        const shown = path === null ? file.uri : relativeTo(path, folder);
-                        return (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 text-xs", children: [_jsx("span", { className: "font-medium", children: path === null ? shown : basenameOf(path) }), _jsx("span", { className: "min-w-0 truncate text-text-faint", children: shown })] }), _jsx("div", { className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code", children: file.rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-px", children: [_jsxs("div", { className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0 text-right text-text-faint", children: row.line }), _jsx("span", { className: "min-w-0 truncate", children: row.before })] }), _jsxs("div", { className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre", children: [_jsx("span", { className: "w-8 shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.after })] })] }, row.line))) })] }, file.uri));
-                    }), operations.length > 0 && (_jsx("div", { className: "flex flex-col gap-px border-b border-border px-3 py-1.5 text-xs last:border-b-0", children: operations.map((operation, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "shrink-0 font-medium", children: t(`language.rename.operations.${operation.kind}`) }), _jsxs("span", { className: "min-w-0 truncate text-text-faint", children: [shownPath(operation.uri), operation.newUri === undefined ? '' : ` \u2192 ${shownPath(operation.newUri)}`] })] }, `${operation.kind}:${operation.uri}:${index}`))) }))] }), _jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border p-2", children: [_jsx(Button, { size: "xs", variant: "ghost", onClick: () => language.rename.cancel(), children: t('language.rename.cancel') }), _jsx(Button, { size: "xs", variant: "primary", onClick: () => void language.rename.confirm(), children: t('language.rename.apply') })] })] }));
+    $[2] = folder;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const shownPath = t2;
+  let t3;
+  if ($[4] !== folder || $[5] !== view.files) {
+    let t4;
+    if ($[7] !== folder) {
+      t4 = file => {
+        const path_0 = fileUriToPath(file.uri);
+        const shown = path_0 === null ? file.uri : relativeTo(path_0, folder);
+        return /*#__PURE__*/_jsxs("div", {
+          className: "border-b border-border last:border-b-0",
+          children: [/*#__PURE__*/_jsxs("div", {
+            className: "flex items-center gap-2 px-3 py-1.5 text-xs",
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "font-medium",
+              children: path_0 === null ? shown : basenameOf(path_0)
+            }), /*#__PURE__*/_jsx("span", {
+              className: "min-w-0 truncate text-text-faint",
+              children: shown
+            })]
+          }), /*#__PURE__*/_jsx("div", {
+            className: "flex flex-col gap-px px-1 pb-1.5 font-mono text-code",
+            children: file.rows.map(_temp2)
+          })]
+        }, file.uri);
+      };
+      $[7] = folder;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    t3 = view.files.map(t4);
+    $[4] = folder;
+    $[5] = view.files;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[9] !== operations || $[10] !== shownPath || $[11] !== t) {
+    t4 = operations.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-px border-b border-border px-3 py-1.5 text-xs last:border-b-0",
+      children: operations.map((operation, index) => /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "shrink-0 font-medium",
+          children: t(`language.rename.operations.${operation.kind}`)
+        }), /*#__PURE__*/_jsxs("span", {
+          className: "min-w-0 truncate text-text-faint",
+          children: [shownPath(operation.uri), operation.newUri === undefined ? "" : ` \u2192 ${shownPath(operation.newUri)}`]
+        })]
+      }, `${operation.kind}:${operation.uri}:${index}`))
+    });
+    $[9] = operations;
+    $[10] = shownPath;
+    $[11] = t;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/_jsxs("div", {
+      className: "max-h-[320px] overflow-y-auto",
+      children: [t3, t4]
+    });
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== language.rename) {
+    t6 = () => language.rename.cancel();
+    $[16] = language.rename;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== t) {
+    t7 = t("language.rename.cancel");
+    $[18] = t;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] !== t6 || $[21] !== t7) {
+    t8 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      variant: "ghost",
+      onClick: t6,
+      children: t7
+    });
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+  } else {
+    t8 = $[22];
+  }
+  let t9;
+  if ($[23] !== language.rename) {
+    t9 = () => void language.rename.confirm();
+    $[23] = language.rename;
+    $[24] = t9;
+  } else {
+    t9 = $[24];
+  }
+  let t10;
+  if ($[25] !== t) {
+    t10 = t("language.rename.apply");
+    $[25] = t;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  let t11;
+  if ($[27] !== t10 || $[28] !== t9) {
+    t11 = /*#__PURE__*/_jsx(Button, {
+      size: "xs",
+      variant: "primary",
+      onClick: t9,
+      children: t10
+    });
+    $[27] = t10;
+    $[28] = t9;
+    $[29] = t11;
+  } else {
+    t11 = $[29];
+  }
+  let t12;
+  if ($[30] !== t11 || $[31] !== t8) {
+    t12 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center justify-end gap-2 border-t border-border p-2",
+      children: [t8, t11]
+    });
+    $[30] = t11;
+    $[31] = t8;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== t12 || $[34] !== t5) {
+    t13 = /*#__PURE__*/_jsxs("div", {
+      className: "flex w-[520px] max-w-full flex-col",
+      onPointerDown: _temp,
+      children: [t5, t12]
+    });
+    $[33] = t12;
+    $[34] = t5;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  return t13;
 }
 /*
  * The rename of a symbol: an input over the symbol itself, and under it either the count of its places with
  * the keys, or after Shift+Enter the lines the rename would change. The input keeps the focus the whole time,
  * so Enter and Escape mean the same in both, and the focus leaving the card means the person went elsewhere.
  */
-export function RenameCard({ language, view, rect, endRect }) {
-    const input = useRef(null);
-    const [value, setValue] = useState(view.placeholder);
-    const [active, setActive] = useState(0);
-    useLayoutEffect(() => {
-        input.current?.focus();
-        input.current?.select();
-    }, []);
-    function fill(name) {
-        setValue(name);
-        language.rename.edited();
-        input.current?.focus();
-    }
-    function onKeyDown(event) {
-        const names = view.phase === 'input' ? view.suggestions : [];
-        if (names.length > 0 && !event.nativeEvent.isComposing && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
-            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
-            if (step !== 0 || event.key === 'Tab') {
-                event.preventDefault();
-                event.stopPropagation();
-                if (event.key === 'Tab') {
-                    fill(names[Math.min(active, names.length - 1)]);
-                }
-                else {
-                    setActive((active + step + names.length) % names.length);
-                }
-                return;
-            }
-        }
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            language.rename.cancel();
+function _temp2(row) {
+  return /*#__PURE__*/_jsxs("div", {
+    className: "flex flex-col gap-px",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "flex gap-2 rounded-sm bg-status-error/10 px-1.5 whitespace-pre",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "w-8 shrink-0 text-right text-text-faint",
+        children: row.line
+      }), /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate",
+        children: row.before
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "flex gap-2 rounded-sm bg-status-idle/10 px-1.5 whitespace-pre",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "w-8 shrink-0"
+      }), /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 truncate",
+        children: row.after
+      })]
+    })]
+  }, row.line);
+}
+function _temp(event) {
+  return event.preventDefault();
+}
+export function RenameCard(t0) {
+  const $ = _c(47);
+  const {
+    language,
+    view,
+    rect,
+    endRect
+  } = t0;
+  const input = useRef(null);
+  const [value, setValue] = useState(view.placeholder);
+  const [active, setActive] = useState(0);
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      input.current?.focus();
+      input.current?.select();
+    };
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  useLayoutEffect(t1, t2);
+  let t3;
+  if ($[2] !== language.rename) {
+    t3 = function fill(name) {
+      setValue(name);
+      language.rename.edited();
+      input.current?.focus();
+    };
+    $[2] = language.rename;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const fill = t3;
+  let t4;
+  if ($[4] !== active || $[5] !== fill || $[6] !== language.rename || $[7] !== value || $[8] !== view.busy || $[9] !== view.phase || $[10] !== view.suggestions) {
+    t4 = function onKeyDown(event) {
+      const names = view.phase === "input" ? view.suggestions : [];
+      if (names.length > 0 && !event.nativeEvent.isComposing && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+        const step = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
+        if (step !== 0 || event.key === "Tab") {
+          event.preventDefault();
+          event.stopPropagation();
+          if (event.key === "Tab") {
+            fill(names[Math.min(active, names.length - 1)]);
+          } else {
+            setActive((active + step + names.length) % names.length);
+          }
+          return;
         }
-        else if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (view.phase === 'preview') {
-                void language.rename.confirm();
-            }
-            else if (!view.busy) {
-                void language.rename.submit(value, event.shiftKey);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        language.rename.cancel();
+      } else {
+        if (event.key === "Enter" && !event.nativeEvent.isComposing) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (view.phase === "preview") {
+            language.rename.confirm();
+          } else {
+            if (!view.busy) {
+              language.rename.submit(value, event.shiftKey);
             }
+          }
         }
-    }
-    const symbolWidth = endRect === null ? 0 : Math.max(0, endRect.left - rect.left);
-    return createPortal(_jsxs(_Fragment, { children: [_jsx("input", { ref: input, [CARD_ATTRIBUTE]: '', value: view.phase === 'preview' ? view.name : value, readOnly: view.phase === 'preview' || view.busy, spellCheck: false, autoComplete: "off", "aria-label": view.original, className: "fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-0 font-mono text-(length:--code-font-size) text-text shadow-(--float-shadow) outline-none [font-kerning:none] [field-sizing:content]", style: {
-                    // Only the border stands beside the name: any padding would cover the character after it, often a `(`.
-                    left: Math.round(rect.left) - 1,
-                    top: Math.round(rect.top) - 2,
-                    height: Math.round(rect.bottom - rect.top) + 4,
-                    minWidth: Math.round(symbolWidth) + 2
-                }, onChange: (event) => {
-                    setValue(event.target.value);
-                    language.rename.edited();
-                }, onKeyDown: onKeyDown, onBlur: (event) => {
-                    if (!staysInside(event.relatedTarget)) {
-                        language.rename.cancel();
-                    }
-                } }), _jsx(AnchoredPopup, { rect: { ...rect, top: rect.top - 2, bottom: rect.bottom + 2 }, overflow: "clip", placement: { gap: 2 }, children: _jsx("div", { [CARD_ATTRIBUTE]: '', onPointerDown: (event) => event.preventDefault(), children: view.phase === 'preview' ? (_jsx(Preview, { language: language, view: view })) : (_jsx(Hints, { view: view, active: active, onPick: fill, onFocusBack: () => input.current?.focus() })) }) })] }), document.body);
+      }
+    };
+    $[4] = active;
+    $[5] = fill;
+    $[6] = language.rename;
+    $[7] = value;
+    $[8] = view.busy;
+    $[9] = view.phase;
+    $[10] = view.suggestions;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const onKeyDown = t4;
+  const symbolWidth = endRect === null ? 0 : Math.max(0, endRect.left - rect.left);
+  let t5;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      [CARD_ATTRIBUTE]: ""
+    };
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const t6 = view.phase === "preview" ? view.name : value;
+  const t7 = view.phase === "preview" || view.busy;
+  const t8 = Math.round(rect.left) - 1;
+  const t9 = Math.round(rect.top) - 2;
+  const t10 = Math.round(rect.bottom - rect.top) + 4;
+  const t11 = Math.round(symbolWidth) + 2;
+  let t12;
+  if ($[13] !== t10 || $[14] !== t11 || $[15] !== t8 || $[16] !== t9) {
+    t12 = {
+      left: t8,
+      top: t9,
+      height: t10,
+      minWidth: t11
+    };
+    $[13] = t10;
+    $[14] = t11;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] !== language.rename) {
+    t13 = event_0 => {
+      setValue(event_0.target.value);
+      language.rename.edited();
+    };
+    $[18] = language.rename;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  let t14;
+  if ($[20] !== language.rename) {
+    t14 = event_1 => {
+      if (!staysInside(event_1.relatedTarget)) {
+        language.rename.cancel();
+      }
+    };
+    $[20] = language.rename;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== onKeyDown || $[23] !== t12 || $[24] !== t13 || $[25] !== t14 || $[26] !== t6 || $[27] !== t7 || $[28] !== view.original) {
+    t15 = /*#__PURE__*/_jsx("input", {
+      ref: input,
+      ...t5,
+      value: t6,
+      readOnly: t7,
+      spellCheck: false,
+      autoComplete: "off",
+      "aria-label": view.original,
+      className: "fixed z-(--z-popup) rounded-sm border border-accent bg-surface px-0 font-mono text-(length:--code-font-size) text-text shadow-(--float-shadow) outline-none [font-kerning:none] [field-sizing:content]",
+      style: t12,
+      onChange: t13,
+      onKeyDown: onKeyDown,
+      onBlur: t14
+    });
+    $[22] = onKeyDown;
+    $[23] = t12;
+    $[24] = t13;
+    $[25] = t14;
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = view.original;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  const t16 = rect.top - 2;
+  const t17 = rect.bottom + 2;
+  let t18;
+  if ($[30] !== rect || $[31] !== t16 || $[32] !== t17) {
+    t18 = {
+      ...rect,
+      top: t16,
+      bottom: t17
+    };
+    $[30] = rect;
+    $[31] = t16;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  let t20;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = {
+      gap: 2
+    };
+    t20 = {
+      [CARD_ATTRIBUTE]: ""
+    };
+    $[34] = t19;
+    $[35] = t20;
+  } else {
+    t19 = $[34];
+    t20 = $[35];
+  }
+  let t21;
+  if ($[36] !== active || $[37] !== fill || $[38] !== language || $[39] !== view) {
+    t21 = /*#__PURE__*/_jsx("div", {
+      ...t20,
+      onPointerDown: _temp3,
+      children: view.phase === "preview" ? /*#__PURE__*/_jsx(Preview, {
+        language: language,
+        view: view
+      }) : /*#__PURE__*/_jsx(Hints, {
+        view: view,
+        active: active,
+        onPick: fill,
+        onFocusBack: () => input.current?.focus()
+      })
+    });
+    $[36] = active;
+    $[37] = fill;
+    $[38] = language;
+    $[39] = view;
+    $[40] = t21;
+  } else {
+    t21 = $[40];
+  }
+  let t22;
+  if ($[41] !== t18 || $[42] !== t21) {
+    t22 = /*#__PURE__*/_jsx(AnchoredPopup, {
+      rect: t18,
+      overflow: "clip",
+      placement: t19,
+      children: t21
+    });
+    $[41] = t18;
+    $[42] = t21;
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] !== t15 || $[45] !== t22) {
+    t23 = createPortal(/*#__PURE__*/_jsxs(_Fragment, {
+      children: [t15, t22]
+    }), document.body);
+    $[44] = t15;
+    $[45] = t22;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  return t23;
 }
+function _temp3(event_2) {
+  return event_2.preventDefault();
+}