@leavepulse/ui 0.43.3 → 0.44.0

package/src/components/LpCodeBlock.vue

@@ -24,7 +24,8 @@ export default { inheritAttrs: false }
  */
 import { computed, reactive, ref, watch } from "vue"
 import { useClipboard } from "../composables/useClipboard"
-import { type CodeLang, tokenizeLine } from "./codeHighlight"
+import { type CodeLang, tokenizeLines } from "./codeHighlight"
+import { useLabels } from "../composables/useLpConfig"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 
@@ -49,6 +50,7 @@ const props = withDefaults(
     height?: string
     /** Auto-collapse a leading import/package block (no markers needed). */
     foldImports?: boolean
+    labels?: Partial<Record<"unlock" | "lock" | "copy" | "copied" | "imports" | "details" | "lines", string>>
   }>(),
   {
     lang: "plain",
@@ -66,6 +68,21 @@ const emit = defineEmits<{
   (e: "update:locked", value: boolean): void
 }>()
 
+const text = useLabels(
+  "codeBlock",
+  {
+    unlock: "Unlock to edit",
+    lock: "Lock (read-only)",
+    copy: "Copy code",
+    copied: "Copied",
+    imports: "imports",
+    details: "details",
+    /** `{n}` is replaced by the count. */
+    lines: "({n} lines)",
+  },
+  () => props.labels,
+)
+
 const code = computed(() => props.modelValue ?? "")
 const rawLines = computed(() => code.value.replace(/\n$/, "").split("\n"))
 
@@ -114,7 +131,7 @@ const segments = computed<Segment[]>(() => {
       flushPlain()
       const lines: NumberedLine[] = []
       for (let k = start; k < realEnd; k++) lines.push({ n: k + 1, text: src[k] })
-      out.push({ kind: "fold", id: foldId++, label: "imports", defaultOpen: false, lines })
+      out.push({ kind: "fold", id: foldId++, label: text.value.imports, defaultOpen: false, lines })
       i = realEnd
     }
   }
@@ -126,7 +143,7 @@ const segments = computed<Segment[]>(() => {
       flushPlain()
       const rest = startMatch[1] ?? ""
       const defaultOpen = /\bopen\b/.test(rest)
-      const label = rest.replace(/\bopen\b/, "").trim() || "details"
+      const label = rest.replace(/\bopen\b/, "").trim() || text.value.details
       const lines: NumberedLine[] = []
       i++
       for (; i < src.length; i++) {
@@ -143,6 +160,7 @@ const segments = computed<Segment[]>(() => {
 })
 
 const hasFolds = computed(() => segments.value.some((s) => s.kind === "fold"))
+const editing = computed(() => !props.locked && !hasFolds.value)
 
 // Per-region open state, keyed by fold id, defaulting to each region's declared
 // open flag. Reset when the set of folds changes.
@@ -159,9 +177,21 @@ function toggleFold(id: number) {
   openState[id] = !openState[id]
 }
 
-/** Highlight one line's text into tokens. */
-function tokens(text: string) {
-  return tokenizeLine(text, props.lang)
+/* Highlighted once for the whole snippet, so a block comment that spans lines
+   is coloured as one; looked up by the line's 1-based number. */
+const highlighted = computed(() => tokenizeLines(rawLines.value, props.lang))
+function tokens(n: number) {
+  return highlighted.value[n - 1] ?? []
+}
+
+/* The textarea is the scroller while editing; the highlighted copy under it
+   follows, or the caret drifts over the wrong text on a long line. */
+const preEl = ref<HTMLElement | null>(null)
+function syncScroll(e: Event) {
+  const area = e.target as HTMLTextAreaElement
+  if (!preEl.value) return
+  preEl.value.scrollLeft = area.scrollLeft
+  preEl.value.scrollTop = area.scrollTop
 }
 
 // Copied text is the real code with marker lines removed (so it pastes clean),
@@ -214,7 +244,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           v-if="lockToggle"
           type="button"
           class="group/lock flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-          :aria-label="locked ? 'Unlock to edit' : 'Lock (read-only)'"
+          :aria-label="locked ? text.unlock : text.lock"
           @click="toggleLock"
         >
           <LpIcon
@@ -227,7 +257,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           v-if="copyable"
           type="button"
           class="group/copy flex items-center gap-1 rounded px-1.5 py-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
-          :aria-label="copied ? 'Copied' : 'Copy code'"
+          :aria-label="copied ? text.copied : text.copy"
           @click="copy"
         >
           <LpIcon
@@ -245,7 +275,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     <div
       class="lp-scrollbar-none relative"
       :style="height ? { height } : undefined"
-      :class="height ? 'overflow-auto' : ''"
+      :class="height ? (editing ? 'overflow-hidden' : 'overflow-auto') : ''"
     >
       <!-- Editable overlay: only when unlocked and there are no folds. -->
       <textarea
@@ -253,12 +283,18 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :value="code"
         spellcheck="false"
         class="lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none"
-        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-12' : '']"
+        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-13' : '']"
         @input="onInput"
+        @scroll="syncScroll"
       />
       <pre
+        ref="preEl"
         class="lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed"
-        :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', !locked && !hasFolds ? 'pointer-events-none' : '']"
+        :class="[
+          wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre',
+          editing ? 'pointer-events-none' : '',
+          editing && height ? 'h-full overflow-hidden' : '',
+        ]"
       ><code class="block"><template
           v-for="(seg, s) in segments"
           :key="s"
@@ -271,7 +307,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                 class="mr-3 inline-block w-7 select-none text-right text-muted/60"
                 aria-hidden="true"
               >{{ ln.n }}</span><span
-                v-for="(tok, j) in tokens(ln.text)"
+                v-for="(tok, j) in tokens(ln.n)"
                 :key="j"
                 :class="tok.cls"
               >{{ tok.text }}</span></span></template><!-- Fold region --><template
@@ -288,7 +324,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
               /><span class="select-none">{{ openState[seg.id] ? seg.label : seg.label + ' …' }}</span><span
                 v-if="!openState[seg.id]"
                 class="select-none text-muted/50"
-              >({{ seg.lines.length }} lines)</span></button><template
+              >{{ text.lines.replace("{n}", String(seg.lines.length)) }}</span></button><template
               v-if="openState[seg.id]"
             ><span
                 v-for="ln in seg.lines"
@@ -299,7 +335,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                   class="mr-3 inline-block w-7 select-none text-right text-muted/60"
                   aria-hidden="true"
                 >{{ ln.n }}</span><span
-                  v-for="(tok, j) in tokens(ln.text)"
+                  v-for="(tok, j) in tokens(ln.n)"
                   :key="j"
                   :class="tok.cls"
                 >{{ tok.text }}</span></span></template></template></template></code></pre>

package/src/components/LpColorPicker.vue

@@ -37,6 +37,7 @@ import {
   PopoverTrigger,
 } from "reka-ui"
 import { computed, ref, watch } from "vue"
+import { useFieldControl } from "../composables/useField"
 import {
   clampHsv,
   DEFAULT_SWATCHES,
@@ -271,7 +272,9 @@ function trackPointer(e: PointerEvent, onMove: (x: number, y: number) => void) {
 
 const onFieldPointer = (e: PointerEvent) =>
   trackPointer(e, (x, y) => set({ s: x, v: 1 - y }))
-const onHuePointer = (e: PointerEvent) => trackPointer(e, (x) => set({ h: x * 360 }))
+// 360° is 0° again, so the far edge of the rail would throw the thumb back to
+// the start; it stops just short instead, as End does.
+const onHuePointer = (e: PointerEvent) => trackPointer(e, (x) => set({ h: Math.min(x * 360, 359.9) }))
 const onAlphaPointer = (e: PointerEvent) => trackPointer(e, (x) => set({ a: x }))
 
 /* ── keyboard ─────────────────────────────────────
@@ -303,11 +306,13 @@ function step(e: KeyboardEvent, axis: "sv" | "h" | "a") {
 }
 
 /* ── text field ───────────────────────────────────
-   Typed text is parsed on every keystroke but only applied when it resolves to
-   a real colour, so a half-written "#3b8" never snaps the picker somewhere the
-   user is still on their way past. The field shows what is typed while it has
-   focus and the committed value once it doesn't. */
+   Typed text is parsed on every keystroke and previews as soon as it resolves
+   to a real colour, but is only committed (`change`) on Enter or when the field
+   loses focus: "#3b8" and "#3b82" are valid colours on the way to "#3b82f6",
+   and committing each one handed listeners three colours nobody chose. The
+   field shows what is typed while it has focus and the value once it doesn't. */
 const typed = ref<string | null>(null)
+let typedChange = false
 const inputValue = computed(() => typed.value ?? current.value)
 
 function onInput(e: Event) {
@@ -318,11 +323,19 @@ function onInput(e: Event) {
   const next = rgbToHsv(rgb)
   if (next.s === 0) next.h = hsv.value.h
   if (next.v === 0) next.s = hsv.value.s
-  set(props.alpha ? next : { ...next, a: 1 }, true)
+  set(props.alpha ? next : { ...next, a: 1 })
+  typedChange = true
+}
+
+function commitTyped() {
+  if (!typedChange) return
+  typedChange = false
+  emit("change", current.value)
 }
 
 function onInputBlur() {
   typed.value = null
+  commitTyped()
 }
 
 function pickSwatch(value: string) {
@@ -463,8 +476,12 @@ function remember(value: string) {
 // Remember on close rather than on every commit: the colour a person leaves the
 // popover on is the one they chose, while the ones they passed through on the
 // way are not history, they are the search for it.
+// Only a colour that changed while the popover was open: opening it to look,
+// or to copy the value out, is not a choice worth recording.
+let openedOn = ""
 watch(open, (isOpen, was) => {
-  if (was && !isOpen) remember(current.value)
+  if (isOpen) openedOn = current.value
+  else if (was && current.value !== openedOn) remember(current.value)
 })
 
 /**
@@ -573,6 +590,12 @@ const menuItems = computed<ContextMenuItemDef[]>(() => {
     : builtin
 })
 
+const field = useFieldControl(() => ({
+  wrapped: false,
+  invalid: props.invalid,
+  disabled: props.disabled,
+}))
+
 defineExpose({ open })
 </script>
 
@@ -592,12 +615,15 @@ defineExpose({ open })
       <PopoverTrigger as-child>
         <button
           type="button"
-          :disabled="disabled"
+          :id="field.id"
+          :disabled="field.disabled"
           :aria-label="ariaLabel"
+          :aria-invalid="field.invalid || undefined"
+          :aria-describedby="field.describedBy"
           class="group inline-flex w-full items-center gap-2 rounded-control border bg-surface-soft px-2 text-left text-ink outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
           :class="[
             triggerSize[size],
-            invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
+            field.invalid ? 'border-danger focus-visible:ring-danger-soft' : 'border-line focus-visible:border-brand',
           ]"
         >
           <!-- The swatch sits on the checkerboard so a transparent colour looks
@@ -645,6 +671,9 @@ defineExpose({ open })
               role="slider"
               :tabindex="disabled ? -1 : 0"
               :aria-label="l.saturation"
+              :aria-valuemin="0"
+              :aria-valuemax="100"
+              :aria-valuenow="Math.round(hsv.s * 100)"
               :aria-valuetext="fill(l.saturationValueText, { s: Math.round(hsv.s * 100), v: Math.round(hsv.v * 100) })"
               class="relative h-36 w-full cursor-crosshair touch-none overflow-hidden rounded-control outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
               :style="fieldStyle"
@@ -728,6 +757,7 @@ defineExpose({ open })
                 :aria-label="l.value"
                 class="min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted"
                 @input="onInput"
+                @keydown.enter="commitTyped"
                 @blur="onInputBlur"
               />
             </div>

package/src/components/LpCommandPalette.vue

@@ -44,7 +44,8 @@ import { useGlass } from "../composables/useGlass"
 import { useClipboard } from "../composables/useClipboard"
 import { useHotkeys } from "../composables/useHotkeys"
 import { useModalLayer } from "./modalDepth"
-import { parseCommandQuery, rankCommandItems, swapCommandTerms } from "./commandSearch"
+import { useLabels } from "../composables/useLpConfig"
+import { parseCommandQuery, rankCommandItems } from "./commandSearch"
 
 export interface Command {
   id: string
@@ -87,7 +88,7 @@ export interface Command {
    * `onSelect` still runs when the mode opens, so a command can both act and
    * drill in.
    */
-  children?: Command[] | ((query: string) => Command[] | Promise<Command[]>)
+  children?: Command[] | ((query: string, signal: AbortSignal) => Command[] | Promise<Command[]>)
   /** Placeholder while inside this command's mode. */
   childPlaceholder?: string
   /**
@@ -121,7 +122,7 @@ export interface Command {
 }
 
 /** Footer hints and the mode chip, spelled out so an app can translate them. */
-export interface PaletteLabels {
+export type PaletteLabels = {
   navigate: string
   select: string
   close: string
@@ -144,6 +145,11 @@ export interface PaletteLabels {
    * text is never displayed. Kept so existing `labels` objects still type-check.
    */
   noPreview?: string
+  /** Accessible name and description of the dialog, read by screen readers only. */
+  title?: string
+  description?: string
+  /** The key hint printed beside the box and in the footer. */
+  esc?: string
 }
 
 const props = withDefaults(
@@ -190,12 +196,6 @@ const props = withDefaults(
      * other group off the screen. 0 shows everything.
      */
     groupLimit?: number
-    /**
-     * When the query matches nothing, retry it as if typed in the other
-     * keyboard layout (QWERTY ↔ Cyrillic). Off for an app whose commands are
-     * meant to be typed in one layout only.
-     */
-    layoutFallback?: boolean
     /**
      * A pane beside the list showing the highlighted result in full — its
      * `preview` text, or the `preview` slot. For palettes that search
@@ -229,16 +229,16 @@ const props = withDefaults(
     resultsLabel: "Results",
     excerptLines: 4,
     groupLimit: 0,
-    layoutFallback: true,
     previewPane: false,
     glass: undefined,
   },
 )
 
 const frosted = useGlass(() => props.glass)
-const { claim, release, layer } = useModalLayer()
+const contentRef = ref<{ $el: HTMLElement } | null>(null)
+const { claim, release, layer } = useModalLayer({ element: () => contentRef.value?.$el })
 
-const DEFAULT_LABELS: PaletteLabels = {
+const DEFAULT_LABELS: Required<PaletteLabels> = {
   navigate: "navigate",
   select: "select",
   close: "close",
@@ -252,9 +252,12 @@ const DEFAULT_LABELS: PaletteLabels = {
   copyLink: "Copy link",
   linkCopied: "Link copied",
   noPreview: "No preview",
+  title: "Command palette",
+  description: "Search and run a command.",
+  esc: "esc",
 }
 
-const text = computed<PaletteLabels>(() => ({ ...DEFAULT_LABELS, ...props.labels }))
+const text = useLabels("palette", DEFAULT_LABELS, () => props.labels)
 
 const emit = defineEmits<{
   (e: "update:open", value: boolean): void
@@ -337,12 +340,14 @@ const selectedActions = computed(() => actionsOf(flat.value[selectedIndex.value]
  * actions it keeps that default.
  */
 function onTab(event: KeyboardEvent) {
-  event.preventDefault()
-  event.stopPropagation()
+  // Without actions Tab stays Tab, so the trail chips and a Retry button are
+  // still reachable from the keyboard.
   if (event.shiftKey) return
   const c = flat.value[selectedIndex.value]
   const actions = selectedActions.value
   if (!c || !actions.length) return
+  event.preventDefault()
+  event.stopPropagation()
   enter({ id: `${c.id}:actions`, label: c.label, icon: c.icon, children: actions })
 }
 
@@ -399,7 +404,7 @@ function fetcher(): ((q: string, signal: AbortSignal) => Command[] | Promise<Com
   const current = mode.value
   if (current) {
     return typeof current.children === "function"
-      ? (q: string) => (current.children as (q: string) => Command[] | Promise<Command[]>)(q)
+      ? current.children
       : null
   }
   return props.search ?? null
@@ -469,10 +474,7 @@ const local = computed<{ items: Command[]; terms: string[] }>(() => {
   // typed). With a query, hidden commands rank like any other.
   if (!terms.include.length && !terms.exclude.length && !terms.groups.length) return { items: filtered, terms: [] }
   const items = rankCommandItems(filtered, terms)
-  if (items.length || !props.layoutFallback) return { items, terms: terms.include }
-  const swapped = swapCommandTerms(terms)
-  const other = rankCommandItems(filtered, swapped)
-  return other.length ? { items: other, terms: swapped.include } : { items, terms: terms.include }
+  return { items, terms: terms.include }
 })
 
 const ranked = computed<Command[]>(() => local.value.items)
@@ -609,8 +611,11 @@ watch(
     else viewport.scrollTop = 0
   },
 )
+// Rows ask for their index several times per render; a lookup keeps that O(1)
+// instead of a scan of the whole list per row.
+const flatIndex = computed(() => new Map(flat.value.map((c, i) => [c, i])))
 function flatIndexOf(c: Command): number {
-  return flat.value.indexOf(c)
+  return flatIndex.value.get(c) ?? -1
 }
 
 // ── highlight ────────────────────────────────────────────────
@@ -699,6 +704,9 @@ function movePage(direction: -1 | 1) {
 function onPaletteKeydown(event: KeyboardEvent) {
   if (event.isComposing) return
   if (!(["ArrowDown", "ArrowUp", "Home", "End", "PageDown", "PageUp"] as string[]).includes(event.key)) return
+  // Home and End belong to the caret while there is text to move it through.
+  const typing = event.target instanceof HTMLInputElement && event.target.value !== ""
+  if (typing && (event.key === "Home" || event.key === "End")) return
   event.preventDefault()
   event.stopPropagation()
   if (event.key === "ArrowDown") moveDown()
@@ -838,6 +846,8 @@ useHotkeys(() =>
           code: "KeyK",
           ctrl: true,
           allowInInput: true,
+          overLayers: true,
+          repeat: false,
           handler: () => emit("update:open", !props.open),
         },
       ]
@@ -854,6 +864,7 @@ useHotkeys(() =>
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
+        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--nested' : 'lp-glass-overlay') : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
         :style="{ zIndex: layer.panel }"
@@ -861,8 +872,8 @@ useHotkeys(() =>
         @open-auto-focus.prevent
         @keydown.capture="onPaletteKeydown"
       >
-        <DialogTitle class="sr-only">Command palette</DialogTitle>
-        <DialogDescription class="sr-only">Search and run a command.</DialogDescription>
+        <DialogTitle class="sr-only">{{ text.title }}</DialogTitle>
+        <DialogDescription class="sr-only">{{ text.description }}</DialogDescription>
 
         <!-- Filter. The trail sits inside the box as chips, the way a scoped
              search reads everywhere else: what you type is filtered by what is
@@ -905,7 +916,7 @@ useHotkeys(() =>
             @keydown.esc="onEscape"
             @keydown.tab="onTab"
           />
-          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">esc</kbd>
+          <kbd class="shrink-0 rounded border border-line px-1.5 py-0.5 text-[10px] text-muted">{{ text.esc }}</kbd>
         </div>
 
         <!-- Results -->
@@ -1079,7 +1090,7 @@ useHotkeys(() =>
             {{ text.back }}
           </span>
           <span class="ml-auto flex items-center gap-1">
-            <kbd class="rounded border border-line px-1 text-[10px]">esc</kbd>
+            <kbd class="rounded border border-line px-1 text-[10px]">{{ text.esc }}</kbd>
             {{ text.close }}
           </span>
         </div>

package/src/components/LpConfirmDialog.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 // Confirmation dialog built on LpModal. Resolves an action via confirm/cancel.
-import { computed } from "vue"
+import { computed, nextTick, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpModal from "./LpModal.vue"
 
+export type ConfirmLabels = {
+  confirm: string
+  cancel: string
+  loading: string
+  failed: string
+}
+
 const props = withDefaults(
   defineProps<{
     open?: boolean
@@ -33,13 +41,22 @@ const props = withDefaults(
      * The confirm action is in flight: the button disables and swaps to
      * `loadingLabel`, and confirming no longer closes the dialog — the owner
      * closes it once the work settles, so a failure can stay on screen.
+     * Setting it from the `confirm` handler is enough; the dialog waits a tick
+     * for it before deciding to close.
      */
     loading?: boolean
     loadingLabel?: string
+    /**
+     * The work behind the confirm button. When given, the dialog runs it,
+     * shows the loading state itself, closes once it resolves and stays open
+     * with the error's message when it rejects.
+     */
+    action?: () => unknown
     /** Frosted glass panel, passed to LpModal. Follows `provideGlass` when unset. */
     glass?: boolean
+    labels?: Partial<ConfirmLabels>
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…", glass: undefined },
+  { glass: undefined },
 )
 
 const emit = defineEmits<{
@@ -48,29 +65,61 @@ const emit = defineEmits<{
   (e: "cancel"): void
 }>()
 
+const text = useLabels<ConfirmLabels>(
+  "confirm",
+  { confirm: "Confirm", cancel: "Cancel", loading: "Working…", failed: "Something went wrong." },
+  () => props.labels,
+)
+
 /*
  * Only a destructive prompt is marked by default. A routine confirmation
  * ("Save these changes?") with a warning badge cries wolf, and the badge stops
  * meaning anything on the dialog where it matters.
- *
- * "Not given" cannot be tested with `undefined` here. A prop whose type union
- * includes Boolean is boolean-cast by Vue, so an absent `icon` arrives as
- * `false` — the same value the caller passes to suppress the marker — and the
- * default silently never applied. A string is an override, and everything else
- * (absent, or an explicit false) falls through to the danger default.
  */
 const marker = computed<string>(() => {
   if (props.icon !== undefined) return props.icon
   return props.danger ? "lucide:triangle-alert" : ""
 })
 
-function confirm() {
+const running = ref(false)
+const error = ref("")
+const busy = computed(() => props.loading || running.value)
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) error.value = ""
+  },
+)
+
+async function confirm() {
+  if (busy.value) return
+  error.value = ""
   emit("confirm")
-  // An async confirm owns its own dismissal; closing here would tear the
-  // dialog down before the caller knows whether the action succeeded.
+  if (props.action) {
+    running.value = true
+    try {
+      await props.action()
+    } catch (e) {
+      error.value = e instanceof Error && e.message ? e.message : text.value.failed
+      return
+    } finally {
+      running.value = false
+    }
+    emit("update:open", false)
+    return
+  }
+  // A handler that sets `loading` does so through the parent, whose new props
+  // reach this component only on the next render.
+  await nextTick()
   if (!props.loading) emit("update:open", false)
 }
-function cancel() {
+
+// Every way out that is not the confirm button counts as a cancel: Escape, the
+// scrim, the close button. None of them may close it while work is in flight.
+function dismiss(open: boolean) {
+  if (open) return emit("update:open", true)
+  if (busy.value) return
   emit("cancel")
   emit("update:open", false)
 }
@@ -82,7 +131,8 @@ function cancel() {
     :open="open"
     :title="title"
     :description="description"
-    @update:open="(v) => $emit('update:open', v)"
+    role="alertdialog"
+    @update:open="dismiss"
   >
     <template v-if="marker" #title>
       <span class="inline-flex items-center gap-2.5">
@@ -100,16 +150,17 @@ function cancel() {
       </span>
     </template>
     <slot />
+    <p v-if="error" role="alert" class="mt-3 text-sm text-danger">{{ error }}</p>
     <template #footer>
-      <LpButton variant="ghost" :disabled="loading" @click="cancel">
-        {{ cancelLabel }}
+      <LpButton variant="ghost" :disabled="busy" @click="dismiss(false)">
+        {{ cancelLabel ?? text.cancel }}
       </LpButton>
       <LpButton
         :variant="danger ? 'danger' : 'solid'"
-        :disabled="loading"
+        :disabled="busy"
         @click="confirm"
       >
-        {{ loading ? loadingLabel : confirmLabel }}
+        {{ busy ? (loadingLabel ?? text.loading) : (confirmLabel ?? text.confirm) }}
       </LpButton>
     </template>
   </LpModal>

package/src/components/LpConfirmHost.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/*
+ * Renders the requests made through `confirm()` / `useConfirm()`. Mount one
+ * near the app root, next to LpToaster.
+ */
+import { computed, ref, watch } from "vue"
+import { confirmQueue, settleConfirm } from "./confirm"
+import LpConfirmDialog from "./LpConfirmDialog.vue"
+
+withDefaults(
+  defineProps<{
+    /** Frosted glass panel. Follows `provideGlass` when unset. */
+    glass?: boolean
+  }>(),
+  { glass: undefined },
+)
+
+const current = computed(() => confirmQueue[0])
+const open = ref(false)
+let confirmed = false
+const answer = (value: boolean) => (confirmed = value)
+
+watch(
+  () => current.value?.id,
+  (id) => {
+    confirmed = false
+    open.value = id !== undefined
+  },
+  { immediate: true },
+)
+
+// The dialog closes itself after a successful action, or straight away for a
+// plain confirmation; a failed action keeps it open and never gets here.
+function onOpen(value: boolean) {
+  open.value = value
+  const request = current.value
+  if (!value && request) settleConfirm(request.id, confirmed)
+}
+</script>
+
+<template>
+  <LpConfirmDialog
+    v-if="current"
+    :key="current.id"
+    :open="open"
+    :glass="glass"
+    :title="current.title"
+    :description="current.description"
+    :danger="current.danger"
+    :icon="current.icon"
+    :confirm-label="current.confirmLabel"
+    :cancel-label="current.cancelLabel"
+    :loading-label="current.loadingLabel"
+    :action="current.action"
+    @confirm="answer(true)"
+    @cancel="answer(false)"
+    @update:open="onOpen"
+  />
+</template>