frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/Tree/useTreeDragDrop.ts

@@ -0,0 +1,203 @@
+import { computed, reactive, type Ref } from 'vue'
+import type {
+  DropInfo,
+  DropPosition,
+  MoveContext,
+  TreeKey,
+  TreeNode,
+} from './types'
+
+interface DragDropOptions {
+  keyOf: (node: TreeNode) => TreeKey
+  childrenOf: (node: TreeNode) => TreeNode[]
+  /** Siblings of a node — a parent's children, or the roots for top level. */
+  siblingsOf: (parent: TreeNode | null) => TreeNode[]
+  labelOf: (node: TreeNode) => string
+  disabled: Ref<boolean>
+  /** Live predicate gating a hovered drop target. */
+  move?: (ctx: MoveContext) => boolean
+  /** A drag was picked up. */
+  emitDragStart: (node: TreeNode) => void
+  /** A drag finished — `info` on a committed move, `null` on cancel. */
+  emitDragEnd: (info: DropInfo | null) => void
+  /** Announce drag state changes to assistive tech. */
+  announce: (message: string) => void
+}
+
+interface DragState {
+  source: TreeNode | null
+  sourceParent: TreeNode | null
+  target: TreeNode | null
+  position: DropPosition | null
+  x: number
+  y: number
+}
+
+/**
+ * Owns the live drag state and resolves + validates drops for the tree.
+ * Pure logic — it never mutates `nodes`; it hands the caller a `DropInfo` via
+ * `drag-end` and lets them persist and update the model.
+ */
+export function useTreeDragDrop(options: DragDropOptions) {
+  const { keyOf, childrenOf, siblingsOf, disabled, move } = options
+
+  const state = reactive<DragState>({
+    source: null,
+    sourceParent: null,
+    target: null,
+    position: null,
+    x: 0,
+    y: 0,
+  })
+
+  // Resolved on a valid drop, emitted on the following `dragend`.
+  let pending: DropInfo | null = null
+
+  function isDescendant(node: TreeNode, key: TreeKey): boolean {
+    const stack = [...childrenOf(node)]
+    while (stack.length) {
+      const current = stack.pop() as TreeNode
+      if (keyOf(current) === key) return true
+      stack.push(...childrenOf(current))
+    }
+    return false
+  }
+
+  /** Resolve where the cursor sits within a row into a drop position. */
+  function resolvePosition(e: DragEvent): DropPosition {
+    const row = e.currentTarget as HTMLElement
+    const rect = row.getBoundingClientRect()
+    const offset = e.clientY - rect.top
+    if (offset < rect.height * 0.25) return 'before'
+    if (offset > rect.height * 0.75) return 'after'
+    return 'inside'
+  }
+
+  /** Whether a drop of `source` onto `target` at `position` is permitted. */
+  function isValidDrop(
+    source: TreeNode,
+    target: TreeNode,
+    position: DropPosition,
+  ): boolean {
+    const sourceKey = keyOf(source)
+    const targetKey = keyOf(target)
+    if (sourceKey === targetKey) return false
+    if (isDescendant(source, targetKey)) return false
+    // Re-parenting onto the node's current parent is a no-op.
+    if (
+      position === 'inside' &&
+      state.sourceParent &&
+      keyOf(state.sourceParent) === targetKey
+    )
+      return false
+    if (move && !move({ node: source, target, position })) return false
+    return true
+  }
+
+  function onDragStart(
+    e: DragEvent,
+    node: TreeNode,
+    parent: TreeNode | null,
+  ): void {
+    if (disabled.value) return
+    state.source = node
+    state.sourceParent = parent
+    pending = null
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move'
+      e.dataTransfer.setData('text/plain', String(keyOf(node)))
+    }
+    options.emitDragStart(node)
+    options.announce(`Picked up ${options.labelOf(node)}`)
+  }
+
+  function onDragOver(e: DragEvent, node: TreeNode): void {
+    if (!state.source || disabled.value) return
+    const position = resolvePosition(e)
+    state.x = e.clientX
+    state.y = e.clientY
+    if (isValidDrop(state.source, node, position)) {
+      state.target = node
+      state.position = position
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
+    } else {
+      state.target = null
+      state.position = null
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'none'
+    }
+  }
+
+  function onDragLeave(node: TreeNode): void {
+    if (state.target && keyOf(state.target) === keyOf(node)) {
+      state.target = null
+      state.position = null
+    }
+  }
+
+  function onDrop(target: TreeNode, targetParent: TreeNode | null): void {
+    const source = state.source
+    const position = state.position
+    if (!source || !position || !state.target) return
+    if (keyOf(state.target) !== keyOf(target)) return
+
+    const from = state.sourceParent ? keyOf(state.sourceParent) : null
+    const oldSiblings = siblingsOf(state.sourceParent)
+    const oldIndex = oldSiblings.findIndex((n) => keyOf(n) === keyOf(source))
+
+    let to: TreeKey | null
+    let newIndex: number
+
+    if (position === 'inside') {
+      to = keyOf(target)
+      newIndex = childrenOf(target).length
+    } else {
+      to = targetParent ? keyOf(targetParent) : null
+      const siblings = siblingsOf(targetParent)
+      const targetIndex = siblings.findIndex((n) => keyOf(n) === keyOf(target))
+      let insertIndex = position === 'before' ? targetIndex : targetIndex + 1
+      // When reordering within the same parent, the source still occupies a
+      // slot in `siblings`. Removing it first shifts later positions down by
+      // one, so the reported `newIndex` is the final post-removal position.
+      if (from === to && oldIndex > -1 && oldIndex < insertIndex)
+        insertIndex -= 1
+      newIndex = insertIndex
+    }
+
+    pending = { node: source, from, to, position, oldIndex, newIndex }
+    options.announce(`Moved ${options.labelOf(source)}`)
+  }
+
+  function reset(): void {
+    state.source = null
+    state.sourceParent = null
+    state.target = null
+    state.position = null
+  }
+
+  function onDragEnd(): void {
+    if (!pending && state.source) options.announce('Cancelled move')
+    options.emitDragEnd(pending)
+    pending = null
+    reset()
+  }
+
+  const dragSourceKey = computed(() =>
+    state.source ? keyOf(state.source) : null,
+  )
+  const dropTargetKey = computed(() =>
+    state.target ? keyOf(state.target) : null,
+  )
+  const dropPosition = computed(() => state.position)
+
+  return {
+    state,
+    dragSourceKey,
+    dropTargetKey,
+    dropPosition,
+    onDragStart,
+    onDragOver,
+    onDragLeave,
+    onDrop,
+    onDragEnd,
+  }
+}

