@hina-ui/vue 1.7.2 → 1.7.4

package/src/components/virtual-list/VirtualList.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts" generic="T">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import LoadingOverlay from '../loading-overlay/LoadingOverlay.vue'
+  import { useVirtualList } from './composables/useVirtualList'
+  import {
+    virtualList,
+    virtualListContent,
+    virtualListItem,
+    virtualListStatus,
+  } from './virtual-list.variants'
+  import type { VirtualListProps, VirtualListRange, VirtualListSlotProps } from './types'
+
+  defineOptions({ name: 'HnVirtualList' })
+
+  const props = withDefaults(defineProps<VirtualListProps<T>>(), {
+    estimateSize: 48,
+    dynamic: true,
+    height: 320,
+    orientation: 'vertical',
+    overscan: 5,
+    gap: 0,
+    paddingStart: 0,
+    paddingEnd: 0,
+    initialOffset: 0,
+    loading: false,
+    shadow: true,
+  })
+
+  const emit = defineEmits<{ rangeChange: [range: VirtualListRange] }>()
+  const slots = defineSlots<{
+    default?(props: VirtualListSlotProps<T>): unknown
+    empty?(): unknown
+    loading?(): unknown
+  }>()
+
+  const t = useUiLocale()
+  const {
+    root,
+    rootDirection,
+    area,
+    list,
+    viewport,
+    entries,
+    contentStyle,
+    rootStyle,
+    itemStyle,
+    measureElement,
+    measure,
+    updateFocus,
+    onFocusOut,
+    scrollToIndex,
+    scrollToOffset,
+  } = useVirtualList(props, range => emit('rangeChange', range))
+
+  defineExpose({ viewport, scrollToIndex, scrollToOffset, measure })
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-hn-virtual-list
+    :dir="rootDirection"
+    :class="cn(virtualList(), props.class)"
+    :style="rootStyle"
+  >
+    <ScrollArea
+      ref="area"
+      class="min-h-0 flex-1"
+      :direction="props.orientation"
+      :shadow="props.shadow"
+      :label="props.label"
+      focusable
+    >
+      <ul
+        ref="list"
+        role="list"
+        :aria-busy="props.loading"
+        :class="virtualListContent({ orientation: props.orientation })"
+        :style="contentStyle"
+        @focusin="updateFocus"
+        @focusout="onFocusOut"
+      >
+        <li
+          v-for="entry in entries"
+          :key="entry.key"
+          :ref="measureElement"
+          :data-index="entry.index"
+          :aria-posinset="entry.index + 1"
+          :aria-setsize="props.items.length"
+          :class="
+            cn(
+              virtualListItem({ orientation: props.orientation }),
+              typeof props.itemClass === 'function'
+                ? props.itemClass(props.items[entry.index]!, entry.index)
+                : props.itemClass,
+            )
+          "
+          :style="itemStyle(entry)"
+        >
+          <slot :item="props.items[entry.index]!" :index="entry.index" />
+        </li>
+      </ul>
+    </ScrollArea>
+    <div
+      v-if="!props.items.length && !props.loading"
+      :class="cn(virtualListStatus(), 'absolute inset-0')"
+    >
+      <slot name="empty">{{ props.emptyText ?? t.virtualList.empty }}</slot>
+    </div>
+    <LoadingOverlay :visible="props.loading" :text="t.common.loading" :delay="0" size="sm">
+      <template v-if="slots.loading" #default><slot name="loading" /></template>
+    </LoadingOverlay>
+  </div>
+</template>

package/src/components/virtual-list/composables/useVirtualList.ts

