@assistant-ui/react 0.15.24 → 0.15.26

package/src/primitives/composer/ComposerCancel.focus.test.tsx

@@ -0,0 +1,307 @@
+/** @vitest-environment jsdom */
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import type { ComponentProps, PropsWithChildren, ReactNode } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  useExternalStoreRuntime,
+} from "@assistant-ui/core/react";
+import type { ThreadMessageLike } from "@assistant-ui/core";
+import { ComposerPrimitiveRoot } from "./ComposerRoot";
+import { ComposerPrimitiveInput } from "./ComposerInput";
+import { ComposerPrimitiveCancel } from "./ComposerCancel";
+import { ThreadPrimitiveRoot } from "../thread/ThreadRoot";
+import { ThreadPrimitiveViewportProvider } from "../../context/providers/ThreadViewportProvider";
+import { ThreadPrimitiveMessages } from "../thread/ThreadMessages";
+import { ActionBarPrimitiveEdit } from "../actionBar/ActionBarEdit";
+
+const messages = [{ id: "user-message", text: "Original message" }];
+const { cancelOverride } = vi.hoisted(() => ({ cancelOverride: vi.fn() }));
+vi.mock("@assistant-ui/core/react", async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import("@assistant-ui/core/react")>();
+  return {
+    ...original,
+    useComposerCancel: () => {
+      const behavior = original.useComposerCancel();
+      return cancelOverride() ?? behavior;
+    },
+  };
+});
+const convertMessage = (
+  message: (typeof messages)[number],
+): ThreadMessageLike => ({
+  id: message.id,
+  role: "user",
+  content: [{ type: "text", text: message.text }],
+});
+
+const Provider = ({
+  children,
+  isRunning = false,
+  onCancel,
+}: PropsWithChildren<{
+  isRunning?: boolean;
+  onCancel?: () => Promise<void>;
+}>) => {
+  const runtime = useExternalStoreRuntime({
+    messages,
+    convertMessage,
+    onNew: async () => {},
+    onEdit: async () => {},
+    isRunning,
+    onCancel,
+  });
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+};
+
+const Message = () => (
+  <ActionBarPrimitiveEdit>Edit message</ActionBarPrimitiveEdit>
+);
+
+type Options = {
+  nonForm?: boolean;
+  disabledMain?: boolean;
+  showMain?: boolean;
+  contentEditable?: boolean;
+  beforeMain?: ReactNode;
+  onCancelClick?: ComponentProps<typeof ComposerPrimitiveCancel>["onClick"];
+};
+
+const setup = ({
+  nonForm,
+  disabledMain,
+  showMain = true,
+  contentEditable,
+  beforeMain,
+  onCancelClick,
+}: Options = {}) => {
+  const EditComposer = () => (
+    <ComposerPrimitiveRoot render={nonForm ? <div /> : undefined}>
+      <ComposerPrimitiveInput aria-label="Edit composer" autoFocus />
+      <ComposerPrimitiveCancel onClick={onCancelClick}>
+        Cancel edit
+      </ComposerPrimitiveCancel>
+    </ComposerPrimitiveRoot>
+  );
+  render(
+    <Provider>
+      <input aria-label="Outside thread" />
+      <ThreadPrimitiveRoot>
+        <ThreadPrimitiveViewportProvider>
+          <ThreadPrimitiveMessages components={{ Message, EditComposer }} />
+          {beforeMain}
+          {showMain && (
+            <ComposerPrimitiveRoot render={nonForm ? <section /> : undefined}>
+              {contentEditable ? (
+                <div
+                  role="textbox"
+                  aria-label="Main composer"
+                  contentEditable
+                />
+              ) : (
+                <ComposerPrimitiveInput
+                  aria-label="Main composer"
+                  disabled={disabledMain}
+                />
+              )}
+            </ComposerPrimitiveRoot>
+          )}
+        </ThreadPrimitiveViewportProvider>
+      </ThreadPrimitiveRoot>
+    </Provider>,
+  );
+  fireEvent.click(screen.getByRole("button", { name: "Edit message" }));
+  const input = screen.getByRole("textbox", { name: "Edit composer" });
+  act(() => input.focus());
+  return { input, cancel: screen.getByRole("button", { name: "Cancel edit" }) };
+};
+
+afterEach(() => {
+  cancelOverride.mockReset();
+});
+
+describe("edit composer cancellation focus", () => {
+  it.each(["Escape", "Cancel"])(
+    "returns focus to the main composer after %s",
+    (action) => {
+      const { input, cancel } = setup();
+      if (action === "Escape") {
+        fireEvent.keyDown(input, { key: "Escape" });
+      } else {
+        act(() => cancel.focus());
+        fireEvent.click(cancel);
+      }
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it("supports non-form composer roots and a contenteditable destination", () => {
+    const { input } = setup({ nonForm: true, contentEditable: true });
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not focus a nested thread's composer", () => {
+    const { input } = setup({
+      beforeMain: (
+        <Provider>
+          <ThreadPrimitiveRoot>
+            <ComposerPrimitiveRoot>
+              <textarea aria-label="Nested composer" />
+            </ComposerPrimitiveRoot>
+          </ThreadPrimitiveRoot>
+        </Provider>
+      ),
+    });
+    fireEvent.keyDown(input, { key: "Escape" });
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it.each(["hidden", "inert"] as const)(
+    "skips a %s main composer before the usable destination",
+    (attribute) => {
+      const { input } = setup({
+        beforeMain: (
+          <ComposerPrimitiveRoot {...{ [attribute]: true }}>
+            <textarea aria-label="Unavailable composer" />
+          </ComposerPrimitiveRoot>
+        ),
+      });
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(document.activeElement).toBe(
+        screen.getByRole("textbox", { name: "Main composer" }),
+      );
+    },
+  );
+
+  it.each([{ showMain: false }, { disabledMain: true }])(
+    "cancels safely without a usable destination: %j",
+    (options) => {
+      const { input } = setup(options);
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("preserves focus deliberately moved by the consumer", () => {
+    const { cancel } = setup({
+      onCancelClick: () =>
+        screen.getByRole("textbox", { name: "Outside thread" }).focus(),
+    });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(screen.queryByRole("textbox", { name: "Edit composer" })).toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Outside thread" }),
+    );
+  });
+
+  it("restores focus when cancellation hides the connected edit composer", () => {
+    cancelOverride.mockReturnValue({
+      disabled: false,
+      cancel: () => {
+        const active = document.activeElement as HTMLElement;
+        active.closest<HTMLElement>('[data-aui-composer-type="edit"]')!.hidden =
+          true;
+        active.blur();
+      },
+    });
+    const { cancel } = setup();
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+
+    expect(cancel.isConnected).toBe(true);
+    expect(cancel.closest("[hidden]")).not.toBeNull();
+    expect(document.activeElement).toBe(
+      screen.getByRole("textbox", { name: "Main composer" }),
+    );
+  });
+
+  it("does not cancel or restore focus when the consumer prevents the action", () => {
+    const { cancel } = setup({
+      onCancelClick: (event) => event.preventDefault(),
+    });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(
+      screen.queryByRole("textbox", { name: "Edit composer" }),
+    ).not.toBeNull();
+    expect(document.activeElement).toBe(cancel);
+  });
+
+  it("leaves focus and editing unchanged when cancellation throws", () => {
+    const error = new Error("Cancellation failed");
+    const cancel = vi.fn(() => {
+      throw error;
+    });
+    cancelOverride.mockReturnValue({
+      disabled: false,
+      cancel,
+    });
+    const { cancel: button } = setup();
+    act(() => button.focus());
+    const onError = (event: ErrorEvent) => {
+      if (event.error === error) event.preventDefault();
+    };
+    window.addEventListener("error", onError);
+    try {
+      fireEvent.click(button);
+      expect(cancel).toHaveBeenCalledOnce();
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).not.toBeNull();
+      expect(document.activeElement).toBe(button);
+    } finally {
+      window.removeEventListener("error", onError);
+    }
+  });
+
+  it.each(["input", "button"])(
+    "does not restore focus after pointer cancellation with focus on the %s",
+    (source) => {
+      const { input, cancel } = setup();
+      act(() => (source === "input" ? input : cancel).focus());
+      fireEvent.click(cancel, { detail: 1 });
+      expect(
+        screen.queryByRole("textbox", { name: "Edit composer" }),
+      ).toBeNull();
+      expect(document.activeElement).toBe(document.body);
+    },
+  );
+
+  it("does not move focus when cancelling a running thread", () => {
+    const onCancel = vi.fn(async () => {});
+    render(
+      <Provider isRunning onCancel={onCancel}>
+        <ThreadPrimitiveRoot>
+          <ComposerPrimitiveRoot>
+            <textarea aria-label="Main composer" />
+            <ComposerPrimitiveCancel>Stop run</ComposerPrimitiveCancel>
+          </ComposerPrimitiveRoot>
+        </ThreadPrimitiveRoot>
+      </Provider>,
+    );
+    const cancel = screen.getByRole("button", { name: "Stop run" });
+    act(() => cancel.focus());
+    fireEvent.click(cancel);
+    expect(onCancel).toHaveBeenCalledOnce();
+    expect(document.activeElement).toBe(cancel);
+  });
+});

package/src/primitives/composer/ComposerCancel.ts

@@ -5,12 +5,16 @@ import {
   type ActionButtonProps,
   createActionButton,
 } from "../../utils/createActionButton";
+import type { MouseEvent } from "react";
 import { useComposerCancel as useComposerCancelBehavior } from "@assistant-ui/core/react";
+import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
 
 const useComposerCancel = () => {
   const { disabled, cancel } = useComposerCancelBehavior();
+  const cancelWithFocus = useComposerCancelWithFocus(cancel);
   if (disabled) return null;
-  return cancel;
+  return (event: MouseEvent<HTMLButtonElement>) =>
+    cancelWithFocus(event.detail === 0 ? event.currentTarget : null);
 };
 
 export namespace ComposerPrimitiveCancel {
@@ -27,6 +31,9 @@ export namespace ComposerPrimitiveCancel {
  *
  * This component automatically handles the cancel functionality and is disabled
  * when canceling is not available.
+ * Keyboard or assistive-technology activation after editing returns focus to the
+ * main thread composer when available, unless a handler has moved focus elsewhere.
+ * Pointer activation preserves the existing focus behavior.
  *
  * @example
  * ```tsx

package/src/primitives/composer/ComposerInput.tsx

@@ -27,6 +27,7 @@ import { useAui } from "@assistant-ui/store";
 import { flushTapSync } from "@assistant-ui/tap";
 import { useComposerInputPluginRegistryOptional } from "./ComposerInputPluginContext";
 import { useComposerCompactContextOptional } from "./ComposerCompactContext";
+import { useComposerCancelWithFocus } from "./useComposerCancelWithFocus";
 import {
   useComposerInputDisabled,
   useComposerInputValue,
@@ -50,21 +51,32 @@ export namespace ComposerPrimitiveInput {
     render?: ReactElement | undefined;
     /**
      * Whether to cancel message composition when Escape is pressed.
+     * After cancelling an edit, focus returns to the main thread composer when
+     * available, unless a handler has moved focus elsewhere.
      * @default true
      */
     cancelOnEscape?: boolean | undefined;
     /**
      * Whether to automatically focus the input when a new run starts.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnRunStart?: boolean | undefined;
     /**
      * Whether to automatically focus the input when scrolling to bottom.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnScrollToBottom?: boolean | undefined;
     /**
      * Whether to automatically focus the input when switching threads.
+     *
+     * @deprecated Experimental since 2024-10-12. Not scheduled for removal; the API may change in any release.
+     *
      * @default true
      */
     unstable_focusOnThreadSwitched?: boolean | undefined;
@@ -73,6 +85,9 @@ export namespace ComposerPrimitiveInput {
      * instead of submitting, detected via
      * `(pointer: coarse) and (not (any-pointer: fine))`. Only takes effect
      * when `submitMode` resolves to `"enter"`.
+     *
+     * @deprecated Experimental since 2026-05-24. Not scheduled for removal; the API may change in any release.
+     *
      * @default false
      */
     unstable_insertNewlineOnTouchEnter?: boolean | undefined;
@@ -119,7 +134,7 @@ export namespace ComposerPrimitiveInput {
  * keyboard shortcuts, file paste support, and intelligent focus management.
  * It integrates with the composer context to manage message state and submission.
  *
- * When rendered inside `Unstable_TriggerPopoverRoot` and a popover is open, the
+ * When rendered inside `TriggerPopoverRoot` and a popover is open, the
  * underlying `<textarea>` automatically receives `aria-controls`,
  * `aria-expanded`, `aria-haspopup`, and `aria-activedescendant` for the
  * combobox relationship. These computed attributes override user-provided
@@ -192,6 +207,9 @@ export const ComposerPrimitiveInput = forwardRef<
     const value = useComposerInputValue();
     const isDisabled = useComposerInputDisabled(disabledProp);
     const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const cancel = useComposerCancelWithFocus(
+      useCallback(() => aui.composer.cancel(), [aui]),
+    );
     const ref = useComposedRefs(forwardedRef, textareaRef);
     // suppress text/cursor broadcasts during IME composition
     const compositionRef = useRef(false);
@@ -214,7 +232,7 @@ export const ComposerPrimitiveInput = forwardRef<
 
       const composer = aui.composer;
       if (composer.getState().canCancel) {
-        composer.cancel();
+        cancel(textareaRef.current);
         e.preventDefault();
       }
     });

package/src/primitives/composer/ComposerRoot.tsx

@@ -14,11 +14,10 @@ import {
 } from "react";
 import { useComposerSend } from "./ComposerSend";
 import { ComposerCompactContext } from "./ComposerCompactContext";
-
-const CONTENT_EDITABLE_SELECTOR =
-  "[contenteditable]:not([contenteditable='false'])";
-
-const COMPOSER_INPUT_SELECTOR = `textarea:not(:disabled), ${CONTENT_EDITABLE_SELECTOR}`;
+import {
+  COMPOSER_INPUT_SELECTOR,
+  CONTENT_EDITABLE_SELECTOR,
+} from "./composerInputSelector";
 
 // Keeps tabindex="-1": roving-tabindex widgets click-focus items at -1.
 const INTERACTIVE_ELEMENT_SELECTOR = [
@@ -82,6 +81,7 @@ export const ComposerPrimitiveRoot = forwardRef<
   ComposerPrimitiveRoot.Props
 >(({ onSubmit, onMouseDown, compact, ...rest }, forwardedRef) => {
   const send = useComposerSend();
+  const composerType = useAuiState((s) => s.composer.type);
 
   const [multiline, setMultiline] = useState(false);
   const compactContext = useMemo(() => ({ setMultiline }), []);
@@ -126,6 +126,7 @@ export const ComposerPrimitiveRoot = forwardRef<
     <ComposerCompactContext.Provider value={compact ? compactContext : null}>
       <Primitive.form
         {...rest}
+        data-aui-composer-type={composerType}
         data-compact={isCompact ? "" : undefined}
         ref={forwardedRef}
         onSubmit={composeEventHandlers(onSubmit, handleSubmit)}

package/src/primitives/composer/composerInputSelector.ts

@@ -0,0 +1,4 @@
+export const CONTENT_EDITABLE_SELECTOR =
+  "[contenteditable]:not([contenteditable='false'])";
+
+export const COMPOSER_INPUT_SELECTOR = `textarea:not(:disabled), ${CONTENT_EDITABLE_SELECTOR}`;

package/src/primitives/composer/trigger/TriggerPopover.tsx

@@ -2,7 +2,7 @@
 
 import { useAui, useAuiState } from "@assistant-ui/store";
 import { useResource } from "@assistant-ui/tap";
-import type { Unstable_TriggerAdapter } from "@assistant-ui/core";
+import type { TriggerAdapter } from "@assistant-ui/core";
 import {
   createContext,
   forwardRef,
@@ -74,7 +74,7 @@ export namespace ComposerPrimitiveTriggerPopover {
     /** Overrides trigger detection for both textarea and Lexical inputs. `endOffset` is the exclusive replace bound. */
     readonly matcher?: TriggerMatcher | undefined;
     /** Adapter providing categories and items. */
-    readonly adapter?: Unstable_TriggerAdapter | undefined;
+    readonly adapter?: TriggerAdapter | undefined;
     /** Whether the adapter is resolving items, surfaced to the popover scope for async sources. @default false */
     readonly isLoading?: boolean | undefined;
   };
@@ -89,22 +89,22 @@ export namespace ComposerPrimitiveTriggerPopover {
  * `<TriggerPopover.Directive>` or `<TriggerPopover.Action>` as a child. Without
  * a behavior the trigger stays closed.
  *
- * Must be placed inside `ComposerPrimitive.Unstable_TriggerPopoverRoot`.
+ * Must be placed inside `ComposerPrimitive.TriggerPopoverRoot`.
  *
  * @example
  * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopover
+ * <ComposerPrimitive.TriggerPopover
  *   char="@"
  *   adapter={mentionAdapter}
  * >
- *   <ComposerPrimitive.Unstable_TriggerPopover.Directive formatter={formatter} />
- *   <ComposerPrimitive.Unstable_TriggerPopoverCategories>
+ *   <ComposerPrimitive.TriggerPopover.Directive formatter={formatter} />
+ *   <ComposerPrimitive.TriggerPopoverCategories>
  *     {(cats) => cats.map(...)}
- *   </ComposerPrimitive.Unstable_TriggerPopoverCategories>
- *   <ComposerPrimitive.Unstable_TriggerPopoverItems>
+ *   </ComposerPrimitive.TriggerPopoverCategories>
+ *   <ComposerPrimitive.TriggerPopoverItems>
  *     {(items) => items.map(...)}
- *   </ComposerPrimitive.Unstable_TriggerPopoverItems>
- * </ComposerPrimitive.Unstable_TriggerPopover>
+ *   </ComposerPrimitive.TriggerPopoverItems>
+ * </ComposerPrimitive.TriggerPopover>
  * ```
  */
 export const ComposerPrimitiveTriggerPopover = forwardRef<
@@ -196,7 +196,7 @@ export const ComposerPrimitiveTriggerPopover = forwardRef<
         ...(behavior ? { behavior } : {}),
         resource: getResource(),
       });
-    }, [root, char, hasMatcher, behavior]);
+    }, [root, char, hasMatcher, registeredMatcher, behavior]);
 
     const pluginRegistry = useComposerInputPluginRegistryOptional();
     useEffect(() => {

package/src/primitives/composer/trigger/TriggerPopoverAction.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import type {
-  Unstable_DirectiveFormatter,
-  Unstable_TriggerItem,
-} from "@assistant-ui/core";
-import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+import type { DirectiveFormatter, TriggerItem } from "@assistant-ui/core";
+import { defaultDirectiveFormatter } from "@assistant-ui/core";
 import { useEffect, useInsertionEffect, useRef, type FC } from "react";
 import { useTriggerBehaviorRegistration } from "./TriggerPopover";
 import type { TriggerBehavior } from "./triggerSelectionResource";
 
 export namespace ComposerPrimitiveTriggerPopoverAction {
   export type Props = {
-    /** Defaults to `unstable_defaultDirectiveFormatter`. */
-    readonly formatter?: Unstable_DirectiveFormatter | undefined;
+    /** Defaults to `defaultDirectiveFormatter`. */
+    readonly formatter?: DirectiveFormatter | undefined;
     /** Fires the moment an item is selected; runs regardless of `removeOnExecute`. */
-    readonly onExecute: (item: Unstable_TriggerItem) => void;
+    readonly onExecute: (item: TriggerItem) => void;
     /** When true, strips the trigger text after executing. Defaults to `false` (keeps audit-trail chip). */
     readonly removeOnExecute?: boolean | undefined;
   };
@@ -25,16 +22,16 @@ export namespace ComposerPrimitiveTriggerPopoverAction {
  * optionally leaving a directive chip behind as an audit trail. Render exactly
  * one behavior sub-primitive per `<TriggerPopover>`.
  *
- * Exposed as `ComposerPrimitive.Unstable_TriggerPopover.Action`.
+ * Exposed as `ComposerPrimitive.TriggerPopover.Action`.
  *
  * @example
  * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopover char="/" adapter={slashAdapter}>
- *   <ComposerPrimitive.Unstable_TriggerPopover.Action
+ * <ComposerPrimitive.TriggerPopover char="/" adapter={slashAdapter}>
+ *   <ComposerPrimitive.TriggerPopover.Action
  *     onExecute={(item) => commandHandlers[item.id]?.()}
  *     removeOnExecute={false}
  *   />
- * </ComposerPrimitive.Unstable_TriggerPopover>
+ * </ComposerPrimitive.TriggerPopover>
  * ```
  */
 export const ComposerPrimitiveTriggerPopoverAction: FC<
@@ -49,7 +46,7 @@ export const ComposerPrimitiveTriggerPopoverAction: FC<
   useEffect(() => {
     const behavior: TriggerBehavior = {
       kind: "action",
-      formatter: formatter ?? unstable_defaultDirectiveFormatter,
+      formatter: formatter ?? defaultDirectiveFormatter,
       onExecute: (item) => onExecuteRef.current(item),
       ...(removeOnExecute !== undefined ? { removeOnExecute } : {}),
     };

package/src/primitives/composer/trigger/TriggerPopoverCategories.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { composeEventHandlers } from "radix-ui/internal";
 import { useTriggerPopoverScopeContext } from "./TriggerPopover";
-import type { Unstable_TriggerCategory } from "@assistant-ui/core";
+import type { TriggerCategory } from "@assistant-ui/core";
 
 export namespace ComposerPrimitiveTriggerPopoverCategories {
   export type Element = ComponentRef<typeof Primitive.div>;
@@ -18,7 +18,7 @@ export namespace ComposerPrimitiveTriggerPopoverCategories {
     ComponentPropsWithoutRef<typeof Primitive.div>,
     "children"
   > & {
-    children: (categories: readonly Unstable_TriggerCategory[]) => ReactNode;
+    children: (categories: readonly TriggerCategory[]) => ReactNode;
   };
 }
 

package/src/primitives/composer/trigger/TriggerPopoverDirective.tsx

@@ -1,20 +1,17 @@
 "use client";
 
-import type {
-  Unstable_DirectiveFormatter,
-  Unstable_TriggerItem,
-} from "@assistant-ui/core";
-import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+import type { DirectiveFormatter, TriggerItem } from "@assistant-ui/core";
+import { defaultDirectiveFormatter } from "@assistant-ui/core";
 import { useEffect, useInsertionEffect, useRef, type FC } from "react";
 import { useTriggerBehaviorRegistration } from "./TriggerPopover";
 import type { TriggerBehavior } from "./triggerSelectionResource";
 
 export namespace ComposerPrimitiveTriggerPopoverDirective {
   export type Props = {
-    /** Defaults to `unstable_defaultDirectiveFormatter`. */
-    readonly formatter?: Unstable_DirectiveFormatter | undefined;
+    /** Defaults to `defaultDirectiveFormatter`. */
+    readonly formatter?: DirectiveFormatter | undefined;
     /** Fires after an item has been inserted into the composer. */
-    readonly onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+    readonly onInserted?: ((item: TriggerItem) => void) | undefined;
   };
 }
 
@@ -22,16 +19,16 @@ export namespace ComposerPrimitiveTriggerPopoverDirective {
  * Configures a `<TriggerPopover>` to insert a directive chip when an item is
  * selected. Render exactly one behavior sub-primitive per `<TriggerPopover>`.
  *
- * Exposed as `ComposerPrimitive.Unstable_TriggerPopover.Directive`.
+ * Exposed as `ComposerPrimitive.TriggerPopover.Directive`.
  *
  * @example
  * ```tsx
- * <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
- *   <ComposerPrimitive.Unstable_TriggerPopover.Directive
- *     formatter={unstable_defaultDirectiveFormatter}
+ * <ComposerPrimitive.TriggerPopover char="@" adapter={mentionAdapter}>
+ *   <ComposerPrimitive.TriggerPopover.Directive
+ *     formatter={defaultDirectiveFormatter}
  *     onInserted={(item) => track("mention", item.id)}
  *   />
- * </ComposerPrimitive.Unstable_TriggerPopover>
+ * </ComposerPrimitive.TriggerPopover>
  * ```
  */
 export const ComposerPrimitiveTriggerPopoverDirective: FC<
@@ -46,7 +43,7 @@ export const ComposerPrimitiveTriggerPopoverDirective: FC<
   useEffect(() => {
     const behavior: TriggerBehavior = {
       kind: "directive",
-      formatter: formatter ?? unstable_defaultDirectiveFormatter,
+      formatter: formatter ?? defaultDirectiveFormatter,
       onInserted: (item) => onInsertedRef.current?.(item),
     };
     return register(behavior);