package/src/components/Tree/useTreeKeyboard.ts

@@ -0,0 +1,109 @@
+import type { Ref } from 'vue'
+import type { TreeKey, TreeNode } from './types'
+
+/** One visible (un-collapsed) row, in render order. */
+export interface FlatNode {
+  key: TreeKey
+  node: TreeNode
+  parentKey: TreeKey | null
+  level: number
+  hasChildren: boolean
+  expanded: boolean
+}
+
+interface KeyboardOptions {
+  /** Visible rows in render order; recomputed as expansion changes. */
+  flat: Ref<FlatNode[]>
+  focusedKey: Ref<TreeKey | null>
+  labelOf: (node: TreeNode) => string
+  focus: (key: TreeKey) => void
+  expand: (node: TreeNode) => void
+  collapse: (node: TreeNode) => void
+  toggle: (node: TreeNode) => void
+}
+
+/**
+ * Roving-focus keyboard navigation for the tree, following the WAI-ARIA
+ * Tree View pattern (P12). Operates on the flattened list of visible rows.
+ */
+export function useTreeKeyboard(options: KeyboardOptions) {
+  const { flat, focusedKey, focus, expand, collapse, toggle } = options
+
+  let typeahead = ''
+  let typeaheadTimer: ReturnType<typeof setTimeout> | null = null
+
+  const indexOfFocused = () =>
+    flat.value.findIndex((f) => f.key === focusedKey.value)
+
+  function focusAt(index: number): void {
+    const item = flat.value[index]
+    if (item) focus(item.key)
+  }
+
+  function moveToParent(current: FlatNode): void {
+    if (current.parentKey == null) return
+    focus(current.parentKey)
+  }
+
+  function typeaheadSearch(char: string): void {
+    if (typeaheadTimer) clearTimeout(typeaheadTimer)
+    typeahead += char.toLowerCase()
+    typeaheadTimer = setTimeout(() => (typeahead = ''), 500)
+
+    const start = Math.max(indexOfFocused(), 0)
+    const ordered = [
+      ...flat.value.slice(start + 1),
+      ...flat.value.slice(0, start + 1),
+    ]
+    const match = ordered.find((f) =>
+      options.labelOf(f.node).toLowerCase().startsWith(typeahead),
+    )
+    if (match) focus(match.key)
+  }
+
+  function onKeydown(e: KeyboardEvent): void {
+    const index = indexOfFocused()
+    const current = flat.value[index]
+    if (!current && !['Home', 'End'].includes(e.key)) return
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault()
+        focusAt(Math.min(index + 1, flat.value.length - 1))
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        focusAt(Math.max(index - 1, 0))
+        break
+      case 'ArrowRight':
+        e.preventDefault()
+        if (current.hasChildren && !current.expanded) expand(current.node)
+        else if (current.hasChildren && current.expanded) focusAt(index + 1)
+        break
+      case 'ArrowLeft':
+        e.preventDefault()
+        if (current.hasChildren && current.expanded) collapse(current.node)
+        else moveToParent(current)
+        break
+      case 'Home':
+        e.preventDefault()
+        focusAt(0)
+        break
+      case 'End':
+        e.preventDefault()
+        focusAt(flat.value.length - 1)
+        break
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        toggle(current.node)
+        break
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          typeaheadSearch(e.key)
+        }
+    }
+  }
+
+  return { onKeydown }
+}

