envprism 0.1.0-dev.10-1179a3d → 0.1.0-dev.12-c99a64a

package/dist/chunks/{app-CgJxxbhr.mjs → app-DgjyG_HE.mjs}

@@ -1,35 +1,8 @@
-import { RGBA, BoxRenderable, ScrollBoxRenderable, TextRenderable, createCliRenderer } from "@opentui/core";
-import { m as maskValue, r as rebuildKvLine, s as serializeEnv, i as isSecretKey } from "./mask-Bv9W6Ei8.mjs";
+import { BoxRenderable, ScrollBoxRenderable, TextRenderable, RGBA, createCliRenderer } from "@opentui/core";
+import { j as matchesFilter, b as buildMatrix, f as findKvEntry, t as truncate, h as formatValue, n as resolveThemeHex, a as DEFAULT_THEME_HEX, D as DEFAULT_CONFIG, k as resolveHeuristics } from "./matrix-C1pErf9Z.mjs";
+import { r as rebuildKvLine, s as serializeEnv } from "./serialize-D_ZNIgRa.mjs";
 import { basename, join, dirname } from "pathe";
-import { b as buildMatrix } from "./matrix-nBq_GY2v.mjs";
 import { writeFile } from "node:fs/promises";
-const PLACEHOLDER_RE = /^(todo|fixme|changeme|placeholder|tbd|x{3,}|your[_-]?(secret|key|token|password|api[_-]?key)(_here)?|replace[_-]?me)$/i;
-function isPlaceholderValue(value) {
-  const v = value.trim();
-  if (v.length === 0) return false;
-  return PLACEHOLDER_RE.test(v);
-}
-function formatValue(value, secret) {
-  if (value === void 0) return "";
-  if (secret) return maskValue(value);
-  return value;
-}
-function matchesFilter(key, filter) {
-  if (!filter) return true;
-  return key.toLowerCase().includes(filter.toLowerCase());
-}
-function truncate(text, width) {
-  if (width <= 0) return "";
-  if (text.length <= width) return text;
-  if (width <= 1) return "…";
-  return `${text.slice(0, width - 1)}…`;
-}
-function findKvEntry(file, key) {
-  for (const e of file.entries) {
-    if (e.kind === "kv" && e.key === key) return e;
-  }
-  return void 0;
-}
 const SECTION_COLLAPSE_KEY = "__other__";
 function prefixSection(key) {
   const idx = key.indexOf("_");
@@ -135,8 +108,6 @@ function appendKv(file, key, value) {
   file.trailingNewline = true;
   return entry;
 }
-const UNDO_LIMIT = 50;
-const KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
 function cellKey(key, file) {
   return `${key}|${file.path}`;
 }
@@ -145,7 +116,7 @@ function markModified(ctx, key, file) {
 }
 function pushUndo(ctx, entry) {
   ctx.state.undo.push(entry);
-  if (ctx.state.undo.length > UNDO_LIMIT) ctx.state.undo.shift();
+  if (ctx.state.undo.length > ctx.config.tui.undoLimit) ctx.state.undo.shift();
 }
 function focusedKey(ctx) {
   const item = ctx.state.visibleItems[ctx.state.rowIdx];
@@ -344,6 +315,7 @@ async function saveDirty(ctx) {
   }
   ctx.refresh();
 }
+const KEY_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
 function openPrompt(ctx, prompt, value = "") {
   const { state } = ctx;
   state.prompt = prompt;
@@ -723,34 +695,7 @@ function createOnKey(ctx, cleanup) {
     handleBrowseKey(ctx, key, cleanup);
   };
 }
-const COLORS = {
-  fg: RGBA.fromHex("#cccccc"),
-  fgDim: RGBA.fromHex("#666666"),
-  fgHeader: RGBA.fromHex("#ffffff"),
-  // accent — base file + section names (blue/purple, single accent for
-  // navigational anchors).
-  fgBase: RGBA.fromHex("#82aaff"),
-  fgSection: RGBA.fromHex("#82aaff"),
-  // drift/extra/placeholder — same yellow. They describe disagreement with
-  // the base file, all one semantic.
-  differs: RGBA.fromHex("#ffd866"),
-  extra: RGBA.fromHex("#ffd866"),
-  placeholder: RGBA.fromHex("#ffd866"),
-  // user-made changes (modified cells, dirty files, unsaved counter) — green.
-  // Different colour from drift on purpose: "I just touched this" is a
-  // different signal from "this disagrees with the base".
-  modified: RGBA.fromHex("#7fce6a"),
-  fgDirty: RGBA.fromHex("#7fce6a"),
-  // problem — value-is-missing red. Reserved exclusively for missing.
-  missing: RGBA.fromHex("#ff6b6b"),
-  focusBg: RGBA.fromHex("#3a3f4b")
-};
-const KEY_COL_WIDTH = 22;
-const VALUE_COL_MIN = 18;
-const SIDEBAR_WIDTH = 30;
-const ROW_GAP = 0;
-const CELL_PAD_X = 1;
-function buildLayout(renderer) {
+function buildLayout(renderer, theme, layout) {
   const root = new BoxRenderable(renderer, {
     id: "root",
     flexDirection: "column",
@@ -770,7 +715,7 @@ function buildLayout(renderer) {
     borderStyle: "rounded",
     title: "",
     flexDirection: "column",
-    width: SIDEBAR_WIDTH,
+    width: layout.SIDEBAR_WIDTH,
     flexShrink: 0,
     paddingX: 1
   });
@@ -805,7 +750,7 @@ function buildLayout(renderer) {
     // Reserve a column on the right so the vertical scrollbar doesn't sit on
     // top of cell content, and a row at the bottom for the horizontal one.
     viewportOptions: { paddingRight: 1, paddingBottom: 1 },
-    contentOptions: { flexDirection: "column", rowGap: ROW_GAP }
+    contentOptions: { flexDirection: "column", rowGap: layout.ROW_GAP }
   });
   matrixBox.add(scrollBox);
   const footer = new BoxRenderable(renderer, {
@@ -832,7 +777,7 @@ function buildLayout(renderer) {
   const status = new TextRenderable(renderer, {
     id: "status",
     content: "",
-    fg: COLORS.fgDim,
+    fg: theme.fgDim,
     wrapMode: "none",
     height: 1
   });
@@ -857,14 +802,14 @@ function buildLayout(renderer) {
   const filterField = new TextRenderable(renderer, {
     id: "filter-field",
     content: "",
-    fg: COLORS.fg,
+    fg: theme.fg,
     height: 1,
     wrapMode: "none"
   });
   const filterStatus = new TextRenderable(renderer, {
     id: "filter-status",
     content: "",
-    fg: COLORS.fgDim,
+    fg: theme.fgDim,
     height: 1,
     marginTop: 1,
     wrapMode: "none"
@@ -872,7 +817,7 @@ function buildLayout(renderer) {
   const filterHint = new TextRenderable(renderer, {
     id: "filter-hint",
     content: "Enter · keep filter    Esc · clear & close",
-    fg: COLORS.fg,
+    fg: theme.fg,
     height: 1,
     marginTop: 1,
     wrapMode: "none"
@@ -906,7 +851,7 @@ function buildLayout(renderer) {
   const promptHint = new TextRenderable(renderer, {
     id: "prompt-hint",
     content: "",
-    fg: COLORS.fg,
+    fg: theme.fg,
     height: 1,
     marginTop: 2,
     wrapMode: "none"
@@ -984,14 +929,14 @@ function removeAllChildren(node) {
   const ids = node.getChildren().map((c) => c.id);
   for (const id of ids) node.remove(id);
 }
-function bindings(specs) {
+function bindings(specs, theme) {
   const out = [];
   specs.forEach((spec, i) => {
-    if (i > 0) out.push({ text: " · ", fg: COLORS.fgDim });
-    out.push({ text: "[", fg: COLORS.fgDim });
-    out.push({ text: spec.key, fg: COLORS.fg });
-    out.push({ text: "] ", fg: COLORS.fgDim });
-    out.push({ text: spec.label, fg: COLORS.fg });
+    if (i > 0) out.push({ text: " · ", fg: theme.fgDim });
+    out.push({ text: "[", fg: theme.fgDim });
+    out.push({ text: spec.key, fg: theme.fg });
+    out.push({ text: "] ", fg: theme.fgDim });
+    out.push({ text: spec.label, fg: theme.fg });
   });
   return out;
 }
@@ -1013,67 +958,77 @@ function refreshFooter(ctx) {
   const {
     el: { hintA, hintB, status },
     renderer,
-    state
+    state,
+    theme
   } = ctx;
   const dirty = state.dirty.size;
   const dirtyTail = dirty > 0 ? [
-    { text: "   ", fg: COLORS.fgDim },
-    { text: "●", fg: COLORS.modified },
-    { text: ` ${dirty} unsaved`, fg: COLORS.fg }
+    { text: "   ", fg: theme.fgDim },
+    { text: "●", fg: theme.modified },
+    { text: ` ${dirty} unsaved`, fg: theme.fg }
   ] : [];
   if (state.mode === "filter") {
     renderHintBox(hintA, renderer, [
-      ...bindings([
-        { key: "Enter", label: "keep filter" },
-        { key: "Esc", label: "clear" }
-      ]),
+      ...bindings(
+        [
+          { key: "Enter", label: "keep filter" },
+          { key: "Esc", label: "clear" }
+        ],
+        theme
+      ),
       ...dirtyTail
     ]);
-    renderHintBox(hintB, renderer, [{ text: " Filter:", fg: COLORS.fgDim }]);
+    renderHintBox(hintB, renderer, [{ text: " Filter:", fg: theme.fgDim }]);
   } else if (state.mode === "prompt") {
     renderHintBox(hintA, renderer, []);
     renderHintBox(hintB, renderer, []);
   } else if (state.pane === "sidebar") {
     renderHintBox(hintA, renderer, [
-      ...bindings([
-        { key: "↑↓", label: "move" },
-        { key: "Space", label: "toggle" },
-        { key: "b", label: "set base" },
-        { key: "Tab/→", label: "matrix" },
-        { key: "^S", label: "save" },
-        { key: "?", label: "help" },
-        { key: "q", label: "quit" }
-      ]),
+      ...bindings(
+        [
+          { key: "↑↓", label: "move" },
+          { key: "Space", label: "toggle" },
+          { key: "b", label: "set base" },
+          { key: "Tab/→", label: "matrix" },
+          { key: "^S", label: "save" },
+          { key: "?", label: "help" },
+          { key: "q", label: "quit" }
+        ],
+        theme
+      ),
       ...dirtyTail
     ]);
-    renderHintBox(hintB, renderer, [{ text: "Files pane", fg: COLORS.fgDim }]);
+    renderHintBox(hintB, renderer, [{ text: "Files pane", fg: theme.fgDim }]);
   } else {
     renderHintBox(hintA, renderer, [
-      ...bindings([
-        { key: "↑↓←→", label: "move" },
-        { key: "Tab", label: "files" },
-        { key: "e", label: "edit" },
-        { key: "a", label: "add var" },
-        { key: "d", label: "del var" },
-        { key: "n", label: "new file" },
-        { key: "=", label: "sync to all" },
-        { key: "c", label: "collapse" },
-        { key: "^T", label: "secrets" },
-        { key: "^Z", label: "undo" },
-        { key: "^S", label: "save" },
-        { key: "/", label: "filter" },
-        { key: "?/ß", label: "help" },
-        { key: "q", label: "quit" }
-      ]),
+      ...bindings(
+        [
+          { key: "↑↓←→", label: "move" },
+          { key: "Tab", label: "files" },
+          { key: "e", label: "edit" },
+          { key: "a", label: "add var" },
+          { key: "d", label: "del var" },
+          { key: "n", label: "new file" },
+          { key: "=", label: "sync to all" },
+          { key: "c", label: "collapse" },
+          { key: "^T", label: "secrets" },
+          { key: "^Z", label: "undo" },
+          { key: "^S", label: "save" },
+          { key: "/", label: "filter" },
+          { key: "?/ß", label: "help" },
+          { key: "q", label: "quit" }
+        ],
+        theme
+      ),
       ...dirtyTail
     ]);
     renderHintBox(hintB, renderer, [
-      { text: "view: ", fg: COLORS.fgDim },
-      { text: state.driftOnly ? "drift" : "all", fg: COLORS.fg },
-      { text: "  ·  group: ", fg: COLORS.fgDim },
-      { text: state.grouping, fg: COLORS.fg },
-      { text: "  ·  secrets: ", fg: COLORS.fgDim },
-      { text: state.showSecrets ? "shown" : "masked", fg: COLORS.fg }
+      { text: "view: ", fg: theme.fgDim },
+      { text: state.driftOnly ? "drift" : "all", fg: theme.fg },
+      { text: "  ·  group: ", fg: theme.fgDim },
+      { text: state.grouping, fg: theme.fg },
+      { text: "  ·  secrets: ", fg: theme.fgDim },
+      { text: state.showSecrets ? "shown" : "masked", fg: theme.fg }
     ]);
   }
   status.content = state.message ?? "";
@@ -1177,40 +1132,40 @@ function buildHelpLines() {
     }
   ];
 }
-function buildValueCell(cell, secret, width, focused, modified) {
-  const bg = focused ? COLORS.focusBg : void 0;
-  const trailing = modified ? { char: "●", fg: COLORS.modified } : void 0;
+function buildValueCell(cell, secret, width, focused, modified, theme, isPlaceholder) {
+  const bg = focused ? theme.focusBg : void 0;
+  const trailing = modified ? { char: "●", fg: theme.modified } : void 0;
   if (cell.state === "missing") {
     return {
       text: "missing",
-      fg: COLORS.fgDim,
+      fg: theme.fgDim,
       width,
       bg,
-      icon: { char: "✗", fg: COLORS.missing },
+      icon: { char: "✗", fg: theme.missing },
       trailing
     };
   }
   const value = cell.value ?? "";
-  if (value !== "" && isPlaceholderValue(value)) {
+  if (value !== "" && isPlaceholder(value)) {
     return {
       text: value,
-      fg: COLORS.fg,
+      fg: theme.fg,
       width,
       bg,
-      icon: { char: "⚠", fg: COLORS.placeholder },
+      icon: { char: "⚠", fg: theme.placeholder },
       trailing
     };
   }
   const isEmpty = value === "" && !secret;
   const displayText = isEmpty ? "(empty)" : formatValue(value, secret);
-  const displayFg = isEmpty ? COLORS.fgDim : COLORS.fg;
+  const displayFg = isEmpty ? theme.fgDim : theme.fg;
   if (cell.state === "differs") {
     return {
       text: displayText,
       fg: displayFg,
       width,
       bg,
-      icon: { char: "≠", fg: COLORS.differs },
+      icon: { char: "≠", fg: theme.differs },
       trailing
     };
   }
@@ -1220,13 +1175,13 @@ function buildValueCell(cell, secret, width, focused, modified) {
       fg: displayFg,
       width,
       bg,
-      icon: { char: "★", fg: COLORS.extra },
+      icon: { char: "★", fg: theme.extra },
       trailing
     };
   }
   return { text: displayText, fg: displayFg, width, bg, trailing };
 }
-function buildHelpRow(renderer, id, line) {
+function buildHelpRow(renderer, id, line, theme) {
   const row = new BoxRenderable(renderer, {
     id,
     flexDirection: "row",
@@ -1238,7 +1193,7 @@ function buildHelpRow(renderer, id, line) {
       new TextRenderable(renderer, {
         id: `${id}-t`,
         content: line.text,
-        fg: COLORS.fgSection,
+        fg: theme.fgSection,
         wrapMode: "none",
         height: 1
       })
@@ -1248,7 +1203,7 @@ function buildHelpRow(renderer, id, line) {
       new TextRenderable(renderer, {
         id: `${id}-t`,
         content: line.text,
-        fg: COLORS.fg,
+        fg: theme.fg,
         wrapMode: "none",
         height: 1
       })
@@ -1267,7 +1222,7 @@ function buildHelpRow(renderer, id, line) {
       new TextRenderable(renderer, {
         id: `${id}-desc`,
         content: line.description,
-        fg: COLORS.fgDim,
+        fg: theme.fgDim,
         wrapMode: "none",
         height: 1
       })
@@ -1275,31 +1230,31 @@ function buildHelpRow(renderer, id, line) {
   }
   return row;
 }
-function buildSectionDivider(renderer, id, name, width, meta) {
+function buildSectionDivider(renderer, id, name, width, meta, theme) {
   const baseName = name ?? "(other)";
   const indicator = meta.collapsed ? "▸" : "▾";
   const segs = [
-    { text: ` ${indicator} `, fg: COLORS.fgDim },
-    { text: baseName, fg: COLORS.fg },
-    { text: "  ", fg: COLORS.fgDim }
+    { text: ` ${indicator} `, fg: theme.fgDim },
+    { text: baseName, fg: theme.fg },
+    { text: "  ", fg: theme.fgDim }
   ];
   if (meta.missing > 0) {
-    segs.push({ text: "✗ ", fg: COLORS.missing });
-    segs.push({ text: `${meta.missing}`, fg: COLORS.missing });
-    segs.push({ text: " missing  ", fg: COLORS.fg });
+    segs.push({ text: "✗ ", fg: theme.missing });
+    segs.push({ text: `${meta.missing}`, fg: theme.missing });
+    segs.push({ text: " missing  ", fg: theme.fg });
   }
   if (meta.drift > 0) {
-    segs.push({ text: "≠ ", fg: COLORS.differs });
-    segs.push({ text: `${meta.drift}`, fg: COLORS.differs });
-    segs.push({ text: "/", fg: COLORS.fgDim });
-    segs.push({ text: `${meta.total}`, fg: COLORS.differs });
-    segs.push({ text: " drift  ", fg: COLORS.fg });
+    segs.push({ text: "≠ ", fg: theme.differs });
+    segs.push({ text: `${meta.drift}`, fg: theme.differs });
+    segs.push({ text: "/", fg: theme.fgDim });
+    segs.push({ text: `${meta.total}`, fg: theme.differs });
+    segs.push({ text: " drift  ", fg: theme.fg });
   }
   if (meta.missing === 0 && meta.drift === 0) {
-    segs.push({ text: `${meta.total}`, fg: COLORS.fgDim });
-    segs.push({ text: " keys  ", fg: COLORS.fg });
+    segs.push({ text: `${meta.total}`, fg: theme.fgDim });
+    segs.push({ text: " keys  ", fg: theme.fg });
   }
-  segs.push({ text: " ", fg: COLORS.fgDim });
+  segs.push({ text: " ", fg: theme.fgDim });
   const labelLength = segs.reduce((sum, s) => sum + s.text.length, 0);
   const rule = "─";
   const visible = Math.max(0, width - 2);
@@ -1311,13 +1266,13 @@ function buildSectionDivider(renderer, id, name, width, meta) {
     flexShrink: 0,
     height: 1,
     paddingX: 1,
-    ...meta.focused ? { backgroundColor: COLORS.focusBg } : {}
+    ...meta.focused ? { backgroundColor: theme.focusBg } : {}
   });
   box.add(
     new TextRenderable(renderer, {
       id: `${id}-lead`,
       content: rule.repeat(beforeLen),
-      fg: COLORS.fgDim,
+      fg: theme.fgDim,
       height: 1,
       wrapMode: "none"
     })
@@ -1337,14 +1292,14 @@ function buildSectionDivider(renderer, id, name, width, meta) {
     new TextRenderable(renderer, {
       id: `${id}-trail`,
       content: rule.repeat(afterLen),
-      fg: COLORS.fgDim,
+      fg: theme.fgDim,
       height: 1,
       wrapMode: "none"
     })
   );
   return box;
 }
-function buildRow(renderer, idPrefix, cells) {
+function buildRow(renderer, idPrefix, cells, padX) {
   const row = new BoxRenderable(renderer, {
     id: idPrefix,
     flexDirection: "row",
@@ -1358,11 +1313,11 @@ function buildRow(renderer, idPrefix, cells) {
       height: 1,
       flexDirection: "row",
       flexShrink: 0,
-      paddingX: CELL_PAD_X
+      paddingX: padX
     };
     if (cell.bg) cellOpts.backgroundColor = cell.bg;
     const cellBox = new BoxRenderable(renderer, cellOpts);
-    const innerWidth = Math.max(0, cell.width - CELL_PAD_X * 2);
+    const innerWidth = Math.max(0, cell.width - padX * 2);
     const iconLen = cell.icon ? cell.icon.char.length + 1 : 0;
     const trailingLen = cell.trailing ? cell.trailing.char.length + 1 : 0;
     const textWidth = Math.max(0, innerWidth - iconLen - trailingLen);
@@ -1406,7 +1361,8 @@ function refreshHelp(ctx) {
   const {
     el: { helpBox },
     renderer,
-    state
+    state,
+    theme
   } = ctx;
   helpBox.visible = state.helpOpen;
   if (!state.helpOpen) return;
@@ -1426,7 +1382,7 @@ function refreshHelp(ctx) {
     });
     helpBox.add(scroll);
     lines.forEach((line, i) => {
-      scroll.content.add(buildHelpRow(renderer, `help-${i}`, line));
+      scroll.content.add(buildHelpRow(renderer, `help-${i}`, line, theme));
     });
     return;
   }
@@ -1457,10 +1413,10 @@ function refreshHelp(ctx) {
     }
   }
   lines.slice(0, splitIdx).forEach(
-    (line, i) => left.add(buildHelpRow(renderer, `help-l-${i}`, line))
+    (line, i) => left.add(buildHelpRow(renderer, `help-l-${i}`, line, theme))
   );
   lines.slice(splitIdx).forEach(
-    (line, i) => right.add(buildHelpRow(renderer, `help-r-${i}`, line))
+    (line, i) => right.add(buildHelpRow(renderer, `help-r-${i}`, line, theme))
   );
   grid.add(left);
   grid.add(right);
@@ -1477,20 +1433,23 @@ function matrixTitle(matrix, state) {
   return ` Matrix · ${parts.join(" · ")} `;
 }
 function computeValueColWidth(ctx) {
-  const { renderer, matrix } = ctx;
+  const { renderer, matrix, layout } = ctx;
   const available = Math.max(
     0,
-    renderer.terminalWidth - SIDEBAR_WIDTH - 6 - KEY_COL_WIDTH
+    renderer.terminalWidth - layout.SIDEBAR_WIDTH - 6 - layout.KEY_COL_WIDTH
   );
-  const fair = matrix.files.length ? Math.floor(available / matrix.files.length) : VALUE_COL_MIN;
-  return Math.max(VALUE_COL_MIN, fair);
+  const fair = matrix.files.length ? Math.floor(available / matrix.files.length) : layout.VALUE_COL_MIN;
+  return Math.max(layout.VALUE_COL_MIN, fair);
 }
 function refreshMatrix(ctx) {
   const {
     el: { matrixBox, headerHost, scrollBox },
     renderer,
     matrix,
-    state
+    state,
+    theme,
+    layout,
+    heuristics
   } = ctx;
   const sectionOf = ctx.sectionOf;
   const valueColWidth = computeValueColWidth(ctx);
@@ -1498,16 +1457,21 @@ function refreshMatrix(ctx) {
   removeAllChildren(headerHost);
   removeAllChildren(scrollBox.content);
   headerHost.add(
-    buildRow(renderer, "header", [
-      { text: "KEY", fg: COLORS.fgHeader, width: KEY_COL_WIDTH },
-      ...matrix.files.map((f) => ({
-        text: basename(f.path),
-        fg: COLORS.fgHeader,
-        width: valueColWidth
-      }))
-    ])
+    buildRow(
+      renderer,
+      "header",
+      [
+        { text: "KEY", fg: theme.fgHeader, width: layout.KEY_COL_WIDTH },
+        ...matrix.files.map((f) => ({
+          text: basename(f.path),
+          fg: theme.fgHeader,
+          width: valueColWidth
+        }))
+      ],
+      layout.CELL_PAD_X
+    )
   );
-  const totalWidth = KEY_COL_WIDTH + valueColWidth * matrix.files.length;
+  const totalWidth = layout.KEY_COL_WIDTH + valueColWidth * matrix.files.length;
   const sectionStats = sectionMetadata(matrix, sectionOf, state);
   for (let r = 0; r < state.visibleItems.length; r++) {
     const item = state.visibleItems[r];
@@ -1521,18 +1485,25 @@ function refreshMatrix(ctx) {
       };
       const focused = state.mode === "browse" && r === state.rowIdx;
       scrollBox.content.add(
-        buildSectionDivider(renderer, `row-${r}`, sectionName, totalWidth, {
-          ...meta,
-          collapsed: state.collapsed.has(sectionKey),
-          focused
-        })
+        buildSectionDivider(
+          renderer,
+          `row-${r}`,
+          sectionName,
+          totalWidth,
+          {
+            ...meta,
+            collapsed: state.collapsed.has(sectionKey),
+            focused
+          },
+          theme
+        )
       );
       continue;
     }
     const key = item.ref;
-    const secret = isSecretKey(key) && !state.showSecrets;
+    const secret = heuristics.isSecretKey(key) && !state.showSecrets;
     const cells = [
-      { text: key, fg: COLORS.fg, width: KEY_COL_WIDTH }
+      { text: key, fg: theme.fg, width: layout.KEY_COL_WIDTH }
     ];
     for (let c = 0; c < matrix.files.length; c++) {
       const file = matrix.files[c];
@@ -1540,10 +1511,20 @@ function refreshMatrix(ctx) {
       const focused = state.mode === "browse" && r === state.rowIdx && c === state.colIdx;
       const isModified = state.modified.has(`${key}|${file.path}`);
       cells.push(
-        buildValueCell(cell, secret, valueColWidth, focused, isModified)
+        buildValueCell(
+          cell,
+          secret,
+          valueColWidth,
+          focused,
+          isModified,
+          theme,
+          heuristics.isPlaceholderValue
+        )
       );
     }
-    scrollBox.content.add(buildRow(renderer, `row-${r}`, cells));
+    scrollBox.content.add(
+      buildRow(renderer, `row-${r}`, cells, layout.CELL_PAD_X)
+    );
   }
   if (state.mode === "browse" && state.visibleItems.length > 0) {
     const target = `row-${state.rowIdx}`;
@@ -1572,7 +1553,9 @@ function refreshPrompt(ctx) {
     el: { promptBox, promptBody, promptHint },
     renderer,
     matrix,
-    state
+    state,
+    theme,
+    heuristics
   } = ctx;
   const open = state.mode === "prompt" && state.prompt !== null;
   promptBox.visible = open;
@@ -1589,7 +1572,7 @@ function refreshPrompt(ctx) {
     new TextRenderable(renderer, {
       id: "prompt-input-text",
       content: `▸ ${state.promptInput}▏`,
-      fg: COLORS.fg,
+      fg: theme.fg,
       height: 1,
       wrapMode: "none"
     })
@@ -1599,7 +1582,7 @@ function refreshPrompt(ctx) {
       new TextRenderable(renderer, {
         id: "prompt-error",
         content: `! ${state.message}`,
-        fg: COLORS.missing,
+        fg: theme.missing,
         height: 1,
         marginTop: 1,
         wrapMode: "none"
@@ -1607,7 +1590,7 @@ function refreshPrompt(ctx) {
     );
   }
   if (p.kind === "edit" || p.kind === "add-value") {
-    const secret = isSecretKey(p.key) && !state.showSecrets;
+    const secret = heuristics.isSecretKey(p.key) && !state.showSecrets;
     const nameWidth = Math.min(
       26,
       Math.max(...matrix.files.map((f) => basename(f.path).length + 2))
@@ -1616,7 +1599,7 @@ function refreshPrompt(ctx) {
       new TextRenderable(renderer, {
         id: "prompt-table-header",
         content: "Current values",
-        fg: COLORS.fgSection,
+        fg: theme.fgSection,
         wrapMode: "none",
         height: 1,
         marginTop: 1
@@ -1636,7 +1619,7 @@ function refreshPrompt(ctx) {
           content: `${isTarget ? "▸" : " "} ${basename(file.path)}`.padEnd(
             nameWidth
           ),
-          fg: isTarget ? COLORS.fgBase : COLORS.fgDim,
+          fg: isTarget ? theme.fgBase : theme.fgDim,
           height: 1,
           wrapMode: "none"
         })
@@ -1647,7 +1630,7 @@ function refreshPrompt(ctx) {
         new TextRenderable(renderer, {
           id: `prompt-row-${file.path}-value`,
           content: current,
-          fg: !entry ? COLORS.missing : isTarget ? COLORS.fg : COLORS.fgDim,
+          fg: !entry ? theme.missing : isTarget ? theme.fg : theme.fgDim,
           height: 1,
           wrapMode: "none"
         })
@@ -1662,7 +1645,8 @@ function refreshSidebar(ctx) {
     renderer,
     matrix,
     allFiles,
-    state
+    state,
+    theme
   } = ctx;
   const total = allFiles.length;
   const enabled = state.enabled.size;
@@ -1676,13 +1660,13 @@ function refreshSidebar(ctx) {
     const matrixIdx = matrix.files.indexOf(file);
     const isFocusCol = isEnabled && matrixIdx === state.colIdx;
     const isPaneFocus = state.pane === "sidebar" && i === state.sidebarIdx;
-    const nameFg = !isEnabled ? COLORS.fgDim : isBase ? COLORS.fgBase : COLORS.fg;
+    const nameFg = !isEnabled ? theme.fgDim : isBase ? theme.fgBase : theme.fg;
     const row = new BoxRenderable(renderer, {
       id: `file-${file.path}`,
       flexDirection: "row",
       height: 1,
       flexShrink: 0,
-      ...isPaneFocus ? { backgroundColor: COLORS.focusBg } : {}
+      ...isPaneFocus ? { backgroundColor: theme.focusBg } : {}
     });
     const span = (id, text, fg) => new TextRenderable(renderer, {
       id: `${row.id}-${id}`,
@@ -1691,23 +1675,23 @@ function refreshSidebar(ctx) {
       height: 1,
       wrapMode: "none"
     });
-    row.add(span("focus", `${isPaneFocus ? "▶" : " "} `, COLORS.fg));
+    row.add(span("focus", `${isPaneFocus ? "▶" : " "} `, theme.fg));
     row.add(
       span(
         "dirty",
         `${isDirty ? "●" : " "} `,
-        isDirty ? COLORS.fgDirty : COLORS.fgDim
+        isDirty ? theme.fgDirty : theme.fgDim
       )
     );
     row.add(
       span(
         "base",
         `${isBase ? "★" : " "} `,
-        isBase ? COLORS.fgBase : COLORS.fgDim
+        isBase ? theme.fgBase : theme.fgDim
       )
     );
-    row.add(span("col", `${isFocusCol ? "▸" : " "} `, COLORS.fgDim));
-    row.add(span("enabled", `${isEnabled ? "✓" : "☐"} `, COLORS.fgDim));
+    row.add(span("col", `${isFocusCol ? "▸" : " "} `, theme.fgDim));
+    row.add(span("enabled", `${isEnabled ? "✓" : "☐"} `, theme.fgDim));
     row.add(span("name", basename(file.path), nameFg));
     sidebar.add(row);
   }
@@ -1722,12 +1706,34 @@ function refreshAll(ctx) {
   refreshFilter(ctx);
   ctx.el.dimOverlay.visible = state.helpOpen || state.mode === "prompt" || state.mode === "filter";
 }
-async function runMatrixTui(initialMatrix) {
+function resolveTheme(theme = {}, warn) {
+  const hex = resolveThemeHex(theme, warn);
+  const out = {};
+  for (const key of Object.keys(DEFAULT_THEME_HEX)) {
+    out[key] = RGBA.fromHex(hex[key]);
+  }
+  return out;
+}
+resolveTheme();
+function resolveLayout(layout) {
+  return {
+    KEY_COL_WIDTH: layout.keyColWidth,
+    VALUE_COL_MIN: layout.valueColMin,
+    SIDEBAR_WIDTH: layout.sidebarWidth,
+    ROW_GAP: layout.rowGap,
+    CELL_PAD_X: layout.cellPadX
+  };
+}
+async function runMatrixTui(initialMatrix, config = DEFAULT_CONFIG) {
   const renderer = await createCliRenderer({ useMouse: true });
+  const theme = resolveTheme(config.tui.theme);
+  const layout = resolveLayout(config.tui.layout);
+  const heuristics = resolveHeuristics(config);
   const allFiles = initialMatrix.files.slice();
   const hasBanners = initialMatrix.keys.some(
     (k) => initialMatrix.sectionOf(k) !== void 0
   );
+  const grouping = heuristics.grouping === "auto" ? hasBanners ? "banner" : "prefix" : heuristics.grouping;
   const state = {
     mode: "browse",
     filter: "",
@@ -1740,24 +1746,28 @@ async function runMatrixTui(initialMatrix) {
     message: null,
     driftOnly: false,
     confirmQuit: false,
-    grouping: hasBanners ? "banner" : "prefix",
+    grouping,
     helpOpen: false,
     undo: [],
     pane: "matrix",
     sidebarIdx: 0,
     enabled: new Set(allFiles),
-    showSecrets: false,
+    showSecrets: !config.tui.maskSecrets,
     collapsed: /* @__PURE__ */ new Set(),
     modified: /* @__PURE__ */ new Set(),
     promptInput: ""
   };
-  const el = buildLayout(renderer);
+  const el = buildLayout(renderer, theme, layout);
   let refreshScheduled = false;
   const ctx = {
     renderer,
     state,
     allFiles,
     el,
+    config,
+    theme,
+    layout,
+    heuristics,
     matrix: initialMatrix,
     currentBase: initialMatrix.base,
     refresh: () => {
@@ -1787,4 +1797,4 @@ async function runMatrixTui(initialMatrix) {
 export {
   runMatrixTui
 };
-//# sourceMappingURL=app-CgJxxbhr.mjs.map
+//# sourceMappingURL=app-DgjyG_HE.mjs.map