@@ -0,0 +1,231 @@
+import { computed, nextTick, onScopeDispose, shallowRef, watch, type CSSProperties } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import { defaultRangeExtractor, type VirtualItem } from '@tanstack/vue-virtual'
+import { useDirection } from '../../../lib/useDirection'
+import { useVirtualWindow, virtualFlow } from '../../../lib/virtual/useVirtualWindow'
+import { prefersReducedMotion } from '../../../motion'
+import type ScrollArea from '../../scroll-area/ScrollArea.vue'
+import type {
+  VirtualListKey,
+  VirtualListProps,
+  VirtualListRange,
+  VirtualListScrollOptions,
+} from '../types'
+
+function nonnegative(value: number) {
+  return Number.isFinite(value) ? Math.max(0, value) : 0
+}
+
+export function useVirtualList<T>(
+  props: VirtualListProps<T>,
+  onRangeChange: (range: VirtualListRange) => void,
+) {
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const area = shallowRef<InstanceType<typeof ScrollArea>>()
+  const list = shallowRef<HTMLElement>()
+  const viewport = computed(() => area.value?.viewport)
+  const focusedKey = shallowRef<VirtualListKey>()
+  const horizontal = computed(() => props.orientation === 'horizontal')
+  const keys = computed(() => props.items.map(props.getKey))
+  const focusedIndex = computed(() =>
+    focusedKey.value === undefined ? -1 : keys.value.indexOf(focusedKey.value),
+  )
+  watch(focusedIndex, index => {
+    if (index < 0) focusedKey.value = undefined
+  })
+  const virtualizer = useVirtualWindow(
+    computed(() => {
+      const items = props.items
+      const itemKeys = keys.value
+      const retained = focusedIndex.value
+      const estimate = props.estimateSize ?? 48
+      return {
+        count: items.length,
+        getScrollElement: () => viewport.value ?? null,
+        getItemKey: (index: number) => itemKeys[index]!,
+        estimateSize: (index: number) =>
+          Math.max(
+            1,
+            nonnegative(typeof estimate === 'function' ? estimate(items[index]!, index) : estimate),
+          ),
+        horizontal: horizontal.value,
+        isRtl: direction.value === 'rtl',
+        overscan: Math.floor(nonnegative(props.overscan ?? 5)),
+        gap: nonnegative(props.gap ?? 0),
+        paddingStart: nonnegative(props.paddingStart ?? 0),
+        paddingEnd: nonnegative(props.paddingEnd ?? 0),
+        initialOffset: nonnegative(props.initialOffset ?? 0),
+        initialRect: props.initialRect ?? {
+          width: 320,
+          height: typeof props.height === 'number' ? props.height : 320,
+        },
+        rangeExtractor: (range: Parameters<typeof defaultRangeExtractor>[0]) => {
+          const indexes = defaultRangeExtractor(range)
+          if (retained >= 0 && !indexes.includes(retained)) indexes.push(retained)
+          return indexes.sort((a, b) => a - b)
+        },
+      }
+    }),
+  )
+  const flow = computed(() =>
+    virtualFlow(virtualizer.value.getVirtualItems(), virtualizer.value.getTotalSize()),
+  )
+  const entries = computed(() =>
+    flow.value.entries.map(entry => ({
+      ...entry,
+      key: keys.value[entry.index]!,
+    })),
+  )
+  const contentStyle = computed<CSSProperties>(() => {
+    const { before: start, after: end } = flow.value
+    return horizontal.value
+      ? {
+          width: 'max-content',
+          height: '100%',
+          paddingInlineStart: `${start}px`,
+          paddingInlineEnd: `${end}px`,
+        }
+      : { width: '100%', paddingBlockStart: `${start}px`, paddingBlockEnd: `${end}px` }
+  })
+  const rootStyle = computed<CSSProperties>(() => ({
+    height: typeof props.height === 'string' ? props.height : `${props.height ?? 320}px`,
+  }))
+
+  function itemStyle(entry: VirtualItem & { gapBefore: number }): CSSProperties {
+    return horizontal.value
+      ? {
+          marginInlineStart: `${entry.gapBefore}px`,
+          width: props.dynamic === false ? `${entry.size}px` : undefined,
+        }
+      : {
+          marginBlockStart: `${entry.gapBefore}px`,
+          height: props.dynamic === false ? `${entry.size}px` : undefined,
+        }
+  }
+
+  function measureElement(element: unknown) {
+    if (element === null) {
+      virtualizer.value.measureElement(null)
+      return
+    }
+    if (
+      props.dynamic !== false &&
+      viewport.value &&
+      element instanceof HTMLElement &&
+      element.isConnected
+    ) {
+      virtualizer.value.measureElement(element)
+    }
+  }
+
+  async function measure() {
+    virtualizer.value.measure()
+    await nextTick()
+    for (const child of list.value?.children ?? []) measureElement(child)
+  }
+
+  function updateFocus() {
+    const element = list.value
+    const active = element?.ownerDocument.activeElement
+    const row = active && [...(element?.children ?? [])].find(child => child.contains(active))
+    focusedKey.value = row ? keys.value[Number(row.getAttribute('data-index'))] : undefined
+  }
+
+  function onFocusOut() {
+    void nextTick(updateFocus)
+  }
+
+  let pendingScroll: (() => void) | undefined
+  function scroll(action: () => void) {
+    if (viewport.value && virtualizer.value.scrollElement === viewport.value) action()
+    else pendingScroll = action
+  }
+
+  function behavior(value: VirtualListScrollOptions['behavior']) {
+    return prefersReducedMotion() ? 'auto' : value
+  }
+
+  function scrollToIndex(index: number, options: VirtualListScrollOptions = {}) {
+    if (!Number.isFinite(index)) return
+    scroll(() => {
+      if (props.items.length)
+        virtualizer.value.scrollToIndex(Math.trunc(index), {
+          ...options,
+          behavior: behavior(options.behavior),
+        })
+    })
+  }
+
+  function scrollToOffset(
+    offset: number,
+    options: Pick<VirtualListScrollOptions, 'behavior'> = {},
+  ) {
+    if (!Number.isFinite(offset)) return
+    scroll(() =>
+      virtualizer.value.scrollToOffset(nonnegative(offset), {
+        behavior: behavior(options.behavior),
+      }),
+    )
+  }
+
+  watch(
+    viewport,
+    element => {
+      if (!element) return
+      void measure()
+      pendingScroll?.()
+      pendingScroll = undefined
+    },
+    { flush: 'post' },
+  )
+
+  watch(
+    () => {
+      const range = virtualizer.value.calculateRange()
+      return [range?.startIndex ?? -1, range?.endIndex ?? -1] as const
+    },
+    ([startIndex, endIndex], previous) => {
+      if (startIndex !== previous?.[0] || endIndex !== previous?.[1])
+        onRangeChange({ startIndex, endIndex })
+    },
+    { immediate: true, flush: 'post' },
+  )
+
+  watch(() => [props.dynamic, props.estimateSize, props.orientation], measure)
+  let crossSize: number | undefined
+  let frame: number | undefined
+  useResizeObserver(viewport, entries => {
+    const rect = entries[0]?.contentRect
+    if (!rect) return
+    const next = horizontal.value ? rect.height : rect.width
+    if (crossSize !== undefined && crossSize !== next && props.dynamic !== false) {
+      if (frame !== undefined) cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(() => {
+        frame = undefined
+        void measure()
+      })
+    }
+    crossSize = next
+  })
+  onScopeDispose(() => {
+    if (frame !== undefined) cancelAnimationFrame(frame)
+  })
+
+  return {
+    root,
+    rootDirection,
+    area,
+    list,
+    viewport,
+    entries,
+    contentStyle,
+    rootStyle,
+    itemStyle,
+    measureElement,
+    measure,
+    updateFocus,
+    onFocusOut,
+    scrollToIndex,
+    scrollToOffset,
+  }
+}

