@ulearning/ai-sdk 0.0.0-stage → 1.0.0-next.0

package/src/primitives/threadListItem/ThreadListItemUnarchive.test.tsx

@@ -0,0 +1,55 @@
+// @vitest-environment jsdom
+
+import { cleanup, render } from "../../tests/vue";
+import { getByRole } from "@testing-library/dom";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AssistantRuntimeProvider,
+  ThreadListItemByIndexProvider,
+} from "@ulearning/ai-core/vue";
+import {
+  AssistantRuntimeImpl,
+  ExternalStoreRuntimeCore,
+} from "@ulearning/ai-core/internal";
+import { ThreadListItemPrimitiveUnarchive } from "./ThreadListItemUnarchive";
+
+afterEach(cleanup);
+
+describe("ThreadListItemPrimitive.Unarchive", () => {
+  it.each([true, false])(
+    "renders an actionable button only when unarchive is supported (%s)",
+    (supported) => {
+      const onUnarchive = vi.fn();
+      const runtime = new AssistantRuntimeImpl(
+        new ExternalStoreRuntimeCore({
+          messages: [],
+          onNew: async () => {},
+          adapters: {
+            threadList: {
+              archivedThreads: [{ id: "archived", status: "archived" }],
+              onUnarchive: supported ? onUnarchive : undefined,
+            },
+          },
+        }),
+      );
+      const { container } = render(
+        <AssistantRuntimeProvider runtime={runtime}>
+          <ThreadListItemByIndexProvider index={0} archived>
+            <ThreadListItemPrimitiveUnarchive disabled={false}>
+              Restore
+            </ThreadListItemPrimitiveUnarchive>
+          </ThreadListItemByIndexProvider>
+        </AssistantRuntimeProvider>,
+      );
+      const button = getByRole(container, "button", {
+        name: "Restore",
+      });
+      if (!(button instanceof HTMLButtonElement))
+        throw new Error("Unarchive must render a native button.");
+      expect(button.disabled).toBe(!supported);
+      button.click();
+      if (supported) expect(onUnarchive).toHaveBeenCalledWith("archived");
+      else expect(onUnarchive).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/primitives/threadListItem/ThreadListItemUnarchive.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { computed } from "vue";
+
+import {
+  type ActionButtonElement,
+  type ActionButtonProps,
+  createActionButton,
+} from "../../utils/createActionButton";
+import { useThreadListItemUnarchive as useThreadListItemUnarchiveBehavior } from "@ulearning/ai-core/vue";
+
+const useThreadListItemUnarchive = () => {
+  const { unarchive, disabled } = useThreadListItemUnarchiveBehavior();
+  return computed(() => (disabled.value ? null : unarchive));
+};
+
+export namespace ThreadListItemPrimitiveUnarchive {
+  export type Element = ActionButtonElement;
+  export type Props = ActionButtonProps<typeof useThreadListItemUnarchive>;
+}
+
+export const ThreadListItemPrimitiveUnarchive = createActionButton(
+  "ThreadListItemPrimitive.Unarchive",
+  useThreadListItemUnarchive,
+);

package/src/primitives/threadListItem/ThreadListKeyboardNav.test.tsx

@@ -0,0 +1,348 @@
+/** @vitest-environment jsdom */
+import { fireEvent, waitFor } from "@testing-library/dom";
+import { ConfigProvider } from "reka-ui";
+import { defineComponent, h, nextTick, shallowRef } from "vue";
+import { cleanup, render } from "../../tests/vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ThreadListPrimitiveRoot } from "../threadList/ThreadListRoot";
+import { ThreadListItemPrimitiveRoot } from "./ThreadListItemRoot";
+import { ThreadListItemPrimitiveTrigger } from "./ThreadListItemTrigger";
+import { ThreadListItemMorePrimitiveRoot } from "../threadListItemMore/ThreadListItemMoreRoot";
+import { ThreadListItemMorePrimitiveTrigger } from "../threadListItemMore/ThreadListItemMoreTrigger";
+import { ThreadListItemMorePrimitiveContent } from "../threadListItemMore/ThreadListItemMoreContent";
+import { ThreadListItemMorePrimitiveItem } from "../threadListItemMore/ThreadListItemMoreItem";
+
+vi.mock("@ulearning/ai-store", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@ulearning/ai-store")>();
+  return { ...actual, useAuiState: () => shallowRef(false) };
+});
+
+vi.mock("@ulearning/ai-core/vue", async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import("@ulearning/ai-core/vue")>();
+  return {
+    ...actual,
+    useThreadListItemTrigger: () => ({ switchTo: () => {} }),
+  };
+});
+
+const triggers = (root: HTMLElement) =>
+  Array.from(
+    root.querySelectorAll<HTMLButtonElement>("[data-radix-collection-item]"),
+  );
+
+const moreOf = (root: HTMLElement) =>
+  root.querySelector<HTMLButtonElement>('[aria-haspopup="menu"]')!;
+
+afterEach(cleanup);
+// Frozen Date.now makes Vue treat every ancestor invoker as if it had been
+// attached during the current event. These interactions require a live clock.
+beforeEach(() => vi.useRealTimers());
+
+const renderItem = async (rootProps?: { defaultOpen?: boolean }) => {
+  const result = render(
+    <ThreadListPrimitiveRoot>
+      <ThreadListItemPrimitiveRoot>
+        <ThreadListItemPrimitiveTrigger>item</ThreadListItemPrimitiveTrigger>
+        <ThreadListItemMorePrimitiveRoot sharedFocusGroup {...rootProps}>
+          <ThreadListItemMorePrimitiveTrigger>
+            more
+          </ThreadListItemMorePrimitiveTrigger>
+          <ThreadListItemMorePrimitiveContent>
+            <ThreadListItemMorePrimitiveItem>
+              Archive
+            </ThreadListItemMorePrimitiveItem>
+          </ThreadListItemMorePrimitiveContent>
+        </ThreadListItemMorePrimitiveRoot>
+      </ThreadListItemPrimitiveRoot>
+    </ThreadListPrimitiveRoot>,
+  );
+  await nextTick();
+  return {
+    ...result,
+    trigger: triggers(result.container)[0]!,
+    more: moreOf(result.container),
+  };
+};
+
+const menu = (): HTMLElement | null =>
+  document.querySelector<HTMLElement>('[role="menu"]');
+
+describe("thread list keyboard navigation", () => {
+  it("mirrors the shared focus group's menu keys in RTL", async () => {
+    const result = render(
+      <ConfigProvider dir="rtl">
+        <ThreadListPrimitiveRoot>
+          <ThreadListItemPrimitiveRoot>
+            <ThreadListItemPrimitiveTrigger>
+              item
+            </ThreadListItemPrimitiveTrigger>
+            <ThreadListItemMorePrimitiveRoot sharedFocusGroup>
+              <ThreadListItemMorePrimitiveTrigger>
+                more
+              </ThreadListItemMorePrimitiveTrigger>
+              <ThreadListItemMorePrimitiveContent>
+                <ThreadListItemMorePrimitiveItem>
+                  Archive
+                </ThreadListItemMorePrimitiveItem>
+              </ThreadListItemMorePrimitiveContent>
+            </ThreadListItemMorePrimitiveRoot>
+          </ThreadListItemPrimitiveRoot>
+        </ThreadListPrimitiveRoot>
+      </ConfigProvider>,
+    );
+    const trigger = triggers(result.container)[0]!;
+    const more = moreOf(result.container);
+    trigger.focus();
+    await fireEvent.keyDown(trigger, { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(more);
+    await fireEvent.keyDown(more, { key: "ArrowLeft" });
+    expect(menu()).not.toBeNull();
+    await fireEvent.keyDown(menu()!, { key: "ArrowRight" });
+    await waitFor(() => expect(menu()).toBeNull());
+    await waitFor(() => expect(document.activeElement).toBe(more));
+  });
+
+  it("respects controlled refusal and notifies the host exactly once", async () => {
+    const onOpenChange = vi.fn();
+    const result = render(
+      <ThreadListPrimitiveRoot>
+        <ThreadListItemPrimitiveRoot>
+          <ThreadListItemMorePrimitiveRoot
+            sharedFocusGroup
+            open={false}
+            onOpenChange={onOpenChange}
+          >
+            <ThreadListItemMorePrimitiveTrigger>
+              more
+            </ThreadListItemMorePrimitiveTrigger>
+            <ThreadListItemMorePrimitiveContent>
+              <ThreadListItemMorePrimitiveItem>
+                Archive
+              </ThreadListItemMorePrimitiveItem>
+            </ThreadListItemMorePrimitiveContent>
+          </ThreadListItemMorePrimitiveRoot>
+        </ThreadListItemPrimitiveRoot>
+      </ThreadListPrimitiveRoot>,
+    );
+    const more = moreOf(result.container);
+    more.focus();
+    await fireEvent.keyDown(more, { key: "ArrowRight" });
+    expect(menu()).toBeNull();
+    expect(document.activeElement).toBe(more);
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
+  it("uses current DOM order after keyed rows reorder and respects a cancelled key", async () => {
+    const order = shallowRef([0, 1, 2]);
+    const cancel = shallowRef(false);
+    const result = render(
+      h(
+        defineComponent({
+          setup: () => () =>
+            h(ThreadListPrimitiveRoot, null, {
+              default: () =>
+                order.value.map((id) => (
+                  <ThreadListItemPrimitiveRoot
+                    key={id}
+                    onKeydown={(event) => {
+                      if (cancel.value) event.preventDefault();
+                    }}
+                  >
+                    <ThreadListItemPrimitiveTrigger data-id={id}>
+                      item {id}
+                    </ThreadListItemPrimitiveTrigger>
+                  </ThreadListItemPrimitiveRoot>
+                )),
+            }),
+        }),
+      ),
+    );
+    const initial = triggers(result.container);
+    order.value = [2, 0, 1];
+    await nextTick();
+    initial[2]!.focus();
+    await fireEvent.keyDown(initial[2]!, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(initial[0]);
+    cancel.value = true;
+    await fireEvent.keyDown(initial[0]!, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(initial[0]);
+  });
+
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves arrows modified with %s available to ancestor shortcuts",
+    async (modifier) => {
+      const prevented: boolean[] = [];
+      const { container } = render(
+        <div
+          data-testid="shortcut-owner"
+          onKeydown={(event) => prevented.push(event.defaultPrevented)}
+        >
+          <ThreadListPrimitiveRoot>
+            {[0, 1].map((i) => (
+              <ThreadListItemPrimitiveRoot key={i}>
+                <ThreadListItemPrimitiveTrigger>
+                  item {i}
+                </ThreadListItemPrimitiveTrigger>
+              </ThreadListItemPrimitiveRoot>
+            ))}
+          </ThreadListPrimitiveRoot>
+        </div>,
+      );
+      const [first, second] = triggers(container);
+      const bubbled = vi.fn();
+      container
+        .querySelector('[data-testid="shortcut-owner"]')!
+        .addEventListener("keydown", bubbled);
+
+      first!.focus();
+      await fireEvent.keyDown(first!, { key: "ArrowDown", [modifier]: true });
+      expect(document.activeElement).toBe(first);
+
+      second!.focus();
+      await fireEvent.keyDown(second!, { key: "ArrowUp", [modifier]: true });
+      expect(document.activeElement).toBe(second);
+      expect(bubbled).toHaveBeenCalledTimes(2);
+      expect(prevented).toEqual([false, false]);
+    },
+  );
+
+  it("moves focus between items with the up/down arrows", async () => {
+    const { container } = render(
+      <ThreadListPrimitiveRoot>
+        {[0, 1, 2].map((i) => (
+          <ThreadListItemPrimitiveRoot key={i}>
+            <ThreadListItemPrimitiveTrigger>
+              item {i}
+            </ThreadListItemPrimitiveTrigger>
+          </ThreadListItemPrimitiveRoot>
+        ))}
+      </ThreadListPrimitiveRoot>,
+    );
+    const [first, second] = triggers(container);
+
+    first!.focus();
+    await fireEvent.keyDown(first!, { key: "ArrowDown" });
+    expect(document.activeElement).toBe(second);
+
+    await fireEvent.keyDown(second!, { key: "ArrowUp" });
+    expect(document.activeElement).toBe(first);
+  });
+
+  it("skips disabled triggers in both directions without wrapping", async () => {
+    const { container } = render(
+      <ThreadListPrimitiveRoot>
+        {[0, 1, 2].map((i) => (
+          <ThreadListItemPrimitiveRoot key={i}>
+            <ThreadListItemPrimitiveTrigger disabled={i === 1}>
+              item {i}
+            </ThreadListItemPrimitiveTrigger>
+          </ThreadListItemPrimitiveRoot>
+        ))}
+      </ThreadListPrimitiveRoot>,
+    );
+    const [first, , third] = triggers(container);
+
+    first!.focus();
+    expect(await fireEvent.keyDown(first!, { key: "ArrowDown" })).toBe(false);
+    expect(document.activeElement).toBe(third);
+    expect(await fireEvent.keyDown(third!, { key: "ArrowDown" })).toBe(true);
+    expect(document.activeElement).toBe(third);
+    expect(await fireEvent.keyDown(third!, { key: "ArrowUp" })).toBe(false);
+    expect(document.activeElement).toBe(first);
+    expect(await fireEvent.keyDown(first!, { key: "ArrowUp" })).toBe(true);
+    expect(document.activeElement).toBe(first);
+  });
+
+  it("moves between an item and its More button with right/left arrows", async () => {
+    const { trigger, more } = await renderItem();
+
+    trigger.focus();
+    await fireEvent.keyDown(trigger, { key: "ArrowRight" });
+    expect(document.activeElement).toBe(more);
+
+    await fireEvent.keyDown(more, { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it("opens the More menu on ArrowRight", async () => {
+    const { more } = await renderItem();
+
+    more.focus();
+    await fireEvent.keyDown(more, { key: "ArrowRight" });
+
+    expect(menu()).not.toBeNull();
+  });
+
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu closed on ArrowRight modified with %s",
+    async (modifier) => {
+      const { more } = await renderItem();
+
+      more.focus();
+      const unhandled = await fireEvent.keyDown(more, {
+        key: "ArrowRight",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBeNull();
+      expect(document.activeElement).toBe(more);
+      expect(unhandled).toBe(true);
+    },
+  );
+
+  it.each(["altKey", "ctrlKey", "metaKey", "shiftKey"])(
+    "leaves the More menu open on ArrowLeft modified with %s",
+    async (modifier) => {
+      await renderItem({ defaultOpen: true });
+      const content = menu()!;
+
+      content.focus();
+      const unhandled = await fireEvent.keyDown(content, {
+        key: "ArrowLeft",
+        [modifier]: true,
+      });
+
+      expect(menu()).toBe(content);
+      expect(document.activeElement).toBe(content);
+      expect(unhandled).toBe(true);
+    },
+  );
+
+  it.each(["ArrowLeft", "Escape"])(
+    "closes the menu on %s and returns focus to the More button",
+    async (key) => {
+      const { more } = await renderItem({ defaultOpen: true });
+
+      await fireEvent.keyDown(menu() as HTMLElement, { key });
+
+      await waitFor(() => expect(menu()).toBeNull());
+      expect(document.activeElement).toBe(more);
+    },
+  );
+
+  it("leaves the More menu's arrow keys inert without sharedFocusGroup (the default)", async () => {
+    const result = render(
+      <ThreadListPrimitiveRoot>
+        <ThreadListItemPrimitiveRoot>
+          <ThreadListItemPrimitiveTrigger>item</ThreadListItemPrimitiveTrigger>
+          <ThreadListItemMorePrimitiveRoot>
+            <ThreadListItemMorePrimitiveTrigger>
+              more
+            </ThreadListItemMorePrimitiveTrigger>
+            <ThreadListItemMorePrimitiveContent>
+              <ThreadListItemMorePrimitiveItem>
+                Archive
+              </ThreadListItemMorePrimitiveItem>
+            </ThreadListItemMorePrimitiveContent>
+          </ThreadListItemMorePrimitiveRoot>
+        </ThreadListItemPrimitiveRoot>
+      </ThreadListPrimitiveRoot>,
+    );
+    const more = moreOf(result.container);
+
+    more.focus();
+    await fireEvent.keyDown(more, { key: "ArrowRight" });
+    expect(menu()).toBeNull();
+  });
+});

package/src/primitives/threadListItem.ts

@@ -0,0 +1,6 @@
+export { ThreadListItemPrimitiveRoot as Root } from "./threadListItem/ThreadListItemRoot";
+export { ThreadListItemPrimitiveArchive as Archive } from "./threadListItem/ThreadListItemArchive";
+export { ThreadListItemPrimitiveUnarchive as Unarchive } from "./threadListItem/ThreadListItemUnarchive";
+export { ThreadListItemPrimitiveDelete as Delete } from "./threadListItem/ThreadListItemDelete";
+export { ThreadListItemPrimitiveTrigger as Trigger } from "./threadListItem/ThreadListItemTrigger";
+export { ThreadListItemPrimitiveTitle as Title } from "./threadListItem/ThreadListItemTitle";

package/src/primitives/threadListItemMore/ThreadListItemMoreContent.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+  defineComponent,
+  h,
+  mergeProps,
+  type ComponentPublicInstance,
+} from "vue";
+import {
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  type DropdownMenuPortalProps,
+  useDirection,
+  useForwardExpose,
+} from "reka-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderContent } from "../dropdownMenuRenderPrimitives";
+import { useThreadListItemFocus } from "../threadListFocusGroup";
+import {
+  useThreadListItemMoreSetOpen,
+  useThreadListItemMoreSharedFocusGroup,
+} from "./ThreadListItemMoreRoot";
+export namespace ThreadListItemMorePrimitiveContent {
+  export type Element = ComponentPublicInstance;
+  export type Props = WithRenderPropProps<typeof DropdownMenuContent> & {
+    portalProps?: DropdownMenuPortalProps;
+  };
+}
+export const ThreadListItemMorePrimitiveContent = defineComponent(
+  (props: ThreadListItemMorePrimitiveContent.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    const focus = useThreadListItemFocus();
+    const setOpen = useThreadListItemMoreSetOpen();
+    const shared = useThreadListItemMoreSharedFocusGroup();
+    const direction = useDirection();
+    const onKeydown = (event: KeyboardEvent) => {
+      const closeKey = direction.value === "rtl" ? "ArrowRight" : "ArrowLeft";
+      if (
+        event.defaultPrevented ||
+        !shared.value ||
+        event.key !== closeKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      )
+        return;
+      event.preventDefault();
+      setOpen(false);
+      focus?.moreRef.value?.focus();
+    };
+    const onEscapeKeyDown = (event: KeyboardEvent) => {
+      if (!event.defaultPrevented && shared.value)
+        focus?.moreRef.value?.focus();
+    };
+    return () =>
+      h(DropdownMenuPortal, props.portalProps, {
+        default: () =>
+          h(
+            DropdownMenuRenderContent,
+            mergeProps(
+              {
+                ...attrs,
+                render: props.render,
+                asChild: props.asChild,
+                children: props.children,
+                sideOffset: props.sideOffset ?? 4,
+                ref: forwardRef,
+              },
+              { onKeydown, onEscapeKeyDown },
+            ),
+            slots,
+          ),
+      });
+  },
+  {
+    name: "ThreadListItemMorePrimitive.Content",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children", "portalProps", "sideOffset"],
+  },
+);

package/src/primitives/threadListItemMore/ThreadListItemMoreItem.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { DropdownMenuItem, useForwardExpose } from "reka-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderItem } from "../dropdownMenuRenderPrimitives";
+export namespace ThreadListItemMorePrimitiveItem {
+  export type Element = ComponentPublicInstance;
+  export type Props = WithRenderPropProps<typeof DropdownMenuItem>;
+}
+export const ThreadListItemMorePrimitiveItem = defineComponent(
+  (props: ThreadListItemMorePrimitiveItem.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    return () =>
+      h(DropdownMenuRenderItem, { ...attrs, ...props, ref: forwardRef }, slots);
+  },
+  {
+    name: "ThreadListItemMorePrimitive.Item",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);

package/src/primitives/threadListItemMore/ThreadListItemMoreRoot.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  provide,
+  shallowRef,
+  type ComputedRef,
+  type InjectionKey,
+} from "vue";
+import { DropdownMenuRoot, type DropdownMenuRootProps } from "reka-ui";
+
+type SetOpen = (next: boolean | ((previous: boolean) => boolean)) => void;
+const SetOpenContext: InjectionKey<SetOpen> = Symbol(
+  "ThreadListItemMoreSetOpen",
+);
+const SharedFocusContext: InjectionKey<ComputedRef<boolean>> = Symbol(
+  "ThreadListItemMoreSharedFocusGroup",
+);
+export const useThreadListItemMoreSetOpen = (): SetOpen => {
+  const setOpen = inject(SetOpenContext, null);
+  if (!setOpen) throw new Error("ThreadListItemMore requires its Root.");
+  return setOpen;
+};
+export const useThreadListItemMoreSharedFocusGroup = () =>
+  inject(
+    SharedFocusContext,
+    computed(() => false),
+  );
+export namespace ThreadListItemMorePrimitiveRoot {
+  export type Props = DropdownMenuRootProps & {
+    onOpenChange?: (open: boolean) => void;
+    /** Join the thread list keyboard group and use a non-modal menu. */
+    sharedFocusGroup?: boolean;
+  };
+}
+export const ThreadListItemMorePrimitiveRoot = defineComponent(
+  (props: ThreadListItemMorePrimitiveRoot.Props, { attrs, slots }) => {
+    const localOpen = shallowRef(props.defaultOpen ?? false);
+    const open = computed(() => props.open ?? localOpen.value);
+    const setOpen: SetOpen = (update) => {
+      const next = typeof update === "function" ? update(open.value) : update;
+      if (next === open.value) return;
+      if (props.open === undefined) localOpen.value = next;
+      props.onOpenChange?.(next);
+    };
+    provide(SetOpenContext, setOpen);
+    provide(
+      SharedFocusContext,
+      computed(() => props.sharedFocusGroup ?? false),
+    );
+    return () =>
+      h(
+        DropdownMenuRoot,
+        {
+          ...attrs,
+          ...(props.dir === undefined ? {} : { dir: props.dir }),
+          modal: props.sharedFocusGroup ? false : (props.modal ?? true),
+          open: open.value,
+          "onUpdate:open": setOpen,
+        },
+        slots,
+      );
+  },
+  {
+    name: "ThreadListItemMorePrimitive.Root",
+    inheritAttrs: false,
+    props: [
+      "open",
+      "defaultOpen",
+      "onOpenChange",
+      "dir",
+      "modal",
+      "sharedFocusGroup",
+    ],
+  },
+);

package/src/primitives/threadListItemMore/ThreadListItemMoreSeparator.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { defineComponent, h, type ComponentPublicInstance } from "vue";
+import { DropdownMenuSeparator, useForwardExpose } from "reka-ui";
+import type { WithRenderPropProps } from "../../utils/Primitive";
+import { DropdownMenuRenderSeparator } from "../dropdownMenuRenderPrimitives";
+export namespace ThreadListItemMorePrimitiveSeparator {
+  export type Element = ComponentPublicInstance;
+  export type Props = WithRenderPropProps<typeof DropdownMenuSeparator>;
+}
+export const ThreadListItemMorePrimitiveSeparator = defineComponent(
+  (props: ThreadListItemMorePrimitiveSeparator.Props, { attrs, slots }) => {
+    const { forwardRef } = useForwardExpose();
+    return () =>
+      h(
+        DropdownMenuRenderSeparator,
+        { ...attrs, ...props, ref: forwardRef },
+        slots,
+      );
+  },
+  {
+    name: "ThreadListItemMorePrimitive.Separator",
+    inheritAttrs: false,
+    props: ["render", "asChild", "children"],
+  },
+);