@fresh-editor/fresh-editor 0.1.69 → 0.1.71

package/plugins/theme_editor.ts

@@ -89,122 +89,108 @@ interface ThemeField {
 }
 
 // =============================================================================
-// Theme Field Metadata
+// Theme Schema (loaded dynamically from Rust)
 // =============================================================================
 
-const THEME_SECTIONS: ThemeSection[] = [
-  {
-    name: "editor",
-    displayName: "Editor",
-    description: "Main editor area colors",
-    fields: [
-      { key: "bg", displayName: "Background", description: "Editor background color", section: "editor" },
-      { key: "fg", displayName: "Foreground", description: "Default text color", section: "editor" },
-      { key: "cursor", displayName: "Cursor", description: "Cursor color", section: "editor" },
-      { key: "inactive_cursor", displayName: "Inactive Cursor", description: "Cursor color in unfocused splits", section: "editor" },
-      { key: "selection_bg", displayName: "Selection Background", description: "Selected text background", section: "editor" },
-      { key: "current_line_bg", displayName: "Current Line Background", description: "Background of the line containing cursor", section: "editor" },
-      { key: "line_number_fg", displayName: "Line Number Foreground", description: "Line number text color", section: "editor" },
-      { key: "line_number_bg", displayName: "Line Number Background", description: "Line number gutter background", section: "editor" },
-    ],
-  },
-  {
-    name: "ui",
-    displayName: "UI Elements",
-    description: "User interface colors (tabs, menus, status bar, etc.)",
-    fields: [
-      { key: "tab_active_fg", displayName: "Active Tab Foreground", description: "Active tab text color", section: "ui" },
-      { key: "tab_active_bg", displayName: "Active Tab Background", description: "Active tab background color", section: "ui" },
-      { key: "tab_inactive_fg", displayName: "Inactive Tab Foreground", description: "Inactive tab text color", section: "ui" },
-      { key: "tab_inactive_bg", displayName: "Inactive Tab Background", description: "Inactive tab background color", section: "ui" },
-      { key: "tab_separator_bg", displayName: "Tab Separator", description: "Tab bar separator color", section: "ui" },
-      { key: "tab_close_hover_fg", displayName: "Tab Close Hover", description: "Tab close button hover color", section: "ui" },
-      { key: "tab_hover_bg", displayName: "Tab Hover Background", description: "Tab hover background color", section: "ui" },
-      { key: "menu_bg", displayName: "Menu Background", description: "Menu bar background", section: "ui" },
-      { key: "menu_fg", displayName: "Menu Foreground", description: "Menu bar text color", section: "ui" },
-      { key: "menu_active_bg", displayName: "Menu Active Background", description: "Active menu item background", section: "ui" },
-      { key: "menu_active_fg", displayName: "Menu Active Foreground", description: "Active menu item text color", section: "ui" },
-      { key: "menu_dropdown_bg", displayName: "Menu Dropdown Background", description: "Dropdown menu background", section: "ui" },
-      { key: "menu_dropdown_fg", displayName: "Menu Dropdown Foreground", description: "Dropdown menu text color", section: "ui" },
-      { key: "menu_highlight_bg", displayName: "Menu Highlight Background", description: "Highlighted menu item background", section: "ui" },
-      { key: "menu_highlight_fg", displayName: "Menu Highlight Foreground", description: "Highlighted menu item text color", section: "ui" },
-      { key: "menu_border_fg", displayName: "Menu Border", description: "Menu border color", section: "ui" },
-      { key: "menu_separator_fg", displayName: "Menu Separator", description: "Menu separator line color", section: "ui" },
-      { key: "menu_hover_bg", displayName: "Menu Hover Background", description: "Menu item hover background", section: "ui" },
-      { key: "menu_hover_fg", displayName: "Menu Hover Foreground", description: "Menu item hover text color", section: "ui" },
-      { key: "menu_disabled_fg", displayName: "Menu Disabled Foreground", description: "Disabled menu item text color", section: "ui" },
-      { key: "menu_disabled_bg", displayName: "Menu Disabled Background", description: "Disabled menu item background", section: "ui" },
-      { key: "status_bar_fg", displayName: "Status Bar Foreground", description: "Status bar text color", section: "ui" },
-      { key: "status_bar_bg", displayName: "Status Bar Background", description: "Status bar background color", section: "ui" },
-      { key: "prompt_fg", displayName: "Prompt Foreground", description: "Command prompt text color", section: "ui" },
-      { key: "prompt_bg", displayName: "Prompt Background", description: "Command prompt background", section: "ui" },
-      { key: "prompt_selection_fg", displayName: "Prompt Selection Foreground", description: "Prompt selected text color", section: "ui" },
-      { key: "prompt_selection_bg", displayName: "Prompt Selection Background", description: "Prompt selection background", section: "ui" },
-      { key: "popup_border_fg", displayName: "Popup Border", description: "Popup window border color", section: "ui" },
-      { key: "popup_bg", displayName: "Popup Background", description: "Popup window background", section: "ui" },
-      { key: "popup_selection_bg", displayName: "Popup Selection Background", description: "Popup selected item background", section: "ui" },
-      { key: "popup_text_fg", displayName: "Popup Text Foreground", description: "Popup window text color", section: "ui" },
-      { key: "suggestion_bg", displayName: "Suggestion Background", description: "Autocomplete suggestion background", section: "ui" },
-      { key: "suggestion_selected_bg", displayName: "Suggestion Selected Background", description: "Selected suggestion background", section: "ui" },
-      { key: "help_bg", displayName: "Help Background", description: "Help panel background", section: "ui" },
-      { key: "help_fg", displayName: "Help Foreground", description: "Help panel text color", section: "ui" },
-      { key: "help_key_fg", displayName: "Help Key Foreground", description: "Help keybinding text color", section: "ui" },
-      { key: "help_separator_fg", displayName: "Help Separator", description: "Help panel separator color", section: "ui" },
-      { key: "help_indicator_fg", displayName: "Help Indicator Foreground", description: "Help indicator text color", section: "ui" },
-      { key: "help_indicator_bg", displayName: "Help Indicator Background", description: "Help indicator background", section: "ui" },
-      { key: "inline_code_bg", displayName: "Inline Code Background", description: "Inline code block background", section: "ui" },
-      { key: "split_separator_fg", displayName: "Split Separator", description: "Split pane separator color", section: "ui" },
-      { key: "split_separator_hover_fg", displayName: "Split Separator Hover", description: "Split separator hover color", section: "ui" },
-      { key: "scrollbar_track_fg", displayName: "Scrollbar Track", description: "Scrollbar track color", section: "ui" },
-      { key: "scrollbar_thumb_fg", displayName: "Scrollbar Thumb", description: "Scrollbar thumb color", section: "ui" },
-      { key: "scrollbar_track_hover_fg", displayName: "Scrollbar Track Hover", description: "Scrollbar track hover color", section: "ui" },
-      { key: "scrollbar_thumb_hover_fg", displayName: "Scrollbar Thumb Hover", description: "Scrollbar thumb hover color", section: "ui" },
-      { key: "compose_margin_bg", displayName: "Compose Margin Background", description: "Compose mode margin background", section: "ui" },
-      { key: "semantic_highlight_bg", displayName: "Semantic Highlight Background", description: "Word under cursor highlight", section: "ui" },
-      { key: "terminal_bg", displayName: "Terminal Background", description: "Embedded terminal background (use Default for transparency)", section: "ui" },
-      { key: "terminal_fg", displayName: "Terminal Foreground", description: "Embedded terminal default text color", section: "ui" },
-    ],
-  },
-  {
-    name: "search",
-    displayName: "Search",
-    description: "Search result highlighting colors",
-    fields: [
-      { key: "match_bg", displayName: "Match Background", description: "Search match background color", section: "search" },
-      { key: "match_fg", displayName: "Match Foreground", description: "Search match text color", section: "search" },
-    ],
-  },
-  {
-    name: "diagnostic",
-    displayName: "Diagnostics",
-    description: "LSP diagnostic colors (errors, warnings, etc.)",
-    fields: [
-      { key: "error_fg", displayName: "Error Foreground", description: "Error message text color", section: "diagnostic" },
-      { key: "error_bg", displayName: "Error Background", description: "Error highlight background", section: "diagnostic" },
-      { key: "warning_fg", displayName: "Warning Foreground", description: "Warning message text color", section: "diagnostic" },
-      { key: "warning_bg", displayName: "Warning Background", description: "Warning highlight background", section: "diagnostic" },
-      { key: "info_fg", displayName: "Info Foreground", description: "Info message text color", section: "diagnostic" },
-      { key: "info_bg", displayName: "Info Background", description: "Info highlight background", section: "diagnostic" },
-      { key: "hint_fg", displayName: "Hint Foreground", description: "Hint message text color", section: "diagnostic" },
-      { key: "hint_bg", displayName: "Hint Background", description: "Hint highlight background", section: "diagnostic" },
-    ],
-  },
-  {
-    name: "syntax",
-    displayName: "Syntax Highlighting",
-    description: "Code syntax highlighting colors",
-    fields: [
-      { key: "keyword", displayName: "Keyword", description: "Language keywords (if, for, fn, etc.)", section: "syntax" },
-      { key: "string", displayName: "String", description: "String literals", section: "syntax" },
-      { key: "comment", displayName: "Comment", description: "Code comments", section: "syntax" },
-      { key: "function", displayName: "Function", description: "Function names", section: "syntax" },
-      { key: "type", displayName: "Type", description: "Type names", section: "syntax" },
-      { key: "variable", displayName: "Variable", description: "Variable names", section: "syntax" },
-      { key: "constant", displayName: "Constant", description: "Constants and literals", section: "syntax" },
-      { key: "operator", displayName: "Operator", description: "Operators (+, -, =, etc.)", section: "syntax" },
-    ],
-  },
-];
+/**
+ * Cached theme sections loaded from the API.
+ * This is populated on first use and reflects the actual theme structure from Rust.
+ */
+let cachedThemeSections: ThemeSection[] | null = null;
+
+/**
+ * Load theme sections from the Rust API.
+ * Parses the raw JSON Schema and resolves $ref references.
+ * Uses i18n keys for localized display names.
+ */
+function loadThemeSections(): ThemeSection[] {
+  if (cachedThemeSections !== null) {
+    return cachedThemeSections;
+  }
+
+  const schema = editor.getThemeSchema();
+  const defs = schema.$defs || {};
+
+  // Helper to resolve $ref and get the referenced schema
+  const resolveRef = (refStr: string): Record<string, unknown> | null => {
+    // $ref format: "#/$defs/TypeName"
+    const prefix = "#/$defs/";
+    if (refStr.startsWith(prefix)) {
+      const typeName = refStr.slice(prefix.length);
+      return defs[typeName] as Record<string, unknown> || null;
+    }
+    return null;
+  };
+
+  const sections: ThemeSection[] = [];
+  const properties = schema.properties || {};
+
+  // Section ordering
+  const sectionOrder = ["editor", "ui", "search", "diagnostic", "syntax"];
+
+  for (const [sectionName, sectionSchema] of Object.entries(properties)) {
+    // Skip "name" field - it's not a color section
+    if (sectionName === "name") continue;
+
+    const sectionObj = sectionSchema as Record<string, unknown>;
+    const sectionDesc = (sectionObj.description as string) || "";
+
+    // Resolve $ref to get the actual type definition
+    const refStr = sectionObj.$ref as string | undefined;
+    const resolvedSchema = refStr ? resolveRef(refStr) : sectionObj;
+    if (!resolvedSchema) continue;
+
+    const sectionProps = resolvedSchema.properties as Record<string, unknown> || {};
+    const fields: ThemeFieldDef[] = [];
+
+    for (const [fieldName, fieldSchema] of Object.entries(sectionProps)) {
+      const fieldObj = fieldSchema as Record<string, unknown>;
+      const fieldDesc = (fieldObj.description as string) || "";
+
+      // Generate i18n keys from field names
+      const i18nName = `field.${fieldName}`;
+      const i18nDesc = `field.${fieldName}_desc`;
+
+      fields.push({
+        key: fieldName,
+        displayName: editor.t(i18nName) || fieldDesc || fieldName,
+        description: editor.t(i18nDesc) || fieldDesc,
+        section: sectionName,
+      });
+    }
+
+    // Sort fields alphabetically (use simple comparison to avoid ICU issues in Deno)
+    fields.sort((a, b) => (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+
+    // Generate i18n keys for section
+    const sectionI18nName = `section.${sectionName}`;
+    const sectionI18nDesc = `section.${sectionName}_desc`;
+
+    sections.push({
+      name: sectionName,
+      displayName: editor.t(sectionI18nName) || sectionDesc || sectionName,
+      description: editor.t(sectionI18nDesc) || sectionDesc,
+      fields,
+    });
+  }
+
+  // Sort sections in logical order
+  sections.sort((a, b) => {
+    const aIdx = sectionOrder.indexOf(a.name);
+    const bIdx = sectionOrder.indexOf(b.name);
+    return (aIdx === -1 ? 99 : aIdx) - (bIdx === -1 ? 99 : bIdx);
+  });
+
+  cachedThemeSections = sections;
+  return cachedThemeSections;
+}
+
+/**
+ * Get theme sections (loads from API if not cached)
+ */
+function getThemeSections(): ThemeSection[] {
+  return loadThemeSections();
+}
 
 // =============================================================================
 // State Management
@@ -234,6 +220,12 @@ interface ThemeEditorState {
   hasChanges: boolean;
   /** Available built-in themes */
   builtinThemes: string[];
+  /** Pending save name for overwrite confirmation */
+  pendingSaveName: string | null;
+  /** Whether current theme is a built-in (requires Save As) */
+  isBuiltin: boolean;
+  /** Saved cursor field path (for restoring after prompts) */
+  savedCursorPath: string | null;
 }
 
 const state: ThemeEditorState = {
@@ -251,6 +243,9 @@ const state: ThemeEditorState = {
   selectedIndex: 0,
   hasChanges: false,
   builtinThemes: [],
+  pendingSaveName: null,
+  isBuiltin: false,
+  savedCursorPath: null,
 };
 
 // =============================================================================
@@ -266,10 +261,26 @@ const colors = {
   modified: [255, 255, 100] as RGB,        // Yellow
   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
 };
 
-// Color block character for swatches
-const COLOR_BLOCK = "██";
+// =============================================================================
+// Keyboard Shortcuts (defined once, used in mode and i18n)
+// =============================================================================
+
+/**
+ * Keyboard shortcuts for the theme editor.
+ * These are defined once and used both in the mode definition and in the UI hints.
+ */
+const SHORTCUTS = {
+  open: "C-o",
+  save: "C-s",
+  save_as: "C-S-s",
+  delete: "C-d",
+  reload: "C-r",
+  close: "C-q",
+  help: "F1",
+};
 
 // =============================================================================
 // Mode Definition
@@ -279,18 +290,24 @@ 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_toggle_section"],
-    ["c", "theme_editor_copy_from_builtin"],
-    ["n", "theme_editor_set_name"],
-    ["s", "theme_editor_save"],
-    ["S", "theme_editor_save_as"],
-    ["d", "theme_editor_set_as_default"],
-    ["q", "theme_editor_close"],
+    ["Tab", "theme_editor_nav_next_section"],
+    ["S-Tab", "theme_editor_nav_prev_section"],
+    ["Up", "theme_editor_nav_up"],
+    ["Down", "theme_editor_nav_down"],
     ["Escape", "theme_editor_close"],
-    ["r", "theme_editor_reload"],
-    ["?", "theme_editor_show_help"],
+    [SHORTCUTS.help, "theme_editor_show_help"],
+
+    // Ctrl+ shortcuts (match common editor conventions)
+    [SHORTCUTS.open, "theme_editor_open"],
+    [SHORTCUTS.save, "theme_editor_save"],
+    [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
 );
@@ -450,7 +467,7 @@ async function loadBuiltinThemes(): Promise<string[]> {
 }
 
 /**
- * Load a theme file
+ * Load a theme file from built-in themes directory
  */
 async function loadThemeFile(name: string): Promise<Record<string, unknown> | null> {
   const themesDir = findThemesDir();
@@ -465,6 +482,37 @@ async function loadThemeFile(name: string): Promise<Record<string, unknown> | nu
   }
 }
 
+/**
+ * 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 XDG_CONFIG_HOME if set, otherwise falls back to $HOME/.config
@@ -494,16 +542,17 @@ function getUserThemesDir(): string {
  */
 function buildVisibleFields(): ThemeField[] {
   const fields: ThemeField[] = [];
+  const themeSections = getThemeSections();
 
-  for (const section of THEME_SECTIONS) {
+  for (const section of themeSections) {
     const expanded = state.expandedSections.has(section.name);
 
-    // Section header
+    // Section header - displayName and description are already translated in getThemeSections()
     fields.push({
       def: {
         key: section.name,
-        displayName: editor.t(`section.${section.name}`),
-        description: editor.t(`section.${section.name}_desc`),
+        displayName: section.displayName,
+        description: section.description,
         section: section.name,
       },
       value: [0, 0, 0], // Placeholder
@@ -519,12 +568,9 @@ function buildVisibleFields(): ThemeField[] {
         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,
-            displayName: editor.t(`field.${fieldDef.key}`),
-            description: editor.t(`field.${fieldDef.key}_desc`),
-          },
+          def: fieldDef,
           value,
           path,
           depth: 1,
@@ -566,6 +612,21 @@ function buildDisplayEntries(): TextPropertyEntry[] {
     });
   }
 
+  // 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" },
+  });
+
+  entries.push({
+    text: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",
+    properties: { type: "separator" },
+  });
+
   entries.push({
     text: "\n",
     properties: { type: "blank" },
@@ -603,11 +664,11 @@ function buildDisplayEntries(): TextPropertyEntry[] {
         properties: { type: "description", path: field.path },
       });
 
-      // Color field with swatch
+      // Color field with swatch characters (X for fg preview, space for bg preview)
       const colorStr = formatColorValue(field.value);
 
       entries.push({
-        text: `${indent}  ${field.def.displayName}: ${colorStr}\n`,
+        text: `${indent}  ${field.def.displayName}: X  ${colorStr}\n`,
         properties: {
           type: "field",
           path: field.path,
@@ -623,25 +684,12 @@ function buildDisplayEntries(): TextPropertyEntry[] {
     });
   }
 
-  // Footer
-  entries.push({
-    text: "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n",
-    properties: { type: "separator" },
-  });
-  entries.push({
-    text: editor.t("panel.nav_hint") + "\n",
-    properties: { type: "footer" },
-  });
-  entries.push({
-    text: editor.t("panel.action_hint") + "\n",
-    properties: { type: "footer" },
-  });
-
   return entries;
 }
 
 /**
- * Helper to add a colored overlay
+ * 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,
@@ -650,7 +698,20 @@ function addColorOverlay(
   color: RGB,
   bold: boolean = false
 ): void {
-  editor.addOverlay(bufferId, "theme", start, end, color[0], color[1], color[2], false, bold, false);
+  editor.addOverlay(bufferId, "theme", start, end, color[0], color[1], color[2], false, bold, false, -1, -1, -1, false);
+}
+
+/**
+ * Helper to add a background highlight overlay
+ * addOverlay signature: (bufferId, namespace, start, end, r, g, b, underline, bold, italic, bg_r, bg_g, bg_b, extend_to_line_end)
+ */
+function addBackgroundHighlight(
+  bufferId: number,
+  start: number,
+  end: number,
+  bgColor: RGB
+): void {
+  editor.addOverlay(bufferId, "theme-selection", start, end, -1, -1, -1, false, false, false, bgColor[0], bgColor[1], bgColor[2], true);
 }
 
 /**
@@ -669,70 +730,6 @@ function isSpecialColor(value: ColorValue): boolean {
   return typeof value === "string" && SPECIAL_COLORS.includes(value);
 }
 
-/**
- * Add color swatches using virtual text
- */
-function addColorSwatches(): void {
-  if (state.bufferId === null) return;
-
-  // Clear existing swatches
-  editor.removeVirtualTextsByPrefix(state.bufferId, "theme-swatch-");
-
-  const entries = buildDisplayEntries();
-  let byteOffset = 0;
-
-  for (const entry of entries) {
-    const props = entry.properties as Record<string, unknown>;
-
-    if (props.type === "field" && props.colorValue) {
-      const colorValue = props.colorValue as ColorValue;
-      const path = props.path as string;
-
-      // Find position after the field name colon
-      const colonIdx = entry.text.indexOf(":");
-      if (colonIdx >= 0) {
-        const swatchPos = byteOffset + getUtf8ByteLength(entry.text.substring(0, colonIdx + 2));
-        const swatchId = `theme-swatch-${path}`;
-
-        if (isSpecialColor(colorValue)) {
-          // For Default/Reset, show a placeholder indicator
-          editor.addVirtualText(
-            state.bufferId,
-            swatchId,
-            swatchPos,
-            "∅ ",  // Empty set symbol to indicate "use default"
-            150,   // Gray color for the indicator
-            150,
-            150,
-            true,
-            false
-          );
-        } else {
-          const rgb = parseColorToRgb(colorValue);
-          if (rgb) {
-            const useBg = isBackgroundColorField(path);
-
-            // Add swatch with a trailing space included in the text
-            editor.addVirtualText(
-              state.bufferId,
-              swatchId,
-              swatchPos,
-              useBg ? "   " : COLOR_BLOCK + " ",  // Include trailing space in swatch text
-              rgb[0],
-              rgb[1],
-              rgb[2],
-              true,
-              useBg  // use as background color
-            );
-          }
-        }
-      }
-    }
-
-    byteOffset += getUtf8ByteLength(entry.text);
-  }
-}
-
 /**
  * Apply syntax highlighting
  */
@@ -741,15 +738,26 @@ function applyHighlighting(): void {
 
   const bufferId = state.bufferId;
   editor.clearNamespace(bufferId, "theme");
+  editor.clearNamespace(bufferId, "theme-selection");
 
   const entries = 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);
@@ -766,8 +774,26 @@ function applyHighlighting(): void {
         const nameEnd = byteOffset + getUtf8ByteLength(text.substring(0, colonPos));
         addColorOverlay(bufferId, byteOffset, nameEnd, colors.fieldName);
 
-        // Value - custom color (green)
-        const valueStart = nameEnd + getUtf8ByteLength(": ");
+        // 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, -1, -1, -1, false, false, false, rgb[0], rgb[1], rgb[2], false);
+        }
+
+        // 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") {
@@ -776,20 +802,25 @@ function applyHighlighting(): void {
 
     byteOffset += textLen;
   }
-
-  // Add color swatches
-  addColorSwatches();
 }
 
 /**
- * Update display
+ * Update display (preserves cursor position)
  */
 function updateDisplay(): void {
   if (state.bufferId === null) return;
 
+  // Save current field path before updating
+  const currentPath = getCurrentFieldPath();
+
   const entries = buildDisplayEntries();
   editor.setVirtualBufferContent(state.bufferId, entries);
   applyHighlighting();
+
+  // Restore cursor to the same field if possible
+  if (currentPath) {
+    moveCursorToField(currentPath);
+  }
 }
 
 // =============================================================================
@@ -814,66 +845,87 @@ function getFieldAtCursor(): ThemeField | null {
 }
 
 /**
- * Start color editing prompt
+ * Get field by path
  */
-function editColorField(field: ThemeField): void {
-  const currentValue = formatColorValue(field.value);
-
-  // Use startPromptWithInitial to pre-fill with current value
-  editor.startPromptWithInitial(editor.t("prompt.color_input", { field: field.def.displayName }), `theme-color-${field.path}`, currentValue);
+function getFieldByPath(path: string): ThemeField | null {
+  return state.visibleFields.find(f => f.path === path) || null;
+}
 
-  // Build suggestions with named colors and current value
+/**
+ * Build color suggestions for a field
+ */
+function buildColorSuggestions(field: ThemeField): PromptSuggestion[] {
+  const currentValue = formatColorValue(field.value);
   const suggestions: PromptSuggestion[] = [
-    {
-      text: currentValue,
-      description: editor.t("suggestion.current"),
-      value: currentValue,
-    },
+    { text: currentValue, description: editor.t("suggestion.current"), value: currentValue },
   ];
 
-  // Add special colors first (Default/Reset for terminal transparency)
+  // Add special colors (Default/Reset for terminal transparency)
   for (const name of SPECIAL_COLORS) {
-    suggestions.push({
-      text: name,
-      description: editor.t("suggestion.terminal_native"),
-      value: name,
-    });
+    suggestions.push({ text: name, description: editor.t("suggestion.terminal_native"), value: name });
   }
 
-  // Add named colors as suggestions with hex format
+  // Add named colors with hex format
   for (const name of NAMED_COLOR_LIST) {
     const rgb = NAMED_COLORS[name];
     const hexValue = rgbToHex(rgb[0], rgb[1], rgb[2]);
-    suggestions.push({
-      text: name,
-      description: hexValue,
-      value: name,
-    });
+    suggestions.push({ text: name, description: hexValue, value: name });
   }
 
-  editor.setPromptSuggestions(suggestions);
+  return suggestions;
+}
+
+/**
+ * Start color editing prompt
+ */
+function editColorField(field: ThemeField): void {
+  const currentValue = formatColorValue(field.value);
+  editor.startPromptWithInitial(
+    editor.t("prompt.color_input", { field: field.def.displayName }),
+    `theme-color-${field.path}`,
+    currentValue
+  );
+  editor.setPromptSuggestions(buildColorSuggestions(field));
+}
+
+interface ParseColorResult {
+  value?: ColorValue;
+  error?: string;
 }
 
 /**
- * Parse color input from user
+ * Parse color input from user with detailed error messages
  */
-function parseColorInput(input: string): ColorValue | null {
+function parseColorInput(input: string): ParseColorResult {
   input = input.trim();
 
+  if (!input) {
+    return { error: "empty" };
+  }
+
   // Check for special colors (Default/Reset - use terminal's native color)
   if (SPECIAL_COLORS.includes(input)) {
-    return input;
+    return { value: input };
   }
 
   // Check for named color
   if (input in NAMED_COLORS) {
-    return input;
+    return { value: input };
   }
 
   // Try to parse as hex color #RRGGBB
-  const hexResult = hexToRgb(input);
-  if (hexResult) {
-    return hexResult;
+  if (input.startsWith("#")) {
+    const hex = input.slice(1);
+    if (hex.length !== 6) {
+      return { error: "hex_length" };
+    }
+    if (!/^[0-9A-Fa-f]{6}$/.test(hex)) {
+      return { error: "hex_invalid" };
+    }
+    const hexResult = hexToRgb(input);
+    if (hexResult) {
+      return { value: hexResult };
+    }
   }
 
   // Try to parse as RGB array [r, g, b]
@@ -882,19 +934,46 @@ function parseColorInput(input: string): ColorValue | null {
     const r = parseInt(rgbMatch[1], 10);
     const g = parseInt(rgbMatch[2], 10);
     const b = parseInt(rgbMatch[3], 10);
-
-    if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
-      return [r, g, b];
+    if (r > 255 || g > 255 || b > 255) {
+      return { error: "rgb_range" };
     }
+    return { value: [r, g, b] };
   }
 
-  return null;
+  // Unknown format
+  return { error: "unknown" };
 }
 
 // =============================================================================
 // Prompt Handlers
 // =============================================================================
 
+/**
+ * Find best matching color name for partial input
+ */
+function findMatchingColor(input: string): string | null {
+  const lower = input.toLowerCase();
+  // First try exact match
+  for (const name of Object.keys(NAMED_COLORS)) {
+    if (name.toLowerCase() === lower) return name;
+  }
+  for (const name of SPECIAL_COLORS) {
+    if (name.toLowerCase() === lower) return name;
+  }
+  // Then try prefix match
+  for (const name of Object.keys(NAMED_COLORS)) {
+    if (name.toLowerCase().startsWith(lower)) return name;
+  }
+  for (const name of SPECIAL_COLORS) {
+    if (name.toLowerCase().startsWith(lower)) return name;
+  }
+  // Then try contains match
+  for (const name of Object.keys(NAMED_COLORS)) {
+    if (name.toLowerCase().includes(lower)) return name;
+  }
+  return null;
+}
+
 /**
  * Handle color prompt confirmation
  */
@@ -906,65 +985,112 @@ globalThis.onThemeColorPromptConfirmed = function(args: {
   if (!args.prompt_type.startsWith("theme-color-")) return true;
 
   const path = args.prompt_type.replace("theme-color-", "");
-  const newValue = parseColorInput(args.input);
+  const field = getFieldByPath(path);
+  if (!field) return true;
 
-  if (newValue !== null) {
-    setNestedValue(state.themeData, path, newValue);
+  const result = parseColorInput(args.input);
+
+  if (result.value !== undefined) {
+    // Valid color - apply it
+    setNestedValue(state.themeData, path, result.value);
     state.hasChanges = !deepEqual(state.themeData, state.originalThemeData);
-    updateDisplay();
+
+    const entries = buildDisplayEntries();
+    if (state.bufferId !== null) {
+      editor.setVirtualBufferContent(state.bufferId, entries);
+      applyHighlighting();
+    }
+    moveCursorToField(path);
     editor.setStatus(editor.t("status.updated", { path }));
   } else {
-    editor.setStatus(editor.t("status.invalid_color"));
+    // Invalid input - try to find a matching color name
+    const matchedColor = findMatchingColor(args.input);
+    if (matchedColor) {
+      // Found a match - reopen prompt with the matched value
+      editor.startPromptWithInitial(
+        editor.t("prompt.color_input", { field: field.def.displayName }),
+        `theme-color-${path}`,
+        matchedColor
+      );
+      // Rebuild suggestions
+      const suggestions: PromptSuggestion[] = buildColorSuggestions(field);
+      editor.setPromptSuggestions(suggestions);
+      editor.setStatus(editor.t("status.autocompleted", { value: matchedColor }));
+    } else {
+      // No match found - reopen prompt with original input
+      editor.startPromptWithInitial(
+        editor.t("prompt.color_input", { field: field.def.displayName }),
+        `theme-color-${path}`,
+        args.input
+      );
+      const suggestions: PromptSuggestion[] = buildColorSuggestions(field);
+      editor.setPromptSuggestions(suggestions);
+
+      const errorKey = `error.color_${result.error}`;
+      editor.setStatus(editor.t(errorKey, { input: args.input }));
+    }
   }
 
   return true;
 };
 
 /**
- * Handle theme name prompt
+ * Handle open theme prompt (both builtin and user themes)
  */
-globalThis.onThemeNamePromptConfirmed = function(args: {
+globalThis.onThemeOpenPromptConfirmed = async function(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
-}): boolean {
-  if (args.prompt_type !== "theme-name") return true;
-
-  const name = args.input.trim();
-  if (name) {
-    state.themeName = name;
-    state.themeData.name = name;
-    state.hasChanges = true;
-    updateDisplay();
-    editor.setStatus(editor.t("status.name_set", { name }));
-  }
+}): Promise<boolean> {
+  if (args.prompt_type !== "theme-open") return true;
 
-  return true;
-};
+  const value = args.input.trim();
 
-/**
- * Handle copy from builtin prompt
- */
-globalThis.onThemeCopyPromptConfirmed = async function(args: {
-  prompt_type: string;
-  selected_index: number | null;
-  input: string;
-}): Promise<boolean> {
-  if (args.prompt_type !== "theme-copy-builtin") return true;
+  // Parse the value to determine if it's user or builtin
+  let isBuiltin = false;
+  let themeName = value;
 
-  const themeName = args.input.trim();
-  const themeData = await loadThemeFile(themeName);
+  if (value.startsWith("user:")) {
+    themeName = value.slice(5);
+    isBuiltin = false;
+  } else if (value.startsWith("builtin:")) {
+    themeName = value.slice(8);
+    isBuiltin = true;
+  } else {
+    // Fallback: check if it's a builtin theme
+    isBuiltin = state.builtinThemes.includes(value);
+  }
 
-  if (themeData) {
-    state.themeData = deepClone(themeData);
-    state.themeName = `${themeName}-custom`;
-    state.themeData.name = state.themeName;
-    state.themePath = null; // New theme, not saved yet
-    state.hasChanges = true;
-    updateDisplay();
-    editor.setStatus(editor.t("status.copied", { theme: themeName }));
+  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 }));
+    }
   } else {
-    editor.setStatus(editor.t("status.load_failed", { name: themeName }));
+    // 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 }));
+    }
   }
 
   return true;
@@ -982,47 +1108,131 @@ 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`);
+
+    if (editor.fileExists(targetPath)) {
+      // Store pending save name for overwrite confirmation
+      state.pendingSaveName = name;
+      editor.startPrompt(editor.t("prompt.overwrite_confirm", { name }), "theme-overwrite-confirm");
+      const suggestions: PromptSuggestion[] = [
+        { text: editor.t("prompt.overwrite_yes"), description: "", value: "overwrite" },
+        { text: editor.t("prompt.overwrite_no"), description: "", value: "cancel" },
+      ];
+      editor.setPromptSuggestions(suggestions);
+      return true;
+    }
+
     state.themeName = name;
     state.themeData.name = name;
-    await saveTheme(name);
+    const restorePath = state.savedCursorPath;
+    state.savedCursorPath = null;
+    await saveTheme(name, restorePath);
+  } else {
+    state.savedCursorPath = null;
   }
 
   return true;
 };
 
 /**
- * Handle set as default prompt
+ * Handle prompt cancellation
+ */
+globalThis.onThemePromptCancelled = function(args: { prompt_type: string }): boolean {
+  if (!args.prompt_type.startsWith("theme-")) return true;
+
+  // Clear saved cursor path on cancellation
+  state.savedCursorPath = null;
+  state.pendingSaveName = null;
+
+  editor.setStatus(editor.t("status.cancelled"));
+  return true;
+};
+
+/**
+ * Handle initial theme selection prompt (when opening editor)
  */
-globalThis.onThemeSetDefaultPromptConfirmed = async function(args: {
+globalThis.onThemeSelectInitialPromptConfirmed = async function(args: {
   prompt_type: string;
   selected_index: number | null;
   input: string;
 }): Promise<boolean> {
-  if (args.prompt_type !== "theme-set-default") return true;
+  if (args.prompt_type !== "theme-select-initial") return true;
 
-  const themeName = args.input.trim();
-  if (themeName) {
-    await setThemeAsDefault(themeName);
+  const value = args.input.trim();
+
+  // Parse the value to determine if it's user or builtin
+  let isBuiltin = false;
+  let themeName = value;
+
+  if (value.startsWith("user:")) {
+    themeName = value.slice(5);
+    isBuiltin = false;
+  } else if (value.startsWith("builtin:")) {
+    themeName = value.slice(8);
+    isBuiltin = true;
+  } else {
+    // Fallback: check if it's a builtin theme
+    isBuiltin = state.builtinThemes.includes(value);
   }
 
-  return true;
-};
+  editor.setStatus(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;
+    }
+  } 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;
+    }
+  }
+
+  // Now open the editor with loaded theme
+  await doOpenThemeEditor();
 
-/**
- * Handle prompt cancellation
- */
-globalThis.onThemePromptCancelled = function(args: { prompt_type: string }): boolean {
-  if (!args.prompt_type.startsWith("theme-")) return true;
-  editor.setStatus(editor.t("status.cancelled"));
   return true;
 };
 
 // Register prompt handlers
+editor.on("prompt_confirmed", "onThemeSelectInitialPromptConfirmed");
 editor.on("prompt_confirmed", "onThemeColorPromptConfirmed");
-editor.on("prompt_confirmed", "onThemeNamePromptConfirmed");
-editor.on("prompt_confirmed", "onThemeCopyPromptConfirmed");
+editor.on("prompt_confirmed", "onThemeOpenPromptConfirmed");
 editor.on("prompt_confirmed", "onThemeSaveAsPromptConfirmed");
-editor.on("prompt_confirmed", "onThemeSetDefaultPromptConfirmed");
+editor.on("prompt_confirmed", "onThemeDiscardPromptConfirmed");
+editor.on("prompt_confirmed", "onThemeOverwritePromptConfirmed");
+editor.on("prompt_confirmed", "onThemeDeletePromptConfirmed");
 editor.on("prompt_cancelled", "onThemePromptCancelled");
 
 // =============================================================================
@@ -1031,8 +1241,10 @@ editor.on("prompt_cancelled", "onThemePromptCancelled");
 
 /**
  * Save theme to file
+ * @param name - Theme name to save as
+ * @param restorePath - Optional field path to restore cursor to after save
  */
-async function saveTheme(name?: string): Promise<boolean> {
+async function saveTheme(name?: string, restorePath?: string | null): Promise<boolean> {
   const themeName = name || state.themeName;
   const userThemesDir = getUserThemesDir();
 
@@ -1056,11 +1268,25 @@ async function saveTheme(name?: string): Promise<boolean> {
 
     state.themePath = themePath;
     state.themeName = themeName;
+    state.isBuiltin = false; // After saving, it's now a user theme
     state.originalThemeData = deepClone(state.themeData);
     state.hasChanges = false;
-    updateDisplay();
 
-    editor.setStatus(editor.t("status.saved", { path: themePath }));
+    // Update display
+    const entries = buildDisplayEntries();
+    if (state.bufferId !== null) {
+      editor.setVirtualBufferContent(state.bufferId, entries);
+      applyHighlighting();
+    }
+
+    // Restore cursor position if provided
+    if (restorePath) {
+      moveCursorToField(restorePath);
+    }
+
+    // Automatically apply the saved theme
+    editor.applyTheme(themeName);
+    editor.setStatus(editor.t("status.saved_and_applied", { name: themeName }));
     return true;
   } catch (e) {
     editor.setStatus(editor.t("status.save_failed", { error: String(e) }));
@@ -1069,20 +1295,7 @@ async function saveTheme(name?: string): Promise<boolean> {
 }
 
 /**
- * Set a theme as the default in config and apply it immediately
- */
-async function setThemeAsDefault(themeName: string): Promise<void> {
-  try {
-    // Use the editor API to apply and persist the theme
-    editor.applyTheme(themeName);
-    editor.setStatus(editor.t("status.default_set", { name: themeName }));
-  } catch (e) {
-    editor.setStatus(editor.t("status.apply_failed", { error: String(e) }));
-  }
-}
-
-/**
- * Create a default/empty theme
+ * Create a default/empty theme
  */
 function createDefaultTheme(): Record<string, unknown> {
   return {
@@ -1174,12 +1387,228 @@ globalThis.onThemeEditorCursorMoved = function(data: {
 
 editor.on("cursor_moved", "onThemeEditorCursorMoved");
 
+/**
+ * Handle buffer_closed event to reset state when buffer is closed by any means
+ */
+globalThis.onThemeEditorBufferClosed = function(data: {
+  buffer_id: number;
+}): void {
+  if (state.bufferId !== null && data.buffer_id === state.bufferId) {
+    // Reset state when our buffer is closed
+    state.isOpen = false;
+    state.bufferId = null;
+    state.splitId = null;
+    state.themeData = {};
+    state.originalThemeData = {};
+    state.hasChanges = false;
+  }
+};
+
+editor.on("buffer_closed", "onThemeEditorBufferClosed");
+
+// =============================================================================
+// Smart Navigation - Skip Non-Selectable Lines
+// =============================================================================
+
+interface SelectableEntry {
+  byteOffset: number;
+  valueByteOffset: number; // Position at the value (after "field: ")
+  index: number;
+  isSection: boolean;
+  path: string;
+}
+
+/**
+ * Get byte offsets for all selectable entries (fields and sections)
+ */
+function getSelectableEntries(): SelectableEntry[] {
+  const entries = buildDisplayEntries();
+  const selectableEntries: SelectableEntry[] = [];
+  let byteOffset = 0;
+
+  for (const entry of entries) {
+    const props = entry.properties as Record<string, unknown>;
+    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));
+        }
+      }
+
+      selectableEntries.push({
+        byteOffset,
+        valueByteOffset,
+        index: props.index as number,
+        isSection: entryType === "section",
+        path,
+      });
+    }
+
+    byteOffset += getUtf8ByteLength(entry.text);
+  }
+
+  return selectableEntries;
+}
+
+/**
+ * Get the current selectable entry index based on cursor position
+ */
+function getCurrentSelectableIndex(): number {
+  if (state.bufferId === null) return -1;
+
+  const props = editor.getTextPropertiesAtCursor(state.bufferId);
+  if (props.length > 0 && typeof props[0].index === "number") {
+    return props[0].index as number;
+  }
+  return -1;
+}
+
+/**
+ * Get the current field path at cursor
+ */
+function getCurrentFieldPath(): string | null {
+  if (state.bufferId === null) return null;
+
+  const props = editor.getTextPropertiesAtCursor(state.bufferId);
+  if (props.length > 0 && typeof props[0].path === "string") {
+    return props[0].path as string;
+  }
+  return null;
+}
+
+/**
+ * Move cursor to a field by path (positions at value for fields)
+ */
+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);
+      return;
+    }
+  }
+}
+
+/**
+ * Navigate to the next selectable field/section
+ */
+globalThis.theme_editor_nav_down = function(): void {
+  if (state.bufferId === null) return;
+
+  const selectableEntries = getSelectableEntries();
+  const currentIndex = getCurrentSelectableIndex();
+
+  // 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;
+    }
+  }
+
+  // Already at last selectable, stay there
+  editor.setStatus(editor.t("status.at_last_field"));
+};
+
+/**
+ * Navigate to the previous selectable field/section
+ */
+globalThis.theme_editor_nav_up = function(): void {
+  if (state.bufferId === null) return;
+
+  const selectableEntries = getSelectableEntries();
+  const currentIndex = getCurrentSelectableIndex();
+
+  // 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;
+    }
+  }
+
+  // Already at first selectable, stay there
+  editor.setStatus(editor.t("status.at_first_field"));
+};
+
+/**
+ * Navigate to next element (Tab) - includes both fields and sections
+ */
+globalThis.theme_editor_nav_next_section = function(): void {
+  if (state.bufferId === null) return;
+
+  const selectableEntries = getSelectableEntries();
+  const currentIndex = getCurrentSelectableIndex();
+
+  // 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;
+    }
+  }
+
+  // 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 to previous element (Shift+Tab) - includes both fields and sections
+ */
+globalThis.theme_editor_nav_prev_section = function(): void {
+  if (state.bufferId === null) return;
+
+  const selectableEntries = getSelectableEntries();
+  const currentIndex = getCurrentSelectableIndex();
+
+  // 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;
+    }
+  }
+
+  // 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);
+  }
+};
+
 // =============================================================================
 // Public Commands
 // =============================================================================
 
 /**
- * Open the theme editor
+ * Open the theme editor - prompts user to select theme first
  */
 globalThis.open_theme_editor = async function(): Promise<void> {
   if (state.isOpen) {
@@ -1187,8 +1616,6 @@ globalThis.open_theme_editor = async function(): Promise<void> {
     return;
   }
 
-  editor.setStatus(editor.t("status.loading"));
-
   // Save context
   state.sourceSplitId = editor.getActiveSplitId();
   state.sourceBufferId = editor.getActiveBufferId();
@@ -1196,13 +1623,52 @@ globalThis.open_theme_editor = async function(): Promise<void> {
   // Load available themes
   state.builtinThemes = await loadBuiltinThemes();
 
-  // Create default theme data
-  state.themeData = createDefaultTheme();
-  state.originalThemeData = deepClone(state.themeData);
-  state.themeName = "custom";
-  state.themePath = null;
-  state.hasChanges = false;
+  // Get current theme name from config
+  const config = editor.getConfig() as Record<string, unknown>;
+  const currentThemeName = (config?.theme as string) || "dark";
+
+  // Prompt user to select which theme to edit
+  editor.startPrompt(editor.t("prompt.select_theme_to_edit"), "theme-select-initial");
+
+  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 built-in themes
+  for (const name of state.builtinThemes) {
+    const isCurrent = name === currentThemeName;
+    suggestions.push({
+      text: name,
+      description: isCurrent ? editor.t("suggestion.builtin_theme_current") : editor.t("suggestion.builtin_theme"),
+      value: `builtin:${name}`,
+    });
+  }
+
+  // Sort suggestions to put current theme first
+  suggestions.sort((a, b) => {
+    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);
+};
+
+/**
+ * Actually open the theme editor with loaded theme data
+ */
+async function doOpenThemeEditor(): Promise<void> {
   // Build initial entries
   const entries = buildDisplayEntries();
 
@@ -1222,14 +1688,12 @@ globalThis.open_theme_editor = async function(): Promise<void> {
     state.bufferId = bufferId;
     state.splitId = null;
 
-    editor.setContext("theme-editor", true);
-
     applyHighlighting();
     editor.setStatus(editor.t("status.ready"));
   } else {
     editor.setStatus(editor.t("status.open_failed"));
   }
-};
+}
 
 /**
  * Close the theme editor
@@ -1238,11 +1702,23 @@ globalThis.theme_editor_close = function(): void {
   if (!state.isOpen) return;
 
   if (state.hasChanges) {
-    editor.setStatus(editor.t("status.unsaved_discarded"));
+    // 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" },
+    ];
+    editor.setPromptSuggestions(suggestions);
+    return;
   }
 
-  editor.setContext("theme-editor", false);
+  doCloseEditor();
+};
 
+/**
+ * Actually close the editor (called after confirmation or when no changes)
+ */
+function doCloseEditor(): void {
   // Close the buffer (this will switch to another buffer in the same split)
   if (state.bufferId !== null) {
     editor.closeBuffer(state.bufferId);
@@ -1257,6 +1733,27 @@ globalThis.theme_editor_close = function(): void {
   state.hasChanges = false;
 
   editor.setStatus(editor.t("status.closed"));
+}
+
+/**
+ * Handle discard confirmation prompt
+ */
+globalThis.onThemeDiscardPromptConfirmed = function(args: {
+  prompt_type: string;
+  selected_index: number | null;
+  input: string;
+}): boolean {
+  if (args.prompt_type !== "theme-discard-confirm") return true;
+
+  const response = args.input.trim().toLowerCase();
+  if (response === "discard" || args.selected_index === 0) {
+    editor.setStatus(editor.t("status.unsaved_discarded"));
+    doCloseEditor();
+  } else {
+    editor.setStatus(editor.t("status.cancelled"));
+  }
+
+  return false;
 };
 
 /**
@@ -1297,49 +1794,116 @@ globalThis.theme_editor_toggle_section = function(): void {
 };
 
 /**
- * Copy from a built-in theme
+ * Open a theme (builtin or user) for editing
  */
-globalThis.theme_editor_copy_from_builtin = function(): void {
-  editor.startPrompt(editor.t("prompt.copy_theme"), "theme-copy-builtin");
+globalThis.theme_editor_open = function(): void {
+  editor.startPrompt(editor.t("prompt.open_theme"), "theme-open");
 
-  const suggestions: PromptSuggestion[] = state.builtinThemes.map(name => ({
-    text: name,
-    description: editor.t("suggestion.builtin_theme"),
-    value: name,
-  }));
+  const suggestions: PromptSuggestion[] = [];
 
-  editor.setPromptSuggestions(suggestions);
-};
+  // 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}`,
+    });
+  }
 
-/**
- * Set theme name
- */
-globalThis.theme_editor_set_name = function(): void {
-  editor.startPrompt(editor.t("prompt.theme_name"), "theme-name");
+  // Add built-in themes
+  for (const name of state.builtinThemes) {
+    suggestions.push({
+      text: name,
+      description: editor.t("suggestion.builtin_theme"),
+      value: `builtin:${name}`,
+    });
+  }
 
-  editor.setPromptSuggestions([{
-    text: state.themeName,
-    description: editor.t("suggestion.current"),
-    value: state.themeName,
-  }]);
+  editor.setPromptSuggestions(suggestions);
 };
 
 /**
  * Save theme
  */
 globalThis.theme_editor_save = async function(): Promise<void> {
-  if (!state.hasChanges && state.themePath) {
+  // 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"));
+    theme_editor_save_as();
+    return;
+  }
+
+  // If theme has never been saved (no path), trigger "Save As" instead
+  if (!state.themePath) {
+    theme_editor_save_as();
+    return;
+  }
+
+  if (!state.hasChanges) {
     editor.setStatus(editor.t("status.no_changes"));
     return;
   }
 
-  await saveTheme();
+  // Check for name collision if name has changed since last save
+  const userThemesDir = getUserThemesDir();
+  const targetPath = editor.pathJoin(userThemesDir, `${state.themeName}.json`);
+
+  if (state.themePath !== targetPath && editor.fileExists(targetPath)) {
+    // File exists with this name - ask for confirmation
+    editor.startPrompt(editor.t("prompt.overwrite_confirm", { name: state.themeName }), "theme-overwrite-confirm");
+    const suggestions: PromptSuggestion[] = [
+      { text: editor.t("prompt.overwrite_yes"), description: "", value: "overwrite" },
+      { text: editor.t("prompt.overwrite_no"), description: "", value: "cancel" },
+    ];
+    editor.setPromptSuggestions(suggestions);
+    return;
+  }
+
+  await saveTheme(undefined, state.savedCursorPath);
+};
+
+/**
+ * Handle overwrite confirmation prompt
+ */
+globalThis.onThemeOverwritePromptConfirmed = async function(args: {
+  prompt_type: string;
+  selected_index: number | null;
+  input: string;
+}): Promise<boolean> {
+  if (args.prompt_type !== "theme-overwrite-confirm") return true;
+
+  const response = args.input.trim().toLowerCase();
+  if (response === "overwrite" || args.selected_index === 0) {
+    // Use pending name if set (from Save As), otherwise use current name
+    const nameToSave = state.pendingSaveName || state.themeName;
+    state.themeName = nameToSave;
+    state.themeData.name = nameToSave;
+    state.pendingSaveName = null;
+    const restorePath = state.savedCursorPath;
+    state.savedCursorPath = null;
+    await saveTheme(nameToSave, restorePath);
+  } else {
+    state.pendingSaveName = null;
+    state.savedCursorPath = null;
+    editor.setStatus(editor.t("status.cancelled"));
+  }
+
+  return false;
 };
 
 /**
  * Save theme as (new name)
  */
 globalThis.theme_editor_save_as = function(): void {
+  // Save cursor path for restoration after save (if not already saved by theme_editor_save)
+  if (!state.savedCursorPath) {
+    state.savedCursorPath = getCurrentFieldPath();
+  }
+
   editor.startPrompt(editor.t("prompt.save_as"), "theme-save-as");
 
   editor.setPromptSuggestions([{
@@ -1349,34 +1913,6 @@ globalThis.theme_editor_save_as = function(): void {
   }]);
 };
 
-/**
- * Set current theme as default
- */
-globalThis.theme_editor_set_as_default = function(): void {
-  editor.startPrompt(editor.t("prompt.set_default"), "theme-set-default");
-
-  // Suggest current theme and all builtins
-  const suggestions: PromptSuggestion[] = [];
-
-  if (state.themeName && state.themePath) {
-    suggestions.push({
-      text: state.themeName,
-      description: editor.t("suggestion.current"),
-      value: state.themeName,
-    });
-  }
-
-  for (const name of state.builtinThemes) {
-    suggestions.push({
-      text: name,
-      description: editor.t("suggestion.builtin"),
-      value: name,
-    });
-  }
-
-  editor.setPromptSuggestions(suggestions);
-};
-
 /**
  * Reload theme
  */
@@ -1407,11 +1943,68 @@ globalThis.theme_editor_show_help = function(): void {
   editor.setStatus(editor.t("status.help"));
 };
 
+/**
+ * Delete the current user theme
+ */
+globalThis.theme_editor_delete = function(): void {
+  // Can only delete saved user themes
+  if (!state.themePath) {
+    editor.setStatus(editor.t("status.cannot_delete_unsaved"));
+    return;
+  }
+
+  // Show confirmation dialog
+  editor.startPrompt(editor.t("prompt.delete_confirm", { name: state.themeName }), "theme-delete-confirm");
+  const suggestions: PromptSuggestion[] = [
+    { text: editor.t("prompt.delete_yes"), description: "", value: "delete" },
+    { text: editor.t("prompt.delete_no"), description: "", value: "cancel" },
+  ];
+  editor.setPromptSuggestions(suggestions);
+};
+
+/**
+ * Handle delete confirmation prompt
+ */
+globalThis.onThemeDeletePromptConfirmed = async function(args: {
+  prompt_type: string;
+  selected_index: number | null;
+  input: string;
+}): Promise<boolean> {
+  if (args.prompt_type !== "theme-delete-confirm") return true;
+
+  const value = args.input.trim();
+  if (value === "delete" || value === editor.t("prompt.delete_yes")) {
+    if (state.themePath) {
+      try {
+        // Delete the theme file
+        await editor.deleteFile(state.themePath);
+        const deletedName = state.themeName;
+
+        // Reset to default theme
+        state.themeData = createDefaultTheme();
+        state.originalThemeData = deepClone(state.themeData);
+        state.themeName = "custom";
+        state.themePath = null;
+        state.hasChanges = false;
+        updateDisplay();
+
+        editor.setStatus(editor.t("status.deleted", { name: deletedName }));
+      } catch (e) {
+        editor.setStatus(editor.t("status.delete_failed", { error: String(e) }));
+      }
+    }
+  } else {
+    editor.setStatus(editor.t("status.cancelled"));
+  }
+
+  return true;
+};
+
 // =============================================================================
 // Command Registration
 // =============================================================================
 
-// Main command to open theme editor
+// Main command to open theme editor (always available)
 editor.registerCommand(
   "%cmd.edit_theme",
   "%cmd.edit_theme_desc",
@@ -1419,76 +2012,21 @@ editor.registerCommand(
   "normal"
 );
 
-// Context-specific commands
-editor.registerCommand(
-  "%cmd.close_editor",
-  "%cmd.close_editor_desc",
-  "theme_editor_close",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.edit_color",
-  "%cmd.edit_color_desc",
-  "theme_editor_edit_color",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.toggle_section",
-  "%cmd.toggle_section_desc",
-  "theme_editor_toggle_section",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.copy_builtin",
-  "%cmd.copy_builtin_desc",
-  "theme_editor_copy_from_builtin",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.set_name",
-  "%cmd.set_name_desc",
-  "theme_editor_set_name",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.save",
-  "%cmd.save_desc",
-  "theme_editor_save",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.save_as",
-  "%cmd.save_as_desc",
-  "theme_editor_save_as",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.set_default",
-  "%cmd.set_default_desc",
-  "theme_editor_set_as_default",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.reload",
-  "%cmd.reload_desc",
-  "theme_editor_reload",
-  "normal,theme-editor"
-);
-
-editor.registerCommand(
-  "%cmd.show_help",
-  "%cmd.show_help_desc",
-  "theme_editor_show_help",
-  "normal,theme-editor"
-);
+// Buffer-scoped commands - only visible when a buffer with mode "theme-editor" is focused
+// The core automatically checks the focused buffer's mode against command contexts
+editor.registerCommand("%cmd.close_editor", "%cmd.close_editor_desc", "theme_editor_close", "theme-editor");
+editor.registerCommand("%cmd.edit_color", "%cmd.edit_color_desc", "theme_editor_edit_color", "theme-editor");
+editor.registerCommand("%cmd.toggle_section", "%cmd.toggle_section_desc", "theme_editor_toggle_section", "theme-editor");
+editor.registerCommand("%cmd.open_theme", "%cmd.open_theme_desc", "theme_editor_open", "theme-editor");
+editor.registerCommand("%cmd.save", "%cmd.save_desc", "theme_editor_save", "theme-editor");
+editor.registerCommand("%cmd.save_as", "%cmd.save_as_desc", "theme_editor_save_as", "theme-editor");
+editor.registerCommand("%cmd.reload", "%cmd.reload_desc", "theme_editor_reload", "theme-editor");
+editor.registerCommand("%cmd.show_help", "%cmd.show_help_desc", "theme_editor_show_help", "theme-editor");
+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");
 
 // =============================================================================
 // Plugin Initialization