dotenvx-ui 0.1.0 → 0.1.2

package/dist/cli.js

@@ -92,20 +92,20 @@ function scan(cwd) {
 }
 
 // src/tui/App.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { Box as Box7, Text as Text7, useApp, useInput as useInput6, useStdin as useStdin6 } from "ink";
 import clipboard from "clipboardy";
 
 // src/tui/FileList.tsx
 import { Box, Text, useInput, useStdin } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FileList({ files, selectedIndex, focused, onSelect }) {
+function FileList({ files, selectedIndex, focused, interactive, onSelect }) {
   const { isRawModeSupported } = useStdin();
   useInput((_, key) => {
     if (!focused) return;
     if (key.upArrow) onSelect(Math.max(0, selectedIndex - 1));
     if (key.downArrow) onSelect(Math.min(files.length - 1, selectedIndex + 1));
-  }, { isActive: isRawModeSupported });
+  }, { isActive: isRawModeSupported && interactive });
   const byPkg = Map.groupBy(files, (f) => f.package);
   return /* @__PURE__ */ jsx(Box, { flexDirection: "column", width: 24, borderStyle: "single", borderRight: true, borderTop: false, borderBottom: false, borderLeft: false, children: Array.from(byPkg.entries()).map(([pkg, pkgFiles]) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     /* @__PURE__ */ jsxs(Text, { bold: true, dimColor: true, children: [
@@ -132,21 +132,71 @@ function FileList({ files, selectedIndex, focused, onSelect }) {
 
 // src/tui/KeyTable.tsx
 import { Box as Box2, Text as Text2, useInput as useInput2, useStdin as useStdin2 } from "ink";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/tui/useTerminalRows.ts
+import { useEffect, useState } from "react";
+import { useStdout } from "ink";
+function useTerminalRows() {
+  const { stdout } = useStdout();
+  const [rows, setRows] = useState(stdout?.rows ?? 24);
+  useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => setRows(stdout.rows);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  return rows;
+}
+function useTerminalCols() {
+  const { stdout } = useStdout();
+  const [cols, setCols] = useState(stdout?.columns ?? 80);
+  useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => setCols(stdout.columns);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  return cols;
+}
+function scrollWindow(length, selectedIndex, maxVisible) {
+  if (length <= maxVisible) return { start: 0, end: length, above: 0, below: 0 };
+  const start = Math.min(
+    Math.max(0, selectedIndex - Math.floor(maxVisible / 2)),
+    length - maxVisible
+  );
+  const end = start + maxVisible;
+  return { start, end, above: start, below: length - end };
+}
+
+// src/tui/KeyTable.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SECRET_PATTERN = /secret|password|token|key|private|api_?key/i;
+var MAX_INLINE = 48;
+function truncate(s) {
+  const first = s.split("\n")[0];
+  return first.length > MAX_INLINE ? first.slice(0, MAX_INLINE - 1) + "\u2026" : first;
+}
 function maskValue(k, revealed) {
-  if (revealed.has(k.key)) return revealed.get(k.key);
+  if (revealed.has(k.key)) return truncate(revealed.get(k.key));
   if (k.encrypted) return "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
   if (SECRET_PATTERN.test(k.key)) return "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
-  return k.value.length > 48 ? k.value.slice(0, 48) + "\u2026" : k.value;
+  return truncate(k.value);
 }
-function KeyTable({ file, keys, selectedIndex, focused, revealed, onSelect }) {
+function KeyTable({ file, keys, selectedIndex, focused, interactive, revealed, onSelect, maxRows }) {
   const { isRawModeSupported } = useStdin2();
   useInput2((_, key) => {
     if (!focused) return;
     if (key.upArrow) onSelect(Math.max(0, selectedIndex - 1));
     if (key.downArrow) onSelect(Math.min(keys.length - 1, selectedIndex + 1));
-  }, { isActive: isRawModeSupported });
+  }, { isActive: isRawModeSupported && interactive });
+  const maxVisible = Math.max(3, maxRows - 3);
+  const { start, end, above, below } = scrollWindow(keys.length, selectedIndex, maxVisible);
+  const visibleKeys = keys.slice(start, end);
+  const keyColWidth = Math.min(48, Math.max(16, ...keys.map((k) => k.key.length))) + 2;
   const encBadge = file.encrypted ? /* @__PURE__ */ jsx2(Text2, { color: "yellow", children: " encrypted" }) : /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: " plain" });
   return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", flexGrow: 1, children: [
     /* @__PURE__ */ jsxs2(Box2, { paddingX: 1, children: [
@@ -163,37 +213,72 @@ function KeyTable({ file, keys, selectedIndex, focused, revealed, onSelect }) {
       "No keys found. Press ",
       /* @__PURE__ */ jsx2(Text2, { bold: true, children: "a" }),
       " to add one."
-    ] }) }) : keys.map((k, idx) => {
-      const selected = idx === selectedIndex;
-      const value = maskValue(k, revealed);
-      const lockIcon = k.encrypted && !revealed.has(k.key) ? " \u{1F512}" : "";
-      return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, children: /* @__PURE__ */ jsxs2(
-        Text2,
-        {
-          backgroundColor: selected && focused ? "blue" : void 0,
-          color: selected && focused ? "white" : selected ? "cyan" : void 0,
-          children: [
-            k.key.padEnd(24),
-            /* @__PURE__ */ jsx2(Text2, { dimColor: !selected, children: value }),
-            lockIcon
-          ]
-        }
-      ) }, k.key);
-    })
+    ] }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      above > 0 && /* @__PURE__ */ jsx2(Box2, { paddingX: 1, children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        "\u2191 ",
+        above,
+        " more"
+      ] }) }),
+      visibleKeys.map((k, i) => {
+        const idx = start + i;
+        const selected = idx === selectedIndex;
+        const value = maskValue(k, revealed);
+        const lockIcon = k.encrypted && !revealed.has(k.key) ? " \u{1F512}" : "";
+        return /* @__PURE__ */ jsx2(Box2, { paddingX: 1, children: /* @__PURE__ */ jsxs2(
+          Text2,
+          {
+            backgroundColor: selected && focused ? "blue" : void 0,
+            color: selected && focused ? "white" : selected ? "cyan" : void 0,
+            children: [
+              k.key.padEnd(keyColWidth),
+              /* @__PURE__ */ jsx2(Text2, { dimColor: !selected, children: value }),
+              lockIcon
+            ]
+          }
+        ) }, k.key);
+      }),
+      below > 0 && /* @__PURE__ */ jsx2(Box2, { paddingX: 1, children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+        "\u2193 ",
+        below,
+        " more"
+      ] }) })
+    ] })
   ] });
 }
 
 // src/tui/StatusBar.tsx
 import { Box as Box3, Text as Text3 } from "ink";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var FILE_HINTS = "\u2191\u2193 navigate  tab switch panel  ? help  q quit";
