@cueloop/client 0.1.0-alpha.56 → 0.1.0-alpha.59

package/src/keymap.ts

@@ -122,65 +122,8 @@ function status(message: string): Intent[] {
  */
 export function reduceKey(state: KeyState, key: KeyInput, resolvedAction?: string): Intent[] {
   const name = key.name;
-  // compose/submit overlays own the keys via focused inputs; only escape,
-  // return, and verdict arrows route through the grammar
-  if (state.overlay === "compose" || state.overlay === "submit") {
-    if (name === "escape") return [{ type: "closeOverlay" }];
-    if (name === "return" || name === "enter") {
-      // In the composer, ⌥/Alt+⏎ (meta) and shift+⏎ insert a newline - the
-      // focused textarea owns that; only a bare ⏎ saves. The submit overlay
-      // keeps its plain ⏎ submit.
-      if (state.overlay === "compose") {
-        if (key.shift || key.meta) return [];
-        return [{ type: "saveCompose" }];
-      }
-      return [{ type: "submitVerdict" }];
-    }
-    if (state.overlay === "submit" && (name === "left" || name === "right")) {
-      return [{ type: "cycleVerdict", direction: name === "left" ? -1 : 1 }];
-    }
-    return [];
-  }
-  // a modal confirm owns the keys: ⏎ commits the action, escape backs out
-  if (state.overlay === "confirm") {
-    if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
-    if (name === "escape") return [{ type: "closeOverlay" }];
-    return [];
-  }
-  // a text prompt: the focused input owns typing; only ⏎ save and esc route here
-  if (state.overlay === "prompt") {
-    if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
-    if (name === "escape") return [{ type: "closeOverlay" }];
-    return [];
-  }
-  // the quick-actions list owns its keys: j/k move, ⏎ picks the highlighted
-  // action (inserting its preset comment), escape returns to the span toolbar
-  if (state.overlay === "spanActions") {
-    if (name === "j" || name === "down") return [{ type: "moveSpanAction", direction: 1 }];
-    if (name === "k" || name === "up") return [{ type: "moveSpanAction", direction: -1 }];
-    if (name === "return" || name === "enter") return [{ type: "pickSpanAction" }];
-    if (name === "escape") return [{ type: "closeSpanActions" }];
-    return [];
-  }
-  if (state.overlay === "completion-prompt" || state.overlay === "completion-counting") {
-    if (name === "return" || name === "enter" || name === "q") return [{ type: "finishReview" }];
-    if (name === "a") return [{ type: "optInAutoClose" }];
-    if (name === "escape") return [{ type: "dismissCompletion" }];
-    return [];
-  }
-  // the walk wizard owns its keys while active: ] advances (marking the
-  // current file viewed), [ steps back, escape leaves keeping progress, and
-  // return on the end card hands over to the submit confirm
-  if (state.overlay === "walk") {
-    if (name === "]") return [{ type: "walkForward" }];
-    if (name === "[") return [{ type: "walkBack" }];
-    if (name === "escape") return [{ type: "walkLeave" }];
-    if ((name === "return" || name === "enter") && state.walkAtEnd) {
-      return [{ type: "walkLeave" }, { type: "openSubmit" }];
-    }
-    if (name === "q") return [{ type: "exit" }];
-    return [];
-  }
+  const overlayGrammar = overlayGrammars[state.overlay];
+  if (overlayGrammar) return overlayGrammar(state, key);
   const action = resolvedAction ?? actionFor(state.keys, name, key.shift);
   if (action === "quit") return [{ type: "exit" }];
   // the ONE read-only rule: any mutating attempt answers instead of acting
@@ -208,6 +151,85 @@ export function reduceKey(state: KeyState, key: KeyInput, resolvedAction?: strin
   return planGrammar(state, action, name);
 }
 
+type OverlayGrammar = (state: KeyState, key: KeyInput) => Intent[];
+
+const overlayGrammars: Partial<Record<KeyState["overlay"], OverlayGrammar>> = {
+  compose: composeOverlayGrammar,
+  submit: submitOverlayGrammar,
+  confirm: confirmOverlayGrammar,
+  prompt: promptOverlayGrammar,
+  spanActions: spanActionsOverlayGrammar,
+  "completion-prompt": completionOverlayGrammar,
+  "completion-counting": completionOverlayGrammar,
+  walk: walkOverlayGrammar,
+};
+
+function composeOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "escape") return [{ type: "closeOverlay" }];
+  if (name === "return" || name === "enter") {
+    // In the composer, ⌥/Alt+⏎ (meta) and shift+⏎ insert a newline - the
+    // focused textarea owns that; only a bare ⏎ saves. The submit overlay
+    // keeps its plain ⏎ submit.
+    if (key.shift || key.meta) return [];
+    return [{ type: "saveCompose" }];
+  }
+  return [];
+}
+
+function submitOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "escape") return [{ type: "closeOverlay" }];
+  if (name === "return" || name === "enter") return [{ type: "submitVerdict" }];
+  if (name === "left" || name === "right") {
+    return [{ type: "cycleVerdict", direction: name === "left" ? -1 : 1 }];
+  }
+  return [];
+}
+
+function confirmOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
+  if (name === "escape") return [{ type: "closeOverlay" }];
+  return [];
+}
+
+function promptOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "return" || name === "enter") return [{ type: "confirmDialog" }];
+  if (name === "escape") return [{ type: "closeOverlay" }];
+  return [];
+}
+
+function spanActionsOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "j" || name === "down") return [{ type: "moveSpanAction", direction: 1 }];
+  if (name === "k" || name === "up") return [{ type: "moveSpanAction", direction: -1 }];
+  if (name === "return" || name === "enter") return [{ type: "pickSpanAction" }];
+  if (name === "escape") return [{ type: "closeSpanActions" }];
+  return [];
+}
+
+function completionOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "return" || name === "enter" || name === "q") return [{ type: "finishReview" }];
+  if (name === "a") return [{ type: "optInAutoClose" }];
+  if (name === "escape") return [{ type: "dismissCompletion" }];
+  return [];
+}
+
+function walkOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
+  const name = key.name;
+  if (name === "]") return [{ type: "walkForward" }];
+  if (name === "[") return [{ type: "walkBack" }];
+  if (name === "escape") return [{ type: "walkLeave" }];
+  if ((name === "return" || name === "enter") && state.walkAtEnd) {
+    return [{ type: "walkLeave" }, { type: "openSubmit" }];
+  }
+  if (name === "q") return [{ type: "exit" }];
+  return [];
+}
+
 /** The review-panel controls: cycle the mode, widen and narrow the rail. */
 function reviewPanelGrammar(action: string | undefined): Intent[] | null {
   if (action === "review_cycle") return [{ type: "cycleReviewPanel" }];

package/src/prototype-browser.ts

@@ -228,7 +228,12 @@ function elementAtScript(x: number, y: number): unknown {
   };
   const hit = document.elementFromPoint(x, y);
   if (!(hit instanceof Element)) return null;
-  const node = componentRoot(hit);
+  // A click on an interactive control anchors to that control - a button in a
+  // grid is the target, not the grid. Everything else climbs to its component.
+  const control = hit.closest(
+    "button, a, [role='button'], input, select, textarea, label, summary",
+  );
+  const node = control ?? componentRoot(hit);
   const selector = selectorFor(node);
   if (!selector) return null;
   const text = (node.textContent || "").replace(/\s+/g, " ").trim();

package/src/use-settings-dialog.tsx

@@ -0,0 +1,263 @@
+import React, { useState, type Dispatch, type SetStateAction } from "react";
+import {
+  DEFAULT_QUICK_ACTIONS,
+  persistActions,
+  persistAutoClose,
+  persistTheme,
+  type AutoClose,
+  type QuickAction,
+} from "./config";
+import {
+  composeTheme,
+  THEME_LABELS,
+  THEME_NAMES,
+  type Appearance,
+  type ThemeName,
+} from "./theme-presets";
+import type { Theme } from "./theme";
+import type { ReviewPanelMode } from "./review-panel";
+import type { SettingsCategory } from "./components/SettingsDialog";
+import { QuickActionsEditor } from "./components/quick-actions-editor";
+import type { ReviewController } from "./session-controller";
+
+export interface SettingsNav {
+  categoryId: string;
+  rowIndex: number;
+  zone: "nav" | "body";
+}
+
+export interface SettingsDialogModel {
+  settingsNav: SettingsNav;
+  actionsExpandedIndex: number | null;
+  setActionsExpandedIndex: Dispatch<SetStateAction<number | null>>;
+  settingsCategories: SettingsCategory[];
+  settingsValues: Record<string, string>;
+  cycleSetting: (rowKey: string) => void;
+  handleSettingsKey: (name: string) => void;
+  onCategorySelect: (categoryId: string) => void;
+}
+
+const DOWN_KEYS = new Set(["j", "down"]);
+const UP_KEYS = new Set(["k", "up"]);
+const ENTER_BODY_KEYS = new Set(["l", "tab", "return"]);
+const ACTIVATE_KEYS = new Set(["return", "space", "l"]);
+
+function moveNavZone(
+  name: string,
+  categoryIndex: number,
+  categories: SettingsCategory[],
+): SettingsNav | null {
+  if (DOWN_KEYS.has(name))
+    return {
+      categoryId: categories[Math.min(categories.length - 1, categoryIndex + 1)]!.id,
+      rowIndex: 0,
+      zone: "nav",
+    };
+  if (UP_KEYS.has(name))
+    return { categoryId: categories[Math.max(0, categoryIndex - 1)]!.id, rowIndex: 0, zone: "nav" };
+  if (ENTER_BODY_KEYS.has(name))
+    return { categoryId: categories[categoryIndex]!.id, rowIndex: 0, zone: "body" };
+  return null;
+}
+
+function moveBodyRow(name: string, nav: SettingsNav, rowCount: number): SettingsNav | null {
+  if (DOWN_KEYS.has(name)) return { ...nav, rowIndex: Math.min(rowCount - 1, nav.rowIndex + 1) };
+  if (UP_KEYS.has(name)) return { ...nav, rowIndex: Math.max(0, nav.rowIndex - 1) };
+  if (name === "h" || name === "tab") return { ...nav, zone: "nav" };
+  return null;
+}
+
+export function useSettingsDialog(params: {
+  theme: Theme;
+  appearance: Appearance;
+  autoClose: AutoClose;
+  setAutoClose: Dispatch<SetStateAction<AutoClose>>;
+  reviewMode: ReviewPanelMode;
+  setReviewMode: Dispatch<SetStateAction<ReviewPanelMode>>;
+  themeName: ThemeName;
+  setThemeName: Dispatch<SetStateAction<ThemeName>>;
+  themeOverrides: Partial<Theme>;
+  setTheme: Dispatch<SetStateAction<Theme>>;
+  quickActions: QuickAction[];
+  setQuickActions: Dispatch<SetStateAction<QuickAction[]>>;
+  controller: ReviewController;
+  setMenuDialog: Dispatch<SetStateAction<"keybinds" | "settings" | null>>;
+}): SettingsDialogModel {
+  const {
+    theme,
+    appearance,
+    autoClose,
+    setAutoClose,
+    reviewMode,
+    setReviewMode,
+    themeName,
+    setThemeName,
+    themeOverrides,
+    setTheme,
+    quickActions,
+    setQuickActions,
+    controller,
+    setMenuDialog,
+  } = params;
+
+  const [settingsNav, setSettingsNav] = useState<SettingsNav>({
+    categoryId: "general",
+    rowIndex: 0,
+    zone: "body",
+  });
+  const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
+
+  const commitActions = (next: QuickAction[]): void => {
+    setQuickActions(next);
+    persistActions(next);
+  };
+  const editActionMetadata = (index: number, metadata: string): void =>
+    commitActions(
+      quickActions.map((action, actionIndex) =>
+        actionIndex === index
+          ? { ...action, metadata: metadata.trim() ? metadata : undefined }
+          : action,
+      ),
+    );
+  const resetActions = (): void => {
+    setActionsExpandedIndex(null);
+    commitActions(DEFAULT_QUICK_ACTIONS.map((action) => ({ ...action })));
+  };
+  const addAction = (): void => {
+    setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: quickActions.length }));
+    commitActions([...quickActions, { prompt: "New action" }]);
+  };
+
+  const settingsCategories: SettingsCategory[] = [
+    {
+      id: "general",
+      name: "General",
+      description: "submission behaviour",
+      rows: [
+        {
+          key: "autoClose",
+          label: "Auto-close on submit",
+          kind: "cycle",
+          options: ["off", "3s", "10s"],
+        },
+      ],
+    },
+    {
+      id: "display",
+      name: "Display",
+      description: "the review panel",
+      rows: [
+        {
+          key: "reviewPanel",
+          label: "Review panel",
+          kind: "cycle",
+          options: ["expanded", "compact", "hidden"],
+        },
+      ],
+    },
+    {
+      id: "appearance",
+      name: "Appearance",
+      description: "the color theme",
+      rows: [
+        {
+          key: "theme",
+          label: "Theme",
+          kind: "cycle",
+          options: THEME_NAMES.map((name) => THEME_LABELS[name]),
+        },
+      ],
+    },
+    {
+      id: "actions",
+      name: "Actions",
+      description: "quick-action comments",
+      rows: [],
+      customBody: (
+        <QuickActionsEditor
+          actions={quickActions}
+          selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
+          expandedIndex={actionsExpandedIndex}
+          onToggleExpand={(index) => {
+            setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedIndex((current) => (current === index ? null : index));
+          }}
+          onEditMetadata={editActionMetadata}
+          onReset={resetActions}
+          onAdd={addAction}
+          theme={theme}
+        />
+      ),
+    },
+  ];
+  const settingsValues = {
+    autoClose: autoClose === "off" ? "off" : `${autoClose}s`,
+    reviewPanel: reviewMode,
+    theme: THEME_LABELS[themeName],
+  };
+  const cycleSetting = (rowKey: string): void => {
+    if (rowKey === "autoClose") {
+      const next: AutoClose = autoClose === "off" ? 3 : autoClose === 3 ? 10 : "off";
+      setAutoClose(next);
+      persistAutoClose(next);
+    } else if (rowKey === "reviewPanel") {
+      const order: ReviewPanelMode[] = ["expanded", "compact", "hidden"];
+      const next = order[(order.indexOf(reviewMode) + 1) % order.length]!;
+      setReviewMode(next);
+      controller.saveReviewPanel({ mode: next });
+    } else if (rowKey === "theme") {
+      const next = THEME_NAMES[(THEME_NAMES.indexOf(themeName) + 1) % THEME_NAMES.length]!;
+      setThemeName(next);
+      setTheme(composeTheme(next, themeOverrides, appearance));
+      persistTheme(next);
+    }
+  };
+
+  const onCategorySelect = (categoryId: string): void => {
+    setActionsExpandedIndex(null);
+    setSettingsNav({ categoryId, rowIndex: 0, zone: "body" });
+  };
+
+  const handleSettingsKey = (name: string): void => {
+    // an open system-prompt input owns typing; only esc (close it) escapes here
+    if (actionsExpandedIndex !== null) {
+      if (name === "escape") setActionsExpandedIndex(null);
+      return;
+    }
+    if (name === "escape") return void setMenuDialog(null);
+    const categoryIndex = settingsCategories.findIndex(
+      (category) => category.id === settingsNav.categoryId,
+    );
+    const category = settingsCategories[categoryIndex]!;
+    if (settingsNav.zone === "nav") {
+      const next = moveNavZone(name, categoryIndex, settingsCategories);
+      if (next) setSettingsNav(next);
+      return;
+    }
+    // the Actions category is a list of quick actions plus a trailing "add" row
+    if (category.id === "actions") {
+      const moved = moveBodyRow(name, settingsNav, quickActions.length + 1);
+      if (moved) return void setSettingsNav(moved);
+      if (ACTIVATE_KEYS.has(name)) {
+        if (settingsNav.rowIndex === quickActions.length) addAction();
+        else setActionsExpandedIndex(settingsNav.rowIndex);
+      }
+      return;
+    }
+    const moved = moveBodyRow(name, settingsNav, category.rows.length);
+    if (moved) return void setSettingsNav(moved);
+    if (name === "return" || name === "space")
+      cycleSetting(category.rows[settingsNav.rowIndex]!.key);
+  };
+
+  return {
+    settingsNav,
+    actionsExpandedIndex,
+    setActionsExpandedIndex,
+    settingsCategories,
+    settingsValues,
+    cycleSetting,
+    handleSettingsKey,
+    onCategorySelect,
+  };
+}