@agent-native/toolkit 0.224.0 → 0.225.0-nightly-20261105110131

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./use-focus-within-through-press.js";
 export * from "./use-mobile.js";
 export * from "./use-toast.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/hooks/index.js

@@ -1,3 +1,4 @@
+export * from "./use-focus-within-through-press.js";
 export * from "./use-mobile.js";
 export * from "./use-toast.js";
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

package/dist/hooks/use-focus-within-through-press.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+/**
+ * Tracks focus inside an element that shrinks when focus leaves it, such as a
+ * reply box that rests as one line.
+ *
+ * Pressing a control outside the element moves focus on pointer down. Shrinking
+ * right then moves everything laid out around the element, so the control can
+ * slide out from under the pointer before the release, and the click lands
+ * somewhere else. Focus lost during a press only counts once that press's click
+ * has fired.
+ */
+export declare function useFocusWithinThroughPress(ref: React.RefObject<HTMLElement | null>): {
+    focused: boolean;
+    focusWithinProps: {
+        onFocusCapture: () => void;
+        onBlurCapture: (event: React.FocusEvent) => void;
+    };
+};
+//# sourceMappingURL=use-focus-within-through-press.d.ts.map

package/dist/hooks/use-focus-within-through-press.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-within-through-press.d.ts","sourceRoot":"","sources":["../../src/hooks/use-focus-within-through-press.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CACxC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;;;;+BAwDf,KAAK,CAAC,UAAU;;EAY1C"}

package/dist/hooks/use-focus-within-through-press.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+// A tap moves focus and clicks after its release, within the browser's
+// double-tap delay of about 300 ms.
+const TAP_CLICK_WAIT_MS = 400;
+/**
+ * Tracks focus inside an element that shrinks when focus leaves it, such as a
+ * reply box that rests as one line.
+ *
+ * Pressing a control outside the element moves focus on pointer down. Shrinking
+ * right then moves everything laid out around the element, so the control can
+ * slide out from under the pointer before the release, and the click lands
+ * somewhere else. Focus lost during a press only counts once that press's click
+ * has fired.
+ */
+export function useFocusWithinThroughPress(ref) {
+    const [focused, setFocused] = React.useState(false);
+    const pressing = React.useRef(false);
+    const blurredDuringPress = React.useRef(false);
+    React.useEffect(() => {
+        let settleTimer;
+        let tapTimer;
+        const onPressStart = () => {
+            clearTimeout(tapTimer);
+            pressing.current = true;
+        };
+        const onPressEnd = () => {
+            clearTimeout(tapTimer);
+            pressing.current = false;
+            if (!blurredDuringPress.current)
+                return;
+            blurredDuringPress.current = false;
+            clearTimeout(settleTimer);
+            // The click's own handlers run ahead of this timer.
+            settleTimer = setTimeout(() => {
+                setFocused(Boolean(ref.current?.contains(document.activeElement)));
+            });
+        };
+        const onPointerUp = (event) => {
+            if (event.pointerType !== "touch") {
+                onPressEnd();
+                return;
+            }
+            clearTimeout(tapTimer);
+            tapTimer = setTimeout(onPressEnd, TAP_CLICK_WAIT_MS);
+        };
+        window.addEventListener("pointerdown", onPressStart, true);
+        window.addEventListener("pointerup", onPointerUp, true);
+        window.addEventListener("pointercancel", onPressEnd, true);
+        window.addEventListener("click", onPressEnd, true);
+        // Neither of these reports a release, so a press could otherwise stick.
+        window.addEventListener("contextmenu", onPressEnd, true);
+        window.addEventListener("blur", onPressEnd);
+        return () => {
+            clearTimeout(settleTimer);
+            clearTimeout(tapTimer);
+            window.removeEventListener("pointerdown", onPressStart, true);
+            window.removeEventListener("pointerup", onPointerUp, true);
+            window.removeEventListener("pointercancel", onPressEnd, true);
+            window.removeEventListener("click", onPressEnd, true);
+            window.removeEventListener("contextmenu", onPressEnd, true);
+            window.removeEventListener("blur", onPressEnd);
+        };
+    }, [ref]);
+    const focusWithinProps = {
+        onFocusCapture: () => {
+            blurredDuringPress.current = false;
+            setFocused(true);
+        },
+        onBlurCapture: (event) => {
+            const next = event.relatedTarget;
+            if (next && ref.current?.contains(next))
+                return;
+            if (pressing.current) {
+                blurredDuringPress.current = true;
+                return;
+            }
+            setFocused(false);
+        },
+    };
+    return { focused, focusWithinProps };
+}
+//# sourceMappingURL=use-focus-within-through-press.js.map

