@fresh-editor/fresh-editor 0.2.11 → 0.2.13

package/plugins/theme_editor.ts

@@ -57,6 +57,130 @@ const ALL_COLOR_NAMES = [...NAMED_COLOR_LIST, ...SPECIAL_COLORS];
  */
 type ColorValue = RGB | string;
 
+// =============================================================================
+// Layout Constants & Panel Types
+// =============================================================================
+
+const LEFT_WIDTH = 38;
+const RIGHT_WIDTH = 61;
+
+type PickerFocusTarget =
+  | { type: "hex-input" }
+  | { type: "named-colors"; index: number }
+  | { type: "palette"; row: number; col: number };
+
+// =============================================================================
+// Named Color Grid (for picker panel)
+// =============================================================================
+
+const NAMED_COLORS_PER_ROW = 6;
+const NAMED_COLOR_GRID: Array<Array<{ display: string; value: string; rgb: RGB | null }>> = [
+  [
+    { display: "Black", value: "Black", rgb: [0, 0, 0] },
+    { display: "Red", value: "Red", rgb: [255, 0, 0] },
+    { display: "Green", value: "Green", rgb: [0, 128, 0] },
+    { display: "Yellow", value: "Yellow", rgb: [255, 255, 0] },
+    { display: "Blue", value: "Blue", rgb: [0, 0, 255] },
+    { display: "Magenta", value: "Magenta", rgb: [255, 0, 255] },
+  ],
+  [
+    { display: "Cyan", value: "Cyan", rgb: [0, 255, 255] },
+    { display: "Gray", value: "Gray", rgb: [128, 128, 128] },
+    { display: "DkGray", value: "DarkGray", rgb: [169, 169, 169] },
+    { display: "LtRed", value: "LightRed", rgb: [255, 128, 128] },
+    { display: "LtGreen", value: "LightGreen", rgb: [144, 238, 144] },
+    { display: "LtYellw", value: "LightYellow", rgb: [255, 255, 224] },
+  ],
+  [
+    { display: "LtBlue", value: "LightBlue", rgb: [173, 216, 230] },
+    { display: "LtMag", value: "LightMagenta", rgb: [255, 128, 255] },
+    { display: "LtCyan", value: "LightCyan", rgb: [224, 255, 255] },
+    { display: "White", value: "White", rgb: [255, 255, 255] },
+    { display: "Default", value: "Default", rgb: null },
+    { display: "Reset", value: "Reset", rgb: null },
+  ],
+];
+
+// =============================================================================
+// Extended Color Palette
+// =============================================================================
+
+const PALETTE_COLS = 12;
+const PALETTE_ROWS = 4;
+const PALETTE_LIGHTNESSES = [25, 40, 60, 75];
+
+function hslToRgb(h: number, s: number, l: number): RGB {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
+  const m = l - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) { r = c; g = x; }
+  else if (h < 120) { r = x; g = c; }
+  else if (h < 180) { g = c; b = x; }
+  else if (h < 240) { g = x; b = c; }
+  else if (h < 300) { r = x; b = c; }
+  else { r = c; b = x; }
+  return [
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255),
+  ];
+}
+
+let cachedPalette: RGB[][] | null = null;
+
+function getExtendedPalette(): RGB[][] {
+  if (cachedPalette) return cachedPalette;
+  const palette: RGB[][] = [];
+  for (let row = 0; row < PALETTE_ROWS; row++) {
+    const rowColors: RGB[] = [];
+    for (let col = 0; col < PALETTE_COLS; col++) {
+      const hue = col * 30;
+      rowColors.push(hslToRgb(hue, 80, PALETTE_LIGHTNESSES[row]));
+    }
+    palette.push(rowColors);
+  }
+  cachedPalette = palette;
+  return palette;
+}
+
+// =============================================================================
+// Preview Tokens
+// =============================================================================
+
+const PREVIEW_LINES: Array<Array<{ text: string; syntaxType: string }>> = [
+  [
+    { text: "fn", syntaxType: "keyword" },
+    { text: " ", syntaxType: "" },
+    { text: "main", syntaxType: "function" },
+    { text: "() {", syntaxType: "operator" },
+  ],
+  [
+    { text: "  ", syntaxType: "" },
+    { text: "let", syntaxType: "keyword" },
+    { text: " greeting = ", syntaxType: "" },
+    { text: "\"Hello\"", syntaxType: "string" },
+    { text: ";", syntaxType: "" },
+  ],
+  [
+    { text: "  ", syntaxType: "" },
+    { text: "// A comment", syntaxType: "comment" },
+  ],
+  [
+    { text: "  ", syntaxType: "" },
+    { text: "println!", syntaxType: "function" },
+    { text: "(", syntaxType: "" },
+    { text: "\"{}\", ", syntaxType: "string" },
+    { text: "greeting", syntaxType: "variable" },
+    { text: ");", syntaxType: "" },
+  ],
+  [
+    { text: "}", syntaxType: "" },
+  ],
+];
+
 /**
  * Theme section definition
  */
@@ -229,6 +353,22 @@ interface ThemeEditorState {
   isBuiltin: boolean;
   /** Saved cursor field path (for restoring after prompts) */
   savedCursorPath: string | null;
+  /** Whether to close the editor after a successful save */
+  closeAfterSave: boolean;
+  /** Which panel has focus */
+  focusPanel: "tree" | "picker";
+  /** Focus target within picker panel */
+  pickerFocus: PickerFocusTarget;
+  /** Filter text for tree */
+  filterText: string;
+  /** Whether filter input is active */
+  filterActive: boolean;
+  /** First visible tree line index for virtual scrolling */
+  treeScrollOffset: number;
+  /** Cached viewport height */
+  viewportHeight: number;
+  /** Cached viewport width */
+  viewportWidth: number;
 }
 
 /**
@@ -252,6 +392,11 @@ function isThemeEditorOpen(): boolean {
     state.themeData = {};
     state.originalThemeData = {};
     state.hasChanges = false;
+    state.focusPanel = "tree";
+    state.selectedIndex = 0;
+    state.treeScrollOffset = 0;
+    state.filterText = "";
+    state.filterActive = false;
   }
 
   return exists;
@@ -274,6 +419,14 @@ const state: ThemeEditorState = {
   pendingSaveName: null,
   isBuiltin: false,
   savedCursorPath: null,
+  closeAfterSave: false,
+  focusPanel: "tree",
+  pickerFocus: { type: "hex-input" },
+  filterText: "",
+  filterActive: false,
+  treeScrollOffset: 0,
+  viewportHeight: 40,
+  viewportWidth: 120,
 };
 
 // =============================================================================
@@ -290,6 +443,13 @@ const colors = {
   footer: [100, 100, 100] as RGB,          // Gray
   colorBlock: [200, 200, 200] as RGB,      // Light gray for color swatch outline
   selectionBg: [50, 50, 80] as RGB,        // Dark blue-gray for selected field
+  divider: [60, 60, 80] as RGB,            // Muted divider color
+  header: [100, 180, 255] as RGB,          // Header blue
+  pickerLabel: [180, 180, 200] as RGB,     // Picker section labels
+  pickerValue: [255, 255, 255] as RGB,     // Picker value text
+  pickerFocusBg: [40, 60, 100] as RGB,     // Picker focused item bg
+  filterText: [200, 200, 100] as RGB,      // Filter input text
+  previewBg: [25, 25, 30] as RGB,          // Preview background
 };
 
 // =============================================================================
@@ -305,8 +465,8 @@ const SHORTCUTS = {
   save: "C-s",
   save_as: "C-S-s",
   delete: "C-d",
+  close: "Esc",
   reload: "C-r",
-  close: "C-q",
   help: "F1",
 };
 
@@ -318,14 +478,17 @@ editor.defineMode(
   "theme-editor",
   "normal",
   [
-    // Navigation (standard keys that don't conflict with typing)
-    ["Return", "theme_editor_edit_color"],
-    ["Space", "theme_editor_edit_color"],
-    ["Tab", "theme_editor_nav_next_section"],
-    ["S-Tab", "theme_editor_nav_prev_section"],
+    // Navigation
+    ["Return", "theme_editor_enter"],
+    ["Space", "theme_editor_enter"],
+    ["Tab", "theme_editor_focus_tab"],
+    ["S-Tab", "theme_editor_focus_shift_tab"],
     ["Up", "theme_editor_nav_up"],
     ["Down", "theme_editor_nav_down"],
-    ["Escape", "theme_editor_close"],
+    ["Left", "theme_editor_nav_left"],
+    ["Right", "theme_editor_nav_right"],
+    ["Escape", "theme_editor_escape"],
+    ["/", "theme_editor_filter"],
     [SHORTCUTS.help, "theme_editor_show_help"],
 
     // Ctrl+ shortcuts (match common editor conventions)
@@ -334,7 +497,6 @@ editor.defineMode(
     [SHORTCUTS.save_as, "theme_editor_save_as"],
     [SHORTCUTS.delete, "theme_editor_delete"],
     [SHORTCUTS.reload, "theme_editor_reload"],
-    [SHORTCUTS.close, "theme_editor_close"],
     ["C-h", "theme_editor_show_help"],  // Alternative help key
   ],
   true // read-only
@@ -500,82 +662,19 @@ async function loadBuiltinThemes(): Promise<string[]> {
 }
 
 /**
- * Load a theme file from built-in themes
+ * Load theme data by name from the in-memory theme registry.
+ * Works for all theme types (builtin, user, package) — no file I/O needed.
  */
