@nuxt/ui 4.6.0 → 4.6.1

package/README.md

@@ -126,7 +126,7 @@ Thank you for considering contributing to Nuxt UI. Here are a few ways you can g
 - Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/docs/getting-started/contribution) to share your suggestions.
 
 > [!TIP]
-> We provide a [contributing skill](https://github.com/nuxt/ui/tree/v4/.claude/skills/contributing) for AI assistants to help you contribute to Nuxt UI. It will automatically guide you through component structure, theming patterns, testing conventions, and documentation guidelines when working in this repository.
+> We provide contributing guidelines through [`AGENTS.md`](https://github.com/nuxt/ui/blob/v4/AGENTS.md) for AI assistants to help you contribute to Nuxt UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.
 
 ## Local Development
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "configKey": "ui",
   "compatibility": {

package/dist/module.mjs

@@ -11,7 +11,7 @@ import 'pathe';
 import 'tinyglobby';
 
 const name = "@nuxt/ui";
-const version = "4.6.0";
+const version = "4.6.1";
 
 const module$1 = defineNuxtModule({
   meta: {
@@ -97,6 +97,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.ui = options;
     nuxt.options.alias["#ui"] = resolve("./runtime");
     nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, getDefaultConfig(options.theme));
+    nuxt.options.build.transpile.push("reka-ui");
     nuxt.options.app.rootAttrs = nuxt.options.app.rootAttrs || {};
     nuxt.options.app.rootAttrs.class = [nuxt.options.app.rootAttrs.class, `${options.theme?.prefix ? options.theme.prefix + ":" : ""}isolate`].filter(Boolean).join(" ");
     nuxt.hook("vite:extend", async ({ config }) => {

package/dist/runtime/components/ChatMessage.vue

@@ -44,7 +44,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.chatMessage |
 
 <template>
   <Primitive :as="as" :data-role="role" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div v-if="!!slots.files" data-slot="files" :class="ui.files({ class: uiProp?.files })">
+    <div v-if="!!slots.files && fileParts.length" data-slot="files" :class="ui.files({ class: uiProp?.files })">
       <slot name="files" :parts="fileParts" />
     </div>
 

package/dist/runtime/components/ChatMessages.vue

@@ -29,6 +29,12 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
+const showIndicator = computed(() => {
+  if (props.status === "submitted") return true;
+  if (props.status !== "streaming") return false;
+  const lastMessage = props.messages?.[props.messages.length - 1];
+  return lastMessage?.role === "assistant" && !lastMessage.parts?.length;
+});
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "soft" }));
@@ -67,6 +73,13 @@ function scrollToBottom(smooth = true) {
   }
 }
 watchThrottled([() => props.messages, () => props.status], ([_, status]) => {
+  if (!props.messages?.length) {
+    showAutoScroll.value = false;
+    userScrolledUp.value = false;
+    lastScrollTop.value = 0;
+    messagesRefs.value.clear();
+    return;
+  }
   if (status !== "streaming") {
     return;
   }
@@ -197,7 +210,7 @@ onMounted(() => {
     </slot>
 
     <UChatMessage
-      v-if="status === 'submitted'"
+      v-if="showIndicator"
       id="indicator"
       role="assistant"
       v-bind="{ ...assistantProps, actions: void 0, parts: [] }"

package/dist/runtime/components/ChatPrompt.vue

@@ -8,6 +8,7 @@ import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { useIMEGuard } from "../composables/useIMEGuard";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -54,6 +55,9 @@ function blur(e) {
   textareaRef.value?.textareaRef?.blur();
   emits("close", e);
 }
+const { onKeydown: onEnter, onCompositionEnd } = useIMEGuard((event) => {
+  submit(event);
+});
 defineExpose({
   textareaRef: toRef(() => textareaRef.value?.textareaRef)
 });
@@ -76,7 +80,8 @@ defineExpose({
       :ui="transformUI(omit(ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
       :class="ui.body({ class: uiProp?.body })"
-      @keydown.enter.exact.prevent="submit"
+      @keydown.enter.exact="onEnter"
+      @compositionend="onCompositionEnd"
       @keydown.esc="blur"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">

package/dist/runtime/components/DashboardSidebar.vue

@@ -151,17 +151,20 @@ function toggleOpen() {
         <div v-if="!!slots.header || mode !== 'drawer'" data-slot="header" :class="ui.header({ class: uiProp?.header, menu: true })">
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'left'" />
 
-          <slot name="header" :collapsed="isCollapsed" :collapse="collapse" />
+          <slot name="header" :collapsed="false" :collapse="() => {
+}" />
 
           <ReuseToggleTemplate v-if="mode !== 'drawer' && toggleSide === 'right'" />
         </div>
 
         <div data-slot="body" :class="ui.body({ class: uiProp?.body, menu: true })">
-          <slot :collapsed="isCollapsed" :collapse="collapse" />
+          <slot :collapsed="false" :collapse="() => {
+}" />
         </div>
 
         <div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: uiProp?.footer, menu: true })">
-          <slot name="footer" :collapsed="isCollapsed" :collapse="collapse" />
+          <slot name="footer" :collapsed="false" :collapse="() => {
+}" />
         </div>
       </slot>
     </template>

package/dist/runtime/components/Drawer.vue

@@ -81,14 +81,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.drawer || {}
       <DrawerContent data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })" v-bind="contentProps" v-on="contentEvents">
         <DrawerHandle v-if="handle" data-slot="handle" :class="ui.handle({ class: uiProp?.handle })" />
 
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DrawerTitle v-if="title || !!slots.title">
+        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+          <DrawerTitle v-if="!title && !slots.title" />
+          <DrawerTitle v-else-if="!!slots.content">
             <slot name="title">
               {{ title }}
             </slot>
           </DrawerTitle>
 
-          <DrawerDescription v-if="description || !!slots.description">
+          <DrawerDescription v-if="!description && !slots.description" />
+          <DrawerDescription v-else-if="!!slots.content">
             <slot name="description">
               {{ description }}
             </slot>

package/dist/runtime/components/Icon.vue

@@ -11,10 +11,10 @@ const props = defineProps({
   size: { type: [String, Number], required: false },
   customize: { type: [Function, Boolean, null], required: false }
 });
-const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "customize"));
+const iconProps = useForwardProps(reactivePick(props, "mode", "size", "customize"));
 </script>
 
 <template>
-  <Icon v-if="typeof name === 'string'" v-bind="iconProps" />
+  <Icon v-if="typeof name === 'string'" :name="name" v-bind="iconProps" />
   <component :is="name" v-else />
 </template>

package/dist/runtime/components/Modal.vue

@@ -74,14 +74,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.modal || {} }
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DialogTitle v-if="title || !!slots.title">
+        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+          <DialogTitle v-if="!title && !slots.title" />
+          <DialogTitle v-else-if="!!slots.content">
             <slot name="title">
               {{ title }}
             </slot>
           </DialogTitle>
 
