@leavepulse/ui 0.77.2 → 0.78.0

package/src/components/LpDock.vue

@@ -43,6 +43,7 @@ import { prefersReducedMotion } from "../composables/easing"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { springSettled, springStep, type SpringState } from "../composables/usePillTransition"
 import { useRovingFocus } from "../composables/useRovingFocus"
+import { isHTMLElement } from "../composables/useView"
 import { dockSize } from "./dock"
 import LpIcon from "./LpIcon.vue"
 import LpTooltip from "./LpTooltip.vue"
@@ -96,7 +97,7 @@ function select(id: string) {
 
 const roving = useRovingFocus(
   () => props.items.map((item) => ({ id: item.id, label: item.label, disabled: item.disabled })),
-  { orientation: props.orientation, onActivate: select },
+  { orientation: () => props.orientation, onActivate: select },
 )
 
 // ── magnification ─────────────────────────────────────────
@@ -111,7 +112,7 @@ let frame = 0
 let lastTime = 0
 
 function setButton(id: string, el: unknown) {
-  if (el instanceof HTMLElement) buttons.set(id, el)
+  if (isHTMLElement(el)) buttons.set(id, el)
   else buttons.delete(id)
 }
 
@@ -120,9 +121,21 @@ function centreOf(el: HTMLElement): number {
   return vertical.value ? rect.top + rect.height / 2 : rect.left + rect.width / 2
 }
 
-function targetFor(el: HTMLElement): number {
-  if (pointer === null) return props.size
-  return dockSize(props.size, Math.max(props.size, props.magnify), pointer - centreOf(el), props.reach)
+/*
+ * `focusAt` stays relative to the bar and is read here: stored as client px it
+ * went stale as soon as the bar scrolled, while the icons it is measured
+ * against moved on.
+ */
+function swellCentre(): number | null {
+  if (props.focusAt === null) return pointer
+  if (!bar.value || !magnifying()) return null
+  const rect = bar.value.getBoundingClientRect()
+  return (vertical.value ? rect.top : rect.left) + props.focusAt
+}
+
+function targetFor(el: HTMLElement, centre: number | null): number {
+  if (centre === null) return props.size
+  return dockSize(props.size, Math.max(props.size, props.magnify), centre - centreOf(el), props.reach)
 }
 
 function step(time: number) {
@@ -133,7 +146,8 @@ function step(time: number) {
   // Read every target before writing any size: interleaving reads and writes
   // would force a layout per icon per frame.
   const targets = new Map<string, number>()
-  for (const [id, el] of buttons) targets.set(id, targetFor(el))
+  const centre = swellCentre()
+  for (const [id, el] of buttons) targets.set(id, targetFor(el, centre))
   for (const [id, el] of buttons) {
     const target = targets.get(id)!
     const next = springStep(springs.get(id) ?? { value: props.size, velocity: 0 }, target, "pill", dt)
@@ -180,17 +194,12 @@ function onFocusOut(event: FocusEvent) {
   kick()
 }
 
-// The outside-driven swell: converted from bar-relative to client px on every
-// frame it is set, so a bar that moves (scrolls) keeps the swell in place.
+// A coordinate along the old axis means nothing along the new one, so the
+// swell rests until the pointer moves again.
 watch(
-  () => props.focusAt,
-  (at) => {
-    if (at === null) {
-      pointer = null
-    } else if (bar.value && magnifying()) {
-      const rect = bar.value.getBoundingClientRect()
-      pointer = (vertical.value ? rect.top : rect.left) + at
-    }
+  [() => props.focusAt, vertical],
+  () => {
+    pointer = null
     kick()
   },
   { flush: "post" },

package/src/components/LpDrawer.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { clamp } from "../composables/clamp"
 import { ref as sharedRef, type Ref } from "vue"
 
 // One pull at a time across every edge-open drawer on the page, pinned to a
@@ -37,13 +38,14 @@ import { CLOSE_ICON } from "./dropdown"
 import { prefersReducedMotion } from "../composables/easing"
 import { useCloseGuard, type CloseGuard } from "../composables/useCloseGuard"
 import { useGlass } from "../composables/useGlass"
-import { useOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
+import { useModelOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { usePersisted } from "../composables/usePersisted"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import { anyModalOpen, useModalLayer } from "./modalDepth"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { startPointerDrag } from "../composables/pointerDrag"
+import { isElement, nodeWindow, useOutsideGuard, usePortalTarget, useView, viewDocument, viewWindow } from "../composables/useView"
 
 type Direction = "top" | "bottom" | "left" | "right"
 
@@ -223,16 +225,11 @@ async function requestClose() {
 // ways out do. Handed to the body and footer slots, and exposed.
 defineExpose({ close: requestClose })
 
-useOverlayHistory({
+useModelOverlayHistory({
   mode: () => props.history,
   open: () => !!props.open,
-  close: async () => {
-    if (!(await allowClose())) return false
-    emit("update:open", false)
-    return true
-  },
-  reopen: () => emit("update:open", true),
-  navigated: () => emit("update:open", false),
+  setOpen: (open) => emit("update:open", open),
+  allowClose,
 })
 
 // The header's close button is vaul's own and would slide the panel away at
@@ -255,22 +252,26 @@ const sizeStyle = computed(() => {
   if (props.snapPoints?.length && isSheet.value) return undefined
   // A live resize wins over the preset/width.
   if (props.resizable && isHorizontal.value && resizedPx.value != null) {
-    return { width: `${resizedPx.value}px` }
+    // Capped live: a width dragged or remembered on a wide window must still
+    // fit once the window shrinks or the device turns.
+    return { width: `min(${resizedPx.value}px, ${props.maxSize})` }
   }
   const len = props.width ?? `min(${isHorizontal.value ? "94vw" : "94vh"}, ${SIZES[props.size]}rem)`
   return isHorizontal.value ? { width: len } : { height: len }
 })
 
-// Resolve a CSS length to px against the viewport. Anything it cannot read
-// (calc(), min()) comes back NaN for the caller to fall back on.
-function toPx(css: string): number {
+// Resolve a CSS length to px against the viewport. Only px, rem, vw and vh are
+// read; anything else (calc(), min()) comes back NaN and the caller falls back
+// to the viewport, while the CSS itself still applies the length as written.
+function toPx(css: string, win?: Window): number {
   const n = Number.parseFloat(css)
   if (css.endsWith("rem")) {
-    const root = typeof document === "undefined" ? 16 : Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    const view = win ?? (typeof window === "undefined" ? null : window)
+    const root = view ? Number.parseFloat(view.getComputedStyle(view.document.documentElement).fontSize) || 16 : 16
     return n * root
   }
-  if (css.endsWith("vw")) return (n / 100) * window.innerWidth
-  if (css.endsWith("vh")) return (n / 100) * window.innerHeight
+  if (css.endsWith("vw")) return (n / 100) * (win ?? window).innerWidth
+  if (css.endsWith("vh")) return (n / 100) * (win ?? window).innerHeight
   if (css.endsWith("px") || /^[\d.]+$/.test(css.trim())) return n
   return Number.NaN
 }
@@ -283,34 +284,22 @@ let endResize: (() => void) | null = null
 
 function startResize(e: PointerEvent) {
   if (!props.resizable || !isHorizontal.value) return
-  e.preventDefault()
   endResize?.()
-  const grip = e.currentTarget instanceof HTMLElement ? e.currentTarget : null
-  grip?.setPointerCapture(e.pointerId)
+  // The window the panel lives in: an LpFrame's, inside one.
+  const win = nodeWindow(e.currentTarget as Node)
   const fromRight = dir.value === "right"
-  const min = toPx(props.minSize)
-  const max = toPx(props.maxSize)
-  const onMove = (ev: PointerEvent) => {
-    if (ev.pointerId !== e.pointerId) return
-    const raw = fromRight ? window.innerWidth - ev.clientX : ev.clientX
-    resizedPx.value = Math.max(Number.isNaN(min) ? 0 : min, Math.min(Number.isNaN(max) ? Infinity : max, raw))
-  }
-  const end = () => {
-    window.removeEventListener("pointermove", onMove)
-    window.removeEventListener("pointerup", end)
-    window.removeEventListener("pointercancel", end)
-    grip?.removeEventListener("lostpointercapture", end)
-    document.body.style.userSelect = ""
-    document.body.style.cursor = ""
-    endResize = null
-  }
-  endResize = end
-  document.body.style.userSelect = "none"
-  document.body.style.cursor = "ew-resize"
-  window.addEventListener("pointermove", onMove)
-  window.addEventListener("pointerup", end)
-  window.addEventListener("pointercancel", end)
-  grip?.addEventListener("lostpointercapture", end)
+  const min = toPx(props.minSize, win)
+  const max = toPx(props.maxSize, win)
+  endResize = startPointerDrag(e, {
+    cursor: "ew-resize",
+    move(ev) {
+      const raw = fromRight ? win.innerWidth - ev.clientX : ev.clientX
+      resizedPx.value = Math.max(Number.isNaN(min) ? 0 : min, Math.min(Number.isNaN(max) ? win.innerWidth : Math.min(max, win.innerWidth), raw))
+    },
+    end() {
+      endResize = null
+    },
+  })
 }
 
 onBeforeUnmount(() => endResize?.())
@@ -380,22 +369,30 @@ const skipOpenSlide = ref(false)
 watch(
   () => props.open,
   (open) => {
-    if (!open) skipOpenSlide.value = false
+    if (open) return
+    skipOpenSlide.value = false
+    // Closing mid-resize removes the grip, which takes its capture events along.
+    endResize?.()
   },
 )
 
 // Resolve the panel's main-axis size in px to map drag distance → progress.
 function panelPx(): number {
-  const vw = typeof window === "undefined" ? 0 : window.innerWidth
+  const vw = typeof window === "undefined" ? 0 : edgeWindow().innerWidth
   const preset = toPx(`${SIZES[props.size]}rem`)
-  const cap = props.width ? toPx(props.width) : preset
+  const resized = props.resizable ? resizedPx.value : null
+  const cap = resized ?? (props.width ? toPx(props.width) : preset)
   return Math.min(vw * 0.94, Number.isFinite(cap) ? cap : preset)
 }
 
+// The window the drawer renders in (an LpFrame's, inside one).
+const view = useView()
+const edgeWindow = () => viewWindow(view.value)
+
 function edgeEnabled(): boolean {
   if (!props.edgeOpen || !isHorizontal.value || props.open || handingOff.value) return false
   const bp = props.edgeBreakpoint ? BREAKPOINT_PX[props.edgeBreakpoint] : null
-  return bp === null || window.innerWidth < bp
+  return bp === null || edgeWindow().innerWidth < bp
 }
 
 let track: { id: number; x: number; y: number; t: number; lastX: number; lastT: number; speed: number } | null = null
@@ -405,12 +402,13 @@ const owner = Symbol("edge-pull")
 // pulls (a carousel, a wide table) keeps the gesture: the pull only claims
 // what nothing under the finger wants.
 function scrollsWithPull(target: EventTarget | null): boolean {
-  let el = target instanceof Element ? target : null
+  let el = isElement(target) ? target : null
   const pullsRight = dir.value === "left"
-  while (el && el !== document.body) {
+  const body = el?.ownerDocument.body
+  while (el && el !== body) {
     if (el.closest(EDGE_IGNORE) === el) return true
     if (el.scrollWidth > el.clientWidth) {
-      const overflow = getComputedStyle(el).overflowX
+      const overflow = nodeWindow(el).getComputedStyle(el).overflowX
       if (overflow === "auto" || overflow === "scroll") {
         if (pullsRight ? el.scrollLeft > 0 : el.scrollLeft + el.clientWidth < el.scrollWidth) return true
       }
@@ -421,7 +419,7 @@ function scrollsWithPull(target: EventTarget | null): boolean {
 }
 
 function inward(x: number): number {
-  return dir.value === "right" ? window.innerWidth - x : x
+  return dir.value === "right" ? edgeWindow().innerWidth - x : x
 }
 
 function onTouchStart(e: TouchEvent) {
@@ -457,7 +455,7 @@ function onTouchMove(e: TouchEvent) {
   if (dt > 0) track.speed = (((t.clientX - track.lastX) * sign) / dt) * 0.6 + track.speed * 0.4
   track.lastX = t.clientX
   track.lastT = e.timeStamp
-  peek.value = Math.max(0, Math.min(1, inward(t.clientX) / panelPx()))
+  peek.value = clamp(inward(t.clientX) / panelPx(), 0, 1)
 }
 
 function dropTrack() {
@@ -465,6 +463,15 @@ function dropTrack() {
   if (edgeOwner.value === owner) edgeOwner.value = null
 }
 
+// The system took the touch (a gesture, a dialog): the pull did not finish, so
+// it never opens the drawer, however far it had come.
+function cancelPull() {
+  if (!track) return
+  dropTrack()
+  peeking.value = false
+  peek.value = 0
+}
+
 function settle() {
   const flick = track !== null && track.speed > FLICK_SPEED && peek.value > 0.05
   dropTrack()
@@ -503,19 +510,21 @@ function onTouchEnd(e: TouchEvent) {
 
 if (typeof document !== "undefined") {
   watch(
-    () => props.edgeOpen && isHorizontal.value,
+    () => (props.edgeOpen && isHorizontal.value ? viewDocument(view.value) : null),
     (on, _, onCleanup) => {
       if (!on) return
+      const doc = viewDocument(view.value)
       const passive = { passive: true }
-      document.addEventListener("touchstart", onTouchStart, passive)
-      document.addEventListener("touchmove", onTouchMove, { passive: false })
-      document.addEventListener("touchend", onTouchEnd, passive)
-      document.addEventListener("touchcancel", onTouchEnd, passive)
+      doc.addEventListener("touchstart", onTouchStart, passive)
+      doc.addEventListener("touchmove", onTouchMove, { passive: false })
+      doc.addEventListener("touchend", onTouchEnd, passive)
+      doc.addEventListener("touchcancel", cancelPull, passive)
       onCleanup(() => {
-        document.removeEventListener("touchstart", onTouchStart)
-        document.removeEventListener("touchmove", onTouchMove)
-        document.removeEventListener("touchend", onTouchEnd)
-        document.removeEventListener("touchcancel", onTouchEnd)
+        doc.removeEventListener("touchstart", onTouchStart)
+        doc.removeEventListener("touchmove", onTouchMove)
+        doc.removeEventListener("touchend", onTouchEnd)
+        doc.removeEventListener("touchcancel", cancelPull)
+        cancelPull()
       })
     },
     { immediate: true },

package/src/components/LpDropdownMenu.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useId } from "vue"
-import { menuPaletteCommands } from "./commandPalette"
-import { usePaletteCommands, usePaletteScope, type PaletteControlOptions } from "../composables/usePaletteCommands"
+import { useMenuPalette, type PaletteControlOptions } from "../composables/usePaletteCommands"
 /*
  * A menu opened from a button (usually a row's "…"). Its items are the same
  * shape as LpContextMenu's and are drawn by the same renderer, so one array
@@ -36,6 +34,9 @@ const props = withDefaults(defineProps<{
 }>(), { palette: undefined })
 
 const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-44 p-1 outline-none`
+// reka names the menu after its trigger, and aria-labelledby beats aria-label:
+// a `title` only names the menu with that link taken off. MenuTitle itself is
+// hidden from assistive tech, so nothing is announced twice.
 
 function opened(open: boolean) {
   if (open && props.rightClickToo) hints.use(HINT_SIGNALS.menuButton)
@@ -47,12 +48,7 @@ const portalTo = usePortalTarget()
 // the page) is not "outside" for this layer.
 const guardOutside = useOutsideGuard()
 
-const paletteScope = usePaletteScope()
-const paletteId = useId()
-usePaletteCommands(() => props.palette === false || !props.title || !props.items.length ? [] : [{
-  id: `${paletteScope?.id}/${props.palette?.id ?? paletteId}`, label: props.palette?.label ?? props.title,
-  children: menuPaletteCommands(props.items, `${paletteScope?.id}/${props.palette?.id ?? paletteId}`),
-}], { automatic: true })
+useMenuPalette(props)
 </script>
 
 <template>
@@ -68,7 +64,7 @@ usePaletteCommands(() => props.palette === false || !props.title || !props.items
         :side-offset="6"
         align="end"
         :class="PANEL"
-        :aria-label="title"
+        v-bind="title ? { 'aria-label': title, 'aria-labelledby': undefined } : {}"
       >
         <MenuTitle v-if="title" :title="title" :subtitle="subtitle" :icon="titleIcon" :image="titleImage" />
         <ContextMenuItems :items="items" :panel="PANEL" kind="dropdown" />

package/src/components/LpDropzone.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
+import { isElement, nodeWindow } from "../composables/realm"
 /*
  * A place to put files: drop them, click to browse, or paste from the
  * clipboard.
@@ -43,7 +44,9 @@ import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from "reka-
 import DropzoneLinkField from "./DropzoneLinkField.vue"
 import { POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
-import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { inTextField } from "../composables/textEntry"
+import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
+
 
 const props = withDefaults(
   defineProps<{
@@ -378,7 +381,7 @@ function onPicked(event: Event) {
   if (el.files?.length) {
     hints.use(HINT_SIGNALS.dropzoneBrowse)
     const zone = revealAnchor.value
-    if (zone instanceof Element) noteDropzone(zone)
+    if (isElement(zone)) noteDropzone(zone)
   }
   take(el.files)
   // Cleared so picking the same file twice in a row fires again — otherwise
@@ -389,18 +392,20 @@ function onPicked(event: Event) {
 function windowPaste(event: ClipboardEvent) {
   // Already taken by the zone itself, which the paste bubbled up from.
   if (props.disabled || event.defaultPrevented) return
-  const target = event.target as HTMLElement | null
   // A paste aimed at somewhere you can type belongs to that thing.
-  if (target?.closest("input, textarea, [contenteditable]")) return
+  if (inTextField(event.target)) return
   onPaste(event)
 }
 
+const view = useView()
 let listening = false
 function listen(on: boolean) {
   if (on === listening || typeof window === "undefined") return
   listening = on
-  if (on) window.addEventListener("paste", windowPaste)
-  else window.removeEventListener("paste", windowPaste)
+  // A paste stays in the document it happened in: inside an LpFrame, that one.
+  const win = viewWindow(view.value)
+  if (on) win.addEventListener("paste", windowPaste)
+  else win.removeEventListener("paste", windowPaste)
 }
 let mounted = false
 onMounted(() => {
@@ -443,7 +448,7 @@ const frameRadius = computed(() =>
 )
 function measureRadius() {
   const zone = revealAnchor.value as HTMLElement | null
-  if (zone) measuredRadius.value = getComputedStyle(zone).borderTopLeftRadius
+  if (zone) measuredRadius.value = nodeWindow(zone).getComputedStyle(zone).borderTopLeftRadius
 }
 watch(rootClass, () => nextTick(measureRadius))
 

package/src/components/LpEditable.vue

@@ -36,6 +36,7 @@ import { computed, nextTick, ref, watch } from "vue"
 import { useFieldNotice } from "../composables/useFieldNotice"
 import { useLabels } from "../composables/useLpConfig"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useView, viewDocument } from "../composables/useView"
 import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
 import LpLoader from "./LpLoader.vue"
@@ -75,6 +76,8 @@ const props = withDefaults(
   { modelValue: "", trim: true, size: "md" },
 )
 
+const view = useView()
+
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void
   /** Editing opened. */
@@ -157,8 +160,9 @@ async function commit(refocus: boolean) {
     editing.value = true
     await nextTick()
     // Back into the field only if focus is not already somewhere else.
-    const active = document.activeElement
-    if (!active || active === document.body || active === idle.value) field.value?.focus({ preventScroll: true })
+    const page = viewDocument(view.value)
+    const active = page.activeElement
+    if (!active || active === page.body || active === idle.value) field.value?.focus({ preventScroll: true })
     notice.show(error instanceof Error && error.message ? error.message : text.value.failed, { tone: "danger" })
   } finally {
     pending.value = null