@nuxt/ui 4.6.1 → 4.7.0

package/dist/runtime/components/Table.d.vue.ts

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
+     * Note: row pinning is not supported when virtualization is enabled.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
@@ -75,7 +75,6 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
-     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';

package/dist/runtime/components/Table.vue

@@ -90,11 +90,10 @@ function processColumns(columns2) {
   });
 }
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.table || {} })({
-  sticky: props.virtualize ? false : props.sticky,
+  sticky: props.sticky,
   loading: props.loading,
   loadingColor: props.loadingColor,
-  loadingAnimation: props.loadingAnimation,
-  virtualize: !!props.virtualize
+  loadingAnimation: props.loadingAnimation
 }));
 const [DefineTableTemplate, ReuseTableTemplate] = createReusableTemplate();
 const [DefineRowTemplate, ReuseRowTemplate] = createReusableTemplate({
@@ -238,15 +237,11 @@ const virtualizer = !!props.virtualize && useVirtualizer({
     return typeof estimate === "function" ? estimate(index) : estimate;
   }
 });
-const renderedSize = computed(() => {
-  if (!virtualizer) {
-    return 0;
-  }
-  const virtualItems = virtualizer.value.getVirtualItems();
-  if (!virtualItems?.length) {
-    return 0;
-  }
-  return virtualItems.reduce((sum, item) => sum + item.size, 0);
+const virtualItems = computed(() => virtualizer ? virtualizer.value.getVirtualItems() : []);
+const virtualPaddingTop = computed(() => virtualItems.value[0]?.start ?? 0);
+const virtualPaddingBottom = computed(() => {
+  if (!virtualizer || !virtualItems.value.length) return 0;
+  return virtualizer.value.getTotalSize() - (virtualItems.value[virtualItems.value.length - 1]?.end ?? 0);
 });
 function valueUpdater(updaterOrValue, ref) {
   ref.value = typeof updaterOrValue === "function" ? updaterOrValue(ref.value) : updaterOrValue;
@@ -408,15 +403,19 @@ defineExpose({
           <ReuseRowTemplate v-for="row in topRows" :key="row.id" :row="row" />
 
           <template v-if="virtualizer">
-            <template v-for="(virtualRow, index) in virtualizer.getVirtualItems()" :key="centerRows[virtualRow.index]?.id">
+            <tr v-if="virtualPaddingTop > 0" :style="{ height: `${virtualPaddingTop}px` }" aria-hidden="true">
+              <td :colspan="tableApi.getAllLeafColumns().length" />
+            </tr>
+            <template v-for="virtualRow in virtualItems" :key="centerRows[virtualRow.index]?.id ?? `virtual-${virtualRow.index}`">
               <ReuseRowTemplate
+                v-if="centerRows[virtualRow.index]"
                 :row="centerRows[virtualRow.index]"
-                :style="{
-  height: `${virtualRow.size}px`,
-  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
-}"
+                :style="{ height: `${virtualRow.size}px` }"
               />
             </template>
+            <tr v-if="virtualPaddingBottom > 0" :style="{ height: `${virtualPaddingBottom}px` }" aria-hidden="true">
+              <td :colspan="tableApi.getAllLeafColumns().length" />
+            </tr>
           </template>
 
           <template v-else>
@@ -447,9 +446,6 @@ defineExpose({
         v-if="hasFooter"
         data-slot="tfoot"
         :class="ui.tfoot({ class: [uiProp?.tfoot] })"
-        :style="virtualizer ? {
-  transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)`
-} : void 0"
       >
         <tr data-slot="separator" :class="ui.separator({ class: [uiProp?.separator] })" />
 
@@ -483,14 +479,6 @@ defineExpose({
   </DefineTableTemplate>
 
   <Primitive ref="rootRef" :as="as" v-bind="$attrs" data-slot="root" :class="ui.root({ class: [uiProp?.root, props.class] })">
-    <div
-      v-if="virtualizer"
-      :style="{
-  height: `${virtualizer.getTotalSize()}px`
-}"
-    >
-      <ReuseTableTemplate />
-    </div>
-    <ReuseTableTemplate v-else />
+    <ReuseTableTemplate />
   </Primitive>
 </template>

package/dist/runtime/components/Table.vue.d.ts

@@ -52,7 +52,7 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     meta?: TableMeta<T>;
     /**
      * Enable virtualization for large datasets.
-     * Note: when enabled, the divider between rows, sticky and row pinning properties are not supported.
+     * Note: row pinning is not supported when virtualization is enabled.
      * @see https://tanstack.com/virtual/latest/docs/api/virtualizer#options
      * @defaultValue false
      */
@@ -75,7 +75,6 @@ export interface TableProps<T extends TableData = TableData> extends TableOption
     empty?: string;
     /**
      * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
-     * Note: this prop is not supported when `virtualize` is true.
      * @defaultValue false
      */
     sticky?: boolean | 'header' | 'footer';

package/dist/runtime/components/Tabs.d.vue.ts

@@ -20,7 +20,11 @@ export interface TabsItem {
     badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
-    /** A unique value for the tab item. Defaults to the index. */
+    /**
+     * A unique value for the tab item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents tab
+     * content (and its local state) from remounting when items are added, removed, or reordered.
+     */
     value?: string | number;
     disabled?: boolean;
     class?: any;

package/dist/runtime/components/Tabs.vue

@@ -67,7 +67,7 @@ defineExpose({
 
       <TabsTrigger
         v-for="(item, index) of items"
-        :key="index"
+        :key="get(item, props.valueKey) ?? index"
         :ref="(el) => setTriggerRef(index, el)"
         :value="get(item, props.valueKey) ?? String(index)"
         :disabled="item.disabled"
@@ -100,7 +100,7 @@ defineExpose({
     </TabsList>
 
     <template v-if="!!content">
-      <TabsContent v-for="(item, index) of items" :key="index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
+      <TabsContent v-for="(item, index) of items" :key="get(item, props.valueKey) ?? index" :value="get(item, props.valueKey) ?? String(index)" data-slot="content" :class="ui.content({ class: [uiProp?.content, item.ui?.content, item.class] })">
         <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>

package/dist/runtime/components/Tabs.vue.d.ts

@@ -20,7 +20,11 @@ export interface TabsItem {
     badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
-    /** A unique value for the tab item. Defaults to the index. */
+    /**
+     * A unique value for the tab item. Defaults to the index.
+     * Also used as the Vue `key` for this item, so providing a stable value prevents tab
+     * content (and its local state) from remounting when items are added, removed, or reordered.
+     */
     value?: string | number;
     disabled?: boolean;
     class?: any;

package/dist/runtime/components/Textarea.d.vue.ts

@@ -95,6 +95,7 @@ declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+        autoResize: () => void;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;

package/dist/runtime/components/Textarea.vue

@@ -138,7 +138,8 @@ onMounted(() => {
   }, props.autoresizeDelay);
 });
 defineExpose({
-  textareaRef
+  textareaRef,
+  autoResize
 });
 </script>
 

package/dist/runtime/components/Textarea.vue.d.ts

@@ -95,6 +95,7 @@ declare const __VLS_export: <T extends TextareaValue, Mod extends ModelModifiers
     } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null, HTMLTextAreaElement | null>>;
+        autoResize: () => void;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;

package/dist/runtime/components/Tooltip.vue

@@ -9,6 +9,7 @@ import { TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArro
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../composables/useComponentUI";
+import { FieldGroupReset } from "../composables/useFieldGroup";
 import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import UKbd from "./Kbd.vue";
@@ -50,17 +51,19 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tooltip || {}
     </TooltipTrigger>
 
     <TooltipPortal v-bind="portalProps">
-      <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
-        <slot name="content" :ui="ui">
-          <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
+      <FieldGroupReset>
+        <TooltipContent v-bind="contentProps" data-slot="content" :class="ui.content({ class: [!slots.default && props.class, uiProp?.content] })">
+          <slot name="content" :ui="ui">
+            <span v-if="text" data-slot="text" :class="ui.text({ class: uiProp?.text })">{{ text }}</span>
 
-          <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
-            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
-          </span>
-        </slot>
+            <span v-if="kbds?.length" data-slot="kbds" :class="ui.kbds({ class: uiProp?.kbds })">
+              <UKbd v-for="(kbd, index) in kbds" :key="index" :size="uiProp?.kbdsSize || ui.kbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            </span>
+          </slot>
 
-        <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
-      </TooltipContent>
+          <TooltipArrow v-if="!!arrow" v-bind="arrowProps" data-slot="arrow" :class="ui.arrow({ class: uiProp?.arrow })" />
+        </TooltipContent>
+      </FieldGroupReset>
     </TooltipPortal>
   </TooltipRoot>
 </template>

package/dist/runtime/components/content/ContentSearch.d.vue.ts

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -29,35 +29,11 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
      */
     icon?: IconProps['name'];
 }
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups'> {
     /**
      * @defaultValue 'md'
      */
     size?: ContentSearch['variants']['size'];
-    /**
-     * The icon displayed in the input.
-     * @defaultValue appConfig.ui.icons.search
-     * @IconifyIcon
-     */
-    icon?: IconProps['name'];
-    /**
-     * The placeholder text for the input.
-     * @defaultValue t('commandPalette.placeholder')
-     */
-    placeholder?: InputProps['placeholder'];
-    /**
-     * Automatically focus the input when component is mounted.
-     * @defaultValue true
-     */
-    autofocus?: boolean;
-    /** When `true`, the loading icon will be displayed. */
-    loading?: boolean;
-    /**
-     * The icon when the `loading` prop is `true`.
-     * @defaultValue appConfig.ui.icons.loading
-     * @IconifyIcon
-     */
-    loadingIcon?: IconProps['name'];
     /**
      * Display a close button in the input (useful when inside a Modal for example).
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -65,12 +41,6 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue appConfig.ui.icons.close
-     * @IconifyIcon
-     */
-    closeIcon?: IconProps['name'];
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'
@@ -79,14 +49,28 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     /** Links group displayed as the first group in the command palette. */
     links?: T[];
     navigation?: ContentNavigationItem[];
-    /** Custom groups displayed between navigation and color mode group. */
-    groups?: CommandPaletteGroup<ContentSearchItem>[];
     files?: ContentSearchFile[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
-     * @defaultValue { fuseOptions: { includeMatches: true } }
+     * @defaultValue {
+        fuseOptions: {
+          ignoreLocation: true,
+          includeMatches: true,
+          threshold: 0.1,
+          keys: ['label', 'suffix']
+        },
+        resultLimit: 12,
+        matchAllWhenSearchEmpty: true
+      }
      */
     fuse?: UseFuseOptions<T>;
+    /**
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful for large doc sets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Set to `0` to disable.
+     * @defaultValue 100
+     */
+    searchDelay?: number;
     /**
      * When `true`, the theme command will be added to the groups.
      * @defaultValue true

package/dist/runtime/components/content/ContentSearch.vue

@@ -17,19 +17,13 @@ import UModal from "../Modal.vue";
 import UCommandPalette from "../CommandPalette.vue";
 const props = defineProps({
   size: { type: null, required: false },
-  icon: { type: null, required: false },
-  placeholder: { type: String, required: false },
-  autofocus: { type: Boolean, required: false },
-  loading: { type: Boolean, required: false },
-  loadingIcon: { type: null, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
-  closeIcon: { type: null, required: false },
   shortcut: { type: String, required: false, default: "meta_k" },
   links: { type: Array, required: false },
   navigation: { type: Array, required: false },
-  groups: { type: Array, required: false },
   files: { type: Array, required: false },
   fuse: { type: Object, required: false },
+  searchDelay: { type: Number, required: false, default: 100 },
   colorMode: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   ui: { type: Object, required: false },
@@ -41,7 +35,14 @@ const props = defineProps({
   dismissible: { type: Boolean, required: false },
   fullscreen: { type: Boolean, required: false, default: false },
   modal: { type: Boolean, required: false },
-  portal: { type: [Boolean, String], required: false, skipCheck: true }
+  portal: { type: [Boolean, String], required: false, skipCheck: true },
+  icon: { type: null, required: false },
+  placeholder: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: null, required: false },
+  closeIcon: { type: null, required: false },
+  groups: { type: Array, required: false }
 });
 const slots = defineSlots();
 const searchTerm = defineModel("searchTerm", { type: String, ...{ default: "" } });
@@ -50,7 +51,7 @@ const { open, mapNavigationItems, postFilter } = useContentSearch();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("contentSearch", props);
-const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon"));
+const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "loadingIcon", "close", "closeIcon", "searchDelay"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
 const fuse = computed(() => defu({}, props.fuse, {

package/dist/runtime/components/content/ContentSearch.vue.d.ts

@@ -3,7 +3,7 @@ import type { ContentNavigationItem } from '@nuxt/content';
 import type { AppConfig } from '@nuxt/schema';
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import theme from '#build/ui/content/content-search';
-import type { ButtonProps, InputProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
+import type { ButtonProps, LinkProps, ModalProps, CommandPaletteProps, CommandPaletteSlots, CommandPaletteGroup, CommandPaletteItem, IconProps, LinkPropsKeys } from '../../types';
 import type { ComponentConfig } from '../../types/tv';
 type ContentSearch = ComponentConfig<typeof theme, AppConfig, 'contentSearch'>;
 export interface ContentSearchLink extends Omit<LinkProps, 'custom'> {
@@ -29,35 +29,11 @@ export interface ContentSearchItem extends Omit<LinkProps, 'custom'>, CommandPal
      */
     icon?: IconProps['name'];
 }
-export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'> {
+export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchLink> extends Pick<ModalProps, 'title' | 'description' | 'overlay' | 'transition' | 'content' | 'dismissible' | 'fullscreen' | 'modal' | 'portal'>, Pick<CommandPaletteProps<CommandPaletteGroup<ContentSearchItem>, ContentSearchItem>, 'icon' | 'placeholder' | 'autofocus' | 'loading' | 'loadingIcon' | 'closeIcon' | 'groups'> {
     /**
      * @defaultValue 'md'
      */
     size?: ContentSearch['variants']['size'];
-    /**
-     * The icon displayed in the input.
-     * @defaultValue appConfig.ui.icons.search
-     * @IconifyIcon
-     */
-    icon?: IconProps['name'];
-    /**
-     * The placeholder text for the input.
-     * @defaultValue t('commandPalette.placeholder')
-     */
-    placeholder?: InputProps['placeholder'];
-    /**
-     * Automatically focus the input when component is mounted.
-     * @defaultValue true
-     */
-    autofocus?: boolean;
-    /** When `true`, the loading icon will be displayed. */
-    loading?: boolean;
-    /**
-     * The icon when the `loading` prop is `true`.
-     * @defaultValue appConfig.ui.icons.loading
-     * @IconifyIcon
-     */
-    loadingIcon?: IconProps['name'];
     /**
      * Display a close button in the input (useful when inside a Modal for example).
      * `{ size: 'md', color: 'neutral', variant: 'ghost' }`{lang="ts-type"}
@@ -65,12 +41,6 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
      * @defaultValue true
      */
     close?: boolean | Omit<ButtonProps, LinkPropsKeys>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue appConfig.ui.icons.close
-     * @IconifyIcon
-     */
-    closeIcon?: IconProps['name'];
     /**
      * Keyboard shortcut to open the search (used by [`defineShortcuts`](https://ui.nuxt.com/docs/composables/define-shortcuts))
      * @defaultValue 'meta_k'
@@ -79,14 +49,28 @@ export interface ContentSearchProps<T extends ContentSearchLink = ContentSearchL
     /** Links group displayed as the first group in the command palette. */
     links?: T[];
     navigation?: ContentNavigationItem[];
-    /** Custom groups displayed between navigation and color mode group. */
-    groups?: CommandPaletteGroup<ContentSearchItem>[];
     files?: ContentSearchFile[];
     /**
      * Options for [useFuse](https://vueuse.org/integrations/useFuse) passed to the [CommandPalette](https://ui.nuxt.com/docs/components/command-palette).
-     * @defaultValue { fuseOptions: { includeMatches: true } }
+     * @defaultValue {
+        fuseOptions: {
+          ignoreLocation: true,
+          includeMatches: true,
+          threshold: 0.1,
+          keys: ['label', 'suffix']
+        },
+        resultLimit: 12,
+        matchAllWhenSearchEmpty: true
+      }
      */
     fuse?: UseFuseOptions<T>;
+    /**
+     * Delay (in milliseconds) before the search term is passed to Fuse (debounced).
+     * Useful for large doc sets where running fuzzy search on every keystroke is the bottleneck — the input stays responsive while Fuse only re-runs after typing settles.
+     * Set to `0` to disable.
+     * @defaultValue 100
+     */
+    searchDelay?: number;
     /**
      * When `true`, the theme command will be added to the groups.
      * @defaultValue true

package/dist/runtime/components/content/ContentToc.vue

@@ -3,11 +3,12 @@ import theme from "#build/ui/content/content-toc";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, onUnmounted } from "vue";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from "reka-ui";
 import { reactivePick, createReusableTemplate } from "@vueuse/core";
 import { useRouter, useAppConfig, useNuxtApp } from "#imports";
 import { useComponentUI } from "../../composables/useComponentUI";
+import { useResolvedVariants } from "../../composables/useResolvedVariants";
 import { useScrollspy } from "../../composables/useScrollspy";
 import { useLocale } from "../../composables/useLocale";
 import { tv } from "../../utils/tv";
@@ -34,6 +35,7 @@ const { t } = useLocale();
 const router = useRouter();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("contentToc", props);
+const { highlightVariant } = useResolvedVariants("contentToc", props, theme, ["highlightVariant"]);
 const { activeHeadings, updateHeadings } = useScrollspy();
 const [DefineListTemplate, ReuseListTemplate] = createReusableTemplate({
   props: {
@@ -46,7 +48,7 @@ const [DefineContentTemplate, ReuseContentTemplate] = createReusableTemplate();
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.contentToc || {} })({
   color: props.color,
   highlight: props.highlight,
-  highlightVariant: props.highlightVariant,
+  highlightVariant: highlightVariant.value,
   highlightColor: props.highlightColor || props.color
 }));
 function scrollToHeading(id) {
@@ -76,7 +78,7 @@ const indicatorStyle = computed(() => {
   };
 });
 const circuitMaskStyle = computed(() => {
-  if (!props.highlight || props.highlightVariant !== "circuit" || !props.links?.length) {
+  if (!props.highlight || highlightVariant.value !== "circuit" || !props.links?.length) {
     return;
   }
   const flatLinks = flattenLinksWithLevel(props.links);
@@ -110,13 +112,21 @@ const circuitMaskStyle = computed(() => {
   };
 });
 const nuxtApp = useNuxtApp();
-nuxtApp.hooks.hook("page:loading:end", () => {
-  const headings = Array.from(document.querySelectorAll("h2, h3"));
-  updateHeadings(headings);
-});
-nuxtApp.hooks.hook("page:transition:finish", () => {
-  const headings = Array.from(document.querySelectorAll("h2, h3"));
+function refreshHeadings() {
+  const flatLinks = flattenLinks(props.links || []);
+  if (!flatLinks.length) {
+    updateHeadings([]);
+    return;
+  }
+  const selector = flatLinks.map((l) => `#${CSS.escape(l.id)}`).join(", ");
+  const headings = Array.from(document.querySelectorAll(selector));
   updateHeadings(headings);
+}
+const offLoadingEnd = nuxtApp.hooks.hook("page:loading:end", refreshHeadings);
+const offTransitionFinish = nuxtApp.hooks.hook("page:transition:finish", refreshHeadings);
+onUnmounted(() => {
+  offLoadingEnd();
+  offTransitionFinish();
 });
 </script>
 

package/dist/runtime/components/prose/Img.vue

@@ -29,7 +29,8 @@ const [DefineZoomedImageTemplate, ReuseZoomedImageTemplate] = createReusableTemp
 const open = ref(false);
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.img || {} })({
   zoom: props.zoom,
-  open: open.value
+  open: open.value,
+  width: !!props.width
 }));
 const refinedSrc = computed(() => resolveBaseURL(props.src, useRuntimeConfig().app.baseURL));
 const layoutId = computed(() => `${refinedSrc.value}::${useId()}`);

package/dist/runtime/components/prose/Pre.vue

@@ -3,7 +3,7 @@ import theme from "#build/ui/prose/pre";
 </script>
 
 <script setup>
-import { computed } from "vue";
+import { computed, useTemplateRef } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { useComponentUI } from "../../composables/useComponentUI";
@@ -27,7 +27,12 @@ const { t } = useLocale();
 const { copy, copied } = useClipboard();
 const appConfig = useAppConfig();
 const uiProp = useComponentUI("prose.pre", props);
+const baseRef = useTemplateRef("baseRef");
 const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.pre || {} })());