-          <DialogDescription v-if="description || !!slots.description">
+          <DialogDescription v-if="!description && !slots.description" />
+          <DialogDescription v-else-if="!!slots.content">
             <slot name="description">
               {{ description }}
             </slot>

package/dist/runtime/components/Slideover.vue

@@ -79,14 +79,16 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.slideover ||
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
-          <DialogTitle v-if="title || !!slots.title">
+        <VisuallyHidden v-if="!title && !slots.title || !description && !slots.description || !!slots.content">
+          <DialogTitle v-if="!title && !slots.title" />
+          <DialogTitle v-else-if="!!slots.content">
             <slot name="title">
               {{ title }}
             </slot>
           </DialogTitle>
 
-          <DialogDescription v-if="description || !!slots.description">
+          <DialogDescription v-if="!description && !slots.description" />
+          <DialogDescription v-else-if="!!slots.content">
             <slot name="description">
               {{ description }}
             </slot>

package/dist/runtime/composables/index.d.ts

@@ -9,6 +9,7 @@ export * from './useFieldGroup';
 export * from './useFileUpload';
 export * from './useFilter';
 export * from './useFormField';
+export * from './useIMEGuard';
 export * from './useKbd';
 export * from './useLocale';
 export * from './useOverlay';

package/dist/runtime/composables/index.js

