@anvia/react-ui 1.0.0-rc.1 → 1.0.0-rc.11

package/README.md

@@ -3,11 +3,19 @@
 Composable React UI primitives for Anvia chat and completion experiences.
 
 ```tsx
+import { createHttpClientTransport } from "@anvia/client";
 import { useChat } from "@anvia/react";
-import { ChatProvider, Composer, Message, Thread } from "@anvia/react-ui";
+import {
+  ChatProvider,
+  ComposerPrimitive,
+  MessagePrimitive,
+  ThreadPrimitive,
+} from "@anvia/react-ui";
 
 export function SupportChat() {
-  const chat = useChat({ endpoint: "/api/chat" });
+  const chat = useChat({
+    transport: createHttpClientTransport({ endpoint: "/api/chat" }),
+  });
   const triggers = [
     {
       id: "people",
@@ -18,54 +26,56 @@ export function SupportChat() {
 
   return (
     <ChatProvider controller={chat}>
-      <Thread.Root>
-        <Thread.Viewport>
-          <Thread.Empty>Start a conversation.</Thread.Empty>
-          <Thread.Suggestions />
-          <Thread.Messages>
-            <Message.Root>
-              <Message.Content>
-                <Message.Parts />
-              </Message.Content>
-              <Message.Actions />
-            </Message.Root>
-          </Thread.Messages>
-          <Thread.Error />
-          <Thread.ScrollToBottom>Jump to latest</Thread.ScrollToBottom>
-        </Thread.Viewport>
-        <Composer.Root triggers={triggers}>
-          <Composer.Attachments />
-          <Composer.AddAttachment>Attach</Composer.AddAttachment>
-          <Composer.Input maxRows={6} placeholder="Send a message..." />
-          <Composer.TriggerMenu />
-          <Composer.Stop>Stop</Composer.Stop>
-          <Composer.Submit>Send</Composer.Submit>
-        </Composer.Root>
-      </Thread.Root>
+      <ThreadPrimitive.Root>
+        <ThreadPrimitive.Viewport>
+          <ThreadPrimitive.Empty>Start a conversation.</ThreadPrimitive.Empty>
+          <ThreadPrimitive.Suggestions />
+          <ThreadPrimitive.Messages>
+            <MessagePrimitive.Root>
+              <MessagePrimitive.Content>
+                <MessagePrimitive.Parts />
+              </MessagePrimitive.Content>
+              <MessagePrimitive.Actions />
+            </MessagePrimitive.Root>
+          </ThreadPrimitive.Messages>
+          <ThreadPrimitive.Error />
+          <ThreadPrimitive.ScrollToBottom>Jump to latest</ThreadPrimitive.ScrollToBottom>
+        </ThreadPrimitive.Viewport>
+        <ComposerPrimitive.Root triggers={triggers}>
+          <ComposerPrimitive.Attachments />
+          <ComposerPrimitive.AddAttachment>Attach</ComposerPrimitive.AddAttachment>
+          <ComposerPrimitive.Input maxRows={6} placeholder="Send a message..." />
+          <ComposerPrimitive.TriggerMenu />
+          <ComposerPrimitive.Stop>Stop</ComposerPrimitive.Stop>
+          <ComposerPrimitive.Submit>Send</ComposerPrimitive.Submit>
+        </ComposerPrimitive.Root>
+      </ThreadPrimitive.Root>
     </ChatProvider>
   );
 }
 ```
 
-Import `@anvia/react-ui/styles.css` for a small default stylesheet, or style the stable
-`data-anvia-*` attributes directly.
+The primitives are headless: pass `className` or `asChild` for design-system integration. Their
+small semantic DOM contract consists of ARIA attributes, `data-state`, and `data-role`; there is no
+package stylesheet. For editable, styled application components, run
+`pnpm dlx @anvia/cli add chat`.
 
-The primitives are headless by default: pass `className` or `asChild` for design-system
-integration, control `Composer.Root` with `input`/`attachments` props when needed, and use
+Control `ComposerPrimitive.Root` with `input`/`attachments` props when needed, and use
 `submitMessage` for custom composer payloads. Use `keepMounted` on optional collections when empty
 wrappers are useful for layout.
 
