@hina-ui/vue 1.7.4 → 1.7.5

package/dist/types/vue/src/components/anchor/Anchor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/anchor/Anchor.vue"],"names":[],"mappings":"AA2FE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEzD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,UAAU,GAAG,UAAU,EACzD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAsKO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;eAlK7C,CAAC,EAAE;gBACF,MAAM;qBACD,OAAO;gBACZ,MAAM;;;KA+JyE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;MAAsB,KAAK,IAAI;WACxE,GAAG;;yBAzJU;YAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;;;EA6JvE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Anchor.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/anchor/Anchor.vue"],"names":[],"mappings":"AA+FE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEzD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,QAAA,MAAM,YAAY,GAAK,CAAC,SAAS,UAAU,GAAG,UAAU,EACzD,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WA2KO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;eAvK3C,CAAC,EAAE;gBACF,MAAM;qBACD,OAAO;gBACZ,MAAM;;;KAoKuE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;MAAsB,KAAK,IAAI;WACxE,GAAG;;yBA3JU;YAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;YAAC,MAAM,EAAE,OAAO,CAAA;SAAE,GAAG,OAAO;;;EA+JvE,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}

package/dist/types/vue/src/components/anchor/composables/useAnchorFollow.d.ts

@@ -1,3 +1,3 @@
 import { type Ref } from 'vue';
-export declare function useAnchorFollow(root: Readonly<Ref<HTMLElement | null>>, current: Readonly<Ref<string | undefined>>, enabled: () => boolean): void;
+export declare function useAnchorFollow(root: Readonly<Ref<HTMLElement | null>>, current: Readonly<Ref<string | undefined>>, lastCovered: Readonly<Ref<string | undefined>>, enabled: () => boolean): void;
 //# sourceMappingURL=useAnchorFollow.d.ts.map

package/dist/types/vue/src/components/anchor/composables/useAnchorFollow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchorFollow.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/anchor/composables/useAnchorFollow.ts"],"names":[],"mappings":"AACA,OAAO,EAAiD,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAG7E,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,EACvC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,EAC1C,OAAO,EAAE,MAAM,OAAO,QA4FvB"}
+{"version":3,"file":"useAnchorFollow.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/anchor/composables/useAnchorFollow.ts"],"names":[],"mappings":"AACA,OAAO,EAAiD,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAG7E,wBAAgB,eAAe,CAC7B,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,EACvC,OAAO,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,EAC1C,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,EAC9C,OAAO,EAAE,MAAM,OAAO,QA0GvB"}

package/dist/types/vue/src/components/lightbox/composables/useLightboxHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLightboxHint.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/lightbox/composables/useLightboxHint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,OAAO,EAAE,MAAM,YAAY,GAAG,SAAS,CAAA;CACxC;;;EAyBA"}
+{"version":3,"file":"useLightboxHint.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/lightbox/composables/useLightboxHint.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAE5C,wBAAgB,eAAe,CAAC,OAAO,EAAE;IACvC,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,MAAM,EAAE,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAA;IAC5C,OAAO,EAAE,MAAM,YAAY,GAAG,SAAS,CAAA;CACxC;;;EA8BA"}

package/dist/types/vue/src/components/prev-next/PrevNextLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrevNextLink.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/prev-next/PrevNextLink.vue"],"names":[],"mappings":"AA+CE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAI3F,KAAK,WAAW,GAAG,cAAc,GAAG;IAC9B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAA;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA0GR,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"PrevNextLink.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/components/prev-next/PrevNextLink.vue"],"names":[],"mappings":"AA+CE,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,SAAS,CAAA;AAKxD,OAAO,EAAiC,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAI3F,KAAK,WAAW,GAAG,cAAc,GAAG;IAC9B,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAA;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AA2GR,QAAA,IAAI,QAAQ,IAAY,CAAE;AAC1B,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAKhD,QAAA,MAAM,UAAU;;6EAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",