package/dist/hooks/use-focus-within-through-press.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-within-through-press.js","sourceRoot":"","sources":["../../src/hooks/use-focus-within-through-press.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.224.0",
+  "version": "0.225.0-nightly-20261105110131",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -716,7 +716,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.224.0"
+    "@agent-native/agentkit": "^0.225.0-nightly-20261105110131"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -740,10 +740,10 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.224.0"
+    "@agent-native/core": "^0.225.0-nightly-20261105110131"
   },
   "peerDependencies": {
-    "@agent-native/core": ">=0.224.0-0",
+    "@agent-native/core": "0.225.0-nightly-20261105110131",
     "@excalidraw/excalidraw": ">=0.18",
     "@excalidraw/mermaid-to-excalidraw": ">=2",
     "@tanstack/react-query": "^5.99.2",

package/src/app/review/ReviewCommentComposer.spec.tsx

@@ -198,6 +198,46 @@ describe("ReviewCommentComposer", () => {
     ).not.toBeNull();
   });
 
+  it("keeps the reply variant expanded until a press outside it has finished", async () => {
+    await render(
+      <ReviewCommentComposer
+        variant="reply"
+        value=""
+        onChange={() => {}}
+        onSubmit={() => {}}
+      />,
+    );
+    const field = container.querySelector("[data-review-composer-field]");
+    const dispatchFocus = (type: "focusin" | "focusout") =>
+      act(() => {
+        editorDom().dispatchEvent(new FocusEvent(type, { bubbles: true }));
+      });
+    const press = (type: "pointerdown" | "pointerup") =>
+      act(() => {
+        document.body.dispatchEvent(new Event(type, { bubbles: true }));
+      });
+
+    dispatchFocus("focusin");
+    expect(field?.hasAttribute("data-expanded")).toBe(true);
+
+    vi.useFakeTimers();
+    try {
+      press("pointerdown");
+      dispatchFocus("focusout");
+      expect(field?.hasAttribute("data-expanded")).toBe(true);
+
+      press("pointerup");
+      expect(field?.hasAttribute("data-expanded")).toBe(true);
+
+      act(() => {
+        vi.runOnlyPendingTimers();
+      });
+      expect(field?.hasAttribute("data-expanded")).toBe(false);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   it("stays expanded while the reply has content", async () => {
     await render(
       <ReviewCommentComposer

package/src/app/review/ReviewCommentComposer.tsx

@@ -2,6 +2,7 @@ import type {
   ReviewMention,
   ReviewResolutionTarget,
 } from "@agent-native/core/review/types";
+import { useFocusWithinThroughPress } from "@agent-native/toolkit/hooks/use-focus-within-through-press";
 import { Button } from "@agent-native/toolkit/ui/button";
 import {
   DropdownMenu,
@@ -156,7 +157,7 @@ export function ReviewCommentComposer({
   const editorRef = useRef<ReviewComposerEditorHandle>(null);
   const fieldRef = useRef<HTMLDivElement>(null);
   const [editorReady, setEditorReady] = useState(false);
-  const [focused, setFocused] = useState(false);
+  const { focused, focusWithinProps } = useFocusWithinThroughPress(fieldRef);
   const [emojiOpen, setEmojiOpen] = useState(false);
   const [mentionOpen, setMentionOpen] = useState(false);
   const [mentionQuery, setMentionQuery] = useState("");
@@ -439,11 +440,7 @@ export function ReviewCommentComposer({
               ? "border-input focus-within:border-[color:var(--review-composer-focus,hsl(var(--ring)))]"
               : "border-transparent",
           )}
-          onFocusCapture={() => setFocused(true)}
-          onBlurCapture={(event) => {
-            if (!fieldRef.current?.contains(event.relatedTarget as Node | null))
-              setFocused(false);
-          }}
+          {...focusWithinProps}
           onClick={(event) => {
             if (
               !disabled &&

package/src/composer/MentionPopover.spec.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { MentionPopover } from "./MentionPopover.js";
+import type { MentionItem } from "./types.js";
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  document.body
+    .querySelectorAll("[data-radix-popper-content-wrapper]")
+    .forEach((element) => element.remove());
+  vi.unstubAllGlobals();
+});
+
+const items: MentionItem[] = [
+  {
+    id: "member:alice",
+    label: "Alice",
+    source: "host",
+    refType: "member",
+    section: "People",
+  },
+  {
+    id: "ai:claude",
+    label: "Claude Haiku 5.5",
+    source: "host",
+    refType: "ai",
+    section: "Agents",
+  },
+];
+
+function rowLabels(keepSectionOrder: boolean) {
+  act(() => {
+    root.render(
+      <MentionPopover
+        type="@"
+        position={{ top: 400, left: 0, width: 320 }}
+        mentionItems={items}
+        skills={[]}
+        isLoading={false}
+        query=""
+        onSelectMention={() => undefined}
+        onSelectSkill={() => undefined}
+        onClose={() => undefined}
+        keepSectionOrder={keepSectionOrder}
+      />,
+    );
+  });
+  return [...document.querySelectorAll("[data-mention-index]")].map(
+    (row) => row.textContent,
+  );
+}
+
+describe("mention sections", () => {
+  it("puts the default search's agents first", () => {
+    expect(rowLabels(false)).toEqual(["Claude Haiku 5.5", "Alice"]);
+  });
+
+  it("keeps a host's own order, even for a section named Agents", () => {
+    expect(rowLabels(true)).toEqual(["Alice", "Claude Haiku 5.5"]);
+  });
+});

package/src/composer/MentionPopover.tsx

@@ -59,6 +59,13 @@ interface MentionPopoverProps {
    * people and agent pickers where the description is an identity (an email).
    */
   density?: "default" | "stacked";
+  /**
+   * Show sections in the order their items arrive. The default search streams
+   * its sections as each source resolves, so they are sorted; a host's own list
+   * already is in the order it wants, and an "Agents" section of its own would
+   * otherwise jump to the top.
+   */
+  keepSectionOrder?: boolean;
 }
 
 const iconProps = { size: 16, className: "shrink-0 text-muted-foreground" };
@@ -192,6 +199,7 @@ export const MentionPopover = forwardRef<
     onSelectCommand,
     onClose,
     density = "default",
+    keepSectionOrder = false,
   } = props;
   const stacked = density === "stacked";
 
@@ -244,6 +252,8 @@ export const MentionPopover = forwardRef<
       if (!groups.has(section)) groups.set(section, []);
       groups.get(section)!.push(item);
     }
+    if (keepSectionOrder)
+      return [...groups].map(([section, items]) => ({ section, items }));
     const sorted: { section: string; items: MentionItem[] }[] = [];
     const knownSections = new Set([
       "Agents",
@@ -274,7 +284,7 @@ export const MentionPopover = forwardRef<
       sorted.push({ section: "Other", items: groups.get("Other")! });
     }
     return sorted;
-  }, [type, mentionItems]);
+  }, [type, mentionItems, keepSectionOrder]);
 
   const flatMentionItems = React.useMemo(() => {
     return groupedMentions.flatMap((g) => g.items);

package/src/composer/TiptapComposer.spec.ts

@@ -42,6 +42,7 @@ import {
   hasConfiguredCloudProvider,
   MODEL_SELECTOR_POPOVER_STYLE,
   mentionItemMatchesQuery,
+  mentionItemsForQuery,
   modelProviderGroupLabel,
   resolveContextChipBackspaceAction,
   shouldRenderModelSelector,
@@ -5604,6 +5605,37 @@ describe("mentionItemMatchesQuery", () => {
   });
 });
 
+describe("mentionItemsForQuery", () => {
+  const person = {
+    id: "member:sam@gmail.example",
+    label: "Sam Lee",
+    description: "sam@gmail.example",
+    source: "content",
+    refType: "content-comment-member",
+  };
+  const agent = {
+    id: "ai:anthropic:claude-sonnet-5",
+    label: "Claude Sonnet 5",
+    description: "Anthropic",
+    aliases: ["Sonnet", "AI"],
+    source: "content",
+    refType: "content-comment-ai-recipient",
+  };
+
+  it("keeps the given order when nothing is named exactly", () => {
+    expect(mentionItemsForQuery([person, agent], "")).toEqual([person, agent]);
+    expect(mentionItemsForQuery([person, agent], "s")).toEqual([person, agent]);
+  });
+
+  it("puts the item a whole name or alias names ahead of partial matches", () => {
+    expect(mentionItemsForQuery([person, agent], "ai")).toEqual([
+      agent,
+      person,
+    ]);
+    expect(mentionItemsForQuery([person, agent], "Sam Lee")).toEqual([person]);
+  });
+});
+
 describe("modelProviderGroupLabel", () => {
   it("drops the Builder.io suffix when the family name is unique", () => {
     const builder = { engine: "builder", label: "OpenAI · Builder.io" };

package/src/composer/TiptapComposer.tsx

@@ -469,6 +469,20 @@ export function mentionItemMatchesQuery(
   );
 }
 
+/**
+ * The items that match a query, in their given order except that one named
+ * exactly by the query comes first, so typing a whole name or alias and
+ * pressing Enter picks it over an earlier item that merely contains the text.
+ */
+export function mentionItemsForQuery(
+  items: MentionItem[],
+  query: string,
+): MentionItem[] {
+  const matches = items.filter((item) => mentionItemMatchesQuery(item, query));
+  const exact = findExactMentionItem(matches, query.trim());
+  return exact ? [exact, ...matches.filter((item) => item !== exact)] : matches;
+}
+
 export function findExactMentionItem(
   items: MentionItem[],
   query: string,
@@ -3204,9 +3218,7 @@ function TiptapComposerSurface({
       filterMentionItemsForSlots(
         [
           // Host items arrive unfiltered; the default search filters itself.
-          ...hostMentionItems.filter((item) =>
-            mentionItemMatchesQuery(item, mentionQuery),
-          ),
+          ...mentionItemsForQuery(hostMentionItems, mentionQuery),
           ...mentionItems,
         ].filter(
           (item, index, items) =>
@@ -6856,6 +6868,7 @@ function TiptapComposerSurface({
       <MentionPopover
         ref={popoverRef}
         density={mentionPopoverDensity}
+        keepSectionOrder={!includeDefaultMentionSearch}
         type={popover?.type ?? "@"}
         position={popover?.position ?? null}
         mentionItems={inlineMentionItems}

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
+export * from "./use-focus-within-through-press.js";
 export * from "./use-mobile.js";
 export * from "./use-toast.js";

package/src/hooks/use-focus-within-through-press.spec.tsx

@@ -0,0 +1,208 @@
+// @vitest-environment happy-dom
+
+import { act, useRef } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { useFocusWithinThroughPress } from "./use-focus-within-through-press.js";
+
+function Field() {
+  const ref = useRef<HTMLDivElement>(null);
+  const { focused, focusWithinProps } = useFocusWithinThroughPress(ref);
+  return (
+    <div>
+      <div ref={ref} data-focused={focused} {...focusWithinProps}>
+        <input data-testid="inside" />
+        <input data-testid="inside-too" />
+      </div>
+      <button data-testid="outside" />
+    </div>
+  );
+}
+
+describe("useFocusWithinThroughPress", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  const inside = () =>
+    container.querySelector<HTMLInputElement>('[data-testid="inside"]')!;
+  const insideToo = () =>
+    container.querySelector<HTMLInputElement>('[data-testid="inside-too"]')!;
+  const outside = () =>
+    container.querySelector<HTMLButtonElement>('[data-testid="outside"]')!;
+  const focused = () =>
+    container.querySelector("[data-focused]")?.getAttribute("data-focused");
+
+  const press = (
+    type: "pointerdown" | "pointerup" | "pointercancel" | "contextmenu",
+    pointerType = "mouse",
+  ) =>
+    act(() => {
+      outside().dispatchEvent(
+        Object.assign(new Event(type, { bubbles: true }), { pointerType }),
+      );
+    });
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    act(() => root.render(<Field />));
+    act(() => inside().focus());
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("reports focus entering the element", () => {
+    expect(focused()).toBe("true");
+  });
+
+  it("clears at once when focus leaves without a press", () => {
+    act(() => outside().focus());
+    expect(focused()).toBe("false");
+  });
+
+  it("stays focused when focus moves within the element", () => {
+    act(() => insideToo().focus());
+    expect(focused()).toBe("true");
+  });
+
+  it("holds through a press outside until that press's click has fired", () => {
+    let focusedAtClick: string | null | undefined;
+    const onClick = () => {
+      focusedAtClick = focused();
+    };
+    outside().addEventListener("click", onClick);
+
+    press("pointerdown");
+    act(() => outside().focus());
+    expect(focused()).toBe("true");
+
+    press("pointerup");
+    expect(focused()).toBe("true");
+    act(() => outside().click());
+    expect(focusedAtClick).toBe("true");
+
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("holds through a tap, which moves focus and clicks after its release", () => {
+    let focusedAtClick: string | null | undefined;
+    const onClick = () => {
+      focusedAtClick = focused();
+    };
+    outside().addEventListener("click", onClick);
+
+    press("pointerdown", "touch");
+    press("pointerup", "touch");
+    act(() => outside().focus());
+    expect(focused()).toBe("true");
+
+    act(() => outside().click());
+    expect(focusedAtClick).toBe("true");
+
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("settles a tap that never clicks once the wait runs out", () => {
+    press("pointerdown", "touch");
+    press("pointerup", "touch");
+    act(() => outside().focus());
+    expect(focused()).toBe("true");
+
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("settles when a context menu takes over the press", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    press("contextmenu");
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("settles when the window loses focus during the press", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    act(() => {
+      window.dispatchEvent(new Event("blur"));
+    });
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("settles after a cancelled press too", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    press("pointercancel");
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("false");
+  });
+
+  it("stays focused when focus returns during the press", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    act(() => inside().focus());
+    press("pointerup");
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("true");
+  });
+
+  it("stays focused when focus returns between the release and the timer", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    press("pointerup");
+    act(() => inside().focus());
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("true");
+  });
+
+  it("treats a blur after the press as a plain blur", () => {
+    press("pointerdown");
+    press("pointerup");
+    act(() => {
+      vi.runOnlyPendingTimers();
+    });
+    expect(focused()).toBe("true");
+    act(() => outside().focus());
+    expect(focused()).toBe("false");
+  });
+
+  it("drops a pending settle when it unmounts", () => {
+    press("pointerdown");
+    act(() => outside().focus());
+    press("pointerup");
+    act(() => root.unmount());
+    expect(vi.getTimerCount()).toBe(0);
+    root = createRoot(container);
+  });
+});