-`Composer.Input` is a Tiptap-backed rich composer. Configure `Composer.Root` with `triggers` to
+`ComposerPrimitive.Input` is a Tiptap-backed rich composer. Configure `ComposerPrimitive.Root` with `triggers` to
 support inline `@`, `/`, `$`, or other entity chips; selected entities are submitted under
-`metadata.composer.entities`. Use `Composer.TextareaInput` when you need the previous native
-textarea behavior.
+`metadata.composer.entities`. Entity `data` must be finite strict JSON; class instances, sparse or
+custom-prototype arrays, accessors, symbols, cycles, `undefined`, and non-finite numbers are
+rejected. Use `ComposerPrimitive.TextareaInput` when you need the previous native textarea behavior.
 
 Streaming smoothing is opt-in and display-only. Keep `useChat` as the owner of transport and
 `UIMessage[]` state. Keep the lifecycle mounted after streaming stops so its buffered tail drains;
-`Message.Parts` also keeps later tool parts behind text that has not been revealed yet:
+`MessagePrimitive.Parts` also keeps later tool parts behind text that has not been revealed yet:
 
 ```tsx
-<Message.Parts
+<MessagePrimitive.Parts
   stream={{
     isStreaming:
       chat.status === "streaming" &&
@@ -75,10 +85,13 @@ Streaming smoothing is opt-in and display-only. Keep `useChat` as the owner of t
     flushImmediately: chat.status === "error",
   }}
 >
-  {(part) => (part.type === "text" ? <Message.Markdown /> : <Message.Part />)}
-</Message.Parts>
+  {(part) =>
+    part.type === "text" ? <MessagePrimitive.Markdown /> : <MessagePrimitive.Part />
+  }
+</MessagePrimitive.Parts>
 ```
 
 For app-owned text state, `StreamMarkdown` is available from `@anvia/react-ui/stream`. It is a
-context-free renderer: pass the already displayed text as `content`, set `live` only for its growing
-tail, and import `@anvia/react-ui/stream/styles.css` for the settle animation.
+context-free renderer: pass the already displayed text as `content` and set `live` only for its
+growing tail. Style `[data-state="revealing"]` in the owning application; `@anvia/cli` installs this
+animation with its `markdown`, `message`, `thread`, and `chat` items.

package/dist/attachment/index.d.ts

@@ -1,11 +1,11 @@
-import * as _anvia_react from '@anvia/react';
+import * as _anvia_client from '@anvia/client';
 import * as react from 'react';
-export { A as AttachmentContextValue, u as useAttachment } from '../attachment-BP597fV3.js';
+export { A as AttachmentContextValue, u as useAttachment } from '../attachment-mbjsroli.js';
 import { P as PrimitiveProps } from '../render-CRKWam2v.js';
 
-declare const Attachment: {
+declare const AttachmentPrimitive: {
     readonly Root: react.ForwardRefExoticComponent<Omit<PrimitiveProps<"div">, "children"> & {
-        children?: react.ReactNode | ((attachment: _anvia_react.UIAttachment) => react.ReactNode);
+        children?: react.ReactNode | ((attachment: _anvia_client.UIAttachment) => react.ReactNode);
     } & react.RefAttributes<HTMLDivElement>>;
     readonly Name: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "asChild"> & {
         asChild?: boolean;
@@ -18,4 +18,4 @@ declare const Attachment: {
     } & react.RefAttributes<HTMLButtonElement>>;
 };
 
-export { Attachment };
+export { AttachmentPrimitive };

package/dist/attachment/index.js

@@ -1,12 +1,12 @@
 import {
-  Attachment
-} from "../chunk-SBYUKODG.js";
+  AttachmentPrimitive
+} from "../chunk-MISX4WUT.js";
 import "../chunk-T3ZFZ3NP.js";
 import {
   useAttachment
-} from "../chunk-43U2XQP2.js";
+} from "../chunk-SOG2GVE4.js";
 export {
-  Attachment,
+  AttachmentPrimitive,
   useAttachment
 };
 //# sourceMappingURL=index.js.map

package/dist/{attachment-BP597fV3.d.ts → attachment-mbjsroli.d.ts}