-var KEY_HINTS = "\u2191\u2193 navigate  tab switch  enter edit  y copy  r reveal  a add  D del  d diff  ? help  q quit";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FILE_HINTS = [
+  { key: "\u2191\u2193", action: "navigate" },
+  { key: "tab", action: "switch panel" },
+  { key: "?", action: "help" },
+  { key: "q", action: "quit" }
+];
+var KEY_HINTS = [
+  { key: "\u2191\u2193", action: "navigate" },
+  { key: "tab", action: "switch" },
+  { key: "enter", action: "edit" },
+  { key: "y", action: "copy" },
+  { key: "r", action: "reveal" },
+  { key: "a", action: "add" },
+  { key: "D", action: "delete" },
+  { key: "d", action: "diff" },
+  { key: "?", action: "help" },
+  { key: "q", action: "quit" }
+];
+function Hints({ hints }) {
+  return /* @__PURE__ */ jsx3(Box3, { gap: 2, children: hints.map(({ key, action }) => /* @__PURE__ */ jsxs3(Box3, { gap: 1, children: [
+    /* @__PURE__ */ jsx3(Text3, { bold: true, color: "cyan", children: key }),
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: action })
+  ] }, key)) });
+}
 function StatusBar({ message, focus }) {
-  return /* @__PURE__ */ jsx3(Box3, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, children: /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: message ?? (focus === "files" ? FILE_HINTS : KEY_HINTS) }) });
+  return /* @__PURE__ */ jsx3(Box3, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, children: message ? /* @__PURE__ */ jsx3(Text3, { children: message }) : /* @__PURE__ */ jsx3(Hints, { hints: focus === "files" ? FILE_HINTS : KEY_HINTS }) });
 }
 
 // src/tui/DiffView.tsx
-import { useState } from "react";
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 import { Box as Box4, Text as Text4, useInput as useInput3, useStdin as useStdin3 } from "ink";
 
 // src/core/parser/io.ts
