@cueloop/client 0.1.0-alpha.74 → 0.1.0-alpha.76

package/src/use-annotation-surface.tsx

@@ -37,6 +37,7 @@ import {
 } from "./thread-selection";
 import { annotationPaletteFor, type AnnotationPalette } from "./annotation-palette";
 import { printableSequence, type MarkRange, type VisualLine } from "./mark-runs";
+import { matchesLeader } from "./thread-chords";
 import {
   activeSlashToken,
   isStandaloneSlashQuery,
@@ -103,6 +104,8 @@ export interface AnnotationSurfaceOptions {
   onAnnotate: (span: TextSpan, body: string) => void;
   onReply: (rootAnnotationId: string, body: string) => void;
   onUpdateAnnotation: (id: string, body: string) => void;
+  leaderCombos?: readonly string[];
+  onLeaderCommand?: (key: KeyEvent) => void;
   onExit: () => void;
 }
 
@@ -176,6 +179,8 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     onAnnotate,
     onReply,
     onUpdateAnnotation,
+    leaderCombos,
+    onLeaderCommand,
     onExit,
   } = options;
   const palette = annotationPaletteFor(tokens);
@@ -190,6 +195,7 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
     return { head: start, anchor: start };
   });
   const [compose, setCompose] = useState<ComposeState | null>(null);