@@ -9,6 +9,7 @@ export * from "./useFieldGroup.js";
 export * from "./useFileUpload.js";
 export * from "./useFilter.js";
 export * from "./useFormField.js";
+export * from "./useIMEGuard.js";
 export * from "./useKbd.js";
 export * from "./useLocale.js";
 export * from "./useOverlay.js";

package/dist/runtime/composables/useIMEGuard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Prevents Enter-to-submit from firing during IME composition.
+ *
+ * Handles the Safari quirk where `compositionend` fires before `keydown`,
+ * making `event.isComposing` unreliable (https://bugs.webkit.org/show_bug.cgi?id=165004).
+ */
+export declare function useIMEGuard(callback: (event: KeyboardEvent) => void): {
+    onKeydown: (event: KeyboardEvent) => void;
+    onCompositionEnd: () => void;
+};

package/dist/runtime/composables/useIMEGuard.js

@@ -0,0 +1,22 @@
+export function useIMEGuard(callback) {
+  let compositionJustEnded = false;
+  function isComposing(event) {
+    return event.isComposing || event.keyCode === 229;
+  }
+  function onKeydown(event) {
+    if (compositionJustEnded || isComposing(event)) {
+      return;
+    }
+    event.preventDefault();
+    callback(event);
+  }
+  let compositionEndTimer;
+  function onCompositionEnd() {
+    clearTimeout(compositionEndTimer);
+    compositionJustEnded = true;
+    compositionEndTimer = setTimeout(() => {
+      compositionJustEnded = false;
+    }, 50);
+  }
+  return { onKeydown, onCompositionEnd };
+}

package/dist/runtime/utils/ai.d.ts

@@ -8,14 +8,10 @@ import type { UIMessage } from 'ai';
  */
 export declare function getTextFromMessage(message: UIMessage): string;
 /**
- * Checks if a reasoning part is currently being streamed.
- *
- * Returns `true` when the chat is streaming, the message is the last one,
- * and no parts of a different type follow the given part index.
+ * Checks if a text or reasoning part is currently being streamed.
  */
-export declare function isReasoningStreaming(message: UIMessage, partIndex: number, chat: {
-    status: string;
-    messages: UIMessage[];
+export declare function isPartStreaming(part: {
+    state?: string;
 }): boolean;
 /**
  * Checks if a tool part is still streaming (hasn't reached a terminal state).
@@ -25,3 +21,12 @@ export declare function isReasoningStreaming(message: UIMessage, partIndex: numb
 export declare function isToolStreaming(part: {
     state: string;
 }): boolean;
+/**
+ * Checks if a reasoning part is currently being streamed.
+ *
+ * @deprecated Use `isPartStreaming` instead.
+ */
+export declare function isReasoningStreaming(message: UIMessage, partIndex: number, chat: {
+    status: string;
+    messages: UIMessage[];
+}): boolean;

package/dist/runtime/utils/ai.js

@@ -1,6 +1,12 @@
 export function getTextFromMessage(message) {
   return message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
 }
+export function isPartStreaming(part) {
+  return part.state === "streaming";
+}
+export function isToolStreaming(part) {
+  return !["output-available", "output-error", "output-denied"].includes(part.state);
+}
 export function isReasoningStreaming(message, partIndex, chat) {
   if (chat.status !== "streaming") return false;
   if (message.id !== chat.messages.at(-1)?.id) return false;
@@ -11,6 +17,3 @@ export function isReasoningStreaming(message, partIndex, chat) {
   }
   return true;
 }
-export function isToolStreaming(part) {
-  return !["output-available", "output-error", "output-denied"].includes(part.state);
-}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxt/ui",
   "description": "A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.",
-  "version": "4.6.0",
-  "packageManager": "pnpm@10.32.1",
+  "version": "4.6.1",
+  "packageManager": "pnpm@10.33.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/ui.git"
@@ -140,23 +140,23 @@
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/vue-table": "^8.21.3",
     "@tanstack/vue-virtual": "^3.13.23",
-    "@tiptap/core": "^3.20.4",
-    "@tiptap/extension-bubble-menu": "^3.20.4",
-    "@tiptap/extension-code": "^3.20.4",
-    "@tiptap/extension-collaboration": "^3.20.4",
-    "@tiptap/extension-drag-handle": "^3.20.4",
-    "@tiptap/extension-drag-handle-vue-3": "^3.20.4",
-    "@tiptap/extension-floating-menu": "^3.20.4",
-    "@tiptap/extension-horizontal-rule": "^3.20.4",
-    "@tiptap/extension-image": "^3.20.4",
-    "@tiptap/extension-mention": "^3.20.4",
-    "@tiptap/extension-node-range": "^3.20.4",
-    "@tiptap/extension-placeholder": "^3.20.4",
-    "@tiptap/markdown": "^3.20.4",
-    "@tiptap/pm": "^3.20.4",
-    "@tiptap/starter-kit": "^3.20.4",
-    "@tiptap/suggestion": "^3.20.4",
-    "@tiptap/vue-3": "^3.20.4",
+    "@tiptap/core": "^3.21.0",
+    "@tiptap/extension-bubble-menu": "^3.21.0",
+    "@tiptap/extension-code": "^3.21.0",
+    "@tiptap/extension-collaboration": "^3.21.0",
+    "@tiptap/extension-drag-handle": "^3.21.0",
+    "@tiptap/extension-drag-handle-vue-3": "^3.21.0",
+    "@tiptap/extension-floating-menu": "^3.21.0",
+    "@tiptap/extension-horizontal-rule": "^3.21.0",
+    "@tiptap/extension-image": "^3.21.0",
+    "@tiptap/extension-mention": "^3.21.0",
+    "@tiptap/extension-node-range": "^3.21.0",
+    "@tiptap/extension-placeholder": "^3.21.0",
+    "@tiptap/markdown": "^3.21.0",
+    "@tiptap/pm": "^3.21.0",
+    "@tiptap/starter-kit": "^3.21.0",
+    "@tiptap/suggestion": "^3.21.0",
+    "@tiptap/vue-3": "^3.21.0",
     "@unhead/vue": "^2.1.12",
     "@vueuse/core": "^14.2.1",
     "@vueuse/integrations": "^14.2.1",
@@ -179,7 +179,7 @@
     "motion-v": "^2.2.0",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.9.2",
+    "reka-ui": "2.9.3",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.5.0",
     "tailwind-variants": "^3.2.2",
@@ -188,7 +188,7 @@
     "ufo": "^1.6.3",
     "unplugin": "^3.0.0",
     "unplugin-auto-import": "^21.0.0",
-    "unplugin-vue-components": "^31.1.0",
+    "unplugin-vue-components": "^32.0.0",
     "vaul-vue": "0.4.1",
     "vue-component-type-helpers": "^3.2.6"
   },
@@ -200,26 +200,26 @@
     "@tanstack/table-core": "^8.21.3",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
-    "ai": "^6.0.134",
+    "ai": "^6.0.141",
     "embla-carousel": "^8.6.0",
     "eslint": "^10.1.0",
-    "happy-dom": "^20.8.4",
+    "happy-dom": "^20.8.9",
     "nuxt": "^4.4.2",
     "release-it": "^19.2.4",
     "unbuild": "^3.6.1",
-    "vitest": "^4.1.0",
+    "vitest": "^4.1.2",
     "vitest-axe": "^0.1.0",
     "vitest-environment-nuxt": "^1.0.1",
     "vue": "^3.5.30",
     "vue-tsc": "^3.2.6"
   },
   "peerDependencies": {
-    "@inertiajs/vue3": "^2.0.7",
+    "@inertiajs/vue3": "^2.0.7 || ^3.0.0",
     "@nuxt/content": "^3.0.0",
     "joi": "^18.0.0",
     "superstruct": "^2.0.0",
     "tailwindcss": "^4.0.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.6.3 || ^6.0.0",
     "valibot": "^1.0.0",
     "vue-router": "^4.5.0 || ^5.0.0",
     "yup": "^1.7.0",