import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from "ink";
import { semantic } from "../theme/palette.js";
import { useShellWidth } from "./width.js";
const KEYBINDS = [
  { key: "\u2191\u2193", desc: "Navigate list / fields" },
  { key: "Tab", desc: "Toggle sidebar \u2194 main pane" },
  { key: "\u23CE", desc: "Select / confirm / begin edit" },
  { key: "esc", desc: "Back / cancel / close overlay" },
  { key: "\u2303k", desc: "Open command palette" },
  { key: "?", desc: "Toggle this help overlay" },
  { key: "q", desc: "Quit (when no pending changes)" }
];
function HelpOverlay({ onClose }) {
  const shellWidth = useShellWidth();
  const isTiny = shellWidth === "tiny";
  const overlayWidth = isTiny ? "100%" : 46;
  useInput((input, key) => {
    if (key.escape || input === "?") {
      onClose();
    }
  }, { isActive: true });
  return /* @__PURE__ */ jsxs(
    Box,
    {
      borderStyle: "round",
      borderColor: semantic.accentAlt,
      flexDirection: "column",
      paddingX: 2,
      paddingY: 1,
      width: overlayWidth,
      children: [
        /* @__PURE__ */ jsx(Text, { color: semantic.accentAlt, bold: true, children: "Keyboard Shortcuts" }),
        /* @__PURE__ */ jsx(Box, { marginTop: 1, flexDirection: "column", children: KEYBINDS.map(({ key, desc }) => /* @__PURE__ */ jsxs(Box, { children: [
          /* @__PURE__ */ jsx(Box, { width: 6, children: /* @__PURE__ */ jsx(Text, { color: semantic.accent, bold: true, children: key }) }),
          /* @__PURE__ */ jsx(Text, { color: semantic.text, children: desc })
        ] }, key)) }),
        /* @__PURE__ */ jsx(Text, { color: semantic.textMuted, children: "esc \xB7 ? to close" })
      ]
    }
  );
}
export {
  HelpOverlay
};
//# sourceMappingURL=HelpOverlay.js.map