@assistant-ui/react 0.14.16 → 0.14.18

package/src/primitives/composer/ComposerInput.test.tsx

@@ -61,7 +61,7 @@ vi.mock("@assistant-ui/store", () => {
 });
 
 vi.mock("@assistant-ui/tap", () => ({
-  flushResourcesSync: (fn: () => void) => fn(),
+  flushTapSync: (fn: () => void) => fn(),
 }));
 
 vi.mock("./ComposerInputPluginContext", () => ({

package/src/primitives/composer/ComposerInput.tsx

@@ -22,7 +22,7 @@ import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
 import { useOnScrollToBottom } from "../../utils/hooks/useOnScrollToBottom";
 import { useMediaQuery } from "../../utils/hooks/useMediaQuery";
 import { useAuiState, useAui } from "@assistant-ui/store";
-import { flushResourcesSync } from "@assistant-ui/tap";
+import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useTriggerPopoverActiveAriaOptional } from "./trigger/TriggerPopoverRootContext";
 
@@ -350,7 +350,7 @@ export const ComposerPrimitiveInput = forwardRef<
           }
           const isComposing = nativeIsComposing || compositionRef.current;
           // keep controlled value in sync mid-IME so react does not reset the textarea to a stale value
-          flushResourcesSync(() => {
+          flushTapSync(() => {
             aui.composer().setText(e.target.value);
           });
           if (isComposing) return;
@@ -377,7 +377,7 @@ export const ComposerPrimitiveInput = forwardRef<
           compositionRef.current = false;
           if (!aui.composer().getState().isEditing) return;
           const target = e.target as HTMLTextAreaElement;
-          flushResourcesSync(() => {
+          flushTapSync(() => {
             aui.composer().setText(target.value);
           });
           const pos = target.selectionStart ?? target.value.length;

package/src/primitives/composer/trigger/TriggerPopoverResource.ts

@@ -51,7 +51,7 @@ export type TriggerPopoverResourceOutput = {
 };
 
 /** Composes detection, navigation, keyboard, and selection sub-resources. */
-export const TriggerPopoverResource = resource(function TriggerPopoverResource({
+const useTriggerPopoverResource = ({
   adapter,
   text,
   triggerChar,
@@ -66,7 +66,7 @@ export const TriggerPopoverResource = resource(function TriggerPopoverResource({
   aui: AssistantClient;
   /** Stable ID for accessible element IDs (pass React's useId() from component layer). */
   popoverId: string;
-}): TriggerPopoverResourceOutput {
+}): TriggerPopoverResourceOutput => {
   const detection = useResource(
     TriggerDetectionResource({ text, triggerChar }),
   );
@@ -133,4 +133,6 @@ export const TriggerPopoverResource = resource(function TriggerPopoverResource({
     setCursorPosition: detection.setCursorPosition,
     registerSelectItemOverride: selection.registerSelectItemOverride,
   };
-});
+};
+
+export const TriggerPopoverResource = resource(useTriggerPopoverResource);

package/src/primitives/composer/trigger/triggerDetectionResource.ts

@@ -18,27 +18,27 @@ export type TriggerDetectionResourceOutput = {
 };
 
 /** Tracks cursor position and derives the active trigger + query from composer text. */
-export const TriggerDetectionResource = resource(
-  function TriggerDetectionResource({
-    text,
-    triggerChar,
-  }: {
-    text: string;
-    triggerChar: string;
-  }): TriggerDetectionResourceOutput {
-    const [cursorPosition, setCursorPosition] = useState(text.length);
+const useTriggerDetectionResource = ({
+  text,
+  triggerChar,
+}: {
+  text: string;
+  triggerChar: string;
+}): TriggerDetectionResourceOutput => {
+  const [cursorPosition, setCursorPosition] = useState(text.length);
 
-    const trigger = useMemo(() => {
-      const pos = Math.min(cursorPosition, text.length);
-      return detectTrigger(text, triggerChar, pos);
-    }, [cursorPosition, text, triggerChar]);
+  const trigger = useMemo(() => {
+    const pos = Math.min(cursorPosition, text.length);
+    return detectTrigger(text, triggerChar, pos);
+  }, [cursorPosition, text, triggerChar]);
 
-    const query = trigger?.query ?? "";
+  const query = trigger?.query ?? "";
 
-    return {
-      trigger,
-      query,
-      setCursorPosition,
-    };
-  },
-);
+  return {
+    trigger,
+    query,
+    setCursorPosition,
+  };
+};
+
+export const TriggerDetectionResource = resource(useTriggerDetectionResource);

package/src/primitives/composer/trigger/triggerKeyboardResource.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { createResourceRoot } from "@assistant-ui/tap";
+import { createTapRoot, useResource } from "@assistant-ui/tap";
 import type {
   Unstable_TriggerCategory,
   Unstable_TriggerItem,
@@ -41,9 +41,10 @@ const render = (
     close: vi.fn(),
     ...overrides,
   };
-  const root = createResourceRoot();
-  const sub = root.render(TriggerKeyboardResource(props));
-  return { sub, props };
+  const root = createTapRoot(function Root() {
+    return useResource(TriggerKeyboardResource(props));
+  });
+  return { sub: root, props };
 };
 
 describe("TriggerKeyboardResource", () => {

package/src/primitives/composer/trigger/triggerKeyboardResource.ts

@@ -34,113 +34,111 @@ export type TriggerKeyboardResourceOutput = {
  * Owns keyboard-driven highlight state for the popover. Delegates selection,
  * category drill-in, back, and close to the callbacks supplied by the parent.
  */
-export const TriggerKeyboardResource = resource(
-  function TriggerKeyboardResource({
-    navigableList,
-    isSearchMode,
-    activeCategoryId,
-    query,
-    popoverId,
-    open,
-    selectItem,
-    selectCategory,
-    goBack,
-    close,
-  }: {
-    navigableList: readonly (Unstable_TriggerCategory | Unstable_TriggerItem)[];
-    isSearchMode: boolean;
-    activeCategoryId: string | null;
-    query: string;
-    popoverId: string;
-    open: boolean;
-    selectItem: (item: Unstable_TriggerItem) => void;
-    selectCategory: (categoryId: string) => void;
-    goBack: () => void;
-    close: () => void;
-  }): TriggerKeyboardResourceOutput {
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
+const useTriggerKeyboardResource = ({
+  navigableList,
+  isSearchMode,
+  activeCategoryId,
+  query,
+  popoverId,
+  open,
+  selectItem,
+  selectCategory,
+  goBack,
+  close,
+}: {
+  navigableList: readonly (Unstable_TriggerCategory | Unstable_TriggerItem)[];
+  isSearchMode: boolean;
+  activeCategoryId: string | null;
+  query: string;
+  popoverId: string;
+  open: boolean;
+  selectItem: (item: Unstable_TriggerItem) => void;
+  selectCategory: (categoryId: string) => void;
+  goBack: () => void;
+  close: () => void;
+}): TriggerKeyboardResourceOutput => {
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
 
-    useEffect(() => {
-      setHighlightedIndex(0);
-    }, [navigableList]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [navigableList]);
 
-    useEffect(() => {
-      setHighlightedIndex(0);
-    }, [isSearchMode, activeCategoryId]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [isSearchMode, activeCategoryId]);
 
-    const highlightIndex = useEffectEvent((index: number) => {
-      if (index < 0 || index >= navigableList.length) return;
-      if (index === highlightedIndex) return;
-      setHighlightedIndex(index);
-    });
+  const highlightIndex = useEffectEvent((index: number) => {
+    if (index < 0 || index >= navigableList.length) return;
+    if (index === highlightedIndex) return;
+    setHighlightedIndex(index);
+  });
 
-    const handleKeyDown = useEffectEvent(
-      (e: TriggerPopoverKeyEvent): boolean => {
-        if (!open) return false;
+  const handleKeyDown = useEffectEvent((e: TriggerPopoverKeyEvent): boolean => {
+    if (!open) return false;
 
-        switch (e.key) {
-          case "ArrowDown": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev < len - 1 ? prev + 1 : 0;
-            });
-            return true;
-          }
-          case "ArrowUp": {
-            e.preventDefault();
-            setHighlightedIndex((prev) => {
-              const len = navigableList.length;
-              if (len === 0) return 0;
-              return prev > 0 ? prev - 1 : len - 1;
-            });
-            return true;
-          }
-          case "Enter":
-          case "Tab": {
-            if (e.shiftKey) return false;
-            e.preventDefault();
-            const item = navigableList[highlightedIndex];
-            if (!item) return true;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          const len = navigableList.length;
+          if (len === 0) return 0;
+          return prev < len - 1 ? prev + 1 : 0;
+        });
+        return true;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          const len = navigableList.length;
+          if (len === 0) return 0;
+          return prev > 0 ? prev - 1 : len - 1;
+        });
+        return true;
+      }
+      case "Enter":
+      case "Tab": {
+        if (e.shiftKey) return false;
+        e.preventDefault();
+        const item = navigableList[highlightedIndex];
+        if (!item) return true;
 
-            if (isTriggerItem(item)) {
-              selectItem(item);
-            } else {
-              selectCategory(item.id);
-            }
-            return true;
-          }
-          case "Escape": {
-            e.preventDefault();
-            close();
-            return true;
-          }
-          case "Backspace": {
-            if (activeCategoryId && query === "") {
-              e.preventDefault();
-              goBack();
-              return true;
-            }
-            return false;
-          }
-          default:
-            return false;
+        if (isTriggerItem(item)) {
+          selectItem(item);
+        } else {
+          selectCategory(item.id);
         }
-      },
-    );
+        return true;
+      }
+      case "Escape": {
+        e.preventDefault();
+        close();
+        return true;
+      }
+      case "Backspace": {
+        if (activeCategoryId && query === "") {
+          e.preventDefault();
+          goBack();
+          return true;
+        }
+        return false;
+      }
+      default:
+        return false;
+    }
+  });
+
+  const highlightedEntry = navigableList[highlightedIndex];
+  const highlightedItemId =
+    open && highlightedEntry
+      ? `${popoverId}-option-${highlightedEntry.id}`
+      : undefined;
 
-    const highlightedEntry = navigableList[highlightedIndex];
-    const highlightedItemId =
-      open && highlightedEntry
-        ? `${popoverId}-option-${highlightedEntry.id}`
-        : undefined;
+  return {
+    highlightedIndex,
+    highlightedItemId,
+    highlightIndex,
+    handleKeyDown,
+  };
+};
 
-    return {
-      highlightedIndex,
-      highlightedItemId,
-      highlightIndex,
-      handleKeyDown,
-    };
-  },
-);
+export const TriggerKeyboardResource = resource(useTriggerKeyboardResource);

package/src/primitives/composer/trigger/triggerNavigationResource.ts

@@ -38,103 +38,97 @@ export type TriggerNavigationResourceOutput = {
  * Computes categories, items, search results, and navigation state from the
  * adapter + current query. Pure derivation — no side effects on the composer.
  */
-export const TriggerNavigationResource = resource(
-  function TriggerNavigationResource({
-    adapter,
-    query,
-    open,
-  }: {
-    adapter: Unstable_TriggerAdapter | undefined;
-    query: string;
-    open: boolean;
-  }): TriggerNavigationResourceOutput {
-    const [activeCategoryId, setActiveCategoryId] = useState<string | null>(
-      null,
-    );
-
-    useEffect(() => {
-      if (!open) setActiveCategoryId(null);
-    }, [open]);
-
-    const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
-      if (!open || !adapter) return [];
-      return adapter.categories();
-    }, [open, adapter]);
-
-    const effectiveActiveCategoryId = open ? activeCategoryId : null;
-
-    const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
-      if (!effectiveActiveCategoryId || !adapter) return [];
-      return adapter.categoryItems(effectiveActiveCategoryId);
-    }, [effectiveActiveCategoryId, adapter]);
-
-    const searchResults = useMemo<
-      readonly Unstable_TriggerItem[] | null
-    >(() => {
-      if (!open || !adapter || effectiveActiveCategoryId) return null;
-      // If categories exist and query is empty, show categories first (not search)
-      if (!query && categories.length > 0) return null;
-      if (adapter.search) return adapter.search(query);
-
-      // fallback: no adapter.search
-      const all: Unstable_TriggerItem[] = [];
-      const lower = query.toLowerCase();
-      for (const cat of categories) {
-        for (const item of adapter.categoryItems(cat.id)) {
-          if (matchesQuery(item, lower)) {
-            all.push(item);
-          }
+const useTriggerNavigationResource = ({
+  adapter,
+  query,
+  open,
+}: {
+  adapter: Unstable_TriggerAdapter | undefined;
+  query: string;
+  open: boolean;
+}): TriggerNavigationResourceOutput => {
+  const [activeCategoryId, setActiveCategoryId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) setActiveCategoryId(null);
+  }, [open]);
+
+  const categories = useMemo<readonly Unstable_TriggerCategory[]>(() => {
+    if (!open || !adapter) return [];
+    return adapter.categories();
+  }, [open, adapter]);
+
+  const effectiveActiveCategoryId = open ? activeCategoryId : null;
+
+  const allItems = useMemo<readonly Unstable_TriggerItem[]>(() => {
+    if (!effectiveActiveCategoryId || !adapter) return [];
+    return adapter.categoryItems(effectiveActiveCategoryId);
+  }, [effectiveActiveCategoryId, adapter]);
+
+  const searchResults = useMemo<readonly Unstable_TriggerItem[] | null>(() => {
+    if (!open || !adapter || effectiveActiveCategoryId) return null;
+    // If categories exist and query is empty, show categories first (not search)
+    if (!query && categories.length > 0) return null;
+    if (adapter.search) return adapter.search(query);
+
+    // fallback: no adapter.search
+    const all: Unstable_TriggerItem[] = [];
+    const lower = query.toLowerCase();
+    for (const cat of categories) {
+      for (const item of adapter.categoryItems(cat.id)) {
+        if (matchesQuery(item, lower)) {
+          all.push(item);
         }
       }
-      return all;
-    }, [open, adapter, query, effectiveActiveCategoryId, categories]);
-
-    const isSearchMode = searchResults !== null;
-
-    const filteredCategories = useMemo(() => {
-      if (isSearchMode) return [];
-      if (!query) return categories;
-      const lower = query.toLowerCase();
-      return categories.filter((cat) =>
-        cat.label.toLowerCase().includes(lower),
-      );
-    }, [categories, query, isSearchMode]);
-
-    const filteredItems = useMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (!query) return allItems;
-      const lower = query.toLowerCase();
-      return allItems.filter((item) => matchesQuery(item, lower));
-    }, [allItems, query, isSearchMode, searchResults]);
-
-    const navigableList = useMemo(() => {
-      if (isSearchMode) return searchResults ?? [];
-      if (effectiveActiveCategoryId) return filteredItems;
-      return filteredCategories;
-    }, [
-      isSearchMode,
-      searchResults,
-      effectiveActiveCategoryId,
-      filteredItems,
-      filteredCategories,
-    ]);
-
-    const selectCategory = useEffectEvent((categoryId: string) => {
-      setActiveCategoryId(categoryId);
-    });
-
-    const goBack = useEffectEvent(() => {
-      setActiveCategoryId(null);
-    });
-
-    return {
-      categories: filteredCategories,
-      items: filteredItems,
-      isSearchMode,
-      activeCategoryId: effectiveActiveCategoryId,
-      navigableList,
-      selectCategory,
-      goBack,
-    };
-  },
-);
+    }
+    return all;
+  }, [open, adapter, query, effectiveActiveCategoryId, categories]);
+
+  const isSearchMode = searchResults !== null;
+
+  const filteredCategories = useMemo(() => {
+    if (isSearchMode) return [];
+    if (!query) return categories;
+    const lower = query.toLowerCase();
+    return categories.filter((cat) => cat.label.toLowerCase().includes(lower));
+  }, [categories, query, isSearchMode]);
+
+  const filteredItems = useMemo(() => {
+    if (isSearchMode) return searchResults ?? [];
+    if (!query) return allItems;
+    const lower = query.toLowerCase();
+    return allItems.filter((item) => matchesQuery(item, lower));
+  }, [allItems, query, isSearchMode, searchResults]);
+
+  const navigableList = useMemo(() => {
+    if (isSearchMode) return searchResults ?? [];
+    if (effectiveActiveCategoryId) return filteredItems;
+    return filteredCategories;
+  }, [
+    isSearchMode,
+    searchResults,
+    effectiveActiveCategoryId,
+    filteredItems,
+    filteredCategories,
+  ]);
+
+  const selectCategory = useEffectEvent((categoryId: string) => {
+    setActiveCategoryId(categoryId);
+  });
+
+  const goBack = useEffectEvent(() => {
+    setActiveCategoryId(null);
+  });
+
+  return {
+    categories: filteredCategories,
+    items: filteredItems,
+    isSearchMode,
+    activeCategoryId: effectiveActiveCategoryId,
+    navigableList,
+    selectCategory,
+    goBack,
+  };
+};
+
+export const TriggerNavigationResource = resource(useTriggerNavigationResource);