@@ -406,16 +491,48 @@ function decryptValue(encryptedValue, envFilePath) {
   const keyName = findKeyForValue(encryptedValue, envFilePath);
   if (!keyName) return null;
   const keysFile = findKeysFile(envFilePath);
-  try {
+  return silenced(() => {
     const result = dotenvx.get(keyName, {
       path: envFilePath,
       ...keysFile ? { envKeysFile: keysFile } : {},
       logLevel: "error"
     });
     return result ?? null;
+  });
+}
+function decryptAllValues(envFilePath) {
+  let raw;
+  try {
+    raw = readFileSync3(envFilePath, "utf8");
   } catch {
-    return null;
+    return {};
   }
+  let privateKey = process.env["DOTENV_PRIVATE_KEY"] ?? null;
+  if (!privateKey) {
+    const keysFile = findKeysFile(envFilePath);
+    if (keysFile) {
+      try {
+        const keypairs = dotenvx.keypair(envFilePath, void 0, keysFile);
+        for (const [name, value] of Object.entries(keypairs)) {
+          if (name.startsWith("DOTENV_PRIVATE_KEY") && value) {
+            privateKey = value;
+            break;
+          }
+        }
+      } catch {
+      }
+    }
+  }
+  return silenced(() => {
+    try {
+      return dotenvx.parse(raw, {
+        ...privateKey ? { privateKey } : {},
+        processEnv: {}
+      });
+    } catch {
+      return {};
+    }
+  });
 }
 var DOTENVX_INTERNAL_KEYS = /* @__PURE__ */ new Set(["DOTENV_PUBLIC_KEY", "DOTENV_PRIVATE_KEY"]);
 function encryptFile(envFilePath) {
@@ -439,13 +556,31 @@ function encryptKey(envFilePath, keyName, plainValue) {
 }
 function decryptFile(envFilePath) {
   const keys = readEnvFile(envFilePath);
+  const decrypted = decryptAllValues(envFilePath);
   for (const k of keys) {
     if (isEncryptedValue(k.value)) {
-      const plain = decryptValue(k.value, envFilePath);
-      if (plain !== null) updateKey(envFilePath, k.key, plain);
+      const plain = decrypted[k.key];
+      if (plain !== void 0 && !isEncryptedValue(plain)) updateKey(envFilePath, k.key, plain);
     }
   }
 }
+function silenced(fn) {
+  const origWrite = process.stderr.write.bind(process.stderr);
+  const origOut = process.stdout.write.bind(process.stdout);
+  const mute = (chunk) => {
+    const s = String(chunk);
+    if (s.includes("[MISSING_PRIVATE_KEY]") || s.includes("could not decrypt") || s.includes("\u2620")) return true;
+    return false;
+  };
+  process.stderr.write = ((chunk, ...args) => mute(chunk) ? true : origWrite(chunk, ...args));
+  process.stdout.write = ((chunk, ...args) => mute(chunk) ? true : origOut(chunk, ...args));
+  try {
+    return fn();
+  } finally {
+    process.stderr.write = origWrite;
+    process.stdout.write = origOut;
+  }
+}
 function findKeysFile(envFilePath) {
   let dir = dirname3(envFilePath);
   while (true) {
@@ -474,14 +609,16 @@ function findKeyForValue(encryptedValue, envFilePath) {
 }
 
 // src/tui/DiffView.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var COL_VAL = 26;
+var PICKER_MAX = 5;
 function buildDisplayMap(keys, filePath) {
+  const decrypted = keys.some((k) => k.encrypted) ? decryptAllValues(filePath) : {};
   const out = /* @__PURE__ */ new Map();
   for (const k of keys) {
     if (k.encrypted) {
-      const plain = decryptValue(k.value, filePath);
-      out.set(k.key, plain !== null ? plain : "\u{1F512}");
+      const plain = decrypted[k.key];
+      out.set(k.key, plain !== void 0 && !isEncryptedValue(plain) ? plain : "\u{1F512}");
     } else {
       out.set(k.key, k.value);
     }
@@ -519,35 +656,82 @@ function safeRead(file) {
 }
 function DiffView({ left, files, onClose }) {
   const { isRawModeSupported } = useStdin3();
+  const termRows = useTerminalRows();
   const others = files.filter((f) => f.path !== left.path);
-  const [pickerIndex, setPickerIndex] = useState(0);
+  const [pickerIndex, setPickerIndex] = useState2(0);
+  const [rowScroll, setRowScroll] = useState2(0);
   const rightFile = others[pickerIndex] ?? null;
-  const leftKeys = safeRead(left);
-  const rightKeys = rightFile ? safeRead(rightFile) : [];
-  const leftMap = buildDisplayMap(leftKeys, left.path);
-  const rightMap = rightFile ? buildDisplayMap(rightKeys, rightFile.path) : /* @__PURE__ */ new Map();
-  const rows = rightFile ? buildRows(leftMap, rightMap) : [];
+  const mapsCache = useRef(/* @__PURE__ */ new Map());
+  const [cacheVersion, setCacheVersion] = useState2(0);
+  function getMap(file) {
+    return mapsCache.current.get(file.path) ?? null;
+  }
+  function buildAndCache(file) {
+    if (!mapsCache.current.has(file.path)) {
+      mapsCache.current.set(file.path, buildDisplayMap(safeRead(file), file.path));
+      setCacheVersion((v) => v + 1);
+    }
+  }
+  useEffect2(() => {
+    buildAndCache(left);
+    if (others[0]) buildAndCache(others[0]);
+  }, []);
+  useEffect2(() => {
+    const next = others[pickerIndex + 1];
+    const prev = others[pickerIndex - 1];
+    if (next) buildAndCache(next);
+    if (prev) buildAndCache(prev);
+  }, [pickerIndex]);
+  const rows = useMemo(() => {
+    if (!rightFile) return [];
+    const leftMap = getMap(left);
+    const rightMap = getMap(rightFile);
+    if (!leftMap || !rightMap) return [];
+    return buildRows(leftMap, rightMap);
+  }, [left.path, rightFile?.path, cacheVersion]);
+  const pickerVisible = Math.min(others.length, PICKER_MAX);
+  const picker = scrollWindow(others.length, pickerIndex, PICKER_MAX);
+  const chrome = 9 + pickerVisible + (picker.above > 0 || picker.below > 0 ? 2 : 0);
+  const maxRows = Math.max(3, termRows - chrome);
+  const maxScroll = Math.max(0, rows.length - maxRows);
+  const scroll = Math.min(rowScroll, maxScroll);
+  const visibleRows = rows.slice(scroll, scroll + maxRows);
+  const rowsAbove = scroll;
+  const rowsBelow = rows.length - (scroll + visibleRows.length);
   useInput3((input, key) => {
     if (key.escape || input === "q") {
       onClose();
       return;
     }
-    if (key.upArrow) setPickerIndex((i) => Math.max(0, i - 1));
-    if (key.downArrow) setPickerIndex((i) => Math.min(others.length - 1, i + 1));
+    if (key.upArrow) {
+      setPickerIndex((i) => Math.max(0, i - 1));
+      setRowScroll(0);
+      return;
+    }
+    if (key.downArrow) {
+      setPickerIndex((i) => Math.min(others.length - 1, i + 1));
+      setRowScroll(0);
+      return;
+    }
+    if (input === "k") setRowScroll(Math.max(0, scroll - 1));
+    if (input === "j") setRowScroll(Math.min(maxScroll, scroll + 1));
+    if (key.pageUp) setRowScroll(Math.max(0, scroll - maxRows));
+    if (key.pageDown) setRowScroll(Math.min(maxScroll, scroll + maxRows));
   }, { isActive: isRawModeSupported });
+  const keyColWidth = Math.min(48, Math.max(16, ...rows.map((r) => r.key.length))) + 2;
   const leftName = trunc(left.relativePath, COL_VAL);
   const rightName = rightFile ? trunc(rightFile.relativePath, COL_VAL) : "\u2014";
-  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs3(Box4, { paddingX: 1, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs4(Box4, { paddingX: 1, children: [
       /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "dotenvx-ui  " }),
-      /* @__PURE__ */ jsxs3(Text4, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
         "diff  ",
         left.relativePath,
         "  \u2194  ",
         rightFile?.relativePath ?? "\u2014"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       Box4,
       {
         flexDirection: "column",
@@ -559,9 +743,14 @@ function DiffView({ left, files, onClose }) {
         borderRight: false,
         children: [
           /* @__PURE__ */ jsx4(Text4, { bold: true, dimColor: true, children: "compare with" }),
-          others.map((f, i) => {
-            const selected = i === pickerIndex;
-            return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs3(
+          picker.above > 0 && /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+            "  \u2191 ",
+            picker.above,
+            " more"
+          ] }),
+          others.slice(picker.start, picker.end).map((f, i) => {
+            const selected = picker.start + i === pickerIndex;
+            return /* @__PURE__ */ jsx4(Box4, { children: /* @__PURE__ */ jsxs4(
               Text4,
               {
                 backgroundColor: selected ? "blue" : void 0,
@@ -573,34 +762,49 @@ function DiffView({ left, files, onClose }) {
               }
             ) }, f.path);
           }),
+          picker.below > 0 && /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+            "  \u2193 ",
+            picker.below,
+            " more"
+          ] }),
           others.length === 0 && /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  no other files" })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [
-      /* @__PURE__ */ jsxs3(Box4, { borderStyle: "single", borderBottom: true, borderTop: false, borderLeft: false, borderRight: false, children: [
-        /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "KEY".padEnd(22) }),
-        /* @__PURE__ */ jsxs3(Text4, { bold: true, children: [
+    /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", flexGrow: 1, paddingX: 1, children: [
+      /* @__PURE__ */ jsxs4(Box4, { borderStyle: "single", borderBottom: true, borderTop: false, borderLeft: false, borderRight: false, children: [
+        /* @__PURE__ */ jsx4(Text4, { bold: true, color: "cyan", children: "KEY".padEnd(keyColWidth) }),
+        /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
           "  ",
           leftName.padEnd(COL_VAL + 2)
         ] }),
         /* @__PURE__ */ jsx4(Text4, { bold: true, children: rightName })
       ] }),
-      rows.map((row) => /* @__PURE__ */ jsx4(DiffRow, { row }, row.key)),
+      rowsAbove > 0 && /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        "\u2191 ",
+        rowsAbove,
+        " more"
+      ] }),
+      visibleRows.map((row) => /* @__PURE__ */ jsx4(DiffRow, { row, keyColWidth }, row.key)),
+      rowsBelow > 0 && /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+        "\u2193 ",
+        rowsBelow,
+        " more"
+      ] }),
       rows.length === 0 && /* @__PURE__ */ jsx4(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "Select a file to compare." }) })
     ] }),
-    /* @__PURE__ */ jsxs3(Box4, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, children: [
-      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\u2191\u2193 pick file  esc close    " }),
+    /* @__PURE__ */ jsxs4(Box4, { borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, children: [
+      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "\u2191\u2193 pick file  j/k scroll  esc close    " }),
       /* @__PURE__ */ jsx4(Text4, { color: "green", children: "\u25CF same" })
     ] })
   ] });
 }
