avtc-claude-settings-ui 1.0.12 → 1.0.13

package/dist/pane/tree.d.ts

@@ -12,5 +12,9 @@ export interface PaneTreeOptions {
     bodyColumns: number;
     /** A dirty marker in the footer (the unsaved-changes hint). */
     dirty?: boolean;
+    /** The surface drawing the pane (e.surface). Keyboard-driven hints are
+     *  drawn only on surfaces whose controls take the keyboard (the desktop
+     *  drives the pane with the pointer). */
+    surface?: string;
 }
 export declare function buildPaneTree(els: PaneElements, controller: PaneController, options: PaneTreeOptions): unknown;

package/dist/pane/tree.js

@@ -38,6 +38,9 @@ function settingRow(els, controller, row, _index, labelWidth, ringRowId) {
         columnGap: 1,
         children: [
             els.Text({
+                // the padded label column needs the monospaced face on surfaces whose
+                // UI face is proportional (the terminal ignores the prop)
+                mono: true,
                 children: [`${marker}${row.label.padEnd(labelWidth)}`],
                 ...(ringRowId === row.id ? { color: "claude" } : {}),
             }),
@@ -57,7 +60,7 @@ function descriptionBox(els, row, bodyColumns) {
     }
     while (lines.length < DESCRIPTION_LINES)
         lines.push("");
-    return els.Text({ children: [lines.join("\n")], dimColor: true });
+    return els.Text({ mono: true, children: [lines.join("\n")], dimColor: true });
 }
 /** The value picker (pi's filter-first picker): the picking row's title, a
  *  filter field, the filtered preset options as buttons, a custom-value
@@ -110,7 +113,9 @@ function pickerBody(els, controller, options, pickingRow, pickerFilter, pickerEp
         key: "picker-back",
         label: "← Back",
         onPress: () => controller.closePicker(),
-    }), els.Text({ children: ["  Enter to select · Esc to go back"], dimColor: true }), els.Text({ children: [" "] }), els.Box({
+    }), ...(options.surface === "desktop"
+        ? []
+        : [els.Text({ children: ["  Enter to select · Esc to go back"], dimColor: true })]), els.Text({ children: [" "] }), els.Box({
         key: "picker-description",
         flexDirection: "column",
         children: [descriptionBox(els, pickingRow, options.bodyColumns)],
@@ -140,6 +145,9 @@ export function buildPaneTree(els, controller, options) {
         key: `${TAB_KEY_PREFIX}${index}`,
         label: `${index === activeTabIndex ? ACTIVE_TAB_MARKER : INACTIVE_TAB_MARKER} ${tab.label}`,
         dimColor: index !== activeTabIndex,
+        // the first tab owns the pane's initial focus ring (a surface that
+        // focuses the last actable drawn otherwise starts there)
+        ...(index === 0 ? { autoFocus: true } : {}),
         onPress: () => controller.switchTab(index),
     }));
     // The page chords' RECEIVERS, in the tab lane where page controls live:
@@ -161,7 +169,11 @@ export function buildPaneTree(els, controller, options) {
         onPress: () => controller.pageTurnDirect(1),
     }));
     const labelWidth = Math.max(...visibleSettings.map((row) => row.label.length), 1);
-    const rows = visibleSettings.map((row, index) => settingRow(els, controller, row, index, labelWidth, ringRowId));
+    const rows = visibleSettings.map((row, index) => settingRow(els, controller, row, index, labelWidth, 
+    // the selection marker names the keyboard walk's seat; a pointer-driven
+    // surface has no walk, and no hook follows its hover — the marker
+    // would point at a row the pointer never chose
+    options.surface === "desktop" ? null : ringRowId));
     const footerActions = [];
     const liveSave = storageLevels.length === 1 && storageLevels[0] !== "session";
     if (!liveSave && storageLevels.includes("project")) {
@@ -227,19 +239,24 @@ export function buildPaneTree(els, controller, options) {
                 children: [descriptionBox(els, describedRow, options.bodyColumns)],
             }),
             els.Box({ key: "settings-footer", flexDirection: "row", columnGap: 1, children: footerActions }),
-            // The keybind legend (pi-style footer note)
-            els.Box({
-                key: "settings-legend",
-                flexDirection: "row",
-                children: [
-                    els.Text({
+            // The keybind legend (pi-style footer note) — only where the keyboard
+            // drives the pane; pointer-driven surfaces draw nothing
+            ...(options.surface === "desktop"
+                ? []
+                : [
+                    els.Box({
+                        key: "settings-legend",
+                        flexDirection: "row",
                         children: [
-                            "  Esc | ↑↓: navigate | ←→: filter cursor | Ctrl+←/→: switch tab | Enter: change | Ctrl+S: save project | Ctrl+G: save global",
+                            els.Text({
+                                children: [
+                                    "  Esc | ↑↓: navigate | ←→: filter cursor | Ctrl+←/→: switch tab | Enter: change | Ctrl+S: save project | Ctrl+G: save global",
+                                ],
+                                dimColor: true,
+                            }),
                         ],
-                        dimColor: true,
                     }),
-                ],
-            }),
+                ]),
         ],
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "avtc-claude-settings-ui",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "A schema-driven settings UI for Claude mods — define your settings, get a tabbed pane, a /<name>-settings command, and layered persistence.",
   "type": "module",
   "license": "MIT",