@@ -1,4 +1,4 @@
-import { UIAttachment } from '@anvia/react';
+import { UIAttachment } from '@anvia/client';
 
 type AttachmentContextValue = {
     attachment: UIAttachment;

package/dist/chat/index.d.ts

@@ -1,26 +1,27 @@
-import { C as ChatController } from '../chat-B3kucz1w.js';
-export { a as ChatProvider, b as ChatProviderProps, u as useChatContext } from '../chat-B3kucz1w.js';
-import { d as ComposerEntity, g as ComposerQuote, h as ComposerTriggerDefinition, l as ComposerTriggerState, i as ComposerTriggerItem } from '../composer-CzsbDFPt.js';
-export { C as ComposerAttachmentInput, a as ComposerAttachmentsUpdate, b as ComposerContextValue, c as ComposerEntitiesUpdate, e as ComposerEntityData, f as ComposerMessageMetadata, j as ComposerTriggerItems, k as ComposerTriggerItemsArgs, m as ComposerTriggerStateUpdate, u as useComposer } from '../composer-CzsbDFPt.js';
-export { T as ThreadContextValue, u as useThread } from '../thread-uEm8hH0s.js';
+import { C as ChatController } from '../chat-tfA570mg.js';
+export { a as ChatProvider, b as ChatProviderProps, u as useChatContext } from '../chat-tfA570mg.js';
+import { d as ComposerEntity, g as ComposerQuote, h as ComposerTriggerDefinition, l as ComposerTriggerState, i as ComposerTriggerItem } from '../composer-CigccTLT.js';
+export { C as ComposerAttachmentInput, a as ComposerAttachmentsUpdate, b as ComposerContextValue, c as ComposerEntitiesUpdate, e as ComposerEntityData, f as ComposerMessageMetadata, j as ComposerTriggerItems, k as ComposerTriggerItemsArgs, m as ComposerTriggerStateUpdate, u as useComposer } from '../composer-CigccTLT.js';
+export { T as ThreadContextValue, u as useThread } from '../thread-Bz6-1zaJ.js';
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { UIAttachment, UIMessage, UseChatStatus, ChatSuggestion } from '@anvia/react';
+import { UIAttachment, ClientDataMap, ClientMetadata, UIMessage } from '@anvia/client';
 import { P as PrimitiveProps } from '../render-CRKWam2v.js';
+import { UseChatStatus, ChatSuggestion } from '@anvia/react';
 
-type ComposerSubmitMessageArgs<TEvent = unknown> = {
+type ComposerSubmitMessageArgs<TData extends ClientDataMap = ClientDataMap> = {
     input: string;
     attachments: UIAttachment[];
     entities: ComposerEntity[];
-    chat: ChatController<TEvent>;
+    chat: ChatController<ClientMetadata, TData>;
     quote?: ComposerQuote | undefined;
     clear(): void;
 };
-type ComposerSubmitMessage<TEvent = unknown> = (args: ComposerSubmitMessageArgs<TEvent>) => Promise<void> | void;
+type ComposerSubmitMessage<TData extends ClientDataMap = ClientDataMap> = (args: ComposerSubmitMessageArgs<TData>) => Promise<void> | void;
 type ComposerTriggerMenuChildren = ReactNode | ((trigger: ComposerTriggerState) => ReactNode);
 type ComposerTriggerItemChildren = ReactNode | ((item: ComposerTriggerItem, trigger: ComposerTriggerState) => ReactNode);
 type ComposerAttachmentsChildren = ReactNode | ((attachment: UIAttachment) => ReactNode);
-declare const Composer: {
+declare const ComposerPrimitive: {
     readonly Root: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref">, "asChild"> & {
         asChild?: boolean;
     } & {
@@ -98,7 +99,7 @@ declare const Composer: {
 
 type ThreadMessagesChildren = ReactNode | ((message: UIMessage) => ReactNode);
 type ThreadSuggestionChildren = ReactNode | ((suggestion: ChatSuggestion) => ReactNode);
-declare const Thread: {
+declare const ThreadPrimitive: {
     readonly Root: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "asChild"> & {
         asChild?: boolean;
     } & react.RefAttributes<HTMLDivElement>>;
@@ -140,4 +141,4 @@ declare const Thread: {
     } & react.RefAttributes<HTMLButtonElement>>;
 };
 
-export { ChatController, Composer, ComposerEntity, ComposerQuote, type ComposerSubmitMessage, type ComposerSubmitMessageArgs, ComposerTriggerDefinition, ComposerTriggerItem, ComposerTriggerState, Thread };
+export { ChatController, ComposerEntity, ComposerPrimitive, ComposerQuote, type ComposerSubmitMessage, type ComposerSubmitMessageArgs, ComposerTriggerDefinition, ComposerTriggerItem, ComposerTriggerState, ThreadPrimitive };

package/dist/chat/index.js

@@ -1,21 +1,23 @@
 import {
-  Composer,
-  Thread
-} from "../chunk-FABSIZZ7.js";
-import "../chunk-JWZDNM5D.js";
-import "../chunk-ULGJLLZE.js";
-import "../chunk-SBYUKODG.js";
+  ComposerPrimitive,
+  ThreadPrimitive
+} from "../chunk-HWJIMLHC.js";
+import "../chunk-CRXNFZRW.js";
+import "../chunk-6XOJFLX4.js";
+import "../chunk-F6AKBUO3.js";
+import "../chunk-MISX4WUT.js";
+import "../chunk-CKA4CE26.js";
 import "../chunk-T3ZFZ3NP.js";
 import {
   ChatProvider,
   useChatContext,
   useComposer,
   useThread
-} from "../chunk-43U2XQP2.js";
+} from "../chunk-SOG2GVE4.js";
 export {
   ChatProvider,
-  Composer,
-  Thread,
+  ComposerPrimitive,
+  ThreadPrimitive,
   useChatContext,
   useComposer,
   useThread

package/dist/chat-tfA570mg.d.ts

@@ -0,0 +1,86 @@
+import { ClientMetadata, ClientDataMap, ClientTransport, ClientStreamRequest } from '@anvia/client';
+import { UseChatResult } from '@anvia/react';
+import { ReactNode, ReactElement } from 'react';
+
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | readonly JsonValue[];
+type JsonObject = {
+    [key: string]: JsonValue;
+};
+type ToolQuestionAnswer = Readonly<{
+    questionId: string;
+    value: string;
+}>;
+
+type AgentQuestionChoice = Readonly<{
+    label: string;
+    value: string;
+}>;
+type AgentQuestionPrompt = Readonly<{
+    id: string;
+    text: string;
+    choices?: readonly AgentQuestionChoice[];
+    allowCustom?: boolean;
+}>;
+type AgentQuestionAnswer = ToolQuestionAnswer;
+type AgentInteractionRequestBase = Readonly<{
+    id: string;
+    toolName: string;
+    toolCallId: string;
+    callId?: string;
+    internalCallId: string;
+}>;
+type AgentToolApprovalRequest = AgentInteractionRequestBase & Readonly<{
+    type: "tool-approval";
+    input: JsonValue;
+    reason?: string;
+}>;
+type AgentToolQuestionRequest = AgentInteractionRequestBase & Readonly<{
+    type: "tool-question";
+    questions: readonly AgentQuestionPrompt[];
+}>;
+type AgentInteractionRequest = AgentToolApprovalRequest | AgentToolQuestionRequest;
+
+type ChatController<Metadata extends ClientMetadata = ClientMetadata, Data extends ClientDataMap = ClientDataMap> = UseChatResult<ClientTransport<ClientStreamRequest, Data, Metadata>>;
+type ChatProviderProps<Metadata extends ClientMetadata = ClientMetadata, Data extends ClientDataMap = ClientDataMap> = {
+    controller: ChatController<Metadata, Data>;
+    children?: ReactNode;
+};
+declare function ChatProvider<Metadata extends ClientMetadata = ClientMetadata, Data extends ClientDataMap = ClientDataMap>({ controller, children }: ChatProviderProps<Metadata, Data>): ReactElement;
+declare function useChatContext<Metadata extends ClientMetadata = ClientMetadata, Data extends ClientDataMap = ClientDataMap>(): ChatController<Metadata, Data>;
+declare function useHumanInput(): {
+    approvals: {
+        all: (Readonly<{
+            request: AgentInteractionRequest;
+            runId: string;
+            status: "pending" | "responded" | "cancelled";
+        }> & {
+            request: AgentToolApprovalRequest;
+        })[];
+        pending: (Readonly<{
+            request: AgentInteractionRequest;
+            runId: string;
+            status: "pending" | "responded" | "cancelled";
+        }> & {
+            request: AgentToolApprovalRequest;
+        })[];
+    };
+    questions: {
+        all: (Readonly<{
+            request: AgentInteractionRequest;
+            runId: string;
+            status: "pending" | "responded" | "cancelled";
+        }> & {
+            request: AgentToolQuestionRequest;
+        })[];
+        pending: (Readonly<{
+            request: AgentInteractionRequest;
+            runId: string;
+            status: "pending" | "responded" | "cancelled";
+        }> & {
+            request: AgentToolQuestionRequest;
+        })[];
+    };
+};
+
+export { type AgentToolApprovalRequest as A, type ChatController as C, ChatProvider as a, type ChatProviderProps as b, useHumanInput as c, type AgentToolQuestionRequest as d, type AgentQuestionAnswer as e, type AgentQuestionPrompt as f, useChatContext as u };

package/dist/{chunk-7RMRM7W3.js → chunk-647LAYRV.js}

@@ -1,31 +1,61 @@
 import {
+  composeRefs,
   renderPrimitive
 } from "./chunk-T3ZFZ3NP.js";
 import {
   InternalThreadListItemProvider,
+  InternalThreadListRootProvider,
+  useInternalThreadListRoot,
   useThreadList,
   useThreadListItem
-} from "./chunk-43U2XQP2.js";
+} from "./chunk-SOG2GVE4.js";
 
 // src/thread-list/parts.tsx
 import {
   forwardRef,
-  useCallback
+  useCallback,
+  useMemo,
+  useRef
 } from "react";
 import { jsx } from "react/jsx-runtime";
 var ThreadListRoot = forwardRef(function ThreadListRoot2({ onKeyDown, ...props }, ref) {
   const threadList = useThreadList();
+  const rootRef = useRef(null);
+  const newButtonRef = useRef(null);
+  const itemElements = useRef(/* @__PURE__ */ new Map());
+  const triggerElements = useRef(/* @__PURE__ */ new Map());
+  const registerItem = useCallback((threadId, element) => {
+    if (element === null) itemElements.current.delete(threadId);
+    else itemElements.current.set(threadId, element);
+  }, []);
+  const registerTrigger = useCallback((threadId, element) => {
+    if (element === null) triggerElements.current.delete(threadId);
+    else triggerElements.current.set(threadId, element);
+  }, []);
+  const rootContext = useMemo(
+    () => ({
+      rootRef,
+      newButtonRef,
+      itemElements,
+      triggerElements,
+      registerItem,
+      registerTrigger
+    }),
+    [registerItem, registerTrigger]
+  );
+  const composedRef = useMemo(
+    () => composeRefs(ref, (node) => {
+      rootRef.current = node;
+    }),
+    [ref]
+  );
   const handleKeyDown = useCallback(
     (event) => {
       onKeyDown?.(event);
       if (event.defaultPrevented || !["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
         return;
       }
-      const triggers = Array.from(
-        event.currentTarget.querySelectorAll(
-          "[data-anvia-thread-list-trigger]:not(:disabled)"
-        )
-      );
+      const triggers = orderedEnabledTriggers(rootContext);
       if (triggers.length === 0) {
         return;
       }
@@ -35,22 +65,28 @@ var ThreadListRoot = forwardRef(function ThreadListRoot2({ onKeyDown, ...props }
       const nextIndex = nextTriggerIndex(event.key, currentIndex, triggers.length);
       triggers[nextIndex]?.focus();
     },
-    [onKeyDown]
+    [onKeyDown, rootContext]
   );
-  return renderPrimitive(
+  return /* @__PURE__ */ jsx(InternalThreadListRootProvider, { value: rootContext, children: renderPrimitive(
     "div",
     {
       ...props,
       onKeyDown: handleKeyDown,
-      "data-anvia-thread-list": "",
       "data-state": threadList.status ?? "idle"
     },
-    ref
-  );
+    composedRef
+  ) });
 });
 var ThreadListNew = forwardRef(
   function ThreadListNew2({ onClick, ...props }, ref) {
     const threadList = useThreadList();
+    const root = useInternalThreadListRoot();
+    const composedRef = useMemo(
+      () => composeRefs(ref, (node) => {
+        root.newButtonRef.current = node;
+      }),
+      [ref, root.newButtonRef]
+    );
     const handleClick = useCallback(
       (event) => {
         onClick?.(event);
@@ -68,10 +104,9 @@ var ThreadListNew = forwardRef(
         children: props.children ?? "New chat",
         onClick: handleClick,
         type: props.type ?? "button",
-        "data-anvia-thread-list-new": "",
         "data-state": props.disabled ? "disabled" : "enabled"
       },
-      ref
+      composedRef
     );
   }
 );
@@ -94,9 +129,7 @@ var ThreadListItems = forwardRef(function ThreadListItems2({ archived = false, c
         },
         thread.id
       )),
-      "data-anvia-thread-list-items": "",
-      "data-archived": archived ? "" : void 0,
-      "data-empty": empty ? "" : void 0
+      "data-state": empty ? "empty" : "populated"
     },
     ref
   );
@@ -113,8 +146,7 @@ var ThreadListEmpty = forwardRef(function ThreadListEmpty2({ archived = false, .
     "div",
     {
       ...props,
-      children: props.children ?? "No conversations.",
-      "data-anvia-thread-list-empty": ""
+      children: props.children ?? "No conversations."
     },
     ref
   );
@@ -122,15 +154,18 @@ var ThreadListEmpty = forwardRef(function ThreadListEmpty2({ archived = false, .
 var ThreadListItemRoot = forwardRef(
   function ThreadListItemRoot2(props, ref) {
     const item = useThreadListItem();
+    const root = useInternalThreadListRoot();
+    const composedRef = useMemo(
+      () => composeRefs(ref, (node) => root.registerItem(item.thread.id, node)),
+      [item.thread.id, ref, root]
+    );
     return renderPrimitive(
       "div",
       {
         ...props,
-        "data-anvia-thread-list-item": "",
-        "data-active": item.active ? "" : void 0,
-        "data-thread-id": item.thread.id
+        "data-state": item.active ? "active" : "inactive"
       },
-      ref
+      composedRef
     );
   }
 );
@@ -138,7 +173,12 @@ var ThreadListItemTrigger = forwardRef(
   function ThreadListItemTrigger2({ onClick, ...props }, ref) {
     const threadList = useThreadList();
     const item = useThreadListItem();
+    const root = useInternalThreadListRoot();
     const disabled = props.disabled ?? false;
+    const composedRef = useMemo(
+      () => composeRefs(ref, (node) => root.registerTrigger(item.thread.id, node)),
+      [item.thread.id, ref, root]
+    );
     const handleClick = useCallback(
       (event) => {
         onClick?.(event);
@@ -158,10 +198,9 @@ var ThreadListItemTrigger = forwardRef(
         onClick: handleClick,
         type: props.type ?? "button",
         "aria-current": item.active ? "true" : void 0,
-        "data-anvia-thread-list-trigger": "",
         "data-state": disabled ? "disabled" : "enabled"
       },
-      ref
+      composedRef
     );
   }
 );
@@ -172,17 +211,17 @@ var ThreadListItemTitle = forwardRef(
       "span",
       {
         ...props,
-        children: props.children ?? thread.title ?? fallback,
-        "data-anvia-thread-list-title": ""
+        children: props.children ?? thread.title ?? fallback
       },
       ref
     );
   }
 );
-function createThreadListItemAction(action, defaultLabel, dataAttribute) {
+function createThreadListItemAction(action, defaultLabel) {
   return forwardRef(function ThreadListItemAction({ onClick, ...props }, ref) {
     const threadList = useThreadList();
     const { thread } = useThreadListItem();
+    const root = useInternalThreadListRoot();
     const actionHandler = threadList[action];
     const disabled = props.disabled ?? actionHandler === void 0;
     const handleClick = useCallback(
@@ -191,10 +230,10 @@ function createThreadListItemAction(action, defaultLabel, dataAttribute) {
         if (event.defaultPrevented || disabled) {
           return;
         }
-        focusAfterThreadItemRemoval(event.currentTarget);
+        focusAfterThreadItemRemoval(thread.id, root);
         void actionHandler?.(thread.id);
       },
-      [actionHandler, disabled, onClick, thread.id]
+      [actionHandler, disabled, onClick, root, thread.id]
     );
     return renderPrimitive(
       "button",
@@ -204,28 +243,15 @@ function createThreadListItemAction(action, defaultLabel, dataAttribute) {
         disabled,
         onClick: handleClick,
         type: props.type ?? "button",
-        [dataAttribute]: "",
         "data-state": disabled ? "disabled" : "enabled"
       },
       ref
     );
   });
 }
-var ThreadListItemArchive = createThreadListItemAction(
-  "archiveThread",
-  "Archive",
-  "data-anvia-thread-list-archive"
-);
-var ThreadListItemUnarchive = createThreadListItemAction(
-  "unarchiveThread",
-  "Unarchive",
-  "data-anvia-thread-list-unarchive"
-);
-var ThreadListItemDelete = createThreadListItemAction(
-  "deleteThread",
-  "Delete",
-  "data-anvia-thread-list-delete"
-);
+var ThreadListItemArchive = createThreadListItemAction("archiveThread", "Archive");
+var ThreadListItemUnarchive = createThreadListItemAction("unarchiveThread", "Unarchive");
+var ThreadListItemDelete = createThreadListItemAction("deleteThread", "Delete");
 function DefaultThreadItem() {
   return /* @__PURE__ */ jsx(ThreadListItemRoot, { children: /* @__PURE__ */ jsx(ThreadListItemTrigger, {}) });
 }
@@ -244,38 +270,37 @@ function nextTriggerIndex(key, currentIndex, triggerCount) {
   }
   return (currentIndex + 1) % triggerCount;
 }
-function focusAfterThreadItemRemoval(actionButton) {
-  const root = actionButton.closest("[data-anvia-thread-list]");
-  const currentItem = actionButton.closest("[data-anvia-thread-list-item]");
-  if (root === null || currentItem === null || !currentItem.contains(root.ownerDocument.activeElement)) {
+function focusAfterThreadItemRemoval(threadId, rootContext) {
+  const root = rootContext.rootRef.current;
+  const currentItem = rootContext.itemElements.current.get(threadId);
+  if (root === null || currentItem === void 0 || !currentItem.contains(root.ownerDocument.activeElement)) {
     return;
   }
-  const triggers = Array.from(
-    root.querySelectorAll("[data-anvia-thread-list-trigger]:not(:disabled)")
-  );
-  const currentTrigger = currentItem.querySelector(
-    "[data-anvia-thread-list-trigger]"
-  );
-  const currentIndex = currentTrigger === null ? -1 : triggers.indexOf(currentTrigger);
+  const triggers = orderedEnabledTriggers(rootContext);
+  const currentTrigger = rootContext.triggerElements.current.get(threadId);
+  const currentIndex = currentTrigger === void 0 ? -1 : triggers.indexOf(currentTrigger);
   const remainingTriggers = triggers.filter((trigger) => !currentItem.contains(trigger));
-  const fallback = root.querySelector(
-    "[data-anvia-thread-list-new]:not(:disabled)"
-  );
+  const fallback = rootContext.newButtonRef.current;
   const focusTarget = remainingTriggers[Math.min(Math.max(currentIndex, 0), remainingTriggers.length - 1)] ?? fallback ?? root;
   if (focusTarget === root && !root.hasAttribute("tabindex")) {
     root.tabIndex = -1;
   }
   focusTarget.focus();
 }
+function orderedEnabledTriggers(rootContext) {
+  return [...rootContext.triggerElements.current.values()].filter((trigger) => trigger.isConnected && !trigger.disabled).sort(
+    (left, right) => left.compareDocumentPosition(right) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  );
+}
 
 // src/thread-list/index.ts
-var ThreadList = {
+var ThreadListPrimitive = {
   Root: ThreadListRoot,
   New: ThreadListNew,
   Items: ThreadListItems,
   Empty: ThreadListEmpty
 };
-var ThreadListItem = {
+var ThreadListItemPrimitive = {
   Root: ThreadListItemRoot,
   Trigger: ThreadListItemTrigger,
   Title: ThreadListItemTitle,
@@ -285,7 +310,7 @@ var ThreadListItem = {
 };
 
 export {
-  ThreadList,
-  ThreadListItem
+  ThreadListPrimitive,
+  ThreadListItemPrimitive
 };
-//# sourceMappingURL=chunk-7RMRM7W3.js.map
+//# sourceMappingURL=chunk-647LAYRV.js.map