+  const leaderPending = useRef(false);
 
   useEffect(() => {
     onComposingChange?.(compose !== null);
@@ -657,10 +663,26 @@ export function useAnnotationSurface(options: AnnotationSurfaceOptions): Annotat
 
     if (activeCompose) return handleComposeKey(key, activeCompose);
     if (key.name === "escape") {
+      if (leaderPending.current) {
+        leaderPending.current = false;
+
+        return;
+      }
       if (focusedDiscussion !== null) return setFocusedDiscussion(null);
 
       return collapseCaret();
     }
+    if (leaderPending.current) {
+      leaderPending.current = false;
+      onLeaderCommand?.(key);
+
+      return;
+    }
+    if (leaderCombos && matchesLeader(key, leaderCombos)) {
+      leaderPending.current = true;
+
+      return;
+    }
     if (handleDiscussionVerb(key)) return;
     if (handleCaretKey(key)) return;
     startTyping(key);

package/src/use-frame-measure.ts

@@ -12,11 +12,14 @@ export function useFrameMeasure<T>(
   read: () => T,
   isEqual: (left: T, right: T) => boolean,
   initial: T,
+  active = true,
 ): T {
   const renderer = useRenderer();
   const [value, setValue] = useState(initial);
 
   useEffect(() => {
+    // a measurement only needed while a popover is open subscribes no per-frame listener when closed
+    if (!active) return;
     const measure = (): void => {
       const next = read();
 
@@ -32,7 +35,7 @@ export function useFrameMeasure<T>(
       renderer?.off("resize", measure);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [renderer]);
+  }, [renderer, active]);
 
   return value;
 }

package/src/use-settings-dialog.tsx

@@ -106,6 +106,7 @@ export function useSettingsDialog(params: {
     zone: "body",
   });
   const [actionsExpandedIndex, setActionsExpandedIndex] = useState<number | null>(null);
+  const [actionsExpandedField, setActionsExpandedField] = useState<"prompt" | "metadata">("prompt");
 
   const commitActions = (next: QuickAction[]): void => {
     setQuickActions(next);
@@ -141,7 +142,6 @@ export function useSettingsDialog(params: {
     {
       id: "general",
       name: "General",
-      description: "submission behaviour",
       rows: [
         {
           key: "autoClose",
@@ -151,7 +151,7 @@ export function useSettingsDialog(params: {
         },
         {
           key: "diffView",
-          label: "Diff view (when wide)",
+          label: "Diff view",
           kind: "cycle",
           options: ["Split", "Stacked"],
         },
@@ -160,7 +160,6 @@ export function useSettingsDialog(params: {
     {
       id: "appearance",
       name: "Appearance",
-      description: "the color theme",
       rows: [
         {
           key: "theme",
@@ -173,15 +172,16 @@ export function useSettingsDialog(params: {
     {
       id: "actions",
       name: "Actions",
-      description: "quick-action comments",
       rows: [],
       customBody: (
         <QuickActionsEditor
           actions={quickActions}
           selectedIndex={settingsNav.categoryId === "actions" ? settingsNav.rowIndex : -1}
           expandedIndex={actionsExpandedIndex}
-          onToggleExpand={(index) => {
+          expandedField={actionsExpandedField}
+          onToggleExpand={(index, field) => {
             setSettingsNav((state) => ({ ...state, zone: "body", rowIndex: index }));
+            setActionsExpandedField(field);
             setActionsExpandedIndex((current) => (current === index ? null : index));
           }}
           onEditPrompt={editActionPrompt}
@@ -195,7 +195,6 @@ export function useSettingsDialog(params: {
     {
       id: "keybinds",
       name: "Keybinds",
-      description: "keyboard reference",
       rows: [],
     },
   ];
@@ -258,7 +257,10 @@ export function useSettingsDialog(params: {
       if (moved) return void setSettingsNav(moved);
       if (ACTIVATE_KEYS.has(name)) {
         if (settingsNav.rowIndex === quickActions.length) addAction();
-        else setActionsExpandedIndex(settingsNav.rowIndex);
+        else {
+          setActionsExpandedField("prompt");
+          setActionsExpandedIndex(settingsNav.rowIndex);
+        }
       }
 
       return;

package/src/visual/contrast.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from "bun:test";
+import { themeForName } from "../theme-presets";
+import { contrastRatio, relativeLuminance, rgbColorFromHex } from "./contrast";
+
+test("relativeLuminance ranks black below white", () => {
+  expect(relativeLuminance([0, 0, 0])).toBe(0);
+  expect(relativeLuminance([255, 255, 255])).toBeCloseTo(1, 5);
+});
+
+test("contrastRatio is symmetric and peaks at black on white", () => {
+  expect(contrastRatio([0, 0, 0], [255, 255, 255])).toBeCloseTo(21, 0);
+  expect(contrastRatio([255, 255, 255], [0, 0, 0])).toBeCloseTo(21, 0);
+  expect(contrastRatio([100, 100, 100], [100, 100, 100])).toBeCloseTo(1, 5);
+});
+
+// The branded theme is terminal-through, so text sits on a real terminal background, not pure black or
+// white; gate each theme against a representative one so a low-contrast token cannot hide behind an extreme.
+const TERMINAL_BACKGROUND = {
+  dark: rgbColorFromHex("#1e1e2e"),
+  light: rgbColorFromHex("#f0f0f0"),
+} as const;
+const MIN_NORMAL_TEXT_CONTRAST = 4.5;
+
+for (const mode of ["dark", "light"] as const) {
+  test(`${mode} theme keeps text, muted text, and accent legible on its terminal`, () => {
+    const theme = themeForName("cueloop", mode);
+    const background = TERMINAL_BACKGROUND[mode];
+
+    for (const token of [theme.text, theme.textMuted, theme.accent]) {
+      expect(contrastRatio(rgbColorFromHex(token), background)).toBeGreaterThanOrEqual(
+        MIN_NORMAL_TEXT_CONTRAST,
+      );
+    }
+  });
+}

package/src/visual/contrast.ts

@@ -0,0 +1,33 @@
+/** WCAG relative luminance and contrast ratio for the visual-regression accessibility gate. */
+
+export type RgbColor = readonly [number, number, number];
+
+/** Parse a `#rrggbb` hexadecimal colour into an sRGB triple (channels 0-255). */
+export function rgbColorFromHex(hex: string): RgbColor {
+  const value = hex.replace("#", "");
+
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16),
+  ];
+}
+
+/** WCAG relative luminance of an sRGB colour, 0 (black) to 1 (white). */
+export function relativeLuminance(rgb: RgbColor): number {
+  const linear = rgb.map((channel) => {
+    const ratio = channel / 255;
+
+    return ratio <= 0.03928 ? ratio / 12.92 : ((ratio + 0.055) / 1.055) ** 2.4;
+  });
+
+  return 0.2126 * linear[0]! + 0.7152 * linear[1]! + 0.0722 * linear[2]!;
+}
+
+/** WCAG contrast ratio between two sRGB colours, 1 (identical) to 21 (black on white). */
+export function contrastRatio(foreground: RgbColor, background: RgbColor): number {
+  const lighter = Math.max(relativeLuminance(foreground), relativeLuminance(background));
+  const darker = Math.min(relativeLuminance(foreground), relativeLuminance(background));
+
+  return (lighter + 0.05) / (darker + 0.05);
+}