-function DiffRow({ row }) {
+function DiffRow({ row, keyColWidth }) {
   const { key, leftDisplay, rightDisplay, status } = row;
   const color = status === "same" ? "green" : void 0;
-  return /* @__PURE__ */ jsxs3(Box4, { children: [
-    /* @__PURE__ */ jsx4(Text4, { color, children: key.padEnd(22) }),
-    /* @__PURE__ */ jsxs3(Text4, { color, children: [
+  return /* @__PURE__ */ jsxs4(Box4, { children: [
+    /* @__PURE__ */ jsx4(Text4, { color, children: key.padEnd(keyColWidth) }),
+    /* @__PURE__ */ jsxs4(Text4, { color, children: [
       "  ",
       (leftDisplay || "\u2014").padEnd(COL_VAL + 2)
     ] }),
@@ -610,7 +814,7 @@ function DiffRow({ row }) {
 
 // src/tui/HelpOverlay.tsx
 import { Box as Box5, Text as Text5, useInput as useInput4, useStdin as useStdin4 } from "ink";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var SECTIONS = [
   {
     title: "Navigation",
@@ -652,14 +856,14 @@ function HelpOverlay({ onClose }) {
   useInput4((input, key) => {
     if (input === "?" || input === "q" || key.escape) onClose();
   }, { isActive: isRawModeSupported });
-  return /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
-    /* @__PURE__ */ jsxs4(Box5, { marginBottom: 1, children: [
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+    /* @__PURE__ */ jsxs5(Box5, { marginBottom: 1, children: [
       /* @__PURE__ */ jsx5(Text5, { bold: true, color: "cyan", children: "dotenvx-ui  " }),
       /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "keyboard shortcuts" })
     ] }),
-    SECTIONS.map((section) => /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginBottom: 1, children: [
+    SECTIONS.map((section) => /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", marginBottom: 1, children: [
       /* @__PURE__ */ jsx5(Text5, { bold: true, children: section.title }),
-      section.rows.map(([key, desc]) => /* @__PURE__ */ jsxs4(Box5, { children: [
+      section.rows.map(([key, desc]) => /* @__PURE__ */ jsxs5(Box5, { children: [
         /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: key.padEnd(KEY_WIDTH) }),
         /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: desc })
       ] }, key))
@@ -669,89 +873,177 @@ function HelpOverlay({ onClose }) {
 }
 
 // src/tui/InlineForm.tsx
-import { useState as useState2 } from "react";
-import { Box as Box6, Text as Text6, useInput as useInput5, useStdin as useStdin5 } from "ink";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState3, useRef as useRef2 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput5, useStdin as useStdin5, useStdout as useStdout2 } from "ink";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function makeInitialState(value) {
+  const lines = value.split("\n");
+  return {
+    lines,
+    row: lines.length - 1,
+    col: lines[lines.length - 1].length
+  };
+}
+var CHROME = 5;
 function InlineForm({ label, initialValue = "", onSubmit, onCancel }) {
   const { isRawModeSupported } = useStdin5();
-  const [value, setValue] = useState2(initialValue);
-  const [cursor, setCursor] = useState2(initialValue.length);
+  const { stdout } = useStdout2();
+  const [editor, setEditor] = useState3(() => makeInitialState(initialValue));
+  const editorRef = useRef2(editor);
+  editorRef.current = editor;
   useInput5((input, key) => {
     if (key.escape) {
       onCancel();
       return;
     }
+    const { lines: lines2, row: row2, col: col2 } = editorRef.current;
+    const lineWidth = Math.max(1, (stdout?.columns ?? 80) - CHROME);
     if (key.return) {
-      onSubmit(value);
+      onSubmit(lines2.join("\n"));
+      return;
+    }
+    if (key.upArrow) {
+      const line = lines2[row2];
+      const visualRow = Math.floor(col2 / lineWidth);
+      if (visualRow > 0) {
+        const targetVisualRow = visualRow - 1;
+        const colInVisualRow = col2 % lineWidth;
+        const newCol = Math.min(targetVisualRow * lineWidth + colInVisualRow, line.length);
+        setEditor({ lines: lines2, row: row2, col: newCol });
+      } else if (row2 > 0) {
+        const prevLine = lines2[row2 - 1];
+        const prevVisualRows = Math.floor(prevLine.length / lineWidth);
+        const colInVisualRow = col2 % lineWidth;
+        const newCol = Math.min(prevVisualRows * lineWidth + colInVisualRow, prevLine.length);
+        setEditor({ lines: lines2, row: row2 - 1, col: newCol });
+      }
+      return;
+    }
+    if (key.downArrow) {
+      const line = lines2[row2];
+      const visualRow = Math.floor(col2 / lineWidth);
+      const lastVisualRow = Math.floor(line.length / lineWidth);
+      if (visualRow < lastVisualRow) {
+        const colInVisualRow = col2 % lineWidth;
+        const newCol = Math.min((visualRow + 1) * lineWidth + colInVisualRow, line.length);
+        setEditor({ lines: lines2, row: row2, col: newCol });
+      } else if (row2 < lines2.length - 1) {
+        const colInVisualRow = col2 % lineWidth;
+        const newCol = Math.min(colInVisualRow, lines2[row2 + 1].length);
+        setEditor({ lines: lines2, row: row2 + 1, col: newCol });
+      }
       return;
     }
     if (key.leftArrow) {
-      setCursor((c) => Math.max(0, c - 1));
+      if (col2 > 0) {
+        setEditor({ lines: lines2, row: row2, col: col2 - 1 });
+      } else if (row2 > 0) {
+        const newRow = row2 - 1;
+        setEditor({ lines: lines2, row: newRow, col: lines2[newRow].length });
+      }
       return;
     }
     if (key.rightArrow) {
-      setCursor((c) => Math.min(value.length, c + 1));
+      if (col2 < lines2[row2].length) {
+        setEditor({ lines: lines2, row: row2, col: col2 + 1 });
+      } else if (row2 < lines2.length - 1) {
+        setEditor({ lines: lines2, row: row2 + 1, col: 0 });
+      }
       return;
     }
     if (key.ctrl && input === "a" || key.home) {
-      setCursor(0);
+      setEditor({ lines: lines2, row: row2, col: 0 });
       return;
     }
     if (key.ctrl && input === "e" || key.end) {
-      setCursor(value.length);
+      setEditor({ lines: lines2, row: row2, col: lines2[row2].length });
       return;
     }
     if (key.ctrl && input === "k") {
-      setValue((v) => v.slice(0, cursor));
+      const newLines = lines2.map((l, i) => i === row2 ? l.slice(0, col2) : l);
+      setEditor({ lines: newLines, row: row2, col: col2 });
       return;
     }
     if (key.ctrl && input === "u") {
-      setValue((v) => v.slice(cursor));
-      setCursor(0);
+      const newLines = lines2.map((l, i) => i === row2 ? l.slice(col2) : l);
+      setEditor({ lines: newLines, row: row2, col: 0 });
       return;
     }
     if (key.backspace) {
-      if (cursor === 0) return;
-      setValue((v) => v.slice(0, cursor - 1) + v.slice(cursor));
-      setCursor((c) => c - 1);
+      if (col2 > 0) {
+        const cur = lines2[row2];
+        const newLines = lines2.map((l, i) => i === row2 ? cur.slice(0, col2 - 1) + cur.slice(col2) : l);
+        setEditor({ lines: newLines, row: row2, col: col2 - 1 });
+      } else if (row2 > 0) {
+        const prevLen = lines2[row2 - 1].length;
+        const merged = lines2[row2 - 1] + lines2[row2];
+        const newLines = [...lines2.slice(0, row2 - 1), merged, ...lines2.slice(row2 + 1)];
+        setEditor({ lines: newLines, row: row2 - 1, col: prevLen });
+      }
       return;
     }
     if (key.delete) {
-      setValue((v) => v.slice(0, cursor) + v.slice(cursor + 1));
+      const cur = lines2[row2];
+      if (col2 < cur.length) {
+        const newLines = lines2.map((l, i) => i === row2 ? cur.slice(0, col2) + cur.slice(col2 + 1) : l);
+        setEditor({ lines: newLines, row: row2, col: col2 });
+      } else if (row2 < lines2.length - 1) {
+        const merged = cur + lines2[row2 + 1];
+        const newLines = [...lines2.slice(0, row2), merged, ...lines2.slice(row2 + 2)];
+        setEditor({ lines: newLines, row: row2, col: col2 });
+      }
       return;
     }
     if (input && !key.ctrl && !key.meta) {
-      setValue((v) => v.slice(0, cursor) + input + v.slice(cursor));
-      setCursor((c) => c + input.length);
+      const cur = lines2[row2];
+      const newLines = lines2.map((l, i) => i === row2 ? cur.slice(0, col2) + input + cur.slice(col2) : l);
+      setEditor({ lines: newLines, row: row2, col: col2 + input.length });
     }
   }, { isActive: isRawModeSupported });
-  const before = value.slice(0, cursor);
-  const at = value[cursor] ?? " ";
-  const after = value.slice(cursor + 1);
-  return /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, paddingTop: 0, children: /* @__PURE__ */ jsxs5(Box6, { children: [
-    /* @__PURE__ */ jsxs5(Text6, { bold: true, color: "cyan", children: [
-      label,
-      " "
+  const { lines, row, col } = editor;
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, paddingTop: 0, children: [
+    /* @__PURE__ */ jsxs6(Box6, { children: [
+      /* @__PURE__ */ jsxs6(Text6, { bold: true, color: "cyan", children: [
+        label,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "\u21B5 confirm  esc cancel" })
     ] }),
-    /* @__PURE__ */ jsx6(Text6, { children: before }),
-    /* @__PURE__ */ jsx6(Text6, { inverse: true, children: at }),
-    /* @__PURE__ */ jsx6(Text6, { children: after }),
-    /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "   \u21B5 confirm  esc cancel" })
-  ] }) });
+    lines.map((line, r) => {
+      const isActive = r === row;
+      if (!isActive) {
+        return /* @__PURE__ */ jsxs6(Box6, { children: [
+          /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: " " }),
+          /* @__PURE__ */ jsx6(Text6, { children: line || " " })
+        ] }, r);
+      }
+      const before = line.slice(0, col);
+      const cursor = line[col] ?? " ";
+      const after = line.slice(col + 1);
+      return /* @__PURE__ */ jsxs6(Box6, { children: [
+        /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: " " }),
+        /* @__PURE__ */ jsxs6(Text6, { children: [
+          before,
+          /* @__PURE__ */ jsx6(Text6, { inverse: true, children: cursor }),
+          after
+        ] })
+      ] }, r);
+    })
+  ] });
 }
 
 // src/tui/App.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function App({ files }) {
   const { exit } = useApp();
   const { isRawModeSupported } = useStdin6();
-  const [fileIndex, setFileIndex] = useState3(0);
-  const [keyIndex, setKeyIndex] = useState3(0);
-  const [focus, setFocus] = useState3("files");
-  const [revealed, setRevealed] = useState3(/* @__PURE__ */ new Map());
-  const [mode, setMode] = useState3({ type: "normal" });
-  const [statusMsg, setStatusMsg] = useState3();
-  const [keys, setKeys] = useState3(() => loadKeys(files[0]));
+  const [fileIndex, setFileIndex] = useState4(0);
+  const [keyIndex, setKeyIndex] = useState4(0);
+  const [focus, setFocus] = useState4("files");
+  const [revealed, setRevealed] = useState4(/* @__PURE__ */ new Map());
+  const [mode, setMode] = useState4({ type: "normal" });
+  const [statusMsg, setStatusMsg] = useState4();
+  const [keys, setKeys] = useState4(() => loadKeys(files[0]));
   const selectedFile = files[fileIndex];
   function loadKeys(file) {
     try {
@@ -774,7 +1066,6 @@ function App({ files }) {
     setTimeout(() => setStatusMsg(void 0), ms);
   }
   useInput6((input, key) => {
-    if (mode.type !== "normal") return;
     if (input === "q" || key.escape) {
       exit();
       return;
@@ -816,11 +1107,12 @@ function App({ files }) {
         setRevealed(/* @__PURE__ */ new Map());
         return;
       }
+      const decrypted = keys.some((e) => e.encrypted) ? decryptAllValues(selectedFile.path) : {};
       const next = /* @__PURE__ */ new Map();
       for (const entry of keys) {
         if (entry.encrypted) {
-          const plain = decryptValue(entry.value, selectedFile.path);
-          if (plain === null) {
+          const plain = decrypted[entry.key];
+          if (plain === void 0 || isEncryptedValue(plain)) {
             flash("\u{1F512} Private key not found \u2014 cannot reveal all");
             return;
           }
@@ -890,6 +1182,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(
           InlineForm,
           {
@@ -930,6 +1223,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(
           InlineForm,
           {
@@ -963,6 +1257,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(
           InlineForm,
           {
@@ -1008,6 +1303,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(ConfirmAddEncrypt, { keyName, onEncrypt: () => commit(true), onPlain: () => commit(false), onCancel: () => setMode({ type: "normal" }) })
       }
     );
@@ -1027,6 +1323,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(
           ConfirmDelete,
           {
@@ -1059,6 +1356,7 @@ function App({ files }) {
         onSelectKey: setKeyIndex,
         statusMsg,
         focus2: focus,
+        interactive: false,
         extra: /* @__PURE__ */ jsx7(
           ConfirmEncrypt,
           {
@@ -1111,7 +1409,8 @@ function App({ files }) {
       onSelectFile: selectFile,
       onSelectKey: setKeyIndex,
       statusMsg,
-      focus2: focus
+      focus2: focus,
+      interactive: true
     }
   );
 }
@@ -1121,6 +1420,7 @@ function Layout({
   keys,
   keyIndex,
   focus,
+  interactive,
   revealed,
   onSelectFile,
   onSelectKey,
@@ -1129,10 +1429,13 @@ function Layout({
 }) {
   const selectedFile = files[fileIndex];
   const encCount = files.filter((f) => f.encrypted).length;
-  return /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", height: "100%", children: [
-    /* @__PURE__ */ jsxs6(Box7, { paddingX: 1, children: [
+  const termRows = useTerminalRows();
+  const termCols = useTerminalCols();
+  const listRows = Math.max(3, termRows - (extra ? 3 : 5));
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", height: termRows, children: [
+    /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
       /* @__PURE__ */ jsx7(Text7, { bold: true, color: "cyan", children: "dotenvx-ui" }),
-      /* @__PURE__ */ jsxs6(Text7, { dimColor: true, children: [
+      /* @__PURE__ */ jsxs7(Text7, { dimColor: true, children: [
         "  ",
         selectedFile.relativePath,
         "  \xB7  ",
@@ -1142,8 +1445,8 @@ function Layout({
         " enc"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6(Box7, { flexGrow: 1, children: [
-      /* @__PURE__ */ jsx7(FileList, { files, selectedIndex: fileIndex, focused: focus === "files", onSelect: onSelectFile }),
+    /* @__PURE__ */ jsxs7(Box7, { height: listRows, children: [
+      /* @__PURE__ */ jsx7(FileList, { files, selectedIndex: fileIndex, focused: focus === "files", interactive, onSelect: onSelectFile }),
       /* @__PURE__ */ jsx7(
         KeyTable,
         {
@@ -1151,23 +1454,58 @@ function Layout({
           keys,
           selectedIndex: keyIndex,
           focused: focus === "keys",
+          interactive,
           revealed,
-          onSelect: onSelectKey
+          onSelect: onSelectKey,
+          maxRows: listRows
         }
       )
     ] }),
     extra,
+    !extra && /* @__PURE__ */ jsx7(ValuePreview, { keys, keyIndex, focus, revealed, width: termCols }),
     /* @__PURE__ */ jsx7(StatusBar, { focus, message: statusMsg })
   ] });
 }
+function ValuePreview({ keys, keyIndex, focus, revealed, width }) {
+  if (focus !== "keys") return null;
+  const k = keys[keyIndex];
+  if (!k) return null;
+  let value;
+  if (k.encrypted) {
+    value = revealed.has(k.key) ? revealed.get(k.key) : "\u2022\u2022\u2022\u2022  (press r to reveal)";
+  } else {
+    value = revealed.has(k.key) ? revealed.get(k.key) : k.value;
+  }
+  const flat = value.replace(/\n/g, "\u21B5 ");
+  return /* @__PURE__ */ jsxs7(
+    Box7,
+    {
+      borderStyle: "single",
+      borderTop: true,
+      borderBottom: false,
+      borderLeft: false,
+      borderRight: false,
+      paddingX: 1,
+      width,
+      children: [
+        /* @__PURE__ */ jsxs7(Text7, { bold: true, color: "cyan", children: [
+          k.key,
+          "  "
+        ] }),
+        /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "\xB7  " }),
+        /* @__PURE__ */ jsx7(Text7, { truncate: true, children: flat })
+      ]
+    }
+  );
+}
 function ConfirmDelete({ keyName, onConfirm, onCancel }) {
   const { isRawModeSupported } = useStdin6();
   useInput6((input) => {
     if (input === "y" || input === "Y") onConfirm();
     else onCancel();
   }, { isActive: isRawModeSupported });
-  return /* @__PURE__ */ jsxs6(Box7, { paddingX: 1, children: [
-    /* @__PURE__ */ jsxs6(Text7, { color: "red", children: [
+  return /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
+    /* @__PURE__ */ jsxs7(Text7, { color: "red", children: [
       "Delete ",
       /* @__PURE__ */ jsx7(Text7, { bold: true, children: keyName }),
       "? "
@@ -1183,8 +1521,8 @@ function ConfirmEncrypt({ decrypt, fileName, onConfirm, onCancel }) {
   }, { isActive: isRawModeSupported });
   const action = decrypt ? "Decrypt" : "Encrypt";
   const color = decrypt ? "yellow" : "green";
-  return /* @__PURE__ */ jsxs6(Box7, { paddingX: 1, children: [
-    /* @__PURE__ */ jsxs6(Text7, { color, children: [
+  return /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
+    /* @__PURE__ */ jsxs7(Text7, { color, children: [
       action,
       " ",
       /* @__PURE__ */ jsx7(Text7, { bold: true, children: fileName }),
@@ -1209,8 +1547,8 @@ function ConfirmAddEncrypt({ keyName, onEncrypt, onPlain, onCancel }) {
       return;
     }
   }, { isActive: isRawModeSupported });
-  return /* @__PURE__ */ jsxs6(Box7, { paddingX: 1, children: [
-    /* @__PURE__ */ jsxs6(Text7, { children: [
+  return /* @__PURE__ */ jsxs7(Box7, { paddingX: 1, children: [
+    /* @__PURE__ */ jsxs7(Text7, { children: [
       "Encrypt ",
       /* @__PURE__ */ jsx7(Text7, { bold: true, children: keyName }),
       "? "
@@ -1222,7 +1560,7 @@ function ConfirmAddEncrypt({ keyName, onEncrypt, onPlain, onCancel }) {
 // src/tui/ErrorBoundary.tsx
 import React4 from "react";
 import { Box as Box8, Text as Text8 } from "ink";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ErrorBoundary = class extends React4.Component {
   state = { error: null };
   static getDerivedStateFromError(error) {
@@ -1230,7 +1568,7 @@ var ErrorBoundary = class extends React4.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
+      return /* @__PURE__ */ jsxs8(Box8, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [
         /* @__PURE__ */ jsx8(Text8, { bold: true, color: "red", children: "dotenvx-ui crashed" }),
         /* @__PURE__ */ jsx8(Text8, { children: this.state.error.message }),
         /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Please report this at https://github.com/alxbrla/dotenvx-ui/issues" }) })
@@ -1287,7 +1625,7 @@ function runTUI() {
     console.error("No .env files found in this directory.");
     process.exit(1);
   }
-  render(/* @__PURE__ */ jsx9(ErrorBoundary, { children: /* @__PURE__ */ jsx9(App, { files }) }));
+  render(/* @__PURE__ */ jsx9(ErrorBoundary, { children: /* @__PURE__ */ jsx9(App, { files }) }), { alternateScreen: true });
 }
 function runWebUI() {
   console.log("Web UI \u2014 coming soon");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dotenvx-ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Terminal and web UI for managing dotenvx environment files",
   "author": "Alexandru Burla <alexandru.burla@gmail.com>",
   "license": "MIT",
@@ -18,6 +18,13 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "pnpm build && tsc --noEmit && node --import tsx/esm --test 'src/test/**/*.test.ts'",
+    "prepublishOnly": "pnpm build"
+  },
   "keywords": [
     "dotenvx",
     "env",
@@ -25,6 +32,7 @@
     "cli",
     "dotenv"
   ],
+  "packageManager": "pnpm@10.30.0",
   "engines": {
     "node": ">=22"
   },
@@ -35,6 +43,11 @@
     "ink": "^7.0.5",
     "react": "^19.2.7"
   },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  },
   "devDependencies": {
     "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
@@ -42,11 +55,5 @@
     "tsup": "^8.5.1",
     "tsx": "^4.22.4",
     "typescript": "^6.0.3"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "pnpm build && tsc --noEmit && node --import tsx/esm --test 'src/test/**/*.test.ts'"
   }
-}
+}