-async function loadThemeFile(name: string): Promise<Record<string, unknown> | null> {
+function loadThemeFile(name: string): Record<string, unknown> | null {
   try {
-    const rawThemes = editor.getBuiltinThemes();
-    // getBuiltinThemes returns a JSON string, need to parse it
-    const builtinThemes = typeof rawThemes === "string"
-      ? JSON.parse(rawThemes) as Record<string, string>
-      : rawThemes as Record<string, string>;
-    if (name in builtinThemes) {
-      return JSON.parse(builtinThemes[name]);
-    }
-    return null;
+    const data = editor.getThemeData(name);
+    return data as Record<string, unknown> | null;
   } catch (e) {
     editor.debug(`[theme_editor] Failed to load theme data for '${name}': ${e}`);
     return null;
   }
 }
 
-/**
- * Load a user theme file
- */
-async function loadUserThemeFile(name: string): Promise<{ data: Record<string, unknown>; path: string } | null> {
-  const userThemesDir = getUserThemesDir();
-  const themePath = editor.pathJoin(userThemesDir, `${name}.json`);
-
-  try {
-    const content = await editor.readFile(themePath);
-    return { data: JSON.parse(content), path: themePath };
-  } catch {
-    editor.debug(`Failed to load user theme: ${name}`);
-    return null;
-  }
-}
-
-/**
- * List available user themes
- */
-function listUserThemes(): string[] {
-  const userThemesDir = getUserThemesDir();
-  try {
-    const entries = editor.readDir(userThemesDir);
-    return entries
-      .filter(e => e.is_file && e.name.endsWith(".json"))
-      .map(e => e.name.replace(".json", ""));
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Get user themes directory
- * Uses the API to get the correct path
- */
-function getUserThemesDir(): string {
-  // Use the API if available (new method)
-  if (typeof editor.getThemesDir === "function") {
-    return editor.getThemesDir();
-  }
-
-  // Fallback for older versions (deprecated)
-  // Check XDG_CONFIG_HOME first (standard on Linux)
-  const xdgConfig = editor.getEnv("XDG_CONFIG_HOME");
-  if (xdgConfig) {
-    return editor.pathJoin(xdgConfig, "fresh", "themes");
-  }
-
-  // Fall back to $HOME/.config
-  const home = editor.getEnv("HOME");
-  if (home) {
-    return editor.pathJoin(home, ".config", "fresh", "themes");
-  }
-
-  return editor.pathJoin(editor.getCwd(), "themes");
-}
-
 // =============================================================================
 // Field Building
 // =============================================================================
@@ -586,11 +685,21 @@ function getUserThemesDir(): string {
 function buildVisibleFields(): ThemeField[] {
   const fields: ThemeField[] = [];
   const themeSections = getThemeSections();
+  const filter = state.filterText.toLowerCase();
 
   for (const section of themeSections) {
     const expanded = state.expandedSections.has(section.name);
 
-    // Section header - displayName and description are already translated in getThemeSections()
+    // When filtering, check if section or any of its fields match
+    if (filter) {
+      const sectionMatches = section.name.toLowerCase().includes(filter) ||
+        section.displayName.toLowerCase().includes(filter);
+      const anyFieldMatches = section.fields.some(f =>
+        f.key.toLowerCase().includes(filter) || f.displayName.toLowerCase().includes(filter));
+      if (!sectionMatches && !anyFieldMatches) continue;
+    }
+
+    // Section header
     fields.push({
       def: {
         key: section.name,
@@ -608,10 +717,16 @@ function buildVisibleFields(): ThemeField[] {
     // Section fields
     if (expanded) {
       for (const fieldDef of section.fields) {
+        // Filter individual fields
+        if (filter) {
+          const fieldMatches = fieldDef.key.toLowerCase().includes(filter) ||
+            fieldDef.displayName.toLowerCase().includes(filter);
+          if (!fieldMatches) continue;
+        }
+
         const path = `${section.name}.${fieldDef.key}`;
         const value = getNestedValue(state.themeData, path) as ColorValue || [128, 128, 128];
 
-        // fieldDef displayName and description are already translated in getThemeSections()
         fields.push({
           def: fieldDef,
           value,
@@ -630,109 +745,423 @@ function buildVisibleFields(): ThemeField[] {
 // UI Building
 // =============================================================================
 
-/**
- * Build display entries for virtual buffer
- */
-function buildDisplayEntries(): TextPropertyEntry[] {
-  const entries: TextPropertyEntry[] = [];
+// =============================================================================
+// Tree Panel Builder (Left)
+// =============================================================================
 
-  // Title
-  const modifiedMarker = state.hasChanges ? " " + editor.t("panel.modified") : "";
-  entries.push({
-    text: `━━━ ${editor.t("panel.title", { name: state.themeName })}${modifiedMarker} ━━━\n`,
-    properties: { type: "title" },
-  });
+interface TreeLine {
+  text: string;
+  type: string;
+  index?: number;
+  path?: string;
+  selected?: boolean;
+  colorValue?: ColorValue;
+}
 
-  if (state.themePath) {
-    entries.push({
-      text: `${editor.t("panel.file", { path: state.themePath })}\n`,
-      properties: { type: "file-path" },
-    });
-  } else {
-    entries.push({
-      text: editor.t("panel.new_theme") + "\n",
-      properties: { type: "file-path" },
-    });
-  }
+function buildTreeLines(): TreeLine[] {
+  const lines: TreeLine[] = [];
 
-  // Key hints at the top (moved from footer)
-  entries.push({
-    text: editor.t("panel.nav_hint") + "\n",
-    properties: { type: "footer" },
-  });
-  entries.push({
-    text: editor.t("panel.action_hint", SHORTCUTS) + "\n",
-    properties: { type: "footer" },
+  // Header
+  const modMarker = state.hasChanges ? " [*]" : "";
+  lines.push({
+    text: `Theme Editor: ${state.themeName}${modMarker}`,
+    type: "header",
   });
 
-  entries.push({
-    text: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",
-    properties: { type: "separator" },
-  });
+  // Separator
+  lines.push({ text: "─".repeat(36), type: "separator" });
 
-  entries.push({
-    text: "\n",
-    properties: { type: "blank" },
-  });
+  // Filter
+  if (state.filterText) {
+    lines.push({
+      text: `Filter: [${state.filterText}]`,
+      type: "filter",
+    });
+    lines.push({ text: "─".repeat(36), type: "separator" });
+  }
 
-  // Fields
+  // Build visible fields
   state.visibleFields = buildVisibleFields();
 
+  // Clamp selectedIndex
+  if (state.selectedIndex >= state.visibleFields.length) {
+    state.selectedIndex = Math.max(0, state.visibleFields.length - 1);
+  }
+
   for (let i = 0; i < state.visibleFields.length; i++) {
     const field = state.visibleFields[i];
-    const indent = "  ".repeat(field.depth);
+    const isSelected = i === state.selectedIndex;
 
     if (field.isSection) {
-      // Section header
       const icon = field.expanded ? "▼" : ">";
-      entries.push({
-        text: `${indent}${icon} ${field.def.displayName}\n`,
-        properties: {
-          type: "section",
-          path: field.path,
-          index: i,
-          expanded: field.expanded,
-        },
-      });
-
-      // Section description
-      entries.push({
-        text: `${indent}  // ${field.def.description}\n`,
-        properties: { type: "description", path: field.path },
+      const sel = isSelected && state.focusPanel === "tree" ? "▸" : " ";
+      lines.push({
+        text: `${sel}${icon} ${field.def.displayName}`,
+        type: "tree-section",
+        index: i,
+        path: field.path,
+        selected: isSelected,
       });
     } else {
-      // Field description (before the field)
-      entries.push({
-        text: `${indent}    // ${field.def.description}\n`,
-        properties: { type: "description", path: field.path },
+      const sel = isSelected && state.focusPanel === "tree" ? "▸" : " ";
+      const name = field.def.key.length > 13 ? field.def.key.slice(0, 12) + "…" : field.def.key;
+      const colorStr = formatColorValue(field.value);
+      const valueStr = colorStr.length > 9 ? colorStr.slice(0, 8) + "…" : colorStr;
+      lines.push({
+        text: `  ${sel} ${name.padEnd(13)} ██ ${valueStr}`,
+        type: "tree-field",
+        index: i,
+        path: field.path,
+        selected: isSelected,
+        colorValue: field.value,
       });
+    }
+  }
 
-      // Color field with swatch characters (X for fg preview, space for bg preview)
-      const colorStr = formatColorValue(field.value);
+  return lines;
+}
 
-      entries.push({
-        text: `${indent}  ${field.def.displayName}: X  ${colorStr}\n`,
-        properties: {
-          type: "field",
-          path: field.path,
-          index: i,
-          colorValue: field.value,
-        },
-      });
+// =============================================================================
+// Picker Panel Builder (Right)
+// =============================================================================
+
+interface PickerLine {
+  text: string;
+  type: string;
+  namedRow?: number;
+  paletteRow?: number;
+  previewLineIdx?: number;
+}
+
+function buildPickerLines(): PickerLine[] {
+  const lines: PickerLine[] = [];
+  const field = state.visibleFields[state.selectedIndex];
+
+  if (!field || field.isSection) {
+    // Section selected - show section info
+    if (field) {
+      lines.push({ text: `${field.def.displayName}`, type: "picker-title" });
+      lines.push({ text: `"${field.def.description}"`, type: "picker-desc" });
+    } else {
+      lines.push({ text: "No field selected", type: "picker-title" });
+    }
+    lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
+    lines.push({ text: "Select a color field to edit", type: "picker-desc" });
+    return lines;
+  }
+
+  // Field title
+  lines.push({ text: `${field.path} - ${field.def.displayName}`, type: "picker-title" });
+  lines.push({ text: `"${field.def.description}"`, type: "picker-desc" });
+  lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
+
+  // Hex / RGB value
+  const colorStr = formatColorValue(field.value);
+  const rgb = parseColorToRgb(field.value);
+  let valueLine = `Hex: ${colorStr}`;
+  if (rgb) {
+    valueLine += `     RGB: ${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+  }
+  lines.push({ text: valueLine, type: "picker-hex" });
+
+  lines.push({ text: "", type: "picker-blank" });
+
+  // Named Colors section
+  lines.push({ text: "Named Colors:", type: "picker-label" });
+  for (let row = 0; row < NAMED_COLOR_GRID.length; row++) {
+    let rowText = "";
+    for (const item of NAMED_COLOR_GRID[row]) {
+      rowText += " " + item.display.padEnd(8);
+    }
+    lines.push({ text: rowText, type: "picker-named-row", namedRow: row });
+  }
+
+  lines.push({ text: "", type: "picker-blank" });
+
+  // Extended Color Palette section
+  lines.push({ text: "Color Palette:", type: "picker-label" });
+  const palette = getExtendedPalette();
+  for (let row = 0; row < PALETTE_ROWS; row++) {
+    let rowText = "";
+    for (let col = 0; col < PALETTE_COLS; col++) {
+      rowText += (col === 0 ? " " : " ") + "██";
+    }
+    lines.push({ text: rowText, type: "picker-palette-row", paletteRow: row });
+  }
+
+  lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
+
+  // Preview section
+  lines.push({ text: "Preview:", type: "picker-label" });
+  for (let i = 0; i < PREVIEW_LINES.length; i++) {
+    let lineText = " ";
+    for (const token of PREVIEW_LINES[i]) {
+      lineText += token.text;
+    }
+    lines.push({ text: lineText, type: "picker-preview-line", previewLineIdx: i });
+  }
+
+  return lines;
+}
+
+// =============================================================================
+// UI Building - Two Panel Merge
+// =============================================================================
+
+/**
+ * Compute inline style for a left-panel tree entry
+ */
+function styleForLeftEntry(item: TreeLine | undefined): { style?: Partial<OverlayOptions>; inlineOverlays?: InlineOverlay[] } {
+  if (!item) return {};
+  const type = item.type;
+  if (type === "header") {
+    return { style: { fg: colors.header, bold: true } };
+  } else if (type === "separator") {
+    return { style: { fg: colors.divider } };
+  } else if (type === "filter") {
+    return { style: { fg: colors.filterText } };
+  } else if (type === "tree-section") {
+    return { style: { fg: colors.sectionHeader, bold: true } };
+  } else if (type === "tree-field") {
+    const inlines: InlineOverlay[] = [];
+    const text = " " + item.text; // matches leftText construction below
+    const paddedLen = getUtf8ByteLength(text.padEnd(LEFT_WIDTH));
+    const colorValue = item.colorValue;
+    const swatchIdx = colorValue !== undefined ? text.indexOf("██") : -1;
+    const rgb = colorValue !== undefined ? parseColorToRgb(colorValue) : null;
+
+    if (rgb && swatchIdx >= 0) {
+      const swatchStart = getUtf8ByteLength(text.substring(0, swatchIdx));
+      const swatchEnd = swatchStart + getUtf8ByteLength("██");
+      // Non-overlapping segments: fieldName | swatch | value
+      inlines.push({ start: 0, end: swatchStart, style: { fg: colors.fieldName } });
+      inlines.push({ start: swatchStart, end: swatchEnd, style: { fg: rgb, bg: rgb } });
+      const valueStart = swatchEnd + getUtf8ByteLength(" ");
+      if (valueStart < paddedLen) {
+        inlines.push({ start: valueStart, end: paddedLen, style: { fg: colors.customValue } });
+      }
+      return { inlineOverlays: inlines };
     }
+    // No swatch — use entry-level style
+    return { style: { fg: colors.fieldName } };
+  }
+  return {};
+}
+
+/**
+ * Compute inline style for a right-panel picker entry
+ */
+function styleForRightEntry(item: PickerLine | undefined): { style?: Partial<OverlayOptions>; inlineOverlays?: InlineOverlay[] } {
+  if (!item) return {};
+  const type = item.type;
+  if (type === "picker-title") {
+    return { style: { fg: colors.header, bold: true } };
+  } else if (type === "picker-desc") {
+    return { style: { fg: colors.description } };
+  } else if (type === "picker-separator") {
+    return { style: { fg: colors.divider } };
+  } else if (type === "picker-hex") {
+    return { style: { fg: colors.pickerValue } };
+  } else if (type === "picker-label") {
+    return { style: { fg: colors.pickerLabel } };
+  } else if (type === "picker-named-row") {
+    const namedRow = item.namedRow!;
+    const gridRow = NAMED_COLOR_GRID[namedRow];
+    if (!gridRow) return {};
+    const inlines: InlineOverlay[] = [];
+    // Entry text is " " + item.text. Byte positions are relative to that.
+    const bytePos = getUtf8ByteLength(" "); // the prepended " "
+    let innerPos = 0;
+    for (let col = 0; col < gridRow.length; col++) {
+      const cellItem = gridRow[col];
+      const cellText = " " + cellItem.display.padEnd(8);
+      const cellLen = getUtf8ByteLength(cellText);
+      const cellStart = bytePos + getUtf8ByteLength(item.text.substring(0, innerPos));
+      const cellEnd = cellStart + cellLen;
+      if (cellItem.rgb) {
+        inlines.push({ start: cellStart, end: cellEnd, style: { fg: cellItem.rgb }, properties: { namedCol: col } });
+      } else {
+        inlines.push({ start: cellStart, end: cellEnd, style: { fg: colors.pickerLabel }, properties: { namedCol: col } });
+      }
+      innerPos += cellText.length;
+    }
+    return { inlineOverlays: inlines.length > 0 ? inlines : undefined };
+  } else if (type === "picker-palette-row") {
+    const paletteRow = item.paletteRow!;
+    const palette = getExtendedPalette();
+    const rowColors = palette[paletteRow];
+    if (!rowColors) return {};
+    const inlines: InlineOverlay[] = [];
+    // entry text = " " + item.text
+    // item.text = " ██ ██ ██..." (starts with " " then "██" pairs)
+    let bytePos = getUtf8ByteLength(" "); // prepended " "
+    let innerPos = 0;
+    for (let col = 0; col < PALETTE_COLS; col++) {
+      const prefix = col === 0 ? " " : " ";
+      innerPos += prefix.length;
+      bytePos = getUtf8ByteLength(" ") + getUtf8ByteLength(item.text.substring(0, innerPos));
+      const swatchLen = getUtf8ByteLength("██");
+      const rgb = rowColors[col];
+      inlines.push({ start: bytePos, end: bytePos + swatchLen, style: { fg: rgb, bg: rgb }, properties: { paletteCol: col } });
+      innerPos += 2; // "██" is 2 JS chars
+    }
+    return { inlineOverlays: inlines.length > 0 ? inlines : undefined };
+  } else if (type === "picker-preview-line") {
+    const previewLineIdx = item.previewLineIdx!;
+    const tokens = PREVIEW_LINES[previewLineIdx];
+    if (!tokens) return {};
+    const inlines: InlineOverlay[] = [];
+    // entry text = " " + item.text
+    // item.text = " " + token texts concatenated
+    const editorBg = getNestedValue(state.themeData, "editor.bg") as ColorValue;
+    const bgRgb = parseColorToRgb(editorBg);
+    const entryText = " " + item.text;
+    const entryLen = getUtf8ByteLength(entryText);
+    const baseStyle: Partial<OverlayOptions> | undefined = bgRgb ? { bg: bgRgb } : undefined;
+
+    // Skip the leading " " + " " (from entry " " prefix + item.text leading " ")
+    let charPos = 2; // " " prefix + " " in item.text
+    let bytePos = getUtf8ByteLength("  ");
+    for (const token of tokens) {
+      const tokenLen = getUtf8ByteLength(token.text);
+      if (token.syntaxType) {
+        const syntaxPath = `syntax.${token.syntaxType}`;
+        const syntaxColor = getNestedValue(state.themeData, syntaxPath) as ColorValue;
+        const syntaxRgb = parseColorToRgb(syntaxColor);
+        if (syntaxRgb) {
+          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: syntaxRgb } });
+        }
+      } else {
+        const fgColor = getNestedValue(state.themeData, "editor.fg") as ColorValue;
+        const fgRgb = parseColorToRgb(fgColor);
+        if (fgRgb) {
+          inlines.push({ start: bytePos, end: bytePos + tokenLen, style: { fg: fgRgb } });
+        }
+      }
+      bytePos += tokenLen;
+    }
+    return { style: baseStyle, inlineOverlays: inlines.length > 0 ? inlines : undefined };
+  }
+  return {};
+}
+
+function buildDisplayEntries(): TextPropertyEntry[] {
+  const entries: TextPropertyEntry[] = [];
+
+  const allLeftLines = buildTreeLines();
+  const rightLines = buildPickerLines();
+
+  // Virtual scrolling: only show a viewport-sized slice of tree lines
+  // Reserve 2 rows for status bar + hints, 1 for possible scroll indicator
+  const treeVisibleRows = Math.max(8, state.viewportHeight - 2);
+
+  // Adjust scroll offset to keep selectedIndex visible
+  // Find which line index in allLeftLines corresponds to selectedIndex
+  let selectedLineIdx = -1;
+  for (let i = 0; i < allLeftLines.length; i++) {
+    if (allLeftLines[i].index === state.selectedIndex && allLeftLines[i].selected) {
+      selectedLineIdx = i;
+      break;
+    }
+  }
+  if (selectedLineIdx >= 0) {
+    if (selectedLineIdx < state.treeScrollOffset) {
+      state.treeScrollOffset = selectedLineIdx;
+    }
+    if (selectedLineIdx >= state.treeScrollOffset + treeVisibleRows) {
+      state.treeScrollOffset = selectedLineIdx - treeVisibleRows + 1;
+    }
+  }
+  // Clamp scroll offset
+  const maxOffset = Math.max(0, allLeftLines.length - treeVisibleRows);
+  if (state.treeScrollOffset > maxOffset) state.treeScrollOffset = maxOffset;
+  if (state.treeScrollOffset < 0) state.treeScrollOffset = 0;
+
+  const leftLines = allLeftLines.slice(state.treeScrollOffset, state.treeScrollOffset + treeVisibleRows);
+
+  // Add scroll indicators if tree is scrollable
+  const canScrollUp = state.treeScrollOffset > 0;
+  const canScrollDown = state.treeScrollOffset + treeVisibleRows < allLeftLines.length;
+
+  const maxRows = Math.max(leftLines.length, rightLines.length, 8);
+  let byteOffset = 0;
+
+  for (let i = 0; i < maxRows; i++) {
+    const leftItem = leftLines[i];
+    const rightItem = rightLines[i];
 
+    // Left side (padded to LEFT_WIDTH)
+    const leftText = leftItem ? (" " + leftItem.text) : "";
+    const leftPadded = leftText.padEnd(LEFT_WIDTH);
+    const leftStyle = styleForLeftEntry(leftItem);
     entries.push({
-      text: "\n",
-      properties: { type: "blank" },
+      text: leftPadded,
+      properties: {
+        type: leftItem?.type || "blank",
+        index: leftItem?.index,
+        path: leftItem?.path,
+        selected: leftItem?.selected,
+        colorValue: leftItem?.colorValue,
+      },
+      style: leftStyle.style,
+      inlineOverlays: leftStyle.inlineOverlays,
+    });
+    byteOffset += getUtf8ByteLength(leftPadded);
+
+    // Divider
+    const dividerText = "│";
+    entries.push({ text: dividerText, properties: { type: "divider" }, style: { fg: colors.divider } });
+    byteOffset += getUtf8ByteLength(dividerText);
+
+    // Right side
+    const rightText = rightItem ? (" " + rightItem.text) : "";
+    const rightStyle = styleForRightEntry(rightItem);
+    entries.push({
+      text: rightText,
+      properties: {
+        type: rightItem?.type || "blank",
+        namedRow: rightItem?.namedRow,
+        paletteRow: rightItem?.paletteRow,
+        previewLineIdx: rightItem?.previewLineIdx,
+      },
+      style: rightStyle.style,
+      inlineOverlays: rightStyle.inlineOverlays,
     });
+    byteOffset += getUtf8ByteLength(rightText);
+
+    // Newline
+    entries.push({ text: "\n", properties: { type: "newline" } });
+    byteOffset += 1;
   }
 
+  // Status bar (full width)
+  entries.push({
+    text: "─".repeat(100) + "\n",
+    properties: { type: "status-separator" },
+    style: { fg: colors.divider },
+  });
+
+  // Context-sensitive key hints
+  let hints: string;
+  const scrollHint = canScrollUp || canScrollDown
+    ? ` [${canScrollUp ? "▲" : " "}${canScrollDown ? "▼" : " "}]`
+    : "";
+  if (state.focusPanel === "tree") {
+    hints = " ↑↓ Navigate  Tab Switch Panel  Enter Edit  /Filter  Ctrl+S Save  Esc Close" + scrollHint;
+  } else {
+    hints = " ↑↓←→ Navigate  Tab Switch Panel  Enter Apply  Esc Back to Tree" + scrollHint;
+  }
+  entries.push({
+    text: hints + "\n",
+    properties: { type: "status-bar" },
+    style: { fg: colors.footer },
+  });
+
   return entries;
 }
 
 /**
  * Helper to add a colored overlay (foreground color)
- * addOverlay signature: (bufferId, namespace, start, end, r, g, b, underline, bold, italic, bg_r, bg_g, bg_b, extend_to_line_end)
  */
 function addColorOverlay(
   bufferId: number,
@@ -753,7 +1182,7 @@ function addBackgroundHighlight(
   end: number,
   bgColor: RGB
 ): void {
-  editor.addOverlay(bufferId, "theme-selection", start, end, { bg: bgColor, extendToLineEnd: true });
+  editor.addOverlay(bufferId, "theme-sel", start, end, { bg: bgColor });
 }
 
 /**
@@ -773,96 +1202,110 @@ function isSpecialColor(value: ColorValue): boolean {
 }
 
 /**
- * Apply syntax highlighting
+ * Apply selection-only highlighting (cheap — just the selected row background
+ * and picker focus highlights). Only touches the "theme-selection" namespace.
  */
-function applyHighlighting(): void {
+function applySelectionHighlighting(cachedEntries?: TextPropertyEntry[]): void {
   if (state.bufferId === null) return;
 
   const bufferId = state.bufferId;
-  editor.clearNamespace(bufferId, "theme");
-  editor.clearNamespace(bufferId, "theme-selection");
+  editor.clearNamespace(bufferId, "theme-sel");
 
-  const entries = buildDisplayEntries();
+  const entries = cachedEntries || buildDisplayEntries();
   let byteOffset = 0;
 
-  // Get current field at cursor to highlight it
-  const currentField = getFieldAtCursor();
-  const currentFieldPath = currentField?.path;
-
   for (const entry of entries) {
     const text = entry.text;
     const textLen = getUtf8ByteLength(text);
     const props = entry.properties as Record<string, unknown>;
     const entryType = props.type as string;
-    const entryPath = props.path as string | undefined;
-
-    // Add selection highlight for current field/section
-    if (currentFieldPath && entryPath === currentFieldPath && (entryType === "field" || entryType === "section")) {
-      addBackgroundHighlight(bufferId, byteOffset, byteOffset + textLen, colors.selectionBg);
-    }
 
-    if (entryType === "title") {
-      addColorOverlay(bufferId, byteOffset, byteOffset + textLen, colors.sectionHeader, true);
-    } else if (entryType === "file-path") {
-      addColorOverlay(bufferId, byteOffset, byteOffset + textLen, colors.description);
-    } else if (entryType === "description") {
-      addColorOverlay(bufferId, byteOffset, byteOffset + textLen, colors.description);
-    } else if (entryType === "section") {
-      addColorOverlay(bufferId, byteOffset, byteOffset + textLen, colors.sectionHeader, true);
-    } else if (entryType === "field") {
-      // Field name - light blue
-      const colonPos = text.indexOf(":");
-      if (colonPos > 0) {
-        const nameEnd = byteOffset + getUtf8ByteLength(text.substring(0, colonPos));
-        addColorOverlay(bufferId, byteOffset, nameEnd, colors.fieldName);
-
-        // Color the swatch characters with the field's actual color
-        // Text format: "FieldName: X  #RRGGBB" (X=fg, space=bg)
-        const colorValue = props.colorValue as ColorValue;
-        const rgb = parseColorToRgb(colorValue);
-        if (rgb) {
-          // "X" is at colon + 2 (": " = 2 bytes), and is 1 byte
-          const swatchFgStart = nameEnd + getUtf8ByteLength(": ");
-          const swatchFgEnd = swatchFgStart + 1; // "X" is 1 byte
-          addColorOverlay(bufferId, swatchFgStart, swatchFgEnd, rgb);
-
-          // First space after "X" is the bg swatch, 1 byte
-          const swatchBgStart = swatchFgEnd;
-          const swatchBgEnd = swatchBgStart + 1;
-          // Use background color for the space
-          editor.addOverlay(bufferId, "theme", swatchBgStart, swatchBgEnd, { bg: rgb });
+    if (entryType === "tree-section" || entryType === "tree-field") {
+      if (props.selected as boolean) {
+        // For tree-field entries, split the highlight around the swatch (██) bytes
+        // so the inline swatch color overlay (fg+bg) isn't overridden by selection bg
+        const swatchIdx = text.indexOf("██");
+        if (entryType === "tree-field" && swatchIdx >= 0) {
+          const swatchByteStart = byteOffset + getUtf8ByteLength(text.substring(0, swatchIdx));
+          const swatchByteEnd = swatchByteStart + getUtf8ByteLength("██");
+          addBackgroundHighlight(bufferId, byteOffset, swatchByteStart, colors.selectionBg);
+          addBackgroundHighlight(bufferId, swatchByteEnd, byteOffset + textLen, colors.selectionBg);
+        } else {
+          addBackgroundHighlight(bufferId, byteOffset, byteOffset + textLen, colors.selectionBg);
+        }
+      }
+    } else if (entryType === "picker-hex") {
+      if (state.focusPanel === "picker" && state.pickerFocus.type === "hex-input") {
+        addBackgroundHighlight(bufferId, byteOffset, byteOffset + textLen, colors.pickerFocusBg);
+      }
+    } else if (entryType === "picker-named-row") {
+      if (state.focusPanel === "picker" && state.pickerFocus.type === "named-colors") {
+        const namedRow = props.namedRow as number;
+        const gridRow = NAMED_COLOR_GRID[namedRow];
+        if (gridRow) {
+          let pos = byteOffset + getUtf8ByteLength(" ");
+          for (let col = 0; col < gridRow.length; col++) {
+            const item = gridRow[col];
+            const cellText = " " + item.display.padEnd(8);
+            const cellLen = getUtf8ByteLength(cellText);
+            const flatIdx = namedRow * NAMED_COLORS_PER_ROW + col;
+            if (state.pickerFocus.index === flatIdx) {
+              editor.addOverlay(bufferId, "theme-sel", pos, pos + cellLen, { bg: colors.pickerFocusBg });
+            }
+            pos += cellLen;
+          }
+        }
+      }
+    } else if (entryType === "picker-palette-row") {
+      if (state.focusPanel === "picker" && state.pickerFocus.type === "palette") {
+        const paletteRow = props.paletteRow as number;
+        const palette = getExtendedPalette();
+        const rowColors = palette[paletteRow];
+        if (rowColors) {
+          let pos = byteOffset + getUtf8ByteLength(" ");
+          for (let col = 0; col < PALETTE_COLS; col++) {
+            const prefix = col === 0 ? " " : " ";
+            pos += getUtf8ByteLength(prefix);
+            const swatchLen = getUtf8ByteLength("██");
+            if (state.pickerFocus.row === paletteRow && state.pickerFocus.col === col) {
+              editor.addOverlay(bufferId, "theme-sel", pos, pos + swatchLen, {
+                bg: [255, 255, 255],
+                fg: rowColors[col],
+              });
+            }
+            pos += swatchLen;
+          }
         }
-
-        // Value (hex code) - custom color (green)
-        // Format: ": X  #RRGGBB" - value starts after "X  " (X + 2 spaces)
-        const valueStart = nameEnd + getUtf8ByteLength(": X  ");
-        addColorOverlay(bufferId, valueStart, byteOffset + textLen, colors.customValue);
       }
-    } else if (entryType === "separator" || entryType === "footer") {
-      addColorOverlay(bufferId, byteOffset, byteOffset + textLen, colors.footer);
     }
 
     byteOffset += textLen;
   }
+
 }
 
+// Guard to suppress cursor_moved handler during programmatic updates
+let isUpdatingDisplay = false;
+
 /**
- * Update display (preserves cursor position)
+ * Full display update — rebuilds content and all overlays.
+ * Use for structural changes (open, section toggle, color edit, filter).
  */
 function updateDisplay(): void {
   if (state.bufferId === null) return;
-
-  // Save current field path before updating
-  const currentPath = getCurrentFieldPath();
+  isUpdatingDisplay = true;
 
   const entries = buildDisplayEntries();
+
+  // Clear selection overlays BEFORE replacing content to prevent stale
+  // theme-sel markers from having wrong positions after the buffer replace
+  editor.clearNamespace(state.bufferId, "theme-sel");
+
   editor.setVirtualBufferContent(state.bufferId, entries);
-  applyHighlighting();
 
-  // Restore cursor to the same field if possible
-  if (currentPath) {
-    moveCursorToField(currentPath);
-  }
+  // Selection highlights use a separate namespace via addOverlay (dynamic, position-dependent)
+  applySelectionHighlighting(entries);
+  isUpdatingDisplay = false;
 }
 
 // =============================================================================
@@ -870,19 +1313,12 @@ function updateDisplay(): void {
 // =============================================================================
 
 /**
- * Get field at cursor position
+ * Get field at cursor position (uses state.selectedIndex)
  */
 function getFieldAtCursor(): ThemeField | null {
-  if (state.bufferId === null) return null;
-
-  const props = editor.getTextPropertiesAtCursor(state.bufferId);
-  if (props.length > 0 && typeof props[0].index === "number") {
-    const index = props[0].index as number;
-    if (index >= 0 && index < state.visibleFields.length) {
-      return state.visibleFields[index];
-    }
+  if (state.selectedIndex >= 0 && state.selectedIndex < state.visibleFields.length) {
+    return state.visibleFields[state.selectedIndex];
   }
-
   return null;
 }
 
@@ -1019,7 +1455,7 @@ function findMatchingColor(input: string): string | null {
 /**
  * Handle color prompt confirmation
  */
-globalThis.onThemeColorPromptConfirmed = function(args: {
+function onThemeColorPromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1040,7 +1476,7 @@ globalThis.onThemeColorPromptConfirmed = function(args: {
     const entries = buildDisplayEntries();
     if (state.bufferId !== null) {
       editor.setVirtualBufferContent(state.bufferId, entries);
-      applyHighlighting();
+      applySelectionHighlighting(entries);
     }
     moveCursorToField(path);
     editor.setStatus(editor.t("status.updated", { path }));
@@ -1074,12 +1510,13 @@ globalThis.onThemeColorPromptConfirmed = function(args: {
   }
 
   return true;
-};
+}
+registerHandler("onThemeColorPromptConfirmed", onThemeColorPromptConfirmed);
 
 /**
  * Handle open theme prompt (both builtin and user themes)
  */
-globalThis.onThemeOpenPromptConfirmed = async function(args: {
+async function onThemeOpenPromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1103,45 +1540,29 @@ globalThis.onThemeOpenPromptConfirmed = async function(args: {
     isBuiltin = state.builtinThemes.includes(value);
   }
 
-  if (isBuiltin) {
-    // Load builtin theme
-    const themeData = await loadThemeFile(themeName);
-    if (themeData) {
-      state.themeData = deepClone(themeData);
-      state.originalThemeData = deepClone(themeData);
-      state.themeName = themeName;
-      state.themePath = null; // No user path for builtin
-      state.isBuiltin = true;
-      state.hasChanges = false;
-      updateDisplay();
-      editor.setStatus(editor.t("status.opened_builtin", { name: themeName }));
-    } else {
-      editor.setStatus(editor.t("status.load_failed", { name: themeName }));
-    }
+  const themeData = loadThemeFile(themeName);
+  if (themeData) {
+    state.themeData = deepClone(themeData);
+    state.originalThemeData = deepClone(themeData);
+    state.themeName = themeName;
+    state.themePath = null;
+    state.isBuiltin = isBuiltin;
+    state.hasChanges = false;
+    updateDisplay();
+    const statusKey = isBuiltin ? "status.opened_builtin" : "status.loaded";
+    editor.setStatus(editor.t(statusKey, { name: themeName }));
   } else {
-    // Load user theme
-    const result = await loadUserThemeFile(themeName);
-    if (result) {
-      state.themeData = deepClone(result.data);
-      state.originalThemeData = deepClone(result.data);
-      state.themeName = themeName;
-      state.themePath = result.path;
-      state.isBuiltin = false;
-      state.hasChanges = false;
-      updateDisplay();
-      editor.setStatus(editor.t("status.loaded", { name: themeName }));
-    } else {
-      editor.setStatus(editor.t("status.load_failed", { name: themeName }));
-    }
+    editor.setStatus(editor.t("status.load_failed", { name: themeName }));
   }
 
   return true;
-};
+}
+registerHandler("onThemeOpenPromptConfirmed", onThemeOpenPromptConfirmed);
 
 /**
  * Handle save as prompt
  */
-globalThis.onThemeSaveAsPromptConfirmed = async function(args: {
+async function onThemeSaveAsPromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1150,11 +1571,15 @@ globalThis.onThemeSaveAsPromptConfirmed = async function(args: {
 
   const name = args.input.trim();
   if (name) {
-    // Check if theme already exists
-    const userThemesDir = getUserThemesDir();
-    const targetPath = editor.pathJoin(userThemesDir, `${name}.json`);
+    // Reject names that match a built-in theme
+    if (state.builtinThemes.includes(name)) {
+      editor.setStatus(editor.t("error.name_is_builtin", { name }));
+      theme_editor_save_as();
+      return true;
+    }
 
-    if (editor.fileExists(targetPath)) {
+    // Check if a user theme file already exists with this name
+    if (editor.themeFileExists(name)) {
       // Store pending save name for overwrite confirmation
       state.pendingSaveName = name;
       editor.startPrompt(editor.t("prompt.overwrite_confirm", { name }), "theme-overwrite-confirm");
@@ -1176,26 +1601,30 @@ globalThis.onThemeSaveAsPromptConfirmed = async function(args: {
   }
 
   return true;
-};
+}
+registerHandler("onThemeSaveAsPromptConfirmed", onThemeSaveAsPromptConfirmed);
 
 /**
  * Handle prompt cancellation
  */
-globalThis.onThemePromptCancelled = function(args: { prompt_type: string }): boolean {
+function onThemePromptCancelled(args: { prompt_type: string }) : boolean {
   if (!args.prompt_type.startsWith("theme-")) return true;
 
-  // Clear saved cursor path on cancellation
+  // Clear saved state on cancellation
   state.savedCursorPath = null;
   state.pendingSaveName = null;
+  state.closeAfterSave = false;
+  state.filterActive = false;
 
-  editor.setStatus(editor.t("status.cancelled"));
+  editor.debug(editor.t("status.cancelled"));
   return true;
-};
+}
+registerHandler("onThemePromptCancelled", onThemePromptCancelled);
 
 /**
  * Handle initial theme selection prompt (when opening editor)
  */
-globalThis.onThemeSelectInitialPromptConfirmed = async function(args: {
+async function onThemeSelectInitialPromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1224,46 +1653,19 @@ globalThis.onThemeSelectInitialPromptConfirmed = async function(args: {
     isBuiltin = state.builtinThemes.includes(value);
   }
 
-  editor.setStatus(editor.t("status.loading"));
+  editor.debug(editor.t("status.loading"));
 
-  if (isBuiltin) {
-    // Load builtin theme
-    const themeData = await loadThemeFile(themeName);
-    if (themeData) {
-      state.themeData = deepClone(themeData);
-      state.originalThemeData = deepClone(themeData);
-      state.themeName = themeName;
-      state.themePath = null; // No user path for builtin
-      state.isBuiltin = true;
-      state.hasChanges = false;
-    } else {
-      // Fallback to default theme if load failed
-      state.themeData = createDefaultTheme();
-      state.originalThemeData = deepClone(state.themeData);
-      state.themeName = themeName;
-      state.themePath = null;
-      state.isBuiltin = true;
-      state.hasChanges = false;
-    }
+  const themeData = loadThemeFile(themeName);
+  if (themeData) {
+    state.themeData = deepClone(themeData);
+    state.originalThemeData = deepClone(themeData);
+    state.themeName = themeName;
+    state.themePath = null;
+    state.isBuiltin = isBuiltin;
+    state.hasChanges = false;
   } else {
-    // Load user theme
-    const result = await loadUserThemeFile(themeName);
-    if (result) {
-      state.themeData = deepClone(result.data);
-      state.originalThemeData = deepClone(result.data);
-      state.themeName = themeName;
-      state.themePath = result.path;
-      state.isBuiltin = false;
-      state.hasChanges = false;
-    } else {
-      // Fallback to default theme if load failed
-      state.themeData = createDefaultTheme();
-      state.originalThemeData = deepClone(state.themeData);
-      state.themeName = themeName;
-      state.themePath = null;
-      state.isBuiltin = false;
-      state.hasChanges = false;
-    }
+    editor.setStatus(`Failed to load theme '${themeName}'`);
+    return true;
   }
 
   // Now open the editor with loaded theme
@@ -1272,7 +1674,8 @@ globalThis.onThemeSelectInitialPromptConfirmed = async function(args: {
   editor.debug(`[theme_editor] doOpenThemeEditor() completed`);
 
   return true;
-};
+}
+registerHandler("onThemeSelectInitialPromptConfirmed", onThemeSelectInitialPromptConfirmed);
 
 // Register prompt handlers
 editor.on("prompt_confirmed", "onThemeSelectInitialPromptConfirmed");
@@ -1294,28 +1697,32 @@ editor.on("prompt_cancelled", "onThemePromptCancelled");
  * @param restorePath - Optional field path to restore cursor to after save
  */
 async function saveTheme(name?: string, restorePath?: string | null): Promise<boolean> {
-  const themeName = name || state.themeName;
-  const userThemesDir = getUserThemesDir();
-
-  // Ensure themes directory exists
-  if (!editor.fileExists(userThemesDir)) {
-    try {
-      // Create directory via shell command
-      await editor.spawnProcess("mkdir", ["-p", userThemesDir]);
-    } catch (e) {
-      editor.setStatus(editor.t("status.mkdir_failed", { error: String(e) }));
-      return false;
-    }
-  }
-
-  const themePath = editor.pathJoin(userThemesDir, `${themeName}.json`);
+  // Normalize theme name: lowercase, replace underscores/spaces with hyphens
+  // (must match Rust's normalize_theme_name so config name matches filename)
+  const themeName = (name || state.themeName).toLowerCase().replace(/[_ ]/g, "-");
 
   try {
-    state.themeData.name = themeName;
-    const content = JSON.stringify(state.themeData, null, 2);
-    await editor.writeFile(themePath, content);
+    // Build a complete theme object from all known fields.
+    // This ensures we always write every field, even if state.themeData
+    // is missing some (e.g. package theme that failed to load fully).
+    const completeTheme: Record<string, unknown> = { name: themeName };
+    const sections = getThemeSections();
+    for (const section of sections) {
+      const sectionData: Record<string, unknown> = {};
+      for (const field of section.fields) {
+        const path = `${section.name}.${field.key}`;
+        const value = getNestedValue(state.themeData, path);
+        if (value !== undefined) {
+          sectionData[field.key] = value;
+        }
+      }
+      completeTheme[section.name] = sectionData;
+    }
+
+    const content = JSON.stringify(completeTheme, null, 2);
+    const savedPath = editor.saveThemeFile(themeName, content);
 
-    state.themePath = themePath;
+    state.themePath = savedPath;
     state.themeName = themeName;
     state.isBuiltin = false; // After saving, it's now a user theme
     state.originalThemeData = deepClone(state.themeData);
@@ -1325,7 +1732,7 @@ async function saveTheme(name?: string, restorePath?: string | null): Promise<bo
     const entries = buildDisplayEntries();
     if (state.bufferId !== null) {
       editor.setVirtualBufferContent(state.bufferId, entries);
-      applyHighlighting();
+      applySelectionHighlighting(entries);
     }
 
     // Restore cursor position if provided
@@ -1333,12 +1740,18 @@ async function saveTheme(name?: string, restorePath?: string | null): Promise<bo
       moveCursorToField(restorePath);
     }
 
-    // Reload themes so the new/updated theme is available, then apply it
-    editor.reloadThemes();
-    editor.applyTheme(themeName);
+    // Reload themes and apply the new/updated theme atomically
+    editor.reloadAndApplyTheme(themeName);
     editor.setStatus(editor.t("status.saved_and_applied", { name: themeName }));
+
+    if (state.closeAfterSave) {
+      state.closeAfterSave = false;
+      doCloseEditor();
+    }
+
     return true;
   } catch (e) {
+    state.closeAfterSave = false;
     editor.setStatus(editor.t("status.save_failed", { error: String(e) }));
     return false;
   }
@@ -1419,28 +1832,102 @@ function createDefaultTheme(): Record<string, unknown> {
 // Cursor Movement Handler
 // =============================================================================
 
-globalThis.onThemeEditorCursorMoved = function(data: {
+function onThemeEditorCursorMoved(data: {
   buffer_id: number;
   cursor_id: number;
   old_position: number;
   new_position: number;
+  text_properties?: Array<Record<string, any>>;
 }): void {
   if (state.bufferId === null || data.buffer_id !== state.bufferId) return;
+  if (isUpdatingDisplay) return;
 
-  applyHighlighting();
+  const props = data.text_properties || [];
+  if (props.length === 0) return;
 
-  const field = getFieldAtCursor();
-  if (field) {
-    editor.setStatus(field.def.description);
+  const entryType = props[0].type as string | undefined;
+
+  // Tree field/section click — update selection and refresh display
+  if ((entryType === "tree-field" || entryType === "tree-section") && typeof props[0].index === "number") {
+    const index = props[0].index as number;
+    if (index >= 0 && index < state.visibleFields.length) {
+      state.selectedIndex = index;
+      state.focusPanel = "tree";
+      // Click on section header always toggles expand/collapse
+      if (entryType === "tree-section") {
+        theme_editor_toggle_section();
+        return;
+      }
+      updateDisplay();
+      return;
+    }
   }
-};
+
+  // Picker named color click — find which column via inline overlay properties
+  if (entryType === "picker-named-row" && typeof props[0].namedRow === "number") {
+    const namedRow = props[0].namedRow as number;
+    // Look for namedCol property from inline overlay
+    const colProp = props.find(p => typeof p.namedCol === "number");
+    const clickedCol = colProp ? (colProp.namedCol as number) : 0;
+    state.focusPanel = "picker";
+    state.pickerFocus = { type: "named-colors", index: namedRow * NAMED_COLORS_PER_ROW + clickedCol };
+    applyPickerColor();
+    return;
+  }
+
+  // Picker palette click — find which column via inline overlay properties
+  if (entryType === "picker-palette-row" && typeof props[0].paletteRow === "number") {
+    const paletteRow = props[0].paletteRow as number;
+    // Look for paletteCol property from inline overlay
+    const colProp = props.find(p => typeof p.paletteCol === "number");
+    const clickedCol = colProp ? (colProp.paletteCol as number) : 0;
+    state.focusPanel = "picker";
+    state.pickerFocus = { type: "palette", row: paletteRow, col: clickedCol };
+    applyPickerColor();
+    return;
+  }
+
+  // Picker hex click — open hex editing prompt
+  if (entryType === "picker-hex") {
+    state.focusPanel = "picker";
+    state.pickerFocus = { type: "hex-input" };
+    applyPickerColor();
+    return;
+  }
+
+  applySelectionHighlighting();
+}
+registerHandler("onThemeEditorCursorMoved", onThemeEditorCursorMoved);
 
 editor.on("cursor_moved", "onThemeEditorCursorMoved");
 
+function onThemeEditorResize(data: { width: number; height: number }): void {
+  if (state.bufferId === null) return;
+  state.viewportHeight = data.height;
+  state.viewportWidth = data.width;
+  updateDisplay();
+}
+registerHandler("onThemeEditorResize", onThemeEditorResize);
+editor.on("resize", "onThemeEditorResize");
+
+function onThemeEditorMouseScroll(data: { buffer_id: number; delta: number; col: number; row: number }): void {
+  if (state.bufferId === null || data.buffer_id !== state.bufferId) return;
+
+  // Only scroll the tree when mouse is over the left panel area (col < LEFT_WIDTH)
+  if (data.col >= LEFT_WIDTH) return;
+
+  // delta > 0 = scroll down, delta < 0 = scroll up
+  const scrollAmount = data.delta > 0 ? 3 : -3;
+  state.treeScrollOffset = Math.max(0, state.treeScrollOffset + scrollAmount);
+  updateDisplay();
+}
+registerHandler("onThemeEditorMouseScroll", onThemeEditorMouseScroll);
+editor.on("mouse_scroll", "onThemeEditorMouseScroll");
+
 /**
  * Handle buffer_closed event to reset state when buffer is closed by any means
  */
-globalThis.onThemeEditorBufferClosed = function(data: {
+function onThemeEditorBufferClosed(data: {
   buffer_id: number;
 }): void {
   if (state.bufferId !== null && data.buffer_id === state.bufferId) {
@@ -1450,11 +1937,70 @@ globalThis.onThemeEditorBufferClosed = function(data: {
     state.themeData = {};
     state.originalThemeData = {};
     state.hasChanges = false;
+    state.focusPanel = "tree";
+    state.pickerFocus = { type: "hex-input" };
+    state.filterText = "";
+    state.filterActive = false;
+    state.selectedIndex = 0;
+    state.treeScrollOffset = 0;
   }
-};
+}
+registerHandler("onThemeEditorBufferClosed", onThemeEditorBufferClosed);
 
 editor.on("buffer_closed", "onThemeEditorBufferClosed");
 
+/**
+ * Handle theme_inspect_key hook: open the theme editor at a specific key
+ */
+async function onThemeInspectKey(data: {
+  theme_name: string;
+  key: string;
+}): Promise<void> {
+  // If already open, focus and navigate to the key
+  if (isThemeEditorOpen()) {
+    if (state.bufferId !== null) {
+      editor.showBuffer(state.bufferId);
+    }
+    const section = data.key.split(".")[0];
+    if (!state.expandedSections.has(section)) {
+      state.expandedSections.add(section);
+    }
+    moveCursorToField(data.key);
+    return;
+  }
+
+  // Save context
+  state.sourceSplitId = editor.getActiveSplitId();
+  state.sourceBufferId = editor.getActiveBufferId();
+  state.builtinThemes = await loadBuiltinThemes();
+
+  // Auto-load the current theme (builtin or user)
+  const isBuiltin = state.builtinThemes.includes(data.theme_name);
+  const themeData = loadThemeFile(data.theme_name);
+  if (themeData) {
+    state.themeData = deepClone(themeData);
+    state.originalThemeData = deepClone(themeData);
+    state.themeName = data.theme_name;
+    state.themePath = null;
+    state.isBuiltin = isBuiltin;
+    state.hasChanges = false;
+  } else {
+    editor.setStatus(`Failed to load theme '${data.theme_name}'`);
+    return;
+  }
+
+  // Expand the target section
+  const section = data.key.split(".")[0];
+  state.expandedSections.add(section);
+
+  // Open editor and navigate
+  await doOpenThemeEditor();
+  moveCursorToField(data.key);
+}
+registerHandler("onThemeInspectKey", onThemeInspectKey);
+
+editor.on("theme_inspect_key", "onThemeInspectKey");
+
 // =============================================================================
 // Smart Navigation - Skip Non-Selectable Lines
 // =============================================================================
@@ -1480,23 +2026,13 @@ function getSelectableEntries(): SelectableEntry[] {
     const entryType = props.type as string;
     const path = (props.path as string) || "";
 
-    // Only fields and sections are selectable (they have index property)
-    if ((entryType === "field" || entryType === "section") && typeof props.index === "number") {
-      // For fields, calculate position at the color value (after "FieldName: X  ")
-      let valueByteOffset = byteOffset;
-      if (entryType === "field") {
-        const colonIdx = entry.text.indexOf(":");
-        if (colonIdx >= 0) {
-          // Position at the hex value, after ": X  " (colon + space + X + 2 spaces = 5 chars)
-          valueByteOffset = byteOffset + getUtf8ByteLength(entry.text.substring(0, colonIdx + 5));
-        }
-      }
-
+    // Only tree fields and sections are selectable (they have index property)
+    if ((entryType === "tree-field" || entryType === "tree-section") && typeof props.index === "number") {
       selectableEntries.push({
         byteOffset,
-        valueByteOffset,
+        valueByteOffset: byteOffset,
         index: props.index as number,
-        isSection: entryType === "section",
+        isSection: entryType === "tree-section",
         path,
       });
     }
@@ -1539,118 +2075,263 @@ function getCurrentFieldPath(): string | null {
 function moveCursorToField(path: string): void {
   if (state.bufferId === null) return;
 
-  const selectableEntries = getSelectableEntries();
-  for (const entry of selectableEntries) {
-    if (entry.path === path) {
-      // Use valueByteOffset for fields, byteOffset for sections
-      const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-      editor.setBufferCursor(state.bufferId, targetOffset);
+  // Find the field by path in visibleFields and update selectedIndex
+  for (let i = 0; i < state.visibleFields.length; i++) {
+    if (state.visibleFields[i].path === path) {
+      state.selectedIndex = i;
+      updateDisplay();
       return;
     }
   }
 }
 
 /**
- * Navigate to the next selectable field/section
+ * Navigate up - context-dependent on focus panel
  */
-globalThis.theme_editor_nav_down = function(): void {
+function theme_editor_nav_down() : void {
   if (state.bufferId === null) return;
 
-  const selectableEntries = getSelectableEntries();
-  const currentIndex = getCurrentSelectableIndex();
+  if (state.focusPanel === "tree") {
+    if (state.selectedIndex < state.visibleFields.length - 1) {
+      state.selectedIndex++;
+      updateDisplay();
+    }
+  } else {
+    navigatePickerVertical(1);
+  }
+}
+registerHandler("theme_editor_nav_down", theme_editor_nav_down);
 
-  // Find next selectable entry after current
-  for (const entry of selectableEntries) {
-    if (entry.index > currentIndex) {
-      // Use valueByteOffset for fields, byteOffset for sections
-      const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-      editor.setBufferCursor(state.bufferId, targetOffset);
-      return;
+function theme_editor_nav_up() : void {
+  if (state.bufferId === null) return;
+
+  if (state.focusPanel === "tree") {
+    if (state.selectedIndex > 0) {
+      state.selectedIndex--;
+      updateDisplay();
     }
+  } else {
+    navigatePickerVertical(-1);
   }
+}
+registerHandler("theme_editor_nav_up", theme_editor_nav_up);
 
-  // Already at last selectable, stay there
-  editor.setStatus(editor.t("status.at_last_field"));
-};
+/**
+ * Navigate left/right - for picker grid navigation
+ */
+function theme_editor_nav_left() : void {
+  if (state.focusPanel === "picker") {
+    navigatePickerHorizontal(-1);
+  }
+}
+registerHandler("theme_editor_nav_left", theme_editor_nav_left);
+
+function theme_editor_nav_right() : void {
+  if (state.focusPanel === "picker") {
+    navigatePickerHorizontal(1);
+  }
+}
+registerHandler("theme_editor_nav_right", theme_editor_nav_right);
 
 /**
- * Navigate to the previous selectable field/section
+ * Tab - switch focus between panels
  */
-globalThis.theme_editor_nav_up = function(): void {
-  if (state.bufferId === null) return;
+function theme_editor_focus_tab() : void {
+  if (state.focusPanel === "tree") {
+    state.focusPanel = "picker";
+    state.pickerFocus = { type: "hex-input" };
+  } else {
+    state.focusPanel = "tree";
+  }
+  updateDisplay();
+}
+registerHandler("theme_editor_focus_tab", theme_editor_focus_tab);
 
-  const selectableEntries = getSelectableEntries();
-  const currentIndex = getCurrentSelectableIndex();
+/**
+ * Shift-Tab - reverse switch focus
+ */
+function theme_editor_focus_shift_tab() : void {
+  if (state.focusPanel === "picker") {
+    state.focusPanel = "tree";
+  } else {
+    state.focusPanel = "picker";
+    state.pickerFocus = { type: "hex-input" };
+  }
+  updateDisplay();
+}
+registerHandler("theme_editor_focus_shift_tab", theme_editor_focus_shift_tab);
 
-  // Find previous selectable entry before current
-  for (let i = selectableEntries.length - 1; i >= 0; i--) {
-    const entry = selectableEntries[i];
-    if (entry.index < currentIndex) {
-      // Use valueByteOffset for fields, byteOffset for sections
-      const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-      editor.setBufferCursor(state.bufferId, targetOffset);
-      return;
+/**
+ * Enter key - context-dependent action
+ */
+function theme_editor_enter() : void {
+  if (state.focusPanel === "tree") {
+    const field = getFieldAtCursor();
+    if (!field) return;
+    if (field.isSection) {
+      theme_editor_toggle_section();
+    } else {
+      editColorField(field);
     }
+  } else {
+    applyPickerColor();
   }
+}
+registerHandler("theme_editor_enter", theme_editor_enter);
 
-  // Already at first selectable, stay there
-  editor.setStatus(editor.t("status.at_first_field"));
-};
+/**
+ * Escape - context-dependent
+ */
+function theme_editor_escape() : void {
+  if (state.focusPanel === "picker") {
+    state.focusPanel = "tree";
+    updateDisplay();
+  } else if (state.filterText) {
+    state.filterText = "";
+    state.filterActive = false;
+    updateDisplay();
+  } else {
+    theme_editor_close();
+  }
+}
+registerHandler("theme_editor_escape", theme_editor_escape);
 
 /**
- * Navigate to next element (Tab) - includes both fields and sections
+ * / key - activate filter
  */
-globalThis.theme_editor_nav_next_section = function(): void {
-  if (state.bufferId === null) return;
+function theme_editor_filter() : void {
+  state.filterActive = true;
+  editor.startPromptWithInitial(
+    "Filter fields:",
+    "theme-filter",
+    state.filterText
+  );
+}
+registerHandler("theme_editor_filter", theme_editor_filter);
+
+/**
+ * Handle filter prompt confirmation
+ */
+function onThemeFilterPromptConfirmed(args: {
+  prompt_type: string;
+  selected_index: number | null;
+  input: string;
+}): boolean {
+  if (args.prompt_type !== "theme-filter") return true;
 
-  const selectableEntries = getSelectableEntries();
-  const currentIndex = getCurrentSelectableIndex();
+  state.filterText = args.input.trim();
+  state.filterActive = false;
+  state.selectedIndex = 0;
+  state.treeScrollOffset = 0;
+  updateDisplay();
+  return true;
+}
+registerHandler("onThemeFilterPromptConfirmed", onThemeFilterPromptConfirmed);
 
-  // Find next selectable entry after current
-  for (const entry of selectableEntries) {
-    if (entry.index > currentIndex) {
-      // Use valueByteOffset for fields, byteOffset for sections
-      const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-      editor.setBufferCursor(state.bufferId, targetOffset);
-      return;
+editor.on("prompt_confirmed", "onThemeFilterPromptConfirmed");
+
+/**
+ * Navigate picker vertically (between sections: hex, named-colors, palette)
+ */
+function navigatePickerVertical(dir: number): void {
+  const pf = state.pickerFocus;
+  if (dir > 0) {
+    if (pf.type === "hex-input") {
+      state.pickerFocus = { type: "named-colors", index: 0 };
+    } else if (pf.type === "named-colors") {
+      const row = Math.floor(pf.index / NAMED_COLORS_PER_ROW);
+      const col = pf.index % NAMED_COLORS_PER_ROW;
+      if (row < NAMED_COLOR_GRID.length - 1) {
+        state.pickerFocus = { type: "named-colors", index: (row + 1) * NAMED_COLORS_PER_ROW + col };
+      } else {
+        state.pickerFocus = { type: "palette", row: 0, col: Math.min(col, PALETTE_COLS - 1) };
+      }
+    } else if (pf.type === "palette") {
+      if (pf.row < PALETTE_ROWS - 1) {
+        state.pickerFocus = { type: "palette", row: pf.row + 1, col: pf.col };
+      }
+    }
+  } else {
+    if (pf.type === "palette") {
+      if (pf.row > 0) {
+        state.pickerFocus = { type: "palette", row: pf.row - 1, col: pf.col };
+      } else {
+        const col = Math.min(pf.col, NAMED_COLORS_PER_ROW - 1);
+        state.pickerFocus = { type: "named-colors", index: (NAMED_COLOR_GRID.length - 1) * NAMED_COLORS_PER_ROW + col };
+      }
+    } else if (pf.type === "named-colors") {
+      const row = Math.floor(pf.index / NAMED_COLORS_PER_ROW);
+      const col = pf.index % NAMED_COLORS_PER_ROW;
+      if (row > 0) {
+        state.pickerFocus = { type: "named-colors", index: (row - 1) * NAMED_COLORS_PER_ROW + col };
+      } else {
+        state.pickerFocus = { type: "hex-input" };
+      }
     }
   }
+  updateDisplay();
+}
 
-  // Wrap to first entry
-  if (selectableEntries.length > 0) {
-    const entry = selectableEntries[0];
-    const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-    editor.setBufferCursor(state.bufferId, targetOffset);
+/**
+ * Navigate picker horizontally (within named-colors or palette grids)
+ */
+function navigatePickerHorizontal(dir: number): void {
+  const pf = state.pickerFocus;
+  if (pf.type === "named-colors") {
+    const row = Math.floor(pf.index / NAMED_COLORS_PER_ROW);
+    const col = pf.index % NAMED_COLORS_PER_ROW;
+    const newCol = col + dir;
+    if (newCol >= 0 && newCol < NAMED_COLORS_PER_ROW) {
+      const totalItems = NAMED_COLOR_GRID.length * NAMED_COLORS_PER_ROW;
+      const newIdx = row * NAMED_COLORS_PER_ROW + newCol;
+      if (newIdx < totalItems) {
+        state.pickerFocus = { type: "named-colors", index: newIdx };
+      }
+    }
+  } else if (pf.type === "palette") {
+    const newCol = pf.col + dir;
+    if (newCol >= 0 && newCol < PALETTE_COLS) {
+      state.pickerFocus = { type: "palette", row: pf.row, col: newCol };
+    }
   }
-};
+  updateDisplay();
+}
 
 /**
- * Navigate to previous element (Shift+Tab) - includes both fields and sections
+ * Apply the currently focused picker color to the selected field
  */
-globalThis.theme_editor_nav_prev_section = function(): void {
-  if (state.bufferId === null) return;
+function applyPickerColor(): void {
+  const field = getFieldAtCursor();
+  if (!field || field.isSection) return;
 
-  const selectableEntries = getSelectableEntries();
-  const currentIndex = getCurrentSelectableIndex();
+  const pf = state.pickerFocus;
+  let newColor: ColorValue | null = null;
 
-  // Find previous selectable entry before current
-  for (let i = selectableEntries.length - 1; i >= 0; i--) {
-    const entry = selectableEntries[i];
-    if (entry.index < currentIndex) {
-      // Use valueByteOffset for fields, byteOffset for sections
-      const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-      editor.setBufferCursor(state.bufferId, targetOffset);
-      return;
+  if (pf.type === "hex-input") {
+    editColorField(field);
+    return;
+  } else if (pf.type === "named-colors") {
+    const row = Math.floor(pf.index / NAMED_COLORS_PER_ROW);
+    const col = pf.index % NAMED_COLORS_PER_ROW;
+    if (row < NAMED_COLOR_GRID.length && col < NAMED_COLOR_GRID[row].length) {
+      const item = NAMED_COLOR_GRID[row][col];
+      newColor = item.value;
+    }
+  } else if (pf.type === "palette") {
+    const palette = getExtendedPalette();
+    if (pf.row < PALETTE_ROWS && pf.col < PALETTE_COLS) {
+      newColor = palette[pf.row][pf.col];
     }
   }
 
-  // Wrap to last entry
-  if (selectableEntries.length > 0) {
-    const entry = selectableEntries[selectableEntries.length - 1];
-    const targetOffset = entry.isSection ? entry.byteOffset : entry.valueByteOffset;
-    editor.setBufferCursor(state.bufferId, targetOffset);
+  if (newColor !== null) {
+    setNestedValue(state.themeData, field.path, newColor);
+    state.hasChanges = !deepEqual(state.themeData, state.originalThemeData);
+    updateDisplay();
+    editor.setStatus(editor.t("status.updated", { path: field.path }));
   }
-};
+}
+
 
 // =============================================================================
 // Public Commands
@@ -1659,7 +2340,7 @@ globalThis.theme_editor_nav_prev_section = function(): void {
 /**
  * Open the theme editor - prompts user to select theme first
  */
-globalThis.open_theme_editor = async function(): Promise<void> {
+async function open_theme_editor() : Promise<void> {
   editor.debug("[theme_editor] open_theme_editor called");
   if (isThemeEditorOpen()) {
     editor.debug("[theme_editor] already open, focusing");
@@ -1667,7 +2348,7 @@ globalThis.open_theme_editor = async function(): Promise<void> {
     if (state.splitId !== null) {
       editor.focusSplit(state.splitId);
     }
-    editor.setStatus(editor.t("status.already_open"));
+    editor.debug(editor.t("status.already_open"));
     return;
   }
 
@@ -1690,15 +2371,23 @@ globalThis.open_theme_editor = async function(): Promise<void> {
 
   const suggestions: PromptSuggestion[] = [];
 
-  // Add user themes first
-  const userThemes = listUserThemes();
-  for (const name of userThemes) {
-    const isCurrent = name === currentThemeName;
-    suggestions.push({
-      text: name,
-      description: isCurrent ? editor.t("suggestion.user_theme_current") : editor.t("suggestion.user_theme"),
-      value: `user:${name}`,
-    });
+  // Add user themes first (from themes directory)
+  const userThemesDir = editor.getThemesDir();
+  try {
+    const entries = editor.readDir(userThemesDir);
+    for (const e of entries) {
+      if (e.is_file && e.name.endsWith(".json")) {
+        const name = e.name.replace(".json", "");
+        const isCurrent = name === currentThemeName;
+        suggestions.push({
+          text: name,
+          description: isCurrent ? editor.t("suggestion.user_theme_current") : editor.t("suggestion.user_theme"),
+          value: `user:${name}`,
+        });
+      }
+    }
+  } catch {
+    // No user themes directory
   }
 
   // Add built-in themes
@@ -1713,20 +2402,29 @@ globalThis.open_theme_editor = async function(): Promise<void> {
 
   // Sort suggestions to put current theme first
   suggestions.sort((a, b) => {
-    const aIsCurrent = a.description.includes("current");
-    const bIsCurrent = b.description.includes("current");
+    const aIsCurrent = (a.description ?? "").includes("current");
+    const bIsCurrent = (b.description ?? "").includes("current");
     if (aIsCurrent && !bIsCurrent) return -1;
     if (!aIsCurrent && bIsCurrent) return 1;
     return 0;
   });
 
   editor.setPromptSuggestions(suggestions);
-};
+}
+registerHandler("open_theme_editor", open_theme_editor);
 
 /**
  * Actually open the theme editor with loaded theme data
  */
 async function doOpenThemeEditor(): Promise<void> {
+  // Initialize viewport dimensions
+  const vp = editor.getViewport();
+  if (vp) {
+    state.viewportHeight = vp.height;
+    state.viewportWidth = vp.width;
+  }
+  state.treeScrollOffset = 0;
+
   editor.debug("[theme_editor] doOpenThemeEditor: building display entries");
   // Build initial entries
   const entries = buildDisplayEntries();
@@ -1740,7 +2438,7 @@ async function doOpenThemeEditor(): Promise<void> {
     readOnly: true,
     entries: entries,
     showLineNumbers: false,
-    showCursors: true,
+    showCursors: false,
     editingDisabled: true,
   });
   const bufferId = result.bufferId;
@@ -1752,11 +2450,14 @@ async function doOpenThemeEditor(): Promise<void> {
     state.bufferId = bufferId;
     state.splitId = null;
 
-    editor.debug(`[theme_editor] doOpenThemeEditor: calling applyHighlighting...`);
-    applyHighlighting();
-    editor.debug(`[theme_editor] doOpenThemeEditor: applyHighlighting completed`);
+    // Disable line wrapping — our layout is fixed-width
+    editor.setLineWrap(bufferId, null, false);
+
+    editor.debug(`[theme_editor] doOpenThemeEditor: calling applySelectionHighlighting...`);
+    applySelectionHighlighting();
+    editor.debug(`[theme_editor] doOpenThemeEditor: applySelectionHighlighting completed`);
     editor.debug(`[theme_editor] doOpenThemeEditor: calling setStatus...`);
-    editor.setStatus(editor.t("status.ready"));
+    editor.debug(editor.t("status.ready"));
     editor.debug(`[theme_editor] doOpenThemeEditor: completed successfully`);
   } else {
     editor.setStatus(editor.t("status.open_failed"));
@@ -1766,22 +2467,24 @@ async function doOpenThemeEditor(): Promise<void> {
 /**
  * Close the theme editor
  */
-globalThis.theme_editor_close = function(): void {
+function theme_editor_close() : void {
   if (!isThemeEditorOpen()) return;
 
   if (state.hasChanges) {
     // Show confirmation prompt before closing with unsaved changes
     editor.startPrompt(editor.t("prompt.discard_confirm"), "theme-discard-confirm");
     const suggestions: PromptSuggestion[] = [
-      { text: editor.t("prompt.discard_yes"), description: "", value: "discard" },
       { text: editor.t("prompt.discard_no"), description: "", value: "keep" },
+      { text: editor.t("prompt.discard_save"), description: "", value: "save" },
+      { text: editor.t("prompt.discard_yes"), description: "", value: "discard" },
     ];
     editor.setPromptSuggestions(suggestions);
     return;
   }
 
   doCloseEditor();
-};
+}
+registerHandler("theme_editor_close", theme_editor_close);
 
 /**
  * Actually close the editor (called after confirmation or when no changes)
@@ -1798,14 +2501,19 @@ function doCloseEditor(): void {
   state.themeData = {};
   state.originalThemeData = {};
   state.hasChanges = false;
+  state.focusPanel = "tree";
+  state.pickerFocus = { type: "hex-input" };
+  state.filterText = "";
+  state.filterActive = false;
+  state.selectedIndex = 0;
 
-  editor.setStatus(editor.t("status.closed"));
+  editor.debug(editor.t("status.closed"));
 }
 
 /**
  * Handle discard confirmation prompt
  */
-globalThis.onThemeDiscardPromptConfirmed = function(args: {
+function onThemeDiscardPromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1813,41 +2521,46 @@ globalThis.onThemeDiscardPromptConfirmed = function(args: {
   if (args.prompt_type !== "theme-discard-confirm") return true;
 
   const response = args.input.trim().toLowerCase();
-  if (response === "discard" || args.selected_index === 0) {
+  if (response === "discard" || args.selected_index === 2) {
     editor.setStatus(editor.t("status.unsaved_discarded"));
     doCloseEditor();
+  } else if (response === "save" || args.selected_index === 1) {
+    state.closeAfterSave = true;
+    theme_editor_save();
   } else {
-    editor.setStatus(editor.t("status.cancelled"));
+    editor.debug(editor.t("status.cancelled"));
   }
 
   return false;
-};
+}
+registerHandler("onThemeDiscardPromptConfirmed", onThemeDiscardPromptConfirmed);
 
 /**
  * Edit color at cursor
  */
-globalThis.theme_editor_edit_color = function(): void {
+function theme_editor_edit_color() : void {
   const field = getFieldAtCursor();
   if (!field) {
-    editor.setStatus(editor.t("status.no_field"));
+    editor.debug(editor.t("status.no_field"));
     return;
   }
 
   if (field.isSection) {
-    globalThis.theme_editor_toggle_section();
+    theme_editor_toggle_section();
     return;
   }
 
   editColorField(field);
-};
+}
+registerHandler("theme_editor_edit_color", theme_editor_edit_color);
 
 /**
  * Toggle section expansion
  */
-globalThis.theme_editor_toggle_section = function(): void {
+function theme_editor_toggle_section() : void {
   const field = getFieldAtCursor();
   if (!field || !field.isSection) {
-    editor.setStatus(editor.t("status.not_section"));
+    editor.debug(editor.t("status.not_section"));
     return;
   }
 
@@ -1858,24 +2571,33 @@ globalThis.theme_editor_toggle_section = function(): void {
   }
 
   updateDisplay();
-};
+}
+registerHandler("theme_editor_toggle_section", theme_editor_toggle_section);
 
 /**
  * Open a theme (builtin or user) for editing
  */
-globalThis.theme_editor_open = function(): void {
+function theme_editor_open() : void {
   editor.startPrompt(editor.t("prompt.open_theme"), "theme-open");
 
   const suggestions: PromptSuggestion[] = [];
 
-  // Add user themes first
-  const userThemes = listUserThemes();
-  for (const name of userThemes) {
-    suggestions.push({
-      text: name,
-      description: editor.t("suggestion.user_theme"),
-      value: `user:${name}`,
-    });
+  // Add user themes first (from themes directory)
+  const userThemesDir = editor.getThemesDir();
+  try {
+    const entries = editor.readDir(userThemesDir);
+    for (const e of entries) {
+      if (e.is_file && e.name.endsWith(".json")) {
+        const name = e.name.replace(".json", "");
+        suggestions.push({
+          text: name,
+          description: editor.t("suggestion.user_theme"),
+          value: `user:${name}`,
+        });
+      }
+    }
+  } catch {
+    // No user themes directory
   }
 
   // Add built-in themes
@@ -1888,38 +2610,38 @@ globalThis.theme_editor_open = function(): void {
   }
 
   editor.setPromptSuggestions(suggestions);
-};
+}
+registerHandler("theme_editor_open", theme_editor_open);
 
 /**
  * Save theme
  */
-globalThis.theme_editor_save = async function(): Promise<void> {
+async function theme_editor_save() : Promise<void> {
   // Save cursor path for restoration after save
   state.savedCursorPath = getCurrentFieldPath();
 
   // Built-in themes require Save As
   if (state.isBuiltin) {
     editor.setStatus(editor.t("status.builtin_requires_save_as"));
-    globalThis.theme_editor_save_as();
+    theme_editor_save_as();
     return;
   }
 
   // If theme has never been saved (no path), trigger "Save As" instead
   if (!state.themePath) {
-    globalThis.theme_editor_save_as();
+    theme_editor_save_as();
     return;
   }
 
   if (!state.hasChanges) {
-    editor.setStatus(editor.t("status.no_changes"));
+    editor.debug(editor.t("status.no_changes"));
     return;
   }
 
   // Check for name collision if name has changed since last save
-  const userThemesDir = getUserThemesDir();
-  const targetPath = editor.pathJoin(userThemesDir, `${state.themeName}.json`);
+  const expectedPath = editor.pathJoin(editor.getThemesDir(), `${state.themeName}.json`);
 
-  if (state.themePath !== targetPath && editor.fileExists(targetPath)) {
+  if (state.themePath !== expectedPath && editor.themeFileExists(state.themeName)) {
     // File exists with this name - ask for confirmation
     editor.startPrompt(editor.t("prompt.overwrite_confirm", { name: state.themeName }), "theme-overwrite-confirm");
     const suggestions: PromptSuggestion[] = [
@@ -1931,12 +2653,13 @@ globalThis.theme_editor_save = async function(): Promise<void> {
   }
 
   await saveTheme(undefined, state.savedCursorPath);
-};
+}
+registerHandler("theme_editor_save", theme_editor_save);
 
 /**
  * Handle overwrite confirmation prompt
  */
-globalThis.onThemeOverwritePromptConfirmed = async function(args: {
+async function onThemeOverwritePromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -1956,16 +2679,18 @@ globalThis.onThemeOverwritePromptConfirmed = async function(args: {
   } else {
     state.pendingSaveName = null;
     state.savedCursorPath = null;
-    editor.setStatus(editor.t("status.cancelled"));
+    state.closeAfterSave = false;
+    editor.debug(editor.t("status.cancelled"));
   }
 
   return false;
-};
+}
+registerHandler("onThemeOverwritePromptConfirmed", onThemeOverwritePromptConfirmed);
 
 /**
  * Save theme as (new name)
  */
-globalThis.theme_editor_save_as = function(): void {
+function theme_editor_save_as() : void {
   // Save cursor path for restoration after save (if not already saved by theme_editor_save)
   if (!state.savedCursorPath) {
     state.savedCursorPath = getCurrentFieldPath();
@@ -1978,15 +2703,16 @@ globalThis.theme_editor_save_as = function(): void {
     description: editor.t("suggestion.current"),
     value: state.themeName,
   }]);
-};
+}
+registerHandler("theme_editor_save_as", theme_editor_save_as);
 
 /**
  * Reload theme
  */
-globalThis.theme_editor_reload = async function(): Promise<void> {
+async function theme_editor_reload() : Promise<void> {
   if (state.themePath) {
     const themeName = state.themeName;
-    const themeData = await loadThemeFile(themeName);
+    const themeData = loadThemeFile(themeName);
     if (themeData) {
       state.themeData = deepClone(themeData);
       state.originalThemeData = deepClone(themeData);
@@ -2001,19 +2727,21 @@ globalThis.theme_editor_reload = async function(): Promise<void> {
     updateDisplay();
     editor.setStatus(editor.t("status.reset"));
   }
-};
+}
+registerHandler("theme_editor_reload", theme_editor_reload);
 
 /**
  * Show help
  */
-globalThis.theme_editor_show_help = function(): void {
-  editor.setStatus(editor.t("status.help"));
-};
+function theme_editor_show_help() : void {
+  editor.debug(editor.t("status.help"));
+}
+registerHandler("theme_editor_show_help", theme_editor_show_help);
 
 /**
  * Delete the current user theme
  */
-globalThis.theme_editor_delete = function(): void {
+function theme_editor_delete() : void {
   // Can only delete saved user themes
   if (!state.themePath) {
     editor.setStatus(editor.t("status.cannot_delete_unsaved"));
@@ -2027,12 +2755,13 @@ globalThis.theme_editor_delete = function(): void {
     { text: editor.t("prompt.delete_no"), description: "", value: "cancel" },
   ];
   editor.setPromptSuggestions(suggestions);
-};
+}
+registerHandler("theme_editor_delete", theme_editor_delete);
 
 /**
  * Handle delete confirmation prompt
  */
-globalThis.onThemeDeletePromptConfirmed = async function(args: {
+async function onThemeDeletePromptConfirmed(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
@@ -2061,11 +2790,12 @@ globalThis.onThemeDeletePromptConfirmed = async function(args: {
       }
     }
   } else {
-    editor.setStatus(editor.t("status.cancelled"));
+    editor.debug(editor.t("status.cancelled"));
   }
 
   return true;
-};
+}
+registerHandler("onThemeDeletePromptConfirmed", onThemeDeletePromptConfirmed);
 
 // =============================================================================
 // Command Registration
@@ -2091,8 +2821,13 @@ editor.registerCommand("%cmd.show_help", "%cmd.show_help_desc", "theme_editor_sh
 editor.registerCommand("%cmd.delete_theme", "%cmd.delete_theme_desc", "theme_editor_delete", "theme-editor");
 editor.registerCommand("%cmd.nav_up", "%cmd.nav_up_desc", "theme_editor_nav_up", "theme-editor");
 editor.registerCommand("%cmd.nav_down", "%cmd.nav_down_desc", "theme_editor_nav_down", "theme-editor");
-editor.registerCommand("%cmd.nav_next", "%cmd.nav_next_desc", "theme_editor_nav_next_section", "theme-editor");
-editor.registerCommand("%cmd.nav_prev", "%cmd.nav_prev_desc", "theme_editor_nav_prev_section", "theme-editor");
+editor.registerCommand("%cmd.nav_left", "%cmd.nav_left_desc", "theme_editor_nav_left", "theme-editor");
+editor.registerCommand("%cmd.nav_right", "%cmd.nav_right_desc", "theme_editor_nav_right", "theme-editor");
+editor.registerCommand("%cmd.focus_tab", "%cmd.focus_tab_desc", "theme_editor_focus_tab", "theme-editor");
+editor.registerCommand("%cmd.focus_shift_tab", "%cmd.focus_shift_tab_desc", "theme_editor_focus_shift_tab", "theme-editor");
+editor.registerCommand("%cmd.enter", "%cmd.enter_desc", "theme_editor_enter", "theme-editor");
+editor.registerCommand("%cmd.escape", "%cmd.escape_desc", "theme_editor_escape", "theme-editor");
+editor.registerCommand("%cmd.filter", "%cmd.filter_desc", "theme_editor_filter", "theme-editor");
 
 // =============================================================================
 // Plugin Initialization