@leavepulse/ui 0.43.3 → 0.44.0

package/dist/theme/useTheme.d.ts

@@ -1,5 +1,14 @@
 import { type ComputedRef, type DeepReadonly, type Ref } from "vue";
 import { type TokenSet } from "./tokens";
+/** A light/dark pair followed by the operating system's colour scheme. */
+export interface SystemThemes {
+    light: TokenSet;
+    dark: TokenSet;
+}
+/** Whether the OS asks for dark. True where it cannot be asked (server, old engines). */
+export declare function prefersDarkScheme(): boolean;
+/** Every CSS variable a theme sets, in application order. */
+export declare function themeEntries(input: TokenSet): [string, string][];
 export declare function applyTheme(theme: TokenSet, root?: HTMLElement): void;
 /** Point a circular theme reveal expands from (viewport px). */
 export interface RevealOrigin {
@@ -11,31 +20,45 @@ export declare function serializeTheme(theme: TokenSet): string;
 export declare function themeToCssVars(theme: TokenSet): string;
 /** Render a theme as a complete CSS rule (default selector `:root`). */
 export declare function themeToCssRule(theme: TokenSet, selector?: string): string;
-/** Parse + shallow-validate a theme JSON; throws on a malformed shape. */
+export declare function normalizeTheme(raw: Partial<TokenSet> & {
+    name?: string;
+}): TokenSet;
+/** Parse + validate a theme JSON; throws on a malformed shape. */
 export declare function parseTheme(json: string): TokenSet;
 export declare function bootstrapTheme(fallback: TokenSet): TokenSet;
 export declare function cacheTheme(theme: TokenSet): void;
+/** Persist "follow the OS" with the pair it switches between. */
+export declare function cacheSystemThemes(system: SystemThemes): void;
 export declare const THEME_COOKIE = "lp-theme";
 /**
  * Resolve a theme name (as read from the `lp-theme` cookie) against a set of
  * known themes. Returns `null` when the name is absent or unknown, so the caller
  * can fall back to its own default.
  *
- * Server-side counterpart to `cacheTheme`: pair it with `themeToCssRule` to
- * inline the right variables into `<head>` during SSR.
+ * Accepts both a raw and an already-decoded value: frameworks differ on whether
+ * their cookie helpers decode, and a name containing `%` must not throw.
+ * A "follow the OS" cookie resolves to its dark member unless `prefersDark` is
+ * false (pass it from the `Sec-CH-Prefers-Color-Scheme` request header).
  */
-export declare function themeFromCookie(cookieValue: string | null | undefined, themes: readonly TokenSet[]): TokenSet | null;
+export declare function themeFromCookie(cookieValue: string | null | undefined, themes: readonly TokenSet[], options?: {
+    prefersDark?: boolean;
+}): TokenSet | null;
 export interface UseTheme {
     /** The active theme, kept in sync by the kit. Null until hydrated (SSR/first
-     *  paint) — reactive, so a switcher binds straight to it. */
+     *  paint), reactive, so a switcher binds straight to it. */
     current: DeepReadonly<Ref<TokenSet | null>>;
     /** The active theme's name (""="not yet hydrated"). */
     currentName: ComputedRef<string>;
-    /** Set + persist a theme (with the circular reveal if `origin`/transition).
-     *  This is the one call a switcher needs — it updates `current` too. */
+    /** True while the theme follows the OS colour scheme (see setSystem). */
+    system: ComputedRef<boolean>;
+    /** Set + persist a theme (with the circular reveal). Stops following the OS. */
     setTheme: (theme: TokenSet, origin?: RevealOrigin) => void;
-    /** Seed the fallback (used when nothing is cached) and hydrate now. Call once
-     *  at app start (client) — optional; the first useTheme() hydrates anyway. */
+    /**
+     * Follow the OS colour scheme, switching between `themes.light` and
+     * `themes.dark` as it changes. Persisted like any other choice.
+     */
+    setSystem: (themes: SystemThemes, origin?: RevealOrigin) => void;
+    /** Seed the fallback (used when nothing is cached) and hydrate now. */
     init: (fallback: TokenSet) => TokenSet;
     apply: (theme: TokenSet) => void;
     applyWithTransition: (theme: TokenSet, origin?: RevealOrigin) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.43.3",
+  "version": "0.44.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {
@@ -28,10 +28,11 @@
     "./scrollbar.css": "./src/tokens/scrollbar.css",
     "./canvas.css": "./src/canvas.css",
     "./package.json": "./package.json",
-    "./dist/*": {
+    "./dist/*.js": {
       "types": "./dist/*.d.ts",
-      "default": "./dist/*"
-    }
+      "default": "./dist/*.js"
+    },
+    "./dist/*": "./dist/*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -40,7 +41,7 @@
   "sideEffects": [
     "**/*.css",
     "**/icons.ts",
-    "**/icons.js"
+    "**/chunks/LpIcon-*.js"
   ],
   "scripts": {
     "dev": "vite",
@@ -52,14 +53,14 @@
     "test": "bun test",
     "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
     "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
-    "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags"
+    "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags",
+    "check:pack": "node scripts/check-pack.mjs"
   },
   "peerDependencies": {
     "@iconify-json/lucide": "^1.2.0",
     "@iconify/vue": "^5.0.0",
     "@internationalized/date": "^3.5.0",
     "@nuxt/kit": "^3.0.0 || ^4.0.0",
-    "@vueuse/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "motion-v": "^2.2.0",
     "reka-ui": "^2.9.0",
     "tailwind-variants": "^3.0.0",

package/src/component-names.ts

@@ -1,9 +1,8 @@
 /* AUTO-GENERATED by scripts/gen-component-names.mjs — do not edit.
  * The full list of kit component names, kept in sync with the component files
- * so the Nuxt module (./nuxt) auto-registers every component including new ones. */
+ * so the Nuxt module (./nuxt) auto-registers every exported component including new ones. */
 export const COMPONENT_NAMES = [
   "LayoutCanvas",
-  "LayoutNode",
   "LpActionBar",
   "LpAddressInput",
   "LpAlert",
@@ -21,6 +20,7 @@ export const COMPONENT_NAMES = [
   "LpColorPicker",
   "LpCommandPalette",
   "LpConfirmDialog",
+  "LpConfirmHost",
   "LpContextMenu",
   "LpDatePicker",
   "LpDisclosure",
@@ -30,13 +30,11 @@ export const COMPONENT_NAMES = [
   "LpDropzone",
   "LpEmptyState",
   "LpFileTree",
-  "LpFileTreeNode",
   "LpFormField",
   "LpIcon",
   "LpImageEditor",
   "LpInfraNode",
   "LpInput",
-  "LpLaneNode",
   "LpLightbox",
   "LpLink",
   "LpLogViewer",
@@ -65,7 +63,6 @@ export const COMPONENT_NAMES = [
   "LpShift",
   "LpShortcutsDialog",
   "LpSidebar",
-  "LpSidebarNav",
   "LpSkeleton",
   "LpSlider",
   "LpSparkline",
@@ -76,12 +73,13 @@ export const COMPONENT_NAMES = [
   "LpTableOfContents",
   "LpTabs",
   "LpTextarea",
+  "LpThemeProvider",
   "LpThemeSwitcher",
   "LpTilt",
   "LpTimeField",
   "LpToaster",
   "LpTooltip",
+  "LpTooltipProvider",
   "LpTopologyCanvas",
-  "LpUptimeBar",
-  "LpWaypointEdge"
+  "LpUptimeBar"
 ] as const

package/src/components/ContextMenuItems.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+/*
+ * The rows of an LpContextMenu panel, rendering itself for every submenu so
+ * `children` nests to any depth. Internal: not exported.
+ */
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+} from "reka-ui"
+import type { ContextMenuItemDef } from "./LpContextMenu.vue"
+import LpIcon from "./LpIcon.vue"
+
+defineOptions({ name: "ContextMenuItems" })
+
+defineProps<{
+  items: ContextMenuItemDef[]
+  panel: string
+}>()
+
+const ITEM =
+  "group/item flex cursor-pointer select-none items-center gap-2 rounded-md px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
+const ICON =
+  "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
+</script>
+
+<template>
+  <template v-for="(item, i) in items" :key="i">
+    <ContextMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
+
+    <ContextMenuSub v-if="item.children?.length">
+      <ContextMenuSubTrigger
+        :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand data-[state=open]:bg-brand-soft data-[state=open]:text-brand']"
+        :disabled="item.disabled"
+      >
+        <span class="flex items-center gap-2">
+          <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+          {{ item.label }}
+        </span>
+        <LpIcon name="lucide:chevron-right" :size="14" class="text-muted" />
+      </ContextMenuSubTrigger>
+      <ContextMenuPortal>
+        <ContextMenuSubContent :class="panel" :side-offset="2" :align-offset="-4">
+          <ContextMenuItems :items="item.children" :panel="panel" />
+        </ContextMenuSubContent>
+      </ContextMenuPortal>
+    </ContextMenuSub>
+
+    <!-- Tick-box item: a real checkbox item, so assistive tech hears its state.
+         `@select.prevent` keeps the menu open, since these come in lists where
+         several are set in one visit. The tick occupies a fixed slot so
+         unticked rows stay aligned with ticked ones. -->
+    <ContextMenuCheckboxItem
+      v-else-if="item.checked !== undefined"
+      :model-value="item.checked"
+      :class="[ITEM, 'justify-between text-ink data-[highlighted]:text-brand']"
+      :disabled="item.disabled"
+      @select.prevent="item.onSelect?.()"
+    >
+      <span class="flex items-center gap-2">
+        <LpIcon
+          :name="item.checked ? 'lucide:check' : 'lucide:minus'"
+          :size="15"
+          :class="[ICON, item.checked ? '' : 'opacity-25']"
+        />
+        {{ item.label }}
+      </span>
+      <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
+    </ContextMenuCheckboxItem>
+
+    <ContextMenuItem
+      v-else
+      :class="[ITEM, 'justify-between', item.danger ? 'text-danger data-[highlighted]:bg-danger-soft data-[highlighted]:text-danger' : 'text-ink data-[highlighted]:text-brand']"
+      :disabled="item.disabled"
+      @select="item.onSelect?.()"
+    >
+      <span class="flex items-center gap-2">
+        <LpIcon v-if="item.icon" :name="item.icon" :size="15" :class="ICON" />
+        {{ item.label }}
+      </span>
+      <kbd v-if="item.shortcut" class="text-xs text-muted">{{ item.shortcut }}</kbd>
+    </ContextMenuItem>
+  </template>
+</template>

package/src/components/LayoutCanvas.vue

@@ -22,7 +22,8 @@ import {
   type Split,
 } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
-import { ref } from "vue"
+import { layoutController, type LayoutController } from "../layout/useLayout"
+import { computed, ref } from "vue"
 
 const props = defineProps<{
   modelValue: Split
@@ -42,13 +43,30 @@ defineSlots<{
 
 const dragId = ref<string | null>(null)
 
+// A tree owned by useLayout() is edited through its controller, so every edit
+// lands in undo history; a bare tree is mutated directly as before.
+const edits = computed<LayoutController>(() => {
+  const tree = props.modelValue
+  return (
+    layoutController(tree) ?? {
+      move: (movingId, targetId, side) => moveLeaf(tree, movingId, targetId, side),
+      removeBlock: (leafId, index) => removeBlock(tree, leafId, index),
+      reorderTab: (leafId, from, to) => reorderTab(tree, leafId, from, to),
+      setActive: (leafId, index) => setActiveTab(tree, leafId, index),
+      resize: (parent, index, delta) => resizeAt(parent, index, delta),
+      beginResize: () => {},
+      endResize: () => {},
+    }
+  )
+})
+
 function onDrop(targetId: string, side: Side) {
-  if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side)
+  if (dragId.value) edits.value.move(dragId.value, targetId, side)
   dragId.value = null
 }
 
 function onResize(parent: Split, index: number, delta: number) {
-  resizeAt(parent, index, delta)
+  edits.value.resize(parent, index, delta)
 }
 </script>
 
@@ -63,10 +81,12 @@ function onResize(parent: Split, index: number, delta: number) {
       @dragstart="(id) => (dragId = id)"
       @dragend="dragId = null"
       @drop="onDrop"
-      @set-active="(leafId, i) => setActiveTab(modelValue, leafId, i)"
-      @remove-block="(leafId, i) => removeBlock(modelValue, leafId, i)"
-      @reorder-tab="(leafId, from, to) => reorderTab(modelValue, leafId, from, to)"
+      @set-active="(leafId, i) => edits.setActive(leafId, i)"
+      @remove-block="(leafId, i) => edits.removeBlock(leafId, i)"
+      @reorder-tab="(leafId, from, to) => edits.reorderTab(leafId, from, to)"
       @resize="onResize"
+      @resize-start="edits.beginResize()"
+      @resize-end="edits.endResize()"
     >
       <template #block="slotProps">
         <slot name="block" v-bind="slotProps" />

package/src/components/LayoutNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Motion } from "motion-v"
-import { computed, ref } from "vue"
+import { computed, onBeforeUnmount, ref } from "vue"
 import type { LayoutNode, Leaf, Side, Split } from "../layout/tree"
 import type { BlockRegistry } from "../layout/registry"
 import { blockTitle } from "../layout/registry"
@@ -21,6 +21,8 @@ const emit = defineEmits<{
   (e: "remove-block", leafId: string, index: number): void
   (e: "reorder-tab", leafId: string, from: number, to: number): void
   (e: "resize", parent: Split, index: number, deltaFraction: number): void
+  (e: "resize-start"): void
+  (e: "resize-end"): void
 }>()
 
 // Explicit slot shape so the recursive #block pass-through types cleanly.
@@ -97,10 +99,18 @@ function onDragOver(ev: DragEvent) {
   else hoverSide.value = "center"
 }
 
+let stopSplitter: (() => void) | null = null
+onBeforeUnmount(() => stopSplitter?.())
+
 function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   ev.preventDefault()
-  const host = (ev.currentTarget as HTMLElement).parentElement
+  const handle = ev.currentTarget as HTMLElement
+  const host = handle.parentElement
   if (!host) return
+  // Capture keeps the moves coming when the pointer crosses an iframe or leaves
+  // the window; pointercancel (a touch the browser took over) ends it too.
+  handle.setPointerCapture?.(ev.pointerId)
+  emit("resize-start")
   const rect = host.getBoundingClientRect()
   const horizontal = parent.dir === "row"
   const span = horizontal ? rect.width : rect.height
@@ -114,9 +124,14 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
   const up = () => {
     window.removeEventListener("pointermove", move)
     window.removeEventListener("pointerup", up)
+    window.removeEventListener("pointercancel", up)
+    stopSplitter = null
+    emit("resize-end")
   }
+  stopSplitter = up
   window.addEventListener("pointermove", move)
   window.addEventListener("pointerup", up)
+  window.addEventListener("pointercancel", up)
 }
 </script>
 
@@ -141,6 +156,8 @@ function startSplitter(ev: PointerEvent, parent: Split, index: number) {
         @remove-block="(l, idx) => emit('remove-block', l, idx)"
         @reorder-tab="(l, from, to) => emit('reorder-tab', l, from, to)"
         @resize="(p, idx, d) => emit('resize', p, idx, d)"
+        @resize-start="emit('resize-start')"
+        @resize-end="emit('resize-end')"
       >
         <template #block="slotProps">
           <slot name="block" v-bind="slotProps" />

package/src/components/LpActionBar.vue

@@ -20,7 +20,8 @@
  * name rather than `alertdialog` — it is a landmark you can Tab into, not a
  * thing demanding an answer before anything else can happen.
  */
-import { computed, nextTick, ref, useSlots, watch } from "vue"
+import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import { useBarStack } from "./actionBar"
 import { CLOSE_ICON } from "./dropdown"
 import LpButton from "./LpButton.vue"
@@ -85,6 +86,7 @@ const props = withDefaults(
     maxWidth?: string
     /** Accessible name for the landmark. Falls back to `title`. */
     ariaLabel?: string
+    labels?: Partial<{ dismiss: string }>
   }>(),
   {
     open: true,
@@ -100,6 +102,7 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
+const text = useLabels("actionBar", { dismiss: "Dismiss" }, () => props.labels)
 
 // The last action is the primary one unless the caller has said otherwise; the
 // rest default to `ghost` so a bar with three buttons still has one obvious
@@ -154,19 +157,39 @@ const stackOffset = computed(() => {
   return offset()
 })
 
+/*
+ * The height is watched, not measured once: a description that wraps after a
+ * rotation, or content swapped while the bar is up, changes it, and the bars
+ * above would overlap this one.
+ */
+let observer: ResizeObserver | null = null
+
 watch(
   () => props.open,
-  async (isOpen) => {
+  (isOpen) => {
+    // Nothing on the server ever unregisters, so registering there would leak
+    // one slot per rendered request into every later page.
+    if (typeof window === "undefined") return
     if (!isOpen) {
       unregister()
       return
     }
     register()
-    await nextTick()
-    if (root.value) setHeight(root.value.getBoundingClientRect().height)
   },
   { immediate: true },
 )
+
+watch(root, (el) => {
+  observer?.disconnect()
+  observer = null
+  if (!el) return
+  setHeight(el.getBoundingClientRect().height)
+  if (typeof ResizeObserver === "undefined") return
+  observer = new ResizeObserver(() => setHeight(el.getBoundingClientRect().height))
+  observer.observe(el)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
 </script>
 
 <template>
@@ -194,9 +217,9 @@ watch(
         ref="root"
         role="region"
         :aria-label="ariaLabel ?? title"
-        class="pointer-events-none fixed inset-x-0 bottom-0 z-(--z-modal) flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        class="pointer-events-none fixed inset-x-0 bottom-0 flex justify-center transition-[translate] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
         :class="width === 'full' ? '' : 'p-3 sm:p-4'"
-        :style="{ translate: `0 -${stackOffset}px` }"
+        :style="{ translate: `0 -${stackOffset}px`, zIndex: 'calc(var(--z-overlay) - 1)' }"
       >
         <div
           class="lp-skin-panel pointer-events-auto flex items-center gap-3 border-solid bg-surface-overlay"
@@ -261,7 +284,7 @@ watch(
             <button
               v-if="dismissible"
               type="button"
-              aria-label="Dismiss"
+              :aria-label="text.dismiss"
               class="group -mr-1 flex size-8 shrink-0 items-center justify-center rounded-control text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
               @click="dismiss"
             >

package/src/components/LpAddressInput.vue

@@ -19,6 +19,7 @@ export default { inheritAttrs: false }
  * of every form that never shows a map.
  */
 import { computed, defineAsyncComponent, onMounted, ref, watch } from "vue"
+import { useAsyncTask } from "../composables/useAsyncTask"
 import {
   type AddressField,
   type AddressLabels,
@@ -113,11 +114,32 @@ const geocoder = computed(() => props.provider ?? fallbackProvider)
 
 const value = computed<AddressValue>(() => props.modelValue ?? emptyAddress())
 
+// Patches build on the last value emitted, not on the prop: the prop only
+// catches up on the parent's next render, and two patches in one tick (the
+// text a suggestion fills in, then the parts it resolved) would otherwise each
+// start from the stale value and the second would undo the first.
+let latest: AddressValue | undefined
+watch(
+  () => props.modelValue,
+  () => (latest = undefined),
+)
 function patch(changes: Partial<AddressValue>) {
-  emit("update:modelValue", { ...value.value, ...changes })
+  latest = { ...(latest ?? value.value), ...changes }
+  emit("update:modelValue", latest)
+}
+
+// A part typed by hand describes a different place than the point a suggestion
+// or the map resolved, so the coordinates go with it: kept, they would pin the
+// stored address to somewhere else.
+function edit(changes: Partial<AddressValue>) {
+  patch({ ...changes, lat: undefined, lon: undefined })
 }
 
-const countries = ref<Country[]>([])
+const allCountries = ref<Country[]>([])
+const countries = computed(() => {
+  const only = props.only?.map((code) => code.toUpperCase())
+  return only?.length ? allCountries.value.filter((c) => only.includes(c.iso2)) : allCountries.value
+})
 const countryOptions = computed(() =>
   countries.value.map((country) => ({
     value: country.iso2,
@@ -126,9 +148,7 @@ const countryOptions = computed(() =>
 )
 
 onMounted(async () => {
-  const list = await loadCountries()
-  const only = props.only?.map((code) => code.toUpperCase())
-  countries.value = only?.length ? list.filter((c) => only.includes(c.iso2)) : list
+  allCountries.value = await loadCountries()
 })
 
 /*
@@ -138,37 +158,31 @@ onMounted(async () => {
  */
 function useSuggestions(field: AddressField) {
   const options = ref<AddressSuggestion[]>([])
-  const loading = ref(false)
-  let timer: ReturnType<typeof setTimeout> | undefined
-  let controller: AbortController | undefined
+  const task = useAsyncTask<AddressSuggestion[]>()
 
   function query(term: string) {
-    if (timer) clearTimeout(timer)
-    controller?.abort()
     if (term.trim().length < props.minChars) {
+      task.cancel()
       options.value = []
-      loading.value = false
       return
     }
-    loading.value = true
-    timer = setTimeout(async () => {
-      controller = new AbortController()
-      try {
-        options.value = await geocoder.value.search(term.trim(), field, {
+    task.run(
+      (signal) =>
+        geocoder.value.search(term.trim(), field, {
           country: value.value.country || undefined,
           language: props.language,
-          signal: controller.signal,
-        })
-      } catch {
-        // Abort or network failure: leave the field usable as free text.
-        options.value = []
-      } finally {
-        loading.value = false
-      }
-    }, props.debounce)
+          signal,
+        }),
+      {
+        delay: props.debounce,
+        apply: (found) => (options.value = found),
+        // Network failure: leave the field usable as free text.
+        fail: () => (options.value = []),
+      },
+    )
   }
 
-  return { options, loading, query }
+  return { options, loading: task.pending, query }
 }
 
 const lineSuggestions = useSuggestions("line")
@@ -230,19 +244,21 @@ watch(mapOpen, (open) => {
   resolved.value = undefined
 })
 
-async function onPick(next: LatLon) {
+// Pins dropped in quick succession each start a lookup; only the latest one's
+// answer may describe the pin on screen.
+const reverse = useAsyncTask<AddressSuggestion | undefined>()
+watch(reverse.pending, (busy) => (resolving.value = busy))
+
+function onPick(next: LatLon) {
   point.value = next
-  resolving.value = true
   resolved.value = undefined
-  try {
-    resolved.value = await geocoder.value.reverse(next.lat, next.lon, {
-      language: props.language,
-    })
-  } catch {
-    resolved.value = undefined
-  } finally {
-    resolving.value = false
-  }
+  reverse.run(
+    () => geocoder.value.reverse(next.lat, next.lon, { language: props.language }),
+    {
+      apply: (found) => (resolved.value = found),
+      fail: () => (resolved.value = undefined),
+    },
+  )
 }
 
 /** Confirm the pin: fill in whatever came back and always keep the point. */
@@ -288,7 +304,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           :empty-text="text.noSuggestions"
           :loading-text="text.searching"
           icon="lucide:map-pin"
-          @update:model-value="(next: string) => { patch({ line: next }); lineSuggestions.query(next) }"
+          @update:model-value="(next: string) => { edit({ line: next }); lineSuggestions.query(next) }"
           @select="onLineSelect"
         />
         <LpButton
@@ -330,7 +346,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           :placeholder="text.cityPlaceholder"
           :empty-text="text.noSuggestions"
           :loading-text="text.searching"
-          @update:model-value="(next: string) => { patch({ city: next }); citySuggestions.query(next) }"
+          @update:model-value="(next: string) => { edit({ city: next }); citySuggestions.query(next) }"
           @select="onCitySelect"
         />
       </LpFormField>
@@ -342,7 +358,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :disabled="disabled"
         :size="size"
         autocomplete="postal-code"
-        @update:model-value="(next: string) => patch({ postalCode: next })"
+        @update:model-value="(next: string) => edit({ postalCode: next })"
       />
     </div>
 
@@ -355,7 +371,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :disabled="disabled"
         :size="size"
         searchable
-        @update:model-value="(next) => patch({ country: String(next ?? '') })"
+        @update:model-value="(next) => edit({ country: String(next ?? '') })"
       />
     </LpFormField>