package/src/components/virtual-list/types.ts

@@ -0,0 +1,45 @@
+export type VirtualListKey = string | number
+
+export interface VirtualListSlotProps<T> {
+  item: T
+  index: number
+}
+
+export interface VirtualListRange {
+  startIndex: number
+  endIndex: number
+}
+
+export interface VirtualListScrollOptions {
+  align?: 'start' | 'center' | 'end' | 'auto'
+  behavior?: 'auto' | 'smooth'
+}
+
+export interface VirtualListProps<T> {
+  items: readonly T[]
+  getKey: (item: T, index: number) => VirtualListKey
+  estimateSize?: number | ((item: T, index: number) => number)
+  dynamic?: boolean
+  height?: number | string
+  orientation?: 'vertical' | 'horizontal'
+  dir?: 'ltr' | 'rtl'
+  overscan?: number
+  gap?: number
+  paddingStart?: number
+  paddingEnd?: number
+  initialRect?: { width: number; height: number }
+  initialOffset?: number
+  loading?: boolean
+  emptyText?: string
+  label?: string
+  shadow?: boolean
+  class?: string
+  itemClass?: string | ((item: T, index: number) => string | undefined)
+}
+
+export interface VirtualListExpose {
+  viewport: HTMLElement | undefined
+  scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void
+  scrollToOffset: (offset: number, options?: Pick<VirtualListScrollOptions, 'behavior'>) => void
+  measure: () => void
+}