package/src/components/VueGridLayout/Layout.vue

@@ -31,7 +31,7 @@
         :max-w="l.maxW"
         :max-h="l.maxH"
       >
-        <pre class="h-full w-full rounded bg-surface-white p-4 shadow">{{
+        <pre class="h-full w-full rounded bg-surface-base p-4 shadow">{{
           {
             i: l.i,
             x: l.x,

package/src/components/shared/picker/PickerShell.vue

@@ -1,7 +1,7 @@
 <template>
   <PopoverRoot v-model:open="open">
     <PopoverAnchor :reference="anchorEl" as-child>
-      <div @keydown.down.prevent="onArrowDown">
+      <div v-bind="$attrs" @keydown.down.prevent="onArrowDown">
         <slot name="trigger" v-bind="triggerSlotProps">
           <slot name="target" v-bind="triggerSlotProps">
             <TextInput
@@ -44,7 +44,6 @@
     <PopoverPortal>
       <PopoverContent
         data-slot="content"
-        data-selection
         class="z-[100]"
         :side="side"
         :align="align"
@@ -52,15 +51,14 @@
         @open-auto-focus.prevent
         @interact-outside="onInteractOutside"
       >
-        <div
-          ref="popoverContentRef"
-          data-slot="content-body"
-          :data-motion="motion"
+        <PopoverPanel
+          ref="popoverPanelRef"
+          :motion="motion"
           :class="contentClass"
-          style="transform-origin: var(--reka-popover-content-transform-origin)"
+          class="origin-[var(--reka-popover-content-transform-origin)]"
         >
           <slot :close="closePopover" />
-        </div>
+        </PopoverPanel>
       </PopoverContent>
     </PopoverPortal>
   </PopoverRoot>
@@ -76,10 +74,10 @@ import {
 } from 'reka-ui'
 import { TextInput } from '../../TextInput'
 import LucideChevronDown from '~icons/lucide/chevron-down'
+import PopoverPanel from '../popover/PopoverPanel.vue'
 import { usePopoverMotion } from '../../../composables/usePopoverMotion'
 import type { InputSize, InputVariant } from '../../../composables/inputTypes'
 import type { FrappeUIError } from '../../../composables/useInputLabeling'
-import '../selection/popoverMotion.css'
 
 interface Props {
   // Positioning — already resolved by caller from side/align/placement.
@@ -107,7 +105,9 @@ interface Props {
   // Display label exposed via trigger slot props for caller-rendered triggers.
   displayLabel?: string
 
-  // Tailwind class string for the popover content body wrapper.
+  // Extra Tailwind classes (layout/sizing such as `w-56`/`w-fit`) merged onto
+  // the `PopoverPanel` shell. The elevated shell itself (rounded/bg/shadow/ring)
+  // is owned by `PopoverPanel`, so callers no longer pass those here.
   contentClass?: string
 }
 
@@ -145,6 +145,8 @@ const slots = defineSlots<{
   default?: (props: { close: () => void }) => any
 }>()
 
+defineOptions({ inheritAttrs: false })
+
 const open = defineModel<boolean>('open', { default: false })
 const inputValue = defineModel<string>('inputValue', { default: '' })
 const typing = defineModel<boolean>('typing', { default: false })
@@ -159,7 +161,12 @@ interface TriggerSlotProps {
 // Anchor the popover at the input element itself (not the labeling wrapper),
 // so it sits below the input rather than below the description text.
 const textInputRef = ref<{ el: HTMLElement | null } | null>(null)
-const popoverContentRef = ref<HTMLElement | null>(null)
+const popoverPanelRef = ref<{ $el: HTMLElement } | null>(null)
+
+// PopoverPanel renders a single root <div>, so its `$el` is the panel element
+// we test focus containment against (Esc / selection should restore trigger
+// focus; click-outside should not).
+const panelEl = computed(() => popoverPanelRef.value?.$el ?? null)
 
 const anchorEl = computed(() => {
   if (slots.trigger || slots.target) return undefined
@@ -208,7 +215,7 @@ function onClick(e: MouseEvent) {
 function onBlur(e: FocusEvent) {
   // Clicks inside the popover panel re-focus options; treat those as still-focused.
   const next = e.relatedTarget as Node | null
-  if (next && popoverContentRef.value?.contains(next)) return
+  if (next && panelEl.value?.contains(next)) return
   emit('blur')
   typing.value = false
 }
@@ -246,9 +253,7 @@ watch(open, (val, prev) => {
     // Restore focus to the trigger input if the popover content had focus
     // (Esc, date selection in auto-close mode). Click-outside leaves focus
     // on the clicked element, so we skip in that case.
-    const hadFocusInside = popoverContentRef.value?.contains(
-      document.activeElement,
-    )
+    const hadFocusInside = panelEl.value?.contains(document.activeElement)
     emit('close')
     if (hadFocusInside) {
       nextTick(() => textInputRef.value?.el?.focus())

package/src/components/shared/popover/PopoverPanel.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    data-slot="content-body"
+    data-panel
+    :data-motion="motion"
+    :data-state="state"
+    :class="shellClass"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Shared floating-panel shell for popover-style surfaces (Popover, Select,
+ * Combobox, DatePicker, TimePicker, …).
+ *
+ * It owns ONLY two things:
+ *   1. the visual shell — `rounded-lg bg-surface-elevation-2 shadow-2xl
+ *      ring-1 ring-black ring-opacity-5` — matching what the selection family
+ *      renders today, plus the `data-slot="content-body"` hook, and
+ *   2. the open/close motion wiring (`data-motion` + the co-located
+ *      `popoverPanel.css`, supporting both the `animated` scale-from-trigger
+ *      rhythm and the `instant` keyboard/Dropdown rhythm).
+ *
+ * It owns NO behavior and NO reka root: render it INSIDE a reka
+ * `PopoverContent` / `SelectContent` / `ComboboxContent` / `DropdownMenuContent`
+ * (or directly). Each consumer keeps its own reka `*Root`, `*Portal`,
+ * `*Content`, `FocusScope` and a11y wiring, and renders its contents in the
+ * default slot.
+ *
+ * It is a thin pass-through: Vue auto-merges any `class`/`style`/attrs onto the
+ * single root, so consumers add layout (flex/grid/divide/min-w) and the
+ * per-primitive `transform-origin` without losing the shell classes.
+ */
+import './popoverPanel.css'
+
+withDefaults(
+  defineProps<{
+    /**
+     * Open/close rhythm:
+     *   - `'animated'` (default): pointer opens → scale-from-trigger entrance.
+     *   - `'instant'`: keyboard / programmatic opens → ~80ms opacity fade only.
+     * Drive this from `usePopoverMotion(open).motion`.
+     */
+    motion?: 'animated' | 'instant'
+    /**
+     * The reka content's `data-state`, forwarded onto the panel element so the
+     * co-located motion CSS is self-contained. Omit when the parent reka
+     * `*Content` already exposes `data-state` and you rely on reka's own state
+     * (the motion CSS matches an ancestor `[data-state]` too).
+     */
+    state?: 'open' | 'closed'
+  }>(),
+  {
+    motion: 'animated',
+  },
+)
+
+defineSlots<{ default?: () => any }>()
+
+// The standard elevated floating-panel shell. Kept verbatim in sync with the
+// selection family's `content-body` so every popover surface shares one look.
+// Consumer `class` (layout, transform-origin) auto-merges after this.
+const shellClass =
+  'overflow-hidden rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 will-change-[opacity,transform]'
+</script>

package/src/components/shared/popover/popoverPanel.css

@@ -0,0 +1,102 @@
+/*
+ * Open/close motion for the shared `PopoverPanel` shell. Imported once by
+ * `PopoverPanel.vue` so it is deduped at build time — consumers never import
+ * it directly.
+ *
+ * Every selector is gated on the compound `[data-slot='content-body'][data-panel]`
+ * so this stylesheet only applies to `PopoverPanel` instances and cannot leak
+ * onto other popovers sharing the `data-slot` hooks (e.g. Dropdown's
+ * `.menu-content`, or the legacy selection `popoverMotion.css`).
+ *
+ * `data-state` is read from one of two places, so the panel is drop-in for
+ * either wiring style:
+ *   1. the panel element itself, when the consumer passes the `state` prop
+ *      (fully self-contained — preferred for new code), or
+ *   2. an ancestor reka `*Content` carrying `data-state`, when the consumer
+ *      omits `state` and relies on reka's own state (matches how the legacy
+ *      selection stylesheet worked).
+ * `data-motion` always lives on the panel element.
+ *
+ * `transform-origin` is intentionally NOT set here — each consumer owns it
+ * (Popover uses `--reka-popover-content-transform-origin`, Select the
+ * `--reka-select-*` var, Combobox the `--reka-combobox-*` var) by passing it
+ * through `class`/`style` on the panel.
+ *
+ * Two rhythms, selected by `data-motion`:
+ *   - `animated` — scale-from-trigger entrance (pointer opens), 180ms enter /
+ *     140ms exit.
+ *   - `instant` — keyboard / programmatic opens skip the scale + translate; a
+ *     ~80ms opacity fade still runs on open to mask reka's 1-frame
+ *     position-settle after mount, and no animation on close.
+ */
+
+[data-slot='content-body'][data-panel] {
+  animation-fill-mode: both;
+}
+
+[data-slot='content-body'][data-panel][data-motion='animated'] {
+  backface-visibility: hidden;
+}
+
+/* (1) state on the panel itself (via the `state` prop) */
+[data-slot='content-body'][data-panel][data-motion='animated'][data-state='open'],
+/* (2) state on an ancestor reka *Content */
+[data-state='open']
+  [data-slot='content-body'][data-panel][data-motion='animated'] {
+  animation: popover-panel-enter 180ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+[data-slot='content-body'][data-panel][data-motion='animated'][data-state='closed'],
+[data-state='closed']
+  [data-slot='content-body'][data-panel][data-motion='animated'] {
+  animation: popover-panel-exit 140ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+[data-slot='content-body'][data-panel][data-motion='instant'][data-state='open'],
+[data-state='open']
+  [data-slot='content-body'][data-panel][data-motion='instant'] {
+  animation: popover-panel-instant-fade 80ms linear;
+}
+
+[data-slot='content-body'][data-panel][data-motion='instant'][data-state='closed'],
+[data-state='closed']
+  [data-slot='content-body'][data-panel][data-motion='instant'] {
+  animation: none;
+}
+
+@keyframes popover-panel-enter {
+  from {
+    opacity: 0;
+    transform: translateY(2px) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes popover-panel-exit {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(1px) scale(0.985);
+  }
+}
+
+@keyframes popover-panel-instant-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='content-body'][data-panel] {
+    animation-duration: 0ms !important;
+  }
+}

package/src/components/shared/selection/utils.ts

@@ -25,7 +25,7 @@ export function inputFontSizeClasses(size: SelectionSize) {
     sm: 'text-base',
     md: 'text-base',
     lg: 'text-lg',
-    xl: 'text-xl',
+    xl: 'text-2xl',
   }[size]
 }
 
@@ -56,9 +56,9 @@ export function triggerVariantClasses(
 
   return {
     subtle:
-      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-gray-modals hover:bg-surface-gray-3',
+      'border border-[--surface-gray-2] bg-surface-gray-2 hover:border-outline-elevation-2 hover:bg-surface-gray-3',
     outline:
-      'border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3',
+      'border border-outline-gray-2 bg-surface-base hover:border-outline-gray-3',
     ghost:
       'border border-transparent bg-transparent hover:bg-surface-gray-3 focus-within:bg-surface-gray-3',
   }[variant]
@@ -70,13 +70,13 @@ export function triggerVariantClasses(
  * on the trigger itself.
  */
 export const triggerBaseClassesFocusVisible =
-  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:ring-2 data-[state=open]:ring-2 ring-outline-gray-3'
+  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] data-[state=open]:focus-ring'
 
 export const triggerBaseClassesFocusWithin =
-  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:ring-2 data-[state=open]:ring-2 ring-outline-gray-3'
+  'relative inline-flex items-center gap-2 text-left text-ink-gray-7 outline-none transition-[background-color,border-color,box-shadow] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-within:focus-ring data-[state=open]:focus-ring'
 
 export const itemClasses =
-  'select-none rounded border-0 text-base text-ink-gray-9 transition-colors duration-100 ease-out data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4'
+  'select-none rounded border-0 text-base text-ink-gray-9 transition-colors duration-100 ease-out data-[disabled]:text-ink-gray-4 data-[highlighted]:bg-surface-alpha-gray-2 data-[state=checked]:bg-surface-gray-3 data-[highlighted]:data-[state=checked]:bg-surface-gray-4'
 
 /**
  * Case-insensitive substring match against an option's label and value.

package/src/composables/useAutofocusOnOpen.ts

@@ -41,6 +41,8 @@ export function useAutofocusOnOpen(
   isOpen: MaybeRefOrGetter<boolean>,
   getContainer: () => HTMLElement | null | undefined,
 ) {
+  if (typeof window === 'undefined') return
+
   watch(
     () => toValue(isOpen),
     async (open) => {

package/src/composables/useScreenSize.ts

@@ -0,0 +1,46 @@
+import { computed, onMounted, onUnmounted, reactive, type ComputedRef } from 'vue'
+
+const hasWindow = typeof window !== 'undefined'
+
+export interface ScreenSize {
+  width: number
+  height: number
+}
+
+/**
+ * Reactive viewport size, updated on window resize.
+ *
+ * Falls back to a desktop-ish size when there's no window (SSR / non-browser
+ * test env) so a `useIsMobile()` derived from it doesn't flash the mobile
+ * layout before hydration.
+ */
+export function useScreenSize(): ScreenSize {
+  const size = reactive<ScreenSize>({
+    width: hasWindow ? window.innerWidth : 1024,
+    height: hasWindow ? window.innerHeight : 768,
+  })
+
+  const onResize = () => {
+    size.width = window.innerWidth
+    size.height = window.innerHeight
+  }
+
+  onMounted(() => {
+    if (hasWindow) window.addEventListener('resize', onResize)
+  })
+  onUnmounted(() => {
+    if (hasWindow) window.removeEventListener('resize', onResize)
+  })
+
+  return size
+}
+
+/**
+ * Whether the viewport is narrower than `breakpoint` (default 640px — Tailwind's
+ * `sm`). Reactive; apps typically use it to choose between a desktop and a
+ * mobile shell.
+ */
+export function useIsMobile(breakpoint = 640): ComputedRef<boolean> {
+  const size = useScreenSize()
+  return computed(() => size.width < breakpoint)
+}