+function copyCode() {
+  const code = props.code ?? baseRef.value?.textContent ?? "";
+  copy(code);
+}
 </script>
 
 <template>
@@ -46,9 +51,9 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.prose?.pre ||
       :aria-label="t('prose.pre.copy')"
       :class="ui.copy({ class: uiProp?.copy })"
       tabindex="-1"
-      @click="copy(props.code || '')"
+      @click="copyCode"
     />
 
-    <pre :class="ui.base({ class: [uiProp?.base, props.class] })" v-bind="$attrs"><slot /></pre>
+    <pre ref="baseRef" :class="ui.base({ class: [uiProp?.base, props.class] })" v-bind="$attrs"><slot /></pre>
   </div>
 </template>

package/dist/runtime/components/prose/Prompt.d.vue.ts

@@ -0,0 +1,32 @@
+import type { VNode } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/prose/prompt';
+import type { IconProps } from '../../types';
+import type { ComponentConfig } from '../../types/tv';
+type ProsePrompt = ComponentConfig<typeof theme, AppConfig, 'prompt', 'ui.prose'>;
+export interface ProsePromptProps {
+    description?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: IconProps['name'];
+    /**
+     * @defaultValue ['copy']
+     */
+    actions?: ('copy' | 'cursor' | 'windsurf')[];
+    class?: any;
+    ui?: ProsePrompt['slots'];
+}
+export interface ProsePromptSlots {
+    default(props?: {}): VNode[];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ProsePromptProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProsePromptProps> & Readonly<{}>, {
+    actions: ("copy" | "cursor" | "windsurf")[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ProsePromptSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};