package/src/components/anchor/Anchor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends AnchorItem = AnchorItem">
-  import { useTemplateRef, watch } from 'vue'
+  import { computed, useTemplateRef, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Highlight from '../highlight/Highlight.vue'
@@ -11,12 +11,15 @@
 
   defineOptions({ name: 'HnAnchor' })
 
-  const props = defineProps<{
-    items: T[]
-    label?: string
-    autoScroll?: boolean
-    class?: string
-  }>()
+  const props = withDefaults(
+    defineProps<{
+      items: T[]
+      label?: string
+      autoScroll?: boolean
+      class?: string
+    }>(),
+    { autoScroll: true },
+  )
 
   const emit = defineEmits<{ change: [current: string | undefined] }>()
 
@@ -26,9 +29,10 @@
 
   const t = useUiLocale()
 
-  const { entries, visible, current, span, jump } = useAnchor(() => props.items)
+  const { entries, visible, covered, current, span, jump } = useAnchor(() => props.items)
+  const lastCovered = computed(() => covered.value.at(-1)?.id)
   const root = useTemplateRef<HTMLElement>('root')
-  useAnchorFollow(root, current, () => props.autoScroll !== false)
+  useAnchorFollow(root, current, lastCovered, () => props.autoScroll)
   watch(current, id => emit('change', id), { flush: 'post' })
   defineExpose({ current })
 </script>

package/src/components/anchor/composables/useAnchorFollow.ts

@@ -5,12 +5,14 @@ import { prefersReducedMotion } from '../../../motion'
 export function useAnchorFollow(
   root: Readonly<Ref<HTMLElement | null>>,
   current: Readonly<Ref<string | undefined>>,
+  lastCovered: Readonly<Ref<string | undefined>>,
   enabled: () => boolean,
 ) {
   const viewport = shallowRef<HTMLElement>()
   let mounted = false
   let frame = 0
   let lastCurrent: string | undefined
+  let lastEnd: string | undefined
 
   function findViewport(nav: HTMLElement, target: HTMLElement) {
     const doc = nav.ownerDocument
@@ -36,14 +38,27 @@ export function useAnchorFollow(
     if (!target || !link || !link.getClientRects().length) return
     const port = findViewport(nav, target)
     viewport.value = port
-    const changed = lastCurrent !== undefined && lastCurrent !== id
+    const endId = lastCovered.value ?? id
+    const changed = lastCurrent !== undefined && (lastCurrent !== id || lastEnd !== endId)
     lastCurrent = id
+    lastEnd = endId
     if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return
 
     const box = port.getBoundingClientRect()
-    const row = link.getBoundingClientRect()
+    let row: Pick<DOMRect, 'top' | 'bottom' | 'height'> = link.getBoundingClientRect()
     const scale = port.offsetHeight ? box.height / port.offsetHeight : 1
     if (scale <= 0) return
+    if (endId !== id) {
+      const end = nav.querySelector<HTMLElement>(`a[href="#${CSS.escape(endId)}"]`)
+      if (end?.getClientRects().length) {
+        const bottom = end.getBoundingClientRect().bottom
+        const height = bottom - row.top
+        // Follow the full highlight only when it fits; oversized ranges keep
+        // following the first entry instead of alternating between both ends.
+        if (height >= row.height && height <= port.clientHeight * scale)
+          row = { top: row.top, bottom, height }
+      }
+    }
     const top = box.top + port.clientTop * scale
     const bottom = top + port.clientHeight * scale
     if (row.top >= top && row.bottom <= bottom) return
@@ -81,7 +96,7 @@ export function useAnchorFollow(
     if (mounted && !frame) frame = requestAnimationFrame(follow)
   }
 
-  watch([root, current, enabled], schedule, { flush: 'post' })
+  watch([root, current, lastCovered, enabled], schedule, { flush: 'post' })
   useResizeObserver(
     () =>
       [root.value, root.value?.parentElement, viewport.value].filter(

package/src/components/lightbox/composables/useLightboxHint.ts

@@ -1,4 +1,4 @@
-import { useTransform } from 'motion-v'
+import { useMotionValue, useTransform } from 'motion-v'
 import type { useLightboxMotion } from './useLightboxMotion'
 import type { useLightboxFrames } from './useLightboxFrames'
 import type { useLightboxPaging } from './useLightboxPaging'
@@ -10,6 +10,11 @@ export function useLightboxHint(options: {
   paging: ReturnType<typeof useLightboxPaging>
   current: () => LightboxItem | undefined
 }) {
+  // useTransform's subscription refresh queues frame callbacks even during SSR.
+  // Node never drains that queue, retaining the request through these closures.
+  // The hint is only rendered inside the client-mounted lightbox.
+  if (typeof window === 'undefined') return { x: useMotionValue(0), y: useMotionValue(0) }
+
   const { motion, frames, paging } = options
 
   function corner() {

package/src/components/prev-next/PrevNext.vue

@@ -15,7 +15,7 @@
 <template>
   <nav
     :aria-label="props.label ?? t.pagination.navLabel"
-    :class="cn('grid gap-4 sm:grid-cols-2', props.class)"
+    :class="cn('grid grid-cols-1 gap-4 sm:grid-cols-2', props.class)"
   >
     <slot />
   </nav>

package/src/components/prev-next/PrevNextLink.vue

@@ -37,7 +37,7 @@
       <ArrowRight v-else class="size-4" aria-hidden="true" />
       {{ props.label ?? (props.direction === 'prev' ? t.pagination.prev : t.pagination.next) }}
     </span>
-    <span class="text-fg font-medium">
+    <span class="text-fg max-w-full font-medium">
       <slot />
     </span>
   </Primitive>