@fresh-editor/fresh-editor 0.2.22 → 0.2.23

package/plugins/theme_editor.ts

@@ -62,7 +62,8 @@ type ColorValue = RGB | string;
 // =============================================================================
 
 const LEFT_WIDTH = 38;
-const RIGHT_WIDTH = 61;
+const RIGHT_WIDTH_CONST = 61;
+function RIGHT_WIDTH(): number { return RIGHT_WIDTH_CONST; }
 
 type PickerFocusTarget =
   | { type: "hex-input" }
@@ -375,6 +376,10 @@ interface ThemeEditorState {
   viewportHeight: number;
   /** Cached viewport width */
   viewportWidth: number;
+  /** Buffer group ID (when using buffer groups) */
+  groupId: number | null;
+  /** Panel buffer IDs keyed by panel name */
+  panelBuffers: Record<string, number>;
 }
 
 /**
@@ -436,30 +441,55 @@ const state: ThemeEditorState = {
   treeScrollOffset: 0,
   viewportHeight: 40,
   viewportWidth: 120,
+  groupId: null,
+  panelBuffers: {},
 };
 
 // =============================================================================
 // Color Definitions for UI
 // =============================================================================
 
+/**
+ * UI palette for the theme editor's own chrome.
+ *
+ * Each role maps to a theme-key path (e.g. `"syntax.keyword"`). The plugin
+ * passes these strings straight through to the core as
+ * `OverlayColorSpec::ThemeKey`, and the core's renderer resolves them
+ * against the *currently-active* theme on every frame
+ * (see `OverlayFace::from_options` → `OverlayFace::ThemedStyle`, and the
+ * render-time lookup in `split_rendering.rs`). That means the theme editor
+ * inherits the host theme's look and automatically picks up theme switches
+ * without the plugin having to rebuild its overlays or even be notified —
+ * the `resolve_theme_key` lookup runs with the new theme on the next render.
+ *
+ * Important: we only use keys that the theme defines as readable on
+ * `editor.bg` (since that's the background the theme editor draws over).
+ * That rules out `ui.menu_*`, `ui.tab_*`, etc. — those are designed for
+ * their own bg pairs (e.g. `ui.menu_active_fg` on `ui.menu_active_bg`) and
+ * will clash or go invisible when drawn on `editor.bg` (notoriously in
+ * high-contrast, where `ui.menu_active_fg` is pure black). So we only pull
+ * from `editor.*` and `syntax.*`, and lean on bold + distinct syntax roles
+ * to give each UI element its own visual identity.
+ *
+ * We don't need a client-side fallback chain: the core's `Theme` struct has
+ * serde defaults for every field, so `resolve_theme_key` always returns a
+ * value for any key listed here — a stub theme file can omit them and the
+ * defaults still apply.
+ */
 const colors = {
-  sectionHeader: [255, 200, 100] as RGB,   // Gold
-  fieldName: [200, 200, 255] as RGB,       // Light blue
-  defaultValue: [150, 150, 150] as RGB,    // Gray
-  customValue: [100, 255, 100] as RGB,     // Green
-  description: [120, 120, 120] as RGB,     // Dim gray
-  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
-  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
-};
+  sectionHeader: "syntax.keyword",
+  fieldName:     "editor.fg",
+  customValue:   "syntax.string",
+  description:   "syntax.comment",
+  footer:        "editor.line_number_fg",
+  selectionBg:   "editor.selection_bg",
+  divider:       "editor.line_number_fg",
+  header:        "syntax.keyword",
+  pickerLabel:   "editor.fg",
+  pickerValue:   "syntax.constant",
+  pickerFocusBg: "editor.selection_bg",
+  filterText:    "syntax.function",
+} as const satisfies Record<string, OverlayColorSpec>;
 
 // =============================================================================
 // Keyboard Shortcuts (defined once, used in mode and i18n)
@@ -816,8 +846,8 @@ function buildTreeLines(): TreeLine[] {
     type: "header",
   });
 
