@leavepulse/ui 0.87.0 → 0.88.0

package/src/components/LpCommandPalette.vue

@@ -320,6 +320,8 @@ export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
   pinned?: string
   select: string
   close: string
+  /** The close button that stands in for Esc on a touch screen. */
+  dismiss: string
   /** Hint for leaving a mode, shown only while inside one. */
   back: string
   searching: string
@@ -527,6 +529,7 @@ const DEFAULT_LABELS: Required<PaletteLabels> = {
   running: "Running…",
   select: "select",
   close: "close",
+  dismiss: "Close",
   back: "back",
   searching: "Searching…",
   searchFailed: "Search is unavailable right now.",
@@ -649,6 +652,43 @@ function actionsOf(c: Command | undefined): Command[] {
 
 const selectedActions = computed(() => actionsOf(flat.value[selectedIndex.value]))
 
+/*
+ * On a phone the palette is a sheet over the whole screen, and the on-screen
+ * keyboard takes the bottom of it without resizing the layout viewport: the
+ * last rows would sit under the keys. The visible part is tracked instead and
+ * handed to the CSS, so the list ends where the keyboard begins.
+ */
+const viewport = ref<Record<string, string>>({})
+function trackViewport() {
+  const vv = typeof window === "undefined" ? undefined : window.visualViewport
+  // The whole visible rectangle, not only its height: a page wider than the
+  // phone is zoomed out to fit, and a fixed sheet then measures the wider
+  // layout instead of the screen the person is looking at.
+  viewport.value = vv
+    ? {
+        "--lp-cmd-vh": `${vv.height}px`,
+        "--lp-cmd-vw": `${vv.width}px`,
+        "--lp-cmd-vx": `${vv.offsetLeft}px`,
+        "--lp-cmd-vy": `${vv.offsetTop}px`,
+      }
+    : {}
+}
+watch(
+  () => props.open,
+  (open, _, onCleanup) => {
+    const vv = typeof window === "undefined" ? undefined : window.visualViewport
+    if (!open || !vv) return
+    trackViewport()
+    vv.addEventListener("resize", trackViewport)
+    vv.addEventListener("scroll", trackViewport)
+    onCleanup(() => {
+      vv.removeEventListener("resize", trackViewport)
+      vv.removeEventListener("scroll", trackViewport)
+    })
+  },
+  { immediate: true },
+)
+
 /*
  * Tab is free for this: the rows are out of the tab order and the box is the
  * only field, so Tab otherwise just walks off to the dialog's edge. Without
@@ -666,6 +706,18 @@ function onTab(event: KeyboardEvent) {
   event.stopPropagation()
   openActions(c)
 }
+/*
+ * A long press on a phone, a right click elsewhere: the row's actions. On a
+ * touch screen there is no hover to make a row the active one, so this is the
+ * only way to the actions of any row but the first. A row without actions
+ * keeps the browser's own menu.
+ */
+function onRowContextMenu(event: MouseEvent, c: Command) {
+  if (!actionsOf(c).length) return
+  event.preventDefault()
+  openActions(c)
+}
+
 function openActions(c: Command) {
   const actions = actionsOf(c)
   if (!actions.length) return
@@ -1573,7 +1625,7 @@ const guardOutside = useOutsideGuard()
         ref="contentRef"
         class="lp-cmd-dialog fixed left-1/2 top-[12vh] flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
         :class="[frosted ? (layer.nested ? 'lp-glass-overlay lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
-        :style="{ zIndex: layer.panel }"
+        :style="{ zIndex: layer.panel, ...viewport }"
         :data-pane="paneOpen ? 'open' : undefined"
         :data-editing="editing ? '' : undefined"
         @open-auto-focus.prevent
@@ -1640,13 +1692,22 @@ const guardOutside = useOutsideGuard()
             :aria-controls="listShown ? listId : undefined"
             :aria-activedescendant="activeId"
             :placeholder="promptCommand?.prompt?.placeholder ?? mode?.childPlaceholder ?? placeholder"
-            class="h-12 min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-muted"
+            class="lp-entry h-12 min-w-0 flex-1 bg-transparent text-sm text-ink outline-none placeholder:text-muted"
             @keydown.enter.prevent="runSelected"
             @keydown.backspace="onBackspace"
             @keydown.esc="onEscape"
             @keydown.tab="onTab"
           />
-          <kbd class="shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
+          <kbd class="shrink-0 rounded-small border border-line px-1.5 py-0.5 text-[10px] text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden">{{ text.esc }}</kbd>
+          <!-- A finger has no Esc, and tapping the dim edge is not there when
+               the palette fills the screen: the way out is a button. -->
+          <button
+            type="button"
+            class="hidden shrink-0 rounded-inner px-2 py-1.5 text-sm font-medium text-brand outline-none focus-visible:ring-2 focus-visible:ring-ring [@media(hover:none)_and_(pointer:coarse)]:inline-flex"
+            @click="emit('update:open', false)"
+          >
+            {{ text.dismiss }}
+          </button>
         </div>
 
         <div v-if="promptCommand" class="flex flex-col gap-3 p-4">
@@ -1659,8 +1720,8 @@ const guardOutside = useOutsideGuard()
              the only way to the row's actions and pin. On a pointer the same
              buttons live in the footer, so the list never shifts under this strip. -->
         <div v-if="active && (canPin || selectedActions.length) && !promptCommand" class="hidden items-center justify-end gap-2 border-b border-line px-3 py-1 [@media(hover:none)_and_(pointer:coarse)]:flex">
-          <LpButton v-if="selectedActions.length" size="xs" variant="ghost" @click="openActions(active)">{{ text.actions }} <span class="text-muted">Tab</span></LpButton>
-          <LpButton v-if="canPin" size="xs" variant="ghost" :aria-label="isPinned(active) ? text.unpin : text.pin" :aria-pressed="isPinned(active)" @click="togglePin(active)"><LpIcon name="lucide:star" :size="14" />{{ isPinned(active) ? text.unpin : text.pin }} <span class="text-muted">Alt+P</span></LpButton>
+          <LpButton v-if="selectedActions.length" size="xs" variant="ghost" @click="openActions(active)">{{ text.actions }}</LpButton>
+          <LpButton v-if="canPin" size="xs" variant="ghost" :aria-label="isPinned(active) ? text.unpin : text.pin" :aria-pressed="isPinned(active)" @click="togglePin(active)"><LpIcon name="lucide:star" :size="14" />{{ isPinned(active) ? text.unpin : text.pin }}</LpButton>
         </div>
         <!-- Results -->
         <div class="flex min-h-0 flex-1" @pointermove="onPointerMove">
@@ -1711,6 +1772,7 @@ const guardOutside = useOutsideGuard()
                         : 'text-ink hover:bg-surface-soft/60',
                   ]"
                   @click="onRowClick($event, c)"
+                  @contextmenu="onRowContextMenu($event, c)"
                   @pointerenter="onPointerEnter(c)"
                   @pointerleave="onPointerLeave"
                 >
@@ -1761,12 +1823,13 @@ const guardOutside = useOutsideGuard()
                       </template>
                     </span>
                   </span>
-                  <MenuShortcut v-if="c.shortcut" :combo="c.shortcut" />
+                  <!-- Keys mean nothing to a finger: hidden on a touch screen. -->
+                  <MenuShortcut v-if="c.shortcut" :combo="c.shortcut" class="[@media(hover:none)_and_(pointer:coarse)]:hidden" />
                   <!-- The prefix that opens this mode from the box, so the
                        shortcut is learned by seeing it rather than reading docs. -->
                   <kbd
                     v-else-if="c.prefix && c.children"
-                    class="shrink-0 rounded-small border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted"
+                    class="shrink-0 rounded-small border border-line px-1.5 font-mono text-[11px] whitespace-pre text-muted [@media(hover:none)_and_(pointer:coarse)]:hidden"
                   >{{ c.prefix }}</kbd>
                   <!-- Drills in rather than runs: worth saying before the click,
                        since the two look identical otherwise. -->
@@ -1943,6 +2006,25 @@ const guardOutside = useOutsideGuard()
 .lp-cmd-pane {
   width: var(--lp-cmd-pane);
 }
+/*
+ * A phone: a sheet over the whole visible screen rather than a card floating
+ * a tenth of the way down, which left a band of nothing above it and let the
+ * keyboard cover its lower half. Keyed to touch as well as width, so a narrow
+ * desktop window keeps the card.
+ */
+@media (hover: none) and (pointer: coarse) and (max-width: 639px) {
+  .lp-cmd-dialog {
+    inset: var(--lp-cmd-vy, 0) auto auto var(--lp-cmd-vx, 0);
+    translate: none;
+    width: var(--lp-cmd-vw, 100%);
+    height: var(--lp-cmd-vh, 100dvh);
+    max-height: var(--lp-cmd-vh, 100dvh);
+    border-width: 0;
+    border-radius: 0;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
 .lp-cmd-dialog[data-editing] .lp-cmd-pane {
   width: 100%;
 }

package/src/components/LpContextMenu.vue

@@ -14,7 +14,7 @@ import { hints } from "../composables/useHints"
 import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import { useOutsideGuard, usePortalTarget, useView, viewDocument } from "../composables/useView"
 
 export interface ContextMenuItemDef {
@@ -82,7 +82,7 @@ const props = withDefaults(defineProps<{
 const enabled = computed(() => props.always || props.items.length > 0)
 const hinted = computed(() => enabled.value && !props.noHint)
 
-const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
+const PANEL = `${POPOVER_PANEL} ${PANEL_FIT} z-(--z-popover) min-w-48 p-1 outline-none`
 
 // A menu opened over a text field takes focus, and on close reka hands it to the
 // trigger, so the caret and the selection the user right-clicked are gone — the

package/src/components/LpDataList.vue

@@ -125,7 +125,7 @@ const pad = computed(() => (props.size === "sm" ? "py-1.5 text-xs" : "py-2.5 tex
         class="group/row grid items-baseline"
         :class="[ROW[layout], pad, divided && i > 0 ? 'border-t border-line' : '']"
       >
-        <dt class="flex min-w-0 items-center gap-1 text-muted">
+        <dt class="flex min-w-0 items-center gap-1 text-muted [overflow-wrap:anywhere]">
           <slot :name="`label-${keyOf(item)}`" :item="item">
             <slot name="label" :item="item">{{ item.label }}</slot>
           </slot>

package/src/components/LpDrawer.vue

@@ -197,11 +197,14 @@ onBeforeUnmount(release)
 const contentClass = computed(() => {
   const surface = frosted.value ? (layer.value.nested ? "lp-glass-overlay lp-glass-overlay--nested" : "lp-glass-overlay") : "bg-surface-raised"
   const base = `fixed z-(--z-modal) flex flex-col border-line ${surface} shadow-panel outline-none`
+  // The panel pads itself by the safe area of each screen edge it touches, so
+  // on a phone with a notch or a home indicator its header, close button and
+  // last row stay clear of them while its surface still reaches the edge.
   const map: Record<Direction, string> = {
-    left: "inset-y-0 left-0 border-r rounded-r-card",
-    right: "inset-y-0 right-0 border-l rounded-l-card",
-    top: "inset-x-0 top-0 border-b rounded-b-card",
-    bottom: "inset-x-0 bottom-0 border-t rounded-t-card",
+    left: "inset-y-0 left-0 border-r rounded-r-card pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)]",
+    right: "inset-y-0 right-0 border-l rounded-l-card pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pr-[env(safe-area-inset-right)]",
+    top: "inset-x-0 top-0 border-b rounded-b-card pt-[env(safe-area-inset-top)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
+    bottom: "inset-x-0 bottom-0 border-t rounded-t-card pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
   }
   return [base, map[dir.value]]
 })

package/src/components/LpDropdownMenu.vue

@@ -11,7 +11,7 @@ import { HINT_SIGNALS } from "../composables/useHintSystem"
 import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from "reka-ui"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import MenuTitle from "./MenuTitle.vue"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
@@ -33,7 +33,7 @@ const props = withDefaults(defineProps<{
   rightClickToo?: boolean
 }>(), { palette: undefined })
 
-const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-44 p-1 outline-none`
+const PANEL = `${POPOVER_PANEL} ${PANEL_FIT} 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.

package/src/components/LpDropzone.vue

@@ -42,7 +42,7 @@ import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from "reka-ui"
 import DropzoneLinkField from "./DropzoneLinkField.vue"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import { inTextField } from "../composables/textEntry"
 import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
@@ -568,7 +568,7 @@ const guardOutside = useOutsideGuard()
           side="bottom"
           align="start"
           :side-offset="6"
-          :class="POPOVER_PANEL"
+          :class="[POPOVER_PANEL, PANEL_FIT]"
           class="z-(--z-popover) w-80 rounded-card p-3 outline-none"
           @open-auto-focus.prevent
         >

package/src/components/LpEditable.vue

@@ -264,7 +264,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => "relative inline-
       >
         <span
           aria-hidden="true"
-          class="invisible col-start-1 row-start-1 min-w-[4ch]"
+          class="lp-entry invisible col-start-1 row-start-1 min-w-[4ch]"
           :class="[PAD[size], multiline ? 'whitespace-pre-wrap break-words' : 'whitespace-pre']"
         >{{ (draft || placeholder || " ") + (multiline ? "\n" : "\u200a") }}</span>
         <component
@@ -280,7 +280,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() => "relative inline-
           :disabled="disabled"
           :readonly="readonly"
           :rows="multiline ? 1 : undefined"
-          class="col-start-1 row-start-1 w-full min-w-0 resize-none overflow-hidden bg-transparent text-ink outline-none placeholder:text-muted"
+          class="lp-entry col-start-1 row-start-1 w-full min-w-0 resize-none overflow-hidden bg-transparent text-ink outline-none placeholder:text-muted"
           :class="PAD[size]"
           @input="draft = ($event.target as HTMLInputElement).value"
           @keydown="onFieldKey"

package/src/components/LpEmptyState.vue

@@ -43,7 +43,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     >
       <LpIcon :name="icon" :size="compact ? 16 : 22" />
     </div>
-    <div class="flex flex-col gap-1">
+    <div class="flex max-w-full flex-col gap-1 [overflow-wrap:anywhere]">
       <p class="font-semibold text-ink" :class="compact ? 'text-sm' : ''">{{ title }}</p>
       <!-- The slot is for a line a string cannot carry: a command, a link. -->
       <p v-if="description || $slots.description" class="max-w-sm text-sm text-muted">

package/src/components/LpFileTreeNode.vue

@@ -302,7 +302,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           <input
             v-if="isRenaming"
             ref="renameField"
-            class="w-full min-w-0 rounded-sm border bg-surface-soft px-1 text-sm text-ink outline-none"
+            class="lp-entry w-full min-w-0 rounded-sm border bg-surface-soft px-1 text-sm text-ink outline-none"
             :class="renameInvalid ? 'border-danger' : 'border-line-strong'"
             :value="renameValue"
             :aria-label="renameLabel"

package/src/components/LpHintLayer.vue

@@ -19,7 +19,7 @@ import { PopoverAnchor, PopoverContent, PopoverPortal, PopoverRoot } from "reka-
 import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from "vue"
 import { hints } from "../composables/useHints"
 import { useLabels } from "../composables/useLpConfig"
-import { PANEL_SURFACE, POPOVER_ANIM } from "./dropdown"
+import { PANEL_FIT, PANEL_SURFACE, POPOVER_ANIM } from "./dropdown"
 import LpBadge from "./LpBadge.vue"
 import LpButton from "./LpButton.vue"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
@@ -147,7 +147,7 @@ const guardOutside = useOutsideGuard()
           side="bottom"
           :side-offset="8"
           :collision-padding="8"
-          :class="[PANEL_SURFACE, POPOVER_ANIM, 'z-(--z-popover) w-72 rounded-card p-3 text-sm text-ink outline-none']"
+          :class="[PANEL_SURFACE, POPOVER_ANIM, PANEL_FIT, 'z-(--z-popover) w-72 rounded-card p-3 text-sm text-ink outline-none']"
         >
           <p class="flex items-center gap-2 font-medium">
             <LpBadge tone="brand" size="sm">{{ labels.badge }}</LpBadge>

package/src/components/LpHoverCard.vue

@@ -34,10 +34,11 @@ import {
   HoverCardRoot,
   HoverCardTrigger,
 } from "reka-ui"
-import { computed, onBeforeUnmount, watch } from "vue"
+import { computed, mergeProps, useAttrs, watch } from "vue"
 import { mergeClass } from "../composables/useMergedClass"
+import { useTouchHold } from "../composables/useTouchHold"
 import { useOutsideGuard, usePortalTarget } from "../composables/useView"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 
 const props = withDefaults(
   defineProps<{
@@ -81,96 +82,32 @@ const props = withDefaults(
 const open = defineModel<boolean>("open", { default: false })
 
 const panel = computed(() =>
-  mergeClass(POPOVER_PANEL, "z-(--z-popover) w-72 rounded-card p-4 text-sm text-ink outline-none", props.panelClass),
+  mergeClass(POPOVER_PANEL, PANEL_FIT, "z-(--z-popover) w-72 rounded-card p-4 text-sm text-ink outline-none", props.panelClass),
 )
 
 const portalTo = usePortalTarget()
 const guardOutside = useOutsideGuard()
 
-/*
- * Press-and-hold. A hold that drifts is a scroll, not a hold, so moving past
- * a few pixels cancels it. Once it has opened the card, the click the finger
- * produces on lifting is swallowed: the reader asked for the preview, not for
- * the link under it.
- */
-const SLOP = 8
-/* A long press may produce no click at all; past this the next click is the user's own. */
-const CLICK_AFTER_RELEASE_MS = 350
-let holdTimer = 0
-/* The finger the hold belongs to: a second one must not move or end it. */
-let holdPointer: number | null = null
-let start = { x: 0, y: 0 }
-let held = false
-
-function cancelHold() {
-  window.clearTimeout(holdTimer)
-  holdTimer = 0
-}
-
-function onPointerUp(event: PointerEvent) {
-  if (holdPointer !== null && event.pointerId !== holdPointer) return
-  holdPointer = null
-  cancelHold()
-  if (held) window.setTimeout(() => (held = false), CLICK_AFTER_RELEASE_MS)
-}
-
-// A cancelled press produces no click, so there is nothing left to swallow.
-function onPointerCancel(event?: PointerEvent) {
-  if (event && holdPointer !== null && event.pointerId !== holdPointer) return
-  holdPointer = null
-  cancelHold()
-  held = false
-}
-
-function onPointerDown(event: PointerEvent) {
-  // Any new press starts over: on a hybrid laptop the mouse click after a hold
-  // must not be taken for that hold's own click.
-  if (holdTimer && event.pointerId !== holdPointer) return
-  held = false
-  if (event.pointerType !== "touch" || props.touch !== "hold" || props.disabled) return
-  holdPointer = event.pointerId
-  start = { x: event.clientX, y: event.clientY }
-  cancelHold()
-  holdTimer = window.setTimeout(() => {
-    holdTimer = 0
-    held = true
-    open.value = true
-  }, props.holdDelay)
-}
-
-function onPointerMove(event: PointerEvent) {
-  if (!holdTimer || event.pointerId !== holdPointer) return
-  if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) cancelHold()
-}
-
-function onClickCapture(event: MouseEvent) {
-  if (!held) return
-  held = false
-  event.preventDefault()
-  event.stopPropagation()
-}
-
-// A long press would otherwise also bring up the system's own menu for the link.
-function onContextMenu(event: Event) {
-  if (holdTimer || held) event.preventDefault()
-}
+// Press-and-hold opens the card on a touch screen, where there is no hover.
+const hold = useTouchHold({ enabled: () => props.touch === "hold" && !props.disabled, delay: () => props.holdDelay, onHold: () => (open.value = true) })
 
 watch(
   () => props.disabled,
   (off) => {
     if (!off) return
-    onPointerCancel()
+    hold.cancel()
     open.value = false
   },
 )
 
-onBeforeUnmount(cancelHold)
-
 // Several roots (trigger and portal), so Vue cannot hand attributes on by
 // itself and dropped them: a trigger wrapped around this one from outside (an
 // LpPopover's, as-child) lost its id, ARIA state and click, and its popover
 // never opened. They go to the trigger, which merges them onto the slot's element.
 defineOptions({ inheritAttrs: false })
+// The caller's own listeners on the trigger run beside the hold's, not instead of them.
+const attrs = useAttrs()
+const triggerAttrs = computed(() => mergeProps(attrs, hold.handlers))
 </script>
 
 <template>
@@ -178,14 +115,8 @@ defineOptions({ inheritAttrs: false })
   <HoverCardRoot v-else v-model:open="open" :open-delay="openDelay" :close-delay="closeDelay">
     <HoverCardTrigger
       as-child
-      v-bind="$attrs"
+      v-bind="triggerAttrs"
       :class="touch === 'hold' ? '[-webkit-touch-callout:none]' : undefined"
-      @pointerdown="onPointerDown"
-      @pointermove="onPointerMove"
-      @pointerup="onPointerUp"
-      @pointercancel="onPointerCancel"
-      @click.capture="onClickCapture"
-      @contextmenu="onContextMenu"
     >
       <slot name="trigger" />
     </HoverCardTrigger>

package/src/components/LpImageEditor.vue

@@ -558,7 +558,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       tabindex="0"
       role="application"
       :aria-label="text.canvas"
-      class="relative w-full overflow-hidden rounded-card border border-line bg-surface-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      class="relative w-full touch-none overflow-hidden rounded-card border border-line bg-surface-soft focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       :style="frameStyle"
       @wheel.prevent="onWheel"
       @pointerdown="zoom.onPointerDown"

package/src/components/LpInput.vue

@@ -209,7 +209,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
         :aria-invalid="isInvalidState || undefined"
         :aria-describedby="mergeDescribedBy(attrs['aria-describedby'], field.describedBy)"
         :class="[
-          'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',
+          'lp-autofill lp-entry min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',
           clearable && '[&::-webkit-search-cancel-button]:hidden',
           hasLeading ? 'pl-2' : padX[size ?? 'md'],
           hasTrailing ? '' : padX[size ?? 'md'],

package/src/components/LpLightbox.vue

@@ -364,8 +364,18 @@ function rotate() {
 // Swipe to page through, but only while the image is at fit scale — once zoomed
 // a horizontal drag is a pan, and stealing it would make the image unreachable.
 let swipeStart: { x: number; y: number } | null = null
+// Fingers on the stage. A second one makes the gesture a pinch, and a pinch
+// whose fingers part sideways is not a swipe: it zoomed and then paged away
+// from what it zoomed into.
+const fingers = new Set<number>()
 
 function onPointerDown(e: PointerEvent) {
+  fingers.add(e.pointerId)
+  if (fingers.size > 1) {
+    swipeStart = null
+    if (!isVideo.value) zoom.onPointerDown(e)
+    return
+  }
   if (isVideo.value) {
     // A drag on the player's bar is a seek or a volume change, never a page.
     swipeStart = (e.target as Element).closest?.("[data-lp-player-controls]") ? null : { x: e.clientX, y: e.clientY }
@@ -375,7 +385,14 @@ function onPointerDown(e: PointerEvent) {
   swipeStart = zoom.zoomed.value ? null : { x: e.clientX, y: e.clientY }
 }
 
+function onPointerCancel(e: PointerEvent) {
+  fingers.delete(e.pointerId)
+  swipeStart = null
+  if (!isVideo.value) zoom.onPointerUp(e)
+}
+
 function onPointerUp(e: PointerEvent) {
+  fingers.delete(e.pointerId)
   if (!isVideo.value) zoom.onPointerUp(e)
   if (!swipeStart) return
   const dx = e.clientX - swipeStart.x
@@ -534,7 +551,7 @@ const guardOutside = useOutsideGuard()
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         ref="contentRef"
-        class="fixed inset-0 flex flex-col outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
+        class="fixed inset-0 flex flex-col pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] outline-none data-[state=open]:animate-[lightbox-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[lightbox-out_140ms_cubic-bezier(0.4,0,1,1)] motion-reduce:animate-none"
         :style="{ zIndex: layer.panel }"
         @keydown="onKeydown"
       >
@@ -599,13 +616,13 @@ const guardOutside = useOutsideGuard()
         <!-- Stage -->
         <div
           ref="viewport"
-          class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden"
+          class="relative flex min-h-0 flex-1 touch-none items-center justify-center overflow-hidden"
           :class="isPanning ? 'cursor-grabbing' : isZoomed ? 'cursor-grab' : ''"
           @wheel="onStageWheel"
           @pointerdown="onPointerDown"
           @pointermove="zoom.onPointerMove"
           @pointerup="onPointerUp"
-          @pointercancel="zoom.onPointerUp"
+          @pointercancel="onPointerCancel"
           @dblclick="onDoubleClick"
           @click="onViewportClick"
         >

package/src/components/LpModal.vue

@@ -15,7 +15,7 @@ import { useGlass } from "../composables/useGlass"
 import { useModelOverlayHistory, type OverlayHistoryMode } from "../composables/useOverlayHistory"
 import { useLabels } from "../composables/useLpConfig"
 import { useShift } from "../composables/useShift"
-import { useModalLayer } from "./modalDepth"
+import { MODAL_MAX_HEIGHT, useModalLayer } from "./modalDepth"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -379,7 +379,7 @@ const guardOutside = useOutsideGuard()
            the link to DialogDescription. -->
       <DialogContent
         class="pointer-events-auto flex min-h-0 items-start outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
-        :style="{ maxHeight: 'min(90vh, calc(100dvh - 2rem))' }"
+        :style="{ maxHeight: MODAL_MAX_HEIGHT }"
         v-bind="describedByAttrs"
         @open-auto-focus="onOpenAutoFocus"
         @interact-outside="onInteractOutside"
@@ -395,9 +395,9 @@ const guardOutside = useOutsideGuard()
       </aside>
       <div
         ref="panelRef"
-        class="relative flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel"
+        class="relative flex min-h-0 flex-col overflow-hidden rounded-card border border-line shadow-panel"
         :class="[frosted ? (layer.nested ? 'lp-glass-overlay lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
-        :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
+        :style="{ maxHeight: MODAL_MAX_HEIGHT, ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
       >
         <DialogTitle v-if="!(title || $slots.title) && ariaLabel" class="sr-only">
           {{ ariaLabel }}

package/src/components/LpModalNav.vue

@@ -18,6 +18,7 @@ import { useGlass } from "../composables/useGlass"
 import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
+import { MODAL_MAX_HEIGHT } from "./modalDepth"
 import LpModal from "./LpModal.vue"
 import LpSidebar from "./LpSidebar.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
@@ -132,7 +133,7 @@ const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
  * mirrors LpModal's max-height, which is not a class this file can put in the
  * consuming app's scan.
  */
-const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+const railStyle = { maxHeight: MODAL_MAX_HEIGHT }
 
 /*
  * The rail is part of the dialog, so it takes the same surface: a glass

package/src/components/LpNumberField.vue

@@ -177,7 +177,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
       :id="field.id"
       :aria-describedby="describedBy"
       :aria-invalid="field.invalid || undefined"
-      class="min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+      class="lp-entry min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
       :class="steppers ? 'text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left' : icon || $slots.leading ? 'pl-2 pr-3' : 'px-3'"
     />
     <!-- The unit sits between the value and the increment button, so a long one

package/src/components/LpPhoneInput.vue

@@ -55,7 +55,7 @@ import { useFieldNotice, type FieldNoticeOptions } from "../composables/useField
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
 import { type Country, filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./countries"
-import { OPTION_ITEM, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
+import { OPTION_ITEM, optionStagger, COMBOBOX_FIT, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
 import LpFieldNotice from "./LpFieldNotice.vue"
 import LpIcon from "./LpIcon.vue"
 import {
@@ -403,7 +403,7 @@ const guardOutside = useOutsideGuard()
           @escape-key-down="guardOutside"
           v-bind="COMBOBOX_PANEL"
           align="start"
-          :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-72 overflow-hidden']"
+          :class="[POPOVER_PANEL, 'z-(--z-popover) w-72 max-w-[calc(100vw-1rem)] overflow-hidden', COMBOBOX_FIT]"
         >
           <div class="border-b border-line p-2">
             <!--
@@ -417,11 +417,11 @@ const guardOutside = useOutsideGuard()
               :placeholder="searchPlaceholder ?? text.search"
               :aria-label="text.searchLabel"
               auto-focus
-              class="h-(--size-control-sm) w-full rounded-inner border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
+              class="lp-entry h-(--size-control-sm) w-full rounded-inner border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
               @input="query = ($event.target as HTMLInputElement).value"
             />
           </div>
-          <ComboboxViewport class="max-h-56 overflow-y-auto p-1">
+          <ComboboxViewport class="max-h-56 min-h-0 flex-1 overflow-y-auto p-1">
             <ComboboxEmpty class="px-3 py-4 text-center text-sm italic text-muted">
               {{ emptyText ?? text.empty }}
             </ComboboxEmpty>
@@ -454,7 +454,7 @@ const guardOutside = useOutsideGuard()
       :required="field.required || undefined"
       :aria-invalid="field.invalid || undefined"
       :aria-describedby="mergeDescribedBy(rest['aria-describedby'], field.describedBy, notice.message.value ? noticeId : undefined)"
-      class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
+      class="lp-autofill lp-entry min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
       @beforeinput="onBeforeEdit"
       @paste="onPaste"
       @compositionend="onCompositionEnd"