fix: up highlight made legible for transparent bg, bring back mouse nav

src/utils/app-persistence.ts

@@ -32,6 +32,7 @@ const defaultSettings: AppSettings = {
 	fontSize: 14,
 	playbackSpeed: 1,
 	downloadPath: "",
+	transparentBackground: false,
 	visualizer: defaultVisualizerSettings,
 };
 

src/utils/keybinds-persistence.ts

@@ -53,9 +53,10 @@ const DEFAULT_KEYBINDS: KeybindsResolved = {
 	"tab-goto-4": ["4"],
 	"tab-goto-5": ["5"],
 	"tab-goto-6": ["6"],
-	// command / help / quit
-	command: [":"],
-	quit: ["q", "ctrl-c"],
+	// command palette / help / quit
+	// q opens the palette (type q + Enter to quit there); Q is the quick quit.
+	command: [":", "q"],
+	quit: ["Q", "ctrl-c"],
 	help: ["~", "f1"],
 	// list ops
 	search: ["s"],

src/utils/navigation.ts

@@ -57,13 +57,13 @@ export function rootFrameFor(
 // terminal size — more robust than fixed percentages and exactly mirrors
 // yazi's `mgr.ratio` config. Set a slot's ratio to 0 to hide it (2-pane tabs).
 //
-// NOTE (task 01 leave-behind): the nav-model task intentionally does NOT
-// touch these values. Task 02 re-tunes them to the remake target ratios
-// (parent : current : preview = 1 : 3 : 3 i.e. 1/7 : 3/7 : 3/7). Do it there.
+// Current ratios: parent : current : preview = 1 : 2 : 2, i.e. 1/5 : 2/5 : 2/5
+// (20% / 40% / 40% of the row width). 2-pane tabs drop the preview slot and
+// give `current` the combined 4/5.
 export const PANE_RATIO = {
 	parent: 1,
-	current: 3,
-	preview: 3,
+	current: 2,
+	preview: 2,
 } as const;
 
 // Number of *focusable* content panes per tab. The three visible columns

src/utils/system-theme.ts

@@ -13,19 +13,40 @@ export function clearPaletteCache() {
   cached = null;
 }
 
+/** Relative luminance of a hex color (0 = black, 1 = white). */
+function luminance(hex: string): number {
+  const c = RGBA.fromHex(hex);
+  return 0.299 * c.r + 0.587 * c.g + 0.114 * c.b;
+}
+
+/**
+ * Infer the terminal's dark/light mode from its default background color
+ * (the OSC 11 query response). Returns null when no background is available.
+ */
+export function detectModeFromBackground(
+  background: string | null | undefined,
+): "dark" | "light" | null {
+  if (!background) return null;
+  return luminance(background) < 0.5 ? "dark" : "light";
+}
+
 export function generateSystemTheme(
   colors: TerminalColors,
   mode: "dark" | "light",
 ): ThemeJson {
   cached = colors;
+  const isDark = mode === "dark";
   const bg = RGBA.fromHex(
-    colors.defaultBackground ?? colors.palette[0] ?? "#000000",
+    colors.defaultBackground ??
+      colors.palette[0] ??
+      (isDark ? "#000000" : "#ffffff"),
   );
   const fg = RGBA.fromHex(
-    colors.defaultForeground ?? colors.palette[7] ?? "#ffffff",
+    colors.defaultForeground ??
+      colors.palette[7] ??
+      (isDark ? "#ffffff" : "#000000"),
   );
   const transparent = RGBA.fromInts(0, 0, 0, 0);
-  const isDark = mode === "dark";
 
   const col = (i: number) => {
     const value = colors.palette[i];
@@ -87,6 +108,7 @@ export function generateSystemTheme(
       textSelectedTertiary: selectedTertiary,
       selectedListItemText: bg,
       background: transparent,
+      transparent: true,
       backgroundPanel: grays[2],
       backgroundElement: grays[3],
       backgroundMenu: grays[3],

src/utils/theme-resolver.ts

@@ -18,7 +18,7 @@ export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {
       if (value.startsWith("#")) return RGBA.fromHex(value)
       if (defs[value] != null) return resolveColor(defs[value])
       const ref = theme.theme[value]
-      if (ref != null) return resolveColor(ref)
+      if (ref != null && typeof ref !== "boolean") return resolveColor(ref)
       throw new Error(`Color reference "${value}" not found in defs or theme`)
     }
     return resolveColor(value[mode])
@@ -26,8 +26,15 @@ export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {
 
   const resolved = Object.fromEntries(
     Object.entries(theme.theme)
-      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu" && key !== "thinkingOpacity")
-      .map(([key, value]) => [key, resolveColor(value)])
+      .filter(
+        (entry): entry is [string, ColorValue] =>
+          entry[0] !== "selectedListItemText" &&
+          entry[0] !== "backgroundMenu" &&
+          entry[0] !== "thinkingOpacity" &&
+          entry[0] !== "transparent" &&
+          typeof entry[1] !== "boolean",
+      )
+      .map(([key, value]) => [key, resolveColor(value)]),
   ) as Record<string, RGBA>
 
   const hasSelected = theme.theme.selectedListItemText !== undefined
@@ -40,6 +47,7 @@ export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {
     : resolved.backgroundElement
 
   const thinkingOpacity = theme.theme.thinkingOpacity ?? 0.6
+  const transparent = theme.theme.transparent === true
 
   const background = resolved.background
   const backgroundPanel = resolved.backgroundPanel ?? background
@@ -58,5 +66,6 @@ export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {
     },
     _hasSelectedListItemText: hasSelected,
     thinkingOpacity,
+    transparent,
   }
 }