-  // Separator
-  lines.push({ text: "─".repeat(36), type: "separator" });
+  // Separator (adapt to panel width)
+  lines.push({ text: "─".repeat(Math.max(10, LEFT_WIDTH - 2)), type: "separator" });
 
   // Filter
   if (state.filterText) {
@@ -825,7 +855,7 @@ function buildTreeLines(): TreeLine[] {
       text: `Filter: [${state.filterText}]`,
       type: "filter",
     });
-    lines.push({ text: "─".repeat(36), type: "separator" });
+    lines.push({ text: "─".repeat(Math.max(10, LEFT_WIDTH - 2)), type: "separator" });
   }
 
   // Build visible fields
@@ -852,11 +882,15 @@ function buildTreeLines(): TreeLine[] {
       });
     } else {
       const sel = isSelected && state.focusPanel === "tree" ? "▸" : " ";
-      const name = field.def.key.length > 13 ? field.def.key.slice(0, 12) + "…" : field.def.key;
+      // Adapt name/value truncation to panel width
+      // Layout: "  ▸ name.padEnd(nameW) ██ value" = 6 + nameW + 3 + valueW
+      const nameW = Math.max(8, LEFT_WIDTH - 18);
+      const valueW = Math.max(5, LEFT_WIDTH - nameW - 9);
+      const name = field.def.key.length > nameW ? field.def.key.slice(0, nameW - 1) + "…" : field.def.key;
       const colorStr = formatColorValue(field.value);
-      const valueStr = colorStr.length > 9 ? colorStr.slice(0, 8) + "…" : colorStr;
+      const valueStr = colorStr.length > valueW ? colorStr.slice(0, valueW - 1) + "…" : colorStr;
       lines.push({
-        text: `  ${sel} ${name.padEnd(13)} ██ ${valueStr}`,
+        text: `  ${sel} ${name.padEnd(nameW)} ██ ${valueStr}`,
         type: "tree-field",
         index: i,
         path: field.path,
@@ -893,7 +927,7 @@ function buildPickerLines(): PickerLine[] {
     } else {
       lines.push({ text: "No field selected", type: "picker-title" });
     }
-    lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
+    lines.push({ text: "─".repeat(RIGHT_WIDTH() - 2), type: "picker-separator" });
     lines.push({ text: "Select a color field to edit", type: "picker-desc" });
     return lines;
   }
@@ -901,7 +935,7 @@ function buildPickerLines(): PickerLine[] {
   // 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" });
+  lines.push({ text: "─".repeat(RIGHT_WIDTH() - 2), type: "picker-separator" });
 
   // Color value display
   const isNamed = typeof field.value === "string" && NAMED_COLORS[field.value] !== undefined;
@@ -942,7 +976,7 @@ function buildPickerLines(): PickerLine[] {
     lines.push({ text: rowText, type: "picker-palette-row", paletteRow: row });
   }
 
-  lines.push({ text: "─".repeat(RIGHT_WIDTH - 2), type: "picker-separator" });
+  lines.push({ text: "─".repeat(RIGHT_WIDTH() - 2), type: "picker-separator" });
 
   // Preview section
   lines.push({ text: "Preview:", type: "picker-label" });
@@ -1241,7 +1275,7 @@ function addBackgroundHighlight(
   bufferId: number,
   start: number,
   end: number,
-  bgColor: RGB
+  bgColor: OverlayColorSpec
 ): void {
   editor.addOverlay(bufferId, "theme-sel", start, end, { bg: bgColor });
 }
@@ -1352,10 +1386,99 @@ let isUpdatingDisplay = false;
  * Full display update — rebuilds content and all overlays.
  * Use for structural changes (open, section toggle, color edit, filter).
  */
+// --- Buffer Group panel content builders ---
+
+function buildTreePanelEntries(): TextPropertyEntry[] {
+  const entries: TextPropertyEntry[] = [];
+  const allLeftLines = buildTreeLines();
+  for (const item of allLeftLines) {
+    const leftStyle = styleForLeftEntry(item);
+    entries.push({
+      text: " " + item.text + "\n",
+      properties: {
+        type: item.type,
+        index: item.index,
+        path: item.path,
+        selected: item.selected,
+        colorValue: item.colorValue,
+      },
+      style: leftStyle.style,
+      inlineOverlays: leftStyle.inlineOverlays,
+    });
+  }
+  return entries;
+}
+
+function buildPickerPanelEntries(): TextPropertyEntry[] {
+  const entries: TextPropertyEntry[] = [];
+  const rightLines = buildPickerLines();
+  for (const item of rightLines) {
+    const rightStyle = styleForRightEntry(item);
+    entries.push({
+      text: " " + item.text + "\n",
+      properties: {
+        type: item.type,
+        namedRow: item.namedRow,
+        paletteRow: item.paletteRow,
+        previewLineIdx: item.previewLineIdx,
+      },
+      style: rightStyle.style,
+      inlineOverlays: rightStyle.inlineOverlays,
+    });
+  }
+  return entries;
+}
+
+function buildFooterPanelEntries(): TextPropertyEntry[] {
+  const hintText = " ↑↓ Navigate  Tab Switch Panel  Enter Edit  /Filter  Ctrl+S Save  Esc Close";
+  return [{ text: hintText + "\n", style: { fg: colors.header } }];
+}
+
 function updateDisplay(): void {
-  if (state.bufferId === null) return;
   isUpdatingDisplay = true;
 
+  // Always refresh viewport dimensions
+  const viewport = editor.getViewport();
+  if (viewport) {
+    state.viewportHeight = viewport.height;
+    state.viewportWidth = viewport.width;
+  }
+
+  // Buffer group mode: write to each panel separately
+  if (state.groupId !== null) {
+    editor.setPanelContent(state.groupId, "tree", buildTreePanelEntries());
+    editor.setPanelContent(state.groupId, "picker", buildPickerPanelEntries());
+    editor.setPanelContent(state.groupId, "footer", buildFooterPanelEntries());
+
+    // Keep the selected tree row in view. The plugin's `selectedIndex`
+    // navigation doesn't move the buffer cursor, so without this the
+    // core-driven panel viewport would stay at the top even after many
+    // Down-arrow presses, causing the `▸` marker to scroll off-screen
+    // for sections with many fields.
+    const treeBufferId = state.panelBuffers["tree"];
+    if (typeof treeBufferId === "number") {
+      const treeLines = buildTreeLines();
+      let selectedLine = -1;
+      for (let i = 0; i < treeLines.length; i++) {
+        if (treeLines[i].index === state.selectedIndex && treeLines[i].selected) {
+          selectedLine = i;
+          break;
+        }
+      }
+      if (selectedLine >= 0) {
+        editor.scrollBufferToLine(treeBufferId, selectedLine);
+      }
+    }
+
+    isUpdatingDisplay = false;
+    return;
+  }
+
+  if (state.bufferId === null) {
+    isUpdatingDisplay = false;
+    return;
+  }
+
   const entries = buildDisplayEntries();
 
   // Clear selection overlays BEFORE replacing content to prevent stale
@@ -1532,11 +1655,7 @@ function onThemeColorPromptConfirmed(args: {
     setNestedValue(state.themeData, path, result.value);
     state.hasChanges = !deepEqual(state.themeData, state.originalThemeData);
 
-    const entries = buildDisplayEntries();
-    if (state.bufferId !== null) {
-      editor.setVirtualBufferContent(state.bufferId, entries);
-      applySelectionHighlighting(entries);
-    }
+    updateDisplay();
     moveCursorToField(path);
     editor.setStatus(editor.t("status.updated", { path }));
   } else {
@@ -1793,11 +1912,7 @@ async function saveTheme(name?: string, restorePath?: string | null): Promise<bo
     state.hasChanges = false;
 
     // Update display
-    const entries = buildDisplayEntries();
-    if (state.bufferId !== null) {
-      editor.setVirtualBufferContent(state.bufferId, entries);
-      applySelectionHighlighting(entries);
-    }
+    updateDisplay();
 
     // Restore cursor position if provided
     if (restorePath) {
@@ -1903,7 +2018,17 @@ function onThemeEditorCursorMoved(data: {
   new_position: number;
   text_properties?: Array<Record<string, any>>;
 }): void {
-  if (state.bufferId === null || data.buffer_id !== state.bufferId) return;
+  if (state.bufferId === null) return;
+  // Accept cursor_moved events for any of the buffer group's panels
+  // (tree, picker, footer). With buffer groups each panel is its own
+  // buffer, so clicks in the picker fire cursor_moved for the picker
+  // buffer — not the tree buffer (state.bufferId). We must handle
+  // events for all of them so picker clicks (named colors, palette,
+  // hex) still update selection/colors.
+  const groupBufferIds = Object.values(state.panelBuffers || {});
+  const isGroupBuffer =
+    data.buffer_id === state.bufferId || groupBufferIds.includes(data.buffer_id);
+  if (!isGroupBuffer) return;
   if (isUpdatingDisplay) return;
 
   const props = data.text_properties || [];
@@ -1974,20 +2099,6 @@ function onThemeEditorResize(data: { width: number; height: number }): void {
 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
  */
@@ -2510,38 +2621,30 @@ async function doOpenThemeEditor(): Promise<void> {
   }
   state.treeScrollOffset = 0;
 
-  editor.debug("[theme_editor] doOpenThemeEditor: building display entries");
-  // Build initial entries
-  const entries = buildDisplayEntries();
-  editor.debug(`[theme_editor] doOpenThemeEditor: built ${entries.length} entries`);
-
-  // Create virtual buffer in current split (no new split)
-  editor.debug("[theme_editor] doOpenThemeEditor: calling createVirtualBuffer...");
-  const result = await editor.createVirtualBuffer({
-    name: "*Theme Editor*",
-    mode: "theme-editor",
-    readOnly: true,
-    entries: entries,
-    showLineNumbers: false,
-    showCursors: false,
-    editingDisabled: true,
+  // Create buffer group with layout: horizontal split (tree | picker) + footer
+  const layout = JSON.stringify({
+    type: "split",
+    direction: "v",
+    ratio: 0.95,
+    first: {
+      type: "split",
+      direction: "h",
+      ratio: 0.38,
+      first: { type: "scrollable", id: "tree" },
+      second: { type: "scrollable", id: "picker" },
+    },
+    second: { type: "fixed", id: "footer", height: 1 },
   });
-  const bufferId = result.bufferId;
-  editor.debug(`[theme_editor] doOpenThemeEditor: createVirtualBuffer returned bufferId=${bufferId}`);
-  editor.debug(`[theme_editor] doOpenThemeEditor: checking if bufferId !== null...`);
-
-  if (bufferId !== null) {
-    editor.debug(`[theme_editor] doOpenThemeEditor: bufferId is not null, setting state...`);
-    state.bufferId = bufferId;
-    state.splitId = null;
 
-    // Disable line wrapping — our layout is fixed-width
-    editor.setLineWrap(bufferId, null, false);
+  const groupResult = await editor.createBufferGroup("*Theme Editor*", "theme-editor", layout);
+  state.groupId = groupResult.groupId;
+  state.panelBuffers = groupResult.panels;
+  state.bufferId = groupResult.panels["tree"]; // representative buffer
+  state.splitId = null;
 
-    editor.debug(`[theme_editor] doOpenThemeEditor: calling applySelectionHighlighting...`);
-    applySelectionHighlighting();
-    editor.debug(`[theme_editor] doOpenThemeEditor: applySelectionHighlighting completed`);
-    editor.debug(`[theme_editor] doOpenThemeEditor: calling setStatus...`);
+  if (state.bufferId !== null) {
+    // Set initial content for all panels
+    updateDisplay();
     editor.debug(editor.t("status.ready"));
     editor.debug(`[theme_editor] doOpenThemeEditor: completed successfully`);
   } else {
@@ -2575,8 +2678,12 @@ registerHandler("theme_editor_close", theme_editor_close);
  * 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) {
+  // Close the buffer group (or fall back to single buffer close)
+  if (state.groupId !== null) {
+    editor.closeBufferGroup(state.groupId);
+    state.groupId = null;
+    state.panelBuffers = {};
+  } else if (state.bufferId !== null) {
     editor.closeBuffer(state.bufferId);
   }