package/src/components/virtual-list/virtual-list.variants.ts

@@ -0,0 +1 @@
+export * from '../../../../shared/src/variants/virtual-list'

package/src/index.ts

@@ -16,10 +16,18 @@ export { default as IconButton } from './components/icon-button/IconButton.vue'
 export { default as CloseButton } from './components/close-button/CloseButton.vue'
 export { default as CopyButton } from './components/copy-button/CopyButton.vue'
 export { default as ButtonGroup } from './components/button-group/ButtonGroup.vue'
+export { default as FloatButton } from './components/float-button/FloatButton.vue'
+export type { FloatButtonProps } from './components/float-button/types'
+export { default as ScrollTop } from './components/scroll-top/ScrollTop.vue'
+export type { ScrollTopProps, ScrollTopTarget } from './components/scroll-top/types'
+export { default as SplitButton } from './components/split-button/SplitButton.vue'
+export type { SplitButtonProps } from './components/split-button/types'
 export { default as Tag } from './components/tag/Tag.vue'
 export { default as Chip } from './components/chip/Chip.vue'
 export { default as Avatar } from './components/avatar/Avatar.vue'
 export { default as AvatarGroup } from './components/avatar/AvatarGroup.vue'
+export { useAvatarGroup } from './components/avatar/context'
+export type { AvatarGroupContext } from './components/avatar/context'
 export type { AvatarVariants } from './components/avatar/avatar.variants'
 export { default as Badge } from './components/badge/Badge.vue'
 export { default as Indicator } from './components/indicator/Indicator.vue'
@@ -58,6 +66,13 @@ export { default as Select } from './components/select/Select.vue'
 export type { SelectOption, SelectOptionGroup, SelectItems } from './components/select/types'
 export { default as MultiSelect } from './components/multi-select/MultiSelect.vue'
 export { default as Combobox } from './components/combobox/Combobox.vue'
+export { default as Autocomplete } from './components/autocomplete/Autocomplete.vue'
+export type {
+  AutocompleteOption,
+  AutocompleteSelection,
+  CompletionContext,
+  CompletionEdit,
+} from './components/autocomplete/types'
 export { default as CommandPalette } from './components/command-palette/CommandPalette.vue'
 export type { CommandItem, CommandGroup, CommandItems } from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
@@ -78,6 +93,29 @@ export type { SliderVariants } from './components/slider/slider.variants'
 export { default as RangeSlider } from './components/range-slider/RangeSlider.vue'
 export { default as Toggle } from './components/toggle/Toggle.vue'
 export type { ToggleVariants } from './components/toggle/toggle.variants'
+export { default as Toolbar } from './components/toolbar/Toolbar.vue'
+export { default as NavigationMenu } from './components/navigation-menu/NavigationMenu.vue'
+export { default as NavigationMenuItem } from './components/navigation-menu/NavigationMenuItem.vue'
+export { default as NavigationMenuTrigger } from './components/navigation-menu/NavigationMenuTrigger.vue'
+export { default as NavigationMenuLink } from './components/navigation-menu/NavigationMenuLink.vue'
+export { default as NavigationMenuContent } from './components/navigation-menu/NavigationMenuContent.vue'
+export type {
+  NavigationMenuProps,
+  NavigationMenuSize,
+  NavigationMenuOrientation,
+} from './components/navigation-menu/types'
+export { default as ToolbarButton } from './components/toolbar/ToolbarButton.vue'
+export { default as ToolbarLink } from './components/toolbar/ToolbarLink.vue'
+export { default as ToolbarToggleGroup } from './components/toolbar/ToolbarToggleGroup.vue'
+export { default as ToolbarToggleItem } from './components/toolbar/ToolbarToggleItem.vue'
+export { default as ToolbarSeparator } from './components/toolbar/ToolbarSeparator.vue'
+export type {
+  ToolbarProps,
+  ToolbarControlProps,
+  ToolbarOrientation,
+  ToolbarSize,
+  ToolbarVariant,
+} from './components/toolbar/types'
 export { default as TagsInput } from './components/tags-input/TagsInput.vue'
 export { default as MultiCombobox } from './components/multi-combobox/MultiCombobox.vue'
 export { default as Calendar } from './components/calendar/Calendar.vue'
@@ -267,6 +305,21 @@ export type {
 } from './components/scroll-area/scroll-restore'
 
 export { default as DataTable } from './components/data-table/DataTable.vue'
+export { default as DataList } from './components/data-list/DataList.vue'
+export type {
+  DataListKey,
+  DataListKeyField,
+  DataListLayout,
+  DataListPageChange,
+  DataListItemSlot,
+  DataListState,
+  DataListProps,
+  DataListTextField,
+  DataListPlaceholderSlot,
+  DataListVirtualOptions,
+  DataListExpose,
+  DataListRange,
+} from './components/data-list/types'
 export type {
   DataTableColumn,
   DataTableKey,
@@ -290,3 +343,87 @@ export type {
   DataTableProps,
   DataTableSlots,
 } from './components/data-table/types'
+
+export { default as Timeline } from './components/timeline/Timeline.vue'
+export { default as VirtualList } from './components/virtual-list/VirtualList.vue'
+export type { VirtualizeOptions } from './lib/virtual/types'
+export type {
+  VirtualListProps,
+  VirtualListSlotProps,
+  VirtualListRange,
+  VirtualListKey,
+  VirtualListScrollOptions,
+  VirtualListExpose,
+} from './components/virtual-list/types'
+export type {
+  TimelineItem,
+  TimelineSlotProps,
+  TimelineAlign,
+  TimelineOrientation,
+  TimelineSize,
+  TimelineTone,
+} from './components/timeline/types'
+
+export { default as Stepper } from './components/stepper/Stepper.vue'
+export type {
+  StepperItem,
+  StepperState,
+  StepperSize,
+  StepperOrientation,
+  StepperProps,
+  StepperSlotProps,
+  StepperNavigation,
+  StepperBeforeChange,
+} from './components/stepper/types'
+
+export { default as Editable } from './components/editable/Editable.vue'
+export type {
+  EditableProps,
+  EditableControls,
+  EditableActivationMode,
+  EditableSubmitMode,
+  EditableSave,
+} from './components/editable/types'
+
+export { default as Affix } from './components/affix/Affix.vue'
+export type { AffixProps, AffixSlotProps, AffixExpose } from './components/affix/types'
+
+export { default as QRCode } from './components/qr-code/QRCode.vue'
+export type {
+  QRCodeProps,
+  QRCodeLevel,
+  QRCodeStatus,
+  QRCodeState,
+  QRCodeStatusSlot,
+  QRCodeExportOptions,
+  QRCodeExpose,
+} from './components/qr-code/types'
+export { default as Carousel } from './components/carousel/Carousel.vue'
+export type {
+  CarouselProps,
+  CarouselItemSlot,
+  CarouselState,
+  CarouselControls,
+  CarouselIndicatorsSlot,
+  CarouselIndicatorSlot,
+  CarouselExpose,
+} from './components/carousel/types'
+
+export { default as MonthGrid } from './components/month-grid/MonthGrid.vue'
+export type {
+  MonthGridProps,
+  MonthGridDay,
+  MonthGridRange,
+  MonthGridHeader,
+  MonthGridWeekday,
+  MonthGridExpose,
+} from './components/month-grid/types'
+
+export { default as Masonry } from './components/masonry/Masonry.vue'
+export type {
+  MasonryProps,
+  MasonryKey,
+  MasonryLayout,
+  MasonrySlotProps,
+  MasonryExpose,
+} from './components/masonry/types'

package/src/lib/anchored-overlay.ts

@@ -15,6 +15,7 @@ export function useAnchoredOverlay(
     anchor?: OverlayAnchor | null
     modal: boolean
     updatePositionStrategy: OverlayPositionStrategy
+    dir?: 'ltr' | 'rtl'
   },
   open: Ref<boolean | undefined>,
   emit: <K extends keyof DropdownMenuContentEmits>(
@@ -37,6 +38,7 @@ export function useAnchoredOverlay(
     visible,
     present,
     () => props.updatePositionStrategy,
+    () => props.dir,
   )
 
   let previousFocus: HTMLElement | null = null

package/src/lib/cn.ts

@@ -1,9 +1 @@
-import { clsx, type ClassValue } from 'clsx'
-import { extendTailwindMerge } from 'tailwind-merge'
-import { TW_MERGE_CONFIG, type HnClassGroupIds } from './tw-merge'
-
-const twMerge = extendTailwindMerge<HnClassGroupIds>(TW_MERGE_CONFIG)
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
+export * from '../../../shared/src/lib/cn'

package/src/lib/layout-stability.ts

@@ -0,0 +1,12 @@
+import { computed, inject, provide, type InjectionKey, type Ref } from 'vue'
+
+const key: InjectionKey<Readonly<Ref<boolean>>> = Symbol('hn-layout-transition')
+
+export function provideLayoutTransition(transitioning: Readonly<Ref<boolean>>) {
+  const parent = useLayoutTransition()
+  provide(key, parent ? computed(() => parent.value || transitioning.value) : transitioning)
+}
+
+export function useLayoutTransition() {
+  return inject(key, undefined)
+}

package/src/lib/overlay-anchor.ts

@@ -27,13 +27,14 @@ export function useOverlayAnchor(
   open: Ref<boolean | undefined>,
   present: Ref<boolean>,
   strategy: () => OverlayPositionStrategy,
+  direction: () => 'ltr' | 'rtl' | undefined = () => undefined,
 ) {
   const reference = shallowRef<Exclude<OverlayAnchor, HTMLElement>>()
 
   let current: OverlayAnchor | undefined
 
   watch(
-    [source, open, present, strategy],
+    [source, open, present, strategy, direction],
     ([anchor, active, mounted]) => {
       if (!mounted) {
         current = undefined

package/src/lib/reka/README.md

@@ -0,0 +1,13 @@
+# Primitive style adapter
+
+Shared variants and motion consume Hina runtime CSS properties. Only this directory may reference `--reka-*`; `test/constraints.test.ts` enforces the boundary. These properties carry live measurements or interaction state, not theme tokens.
+
+`styles.ts` maps primitive properties on the element where the primitive writes them. Do not hoist aliases to a provider or document root: CSS resolves variable references on the element defining the alias, before inheritance. Attach aliases to each overlay separately so nested overlays keep their own dimensions.
+
+The [shared runtime property contract](../../../../shared/runtime.md) owns the variable names, meanings and binding elements. This directory owns only their Reka mapping and Vue lifecycle integration.
+
+The slider mapping runs in the opposite direction: Hina owns the thumb geometry and supplies its transform to the primitive.
+
+`useRekaNavigationViewport` exposes `data-hn-ready` only after all four navigation measurements exist. It observes the viewport's inline style and resets readiness when the primitive clears its measurements or the element unmounts. Keep the measured state throughout the exit animation; setting readiness from the open model would hide the exit. Shared motion uses only `data-hn-ready`.
+
+A different framework adapter can supply the same Hina properties and readiness attribute directly. It must still implement the component interaction, accessibility and lifecycle contracts; this boundary isolates CSS integration, not the entire primitive API.

package/src/lib/reka/navigation-viewport.ts

@@ -0,0 +1,23 @@
+import { ref, shallowRef, watch } from 'vue'
+import { useMutationObserver } from '@vueuse/core'
+
+export function useRekaNavigationViewport() {
+  const viewport = shallowRef<HTMLElement>()
+  const ready = ref(false)
+
+  function update() {
+    const style = viewport.value?.style
+    ready.value = ['width', 'height', 'left', 'top'].every(dimension =>
+      Number.isFinite(
+        Number.parseFloat(
+          style?.getPropertyValue(`--reka-navigation-menu-viewport-${dimension}`) ?? '',
+        ),
+      ),
+    )
+  }
+
+  watch(viewport, update, { flush: 'post' })
+  useMutationObserver(viewport, update, { attributes: true, attributeFilter: ['style'] })
+
+  return { viewport, ready }
+}