@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpHoverCard.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/*
+ * A preview card that opens when the pointer rests on something: a username
+ * that shows the profile, a server name that shows its status, a link that
+ * shows where it goes. Reading it costs a pause, not a click and a back.
+ *
+ *   <LpHoverCard>
+ *     <template #trigger><a href="/u/ada">@ada</a></template>
+ *     <ProfilePreview id="ada" />
+ *   </LpHoverCard>
+ *
+ * Different from the neighbours on purpose:
+ * - LpTooltip names or explains a control in a line of text; this holds a
+ *   small layout (avatar, stats, actions) and waits longer before opening, so
+ *   passing over a list of names does not flash a card at every row.
+ * - LpPopover opens on a click and is a place to DO something; a hover card is
+ *   a glance, and everything in it must also be reachable without it (the
+ *   trigger usually links to the full page).
+ *
+ * Behaviour, built on reka's HoverCard:
+ * - Opens after `openDelay` on hover, and at once on keyboard focus of the
+ *   trigger, so it is not a mouse-only feature.
+ * - Stays open while the pointer travels to the card and over it, so a link
+ *   or a button inside can be used; closes `closeDelay` after it leaves.
+ * - Touch has no hover. With `touch="hold"` a press-and-hold opens the card
+ *   (and that press does not also follow the link); a tap elsewhere closes it.
+ *   `touch="none"` leaves touch alone, for triggers where a hold means
+ *   something else (a drag handle, a context menu).
+ */
+import {
+  HoverCardArrow,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardRoot,
+  HoverCardTrigger,
+} from "reka-ui"
+import { computed, onBeforeUnmount, watch } from "vue"
+import { mergeClass } from "../composables/useMergedClass"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
+import { POPOVER_PANEL } from "./dropdown"
+
+const props = withDefaults(
+  defineProps<{
+    side?: "top" | "right" | "bottom" | "left"
+    align?: "start" | "center" | "end"
+    sideOffset?: number
+    /**
+     * Milliseconds the pointer rests before the card opens. Longer than a
+     * tooltip's on purpose: a card is big, and one that opens while the
+     * pointer is only passing by covers what the reader was heading for.
+     */
+    openDelay?: number
+    /** Milliseconds after the pointer leaves before it closes: room to cross the gap to the card. */
+    closeDelay?: number
+    /** A small pointer from the card to its trigger, for a trigger in a dense row where the card could belong to a neighbour. */
+    arrow?: boolean
+    /** Touch: `hold` opens on press-and-hold; `none` leaves touch to the trigger. */
+    touch?: "hold" | "none"
+    /** How long a touch must be held to open, in ms. */
+    holdDelay?: number
+    /** Turn the card off: the trigger stays and behaves as itself. */
+    disabled?: boolean
+    /** Extra classes for the card (width, padding). Merged, so `w-80 p-0` replaces the defaults. */
+    panelClass?: string
+  }>(),
+  {
+    side: "bottom",
+    align: "center",
+    sideOffset: 8,
+    openDelay: 500,
+    closeDelay: 200,
+    arrow: false,
+    touch: "hold",
+    holdDelay: 450,
+    disabled: false,
+  },
+)
+
+// Controllable (v-model:open). Always held here, also uncontrolled, because a
+// touch hold opens the card from outside reka's own hover handling.
+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),
+)
+
+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
+let holdTimer = 0
+let start = { x: 0, y: 0 }
+let held = false
+
+function cancelHold() {
+  window.clearTimeout(holdTimer)
+  holdTimer = 0
+}
+
+function onPointerDown(event: PointerEvent) {
+  if (event.pointerType !== "touch" || props.touch !== "hold" || props.disabled) return
+  held = false
+  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) 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()
+}
+
+watch(
+  () => props.disabled,
+  (off) => {
+    if (off) open.value = false
+  },
+)
+
+onBeforeUnmount(cancelHold)
+</script>
+
+<template>
+  <slot v-if="disabled" name="trigger" />
+  <HoverCardRoot v-else v-model:open="open" :open-delay="openDelay" :close-delay="closeDelay">
+    <HoverCardTrigger
+      as-child
+      :class="touch === 'hold' ? '[-webkit-touch-callout:none]' : undefined"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="cancelHold"
+      @pointercancel="cancelHold"
+      @click.capture="onClickCapture"
+      @contextmenu="onContextMenu"
+    >
+      <slot name="trigger" />
+    </HoverCardTrigger>
+    <HoverCardPortal :to="portalTo">
+      <HoverCardContent
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+        :collision-padding="8"
+        :class="panel"
+        @pointer-down-outside="guardOutside"
+        @escape-key-down="guardOutside"
+      >
+        <slot :close="() => (open = false)" />
+        <HoverCardArrow v-if="arrow" :width="14" :height="7" class="fill-surface-raised" />
+      </HoverCardContent>
+    </HoverCardPortal>
+  </HoverCardRoot>
+</template>

package/src/components/LpIdenticon.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A face for something that has no picture: a mirrored pixel pattern and a
+ * colour, both derived from `seed` (an id, a username, a key's fingerprint).
+ * The same seed draws the same identicon everywhere, so people learn to
+ * recognise it the way they recognise an avatar.
+ *
+ * It fills the box it is put in (an LpAvatar sizes it through `identicon`);
+ * give it a size class of its own anywhere else. The pattern is generated by
+ * `identicon()` in identicon.ts, which a canvas, a favicon or a notification
+ * icon can call directly.
+ */
+import { computed } from "vue"
+import { identicon, identiconRects } from "./identicon"
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = withDefaults(
+  defineProps<{
+    /** What the picture is derived from. Use something stable: an id outlives a renamed username. */
+    seed: string
+    /** Cells per side: 5 is the familiar look, 7 gives busier shapes for large sizes. */
+    grid?: number
+    /**
+     * `tint` lays a pale wash of the shape's own hue behind it, mixed into the
+     * theme's soft surface so it sits right on dark and light alike; `none`
+     * leaves the box behind it showing.
+     */
+    background?: "tint" | "none"
+    /** Empty margin around the grid as a share of the side; more for a round crop. */
+    padding?: number
+    /** Accessible name. Unset, the picture is decorative: the name is usually written next to it. */
+    label?: string
+  }>(),
+  { grid: 5, background: "tint", padding: 0.14 },
+)
+
+const icon = computed(() => identicon(props.seed, { grid: props.grid }))
+const rects = computed(() => identiconRects(icon.value.cells))
+const pad = computed(() => props.grid * Math.max(0, Math.min(0.4, props.padding)))
+const view = computed(() => props.grid + pad.value * 2)
+const wash = computed(() => `color-mix(in oklab, ${icon.value.color} 16%, var(--color-surface-soft))`)
+
+const { class: rootClass, attrs: rest } = useMergedAttrs("block size-full")
+</script>
+
+<template>
+  <svg
+    :class="rootClass"
+    v-bind="rest"
+    :viewBox="`0 0 ${view} ${view}`"
+    shape-rendering="crispEdges"
+    :role="label ? 'img' : undefined"
+    :aria-label="label"
+    :aria-hidden="label ? undefined : 'true'"
+  >
+    <rect v-if="background === 'tint'" :width="view" :height="view" :style="{ fill: wash }" class="transition-[fill] duration-medium motion-reduce:transition-none" />
+    <!-- Keyed by seed: a new seed is a new face, faded in rather than snapped. -->
+    <g :key="seed" :fill="icon.color" class="animate-[fade-in_var(--duration-medium)_ease] motion-reduce:animate-none">
+      <rect v-for="(r, i) in rects" :key="i" :x="r.x + pad" :y="r.y + pad" :width="r.w" height="1" />
+    </g>
+  </svg>
+</template>

package/src/components/LpImageEditor.vue

@@ -48,6 +48,7 @@ import LpButton from "./LpButton.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
+import { useResizeObserver } from "../composables/useResizeObserver"
 
 const props = withDefaults(
   defineProps<{
@@ -144,23 +145,20 @@ const viewport = ref<HTMLElement | null>(null)
 const zoom = useZoomPan({ min: 1, max: 6 })
 
 const frameSize = ref<{ width: number; height: number } | null>(null)
-let frameObserver: ResizeObserver | null = null
-
-watch(viewport, (el) => {
-  zoom.setViewport(el)
-  frameObserver?.disconnect()
-  frameObserver = null
-  if (!el) return
-  // Fractional, not clientWidth: a rounded-down frame left a hairline of
-  // background showing along the edges of a turned picture.
-  frameSize.value = { width: el.clientWidth, height: el.clientHeight }
-  if (typeof ResizeObserver !== "undefined") {
-    frameObserver = new ResizeObserver(([entry]) => {
-      frameSize.value = { width: entry.contentRect.width, height: entry.contentRect.height }
-    })
-    frameObserver.observe(el)
-  }
-})
+
+watch(viewport, (el) => zoom.setViewport(el))
+// Fractional, not clientWidth: a rounded-down frame left a hairline of
+// background showing along the edges of a turned picture. The first, rounded
+// reading only holds the frame until the observer's first report.
+useResizeObserver(
+  viewport,
+  (entry, el) => {
+    frameSize.value = entry
+      ? { width: entry.contentRect.width, height: entry.contentRect.height }
+      : { width: el.clientWidth, height: el.clientHeight }
+  },
+  { immediate: true },
+)
 
 /** Which way up it ends, 0-270, whatever the accumulated angle. */
 const upright = computed(() => ((rotation.value % 360) + 360) % 360)
@@ -296,7 +294,6 @@ function revoke() {
 onBeforeUnmount(() => {
   generation++
   revoke()
-  frameObserver?.disconnect()
 })
 
 function rotate(by: number) {

package/src/components/LpInfraNode.vue

@@ -10,6 +10,8 @@
  */
 import { Handle, Position } from "@vue-flow/core"
 import { computed } from "vue"
+import LpBadge from "./LpBadge.vue"
+import LpStatus from "./LpStatus.vue"
 
 export interface InfraNodeData {
   name: string
@@ -174,10 +176,12 @@ const accentLine = computed(
       <div class="flex items-center gap-[7px]">
         <span class="text-[13px] text-[var(--accent)]">{{ icon }}</span>
         <span class="flex-1 truncate text-[13px] font-semibold text-ink">{{ data.name }}</span>
-        <span
+        <!-- The kit's status light: a live host breathes, a lost one is a steady red. -->
+        <LpStatus
           v-if="data.online !== undefined"
-          class="size-[7px] rounded-full"
-          :class="data.online ? 'bg-action shadow-[0_0_6px_var(--color-action)]' : 'bg-danger'"
+          :state="data.online ? 'online' : 'down'"
+          :pulse="data.online"
+          hide-label
         />
       </div>
       <div class="mt-1.5 flex items-center justify-between">
@@ -190,32 +194,39 @@ const accentLine = computed(
         v-if="data.firewallCount || data.serviceCount !== undefined || data.staleFor"
         class="mt-1.5 flex items-center gap-1.5"
       >
-        <span
+        <!-- LpBadge's small chip, with the card's own 9px type: at the badge's
+             11px three of them (a firewall count, a service count, an age)
+             overflow a 168px card. -->
+        <LpBadge
           v-if="data.firewallCount"
-          class="inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger"
+          tone="danger"
+          size="sm"
+          class="text-[9px]"
           :title="fill(text.firewallRules, { n: data.firewallCount! })"
         >
-          <span>⛨</span>{{ data.firewallCount }}
-        </span>
-        <span
+          ⛨ {{ data.firewallCount }}
+        </LpBadge>
+        <LpBadge
           v-if="data.serviceCount !== undefined"
-          class="inline-flex items-center gap-1 rounded-pill bg-surface-soft px-1.5 py-0.5 text-[9px] font-medium text-muted"
-          :class="data.staleFor ? 'line-through decoration-danger/70' : ''"
+          size="sm"
+          class="text-[9px] text-muted"
           :title="
             data.staleFor
               ? fill(text.servicesStale, { n: data.serviceCount!, age: data.staleFor })
               : fill(text.services, { n: data.serviceCount! })
           "
         >
-          <span>◇</span>{{ data.serviceCount }}
-        </span>
-        <span
+          <span :class="data.staleFor ? 'line-through decoration-danger/70' : ''">◇ {{ data.serviceCount }}</span>
+        </LpBadge>
+        <LpBadge
           v-if="data.staleFor"
-          class="inline-flex items-center gap-1 rounded-pill bg-danger-soft px-1.5 py-0.5 text-[9px] font-medium text-danger"
+          tone="danger"
+          size="sm"
+          class="text-[9px]"
           :title="fill(text.noContact, { age: data.staleFor })"
         >
-          <span>⚠</span>{{ data.staleFor }} {{ text.old }}
-        </span>
+          ⚠ {{ data.staleFor }} {{ text.old }}
+        </LpBadge>
       </div>
     </div>
   </div>

package/src/components/LpInput.vue

@@ -6,10 +6,11 @@ export default { inheritAttrs: false }
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, ref, useAttrs, useSlots } from "vue"
 import { useFieldControl } from "../composables/useField"
+import { useLabels } from "../composables/useLpConfig"
 import { useInputFilter } from "../composables/useInputFilter"
 import { DEFAULT_MASK_TOKENS, useInputMask, type MaskSpec, type MaskTokens } from "../composables/useInputMask"
 import { mergeClass } from "../composables/useMergedClass"
-import LpFormField from "./LpFormField.vue"
+import FieldWrapper from "./FieldWrapper.vue"
 import LpIcon from "./LpIcon.vue"
 
 // Single source of truth for the field shell — bare input and adorned input
@@ -57,6 +58,9 @@ const props = withDefaults(
     hint?: string
     error?: string
     icon?: string
+    /** Show an accessible clear button, returning focus to the input. */
+    clearable?: boolean
+    labels?: Partial<{ clear: string }>
     /**
      * Marks the label with the required indicator. The attribute still reaches
      * the underlying <input> for native validation; this only makes the field
@@ -130,7 +134,7 @@ const patternInvalid = computed(() => isInvalid(props.modelValue))
 const slots = useSlots()
 const attrs = useAttrs()
 const hasLeading = computed(() => !!slots.leading || !!props.icon)
-const hasTrailing = computed(() => !!slots.trailing)
+const hasTrailing = computed(() => !!slots.trailing || showClear.value)
 const hasField = computed(
   () => !!props.label || !!props.hint || !!props.error,
 )
@@ -142,6 +146,8 @@ const field = useFieldControl(() => ({
   required: props.required,
   disabled: props.disabled,
 }))
+const text = useLabels("input", { clear: "Clear" }, () => props.labels)
+const showClear = computed(() => props.clearable && !!props.modelValue && !field.value.disabled && (attrs.readonly === undefined || attrs.readonly === false))
 const isInvalidState = computed(() => field.value.invalid)
 const shellClass = computed(() =>
   shell({ size: props.size, invalid: isInvalidState.value }),
@@ -150,14 +156,18 @@ const shellClass = computed(() =>
 // class/style belong to the wrapper (so `<LpInput class="...">` lays out the
 // whole field); every other attr (autocomplete, name, @keyup, inputmode…) goes
 // to the real <input>.
-const rootClass = computed(() => attrs.class)
-const rootStyle = computed(() => attrs.style)
 const inputAttrs = computed(() => {
   const { class: _c, style: _s, ...rest } = attrs
   return rest
 })
 
 const inputEl = ref<HTMLInputElement | null>(null)
+function clear() {
+  if (!showClear.value) return
+  emit("update:modelValue", "")
+  if (masking.active.value) emit("update:raw", "")
+  inputEl.value?.focus()
+}
 defineExpose({
   focus: (options?: FocusOptions) => inputEl.value?.focus(options),
   blur: () => inputEl.value?.blur(),
@@ -167,20 +177,20 @@ defineExpose({
 </script>
 
 <template>
-  <component
-    :is="hasField ? LpFormField : 'div'"
-    :label="hasField ? label : undefined"
-    :hint="hasField ? hint : undefined"
-    :error="hasField ? error : undefined"
-    :required="hasField ? required : undefined"
-    :id="hasField ? field.id : undefined"
-    :class="hasField ? rootClass : 'contents'"
-    :style="hasField ? rootStyle : undefined"
+  <FieldWrapper
+    :wrapped="hasField"
+    :id="field.id"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :required="required"
+    :class="attrs.class"
+    :style="attrs.style"
   >
     <div
       data-lp-ring-owner
-      :class="mergeClass(shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : (rootClass as string))"
-      :style="hasField ? undefined : rootStyle"
+      :class="mergeClass(shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : (attrs.class as string))"
+      :style="hasField ? undefined : attrs.style"
     >
       <span v-if="hasLeading" class="flex shrink-0 items-center text-muted">
         <slot name="leading"><LpIcon v-if="icon" :name="icon" :size="16" /></slot>
@@ -198,6 +208,7 @@ defineExpose({
         :aria-describedby="field.describedBy"
         :class="[
           'lp-autofill 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'],
         ]"
@@ -207,6 +218,9 @@ defineExpose({
         @input="onInputEvent"
       />
       <slot name="trailing" />
+      <button v-if="showClear" type="button" :aria-label="text.clear" class="shrink-0 rounded-inner p-1 text-muted outline-none transition-colors hover:text-ink focus-visible:ring-2 focus-visible:ring-ring" @pointerdown.prevent @click="clear">
+        <LpIcon name="lucide:x" :size="size === 'sm' ? 12 : 16" />
+      </button>
     </div>
-  </component>
+  </FieldWrapper>
 </template>

package/src/components/LpLightbox.vue

@@ -25,8 +25,11 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import { useZoomPan } from "../composables/useZoomPan"
 import { fileNameOf, type LightboxItem } from "./lightbox"
+import LpCopyButton from "./LpCopyButton.vue"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
 import { useModalLayer } from "./modalDepth"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 export type LightboxLabels = {
   viewer: string
@@ -380,20 +383,22 @@ async function download() {
   }
 }
 
-async function copy() {
-  const target = item.value
-  if (!target) return
-  try {
-    const response = await fetch(target.src)
-    const blob = await response.blob()
-    // Clipboard only takes PNG; re-encode anything else through a canvas.
-    const png =
-      blob.type === "image/png" ? blob : await reencodeToPng(await createImageBitmap(blob))
-    await navigator.clipboard.write([new ClipboardItem({ "image/png": png })])
-    emit("copy", target, true)
-  } catch {
-    emit("copy", target, false)
-  }
+/*
+ * The copy button (LpCopyButton) asks for the image when clicked: fetched then,
+ * not for every image paged past, and reported against the item that was on
+ * screen at the click even if the viewer pages on while it loads.
+ */
+let copyTarget: LightboxItem | undefined
+async function imageToCopy(): Promise<Blob> {
+  const target = (copyTarget = item.value)
+  if (!target) throw new Error("No image")
+  const response = await fetch(target.src)
+  const blob = await response.blob()
+  // Clipboard only takes PNG; re-encode anything else through a canvas.
+  return blob.type === "image/png" ? blob : reencodeToPng(await createImageBitmap(blob))
+}
+function copyDone(ok: boolean) {
+  if (copyTarget) emit("copy", copyTarget, ok)
 }
 
 async function reencodeToPng(bitmap: ImageBitmap): Promise<Blob> {
@@ -430,11 +435,17 @@ const BTN =
  */
 const ARROW =
   "absolute top-1/2 z-10 flex size-11 -translate-y-1/2 items-center justify-center rounded-pill bg-black/45 text-white/75 ring-1 ring-white/0 outline-none backdrop-blur-sm transition-[background-color,scale,color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:bg-white/20 hover:text-white hover:ring-white/30 hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-0 motion-reduce:transition-none motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
-    <DialogPortal>
+    <DialogPortal :to="portalTo">
       <!-- Not `lp-scrim--nested` even over another layer: a lightbox wants its
            full dark backdrop around the picture, not the lighter nested tint.
            The blur is handed up the stack like every scrim's. -->
@@ -444,6 +455,8 @@ const ARROW =
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
+        @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"
         :style="{ zIndex: layer.panel }"
@@ -483,9 +496,15 @@ const ARROW =
             >
               <LpIcon name="lucide:rotate-cw" :size="18" />
             </button>
-            <button v-if="copyable" :class="BTN" type="button" :title="text.copy" @click="copy">
-              <LpIcon name="lucide:copy" :size="18" />
-            </button>
+            <LpCopyButton
+              v-if="copyable"
+              :value="imageToCopy"
+              :icon-size="18"
+              :class="BTN"
+              :labels="{ copy: text.copy }"
+              @copied="copyDone(true)"
+              @error="copyDone(false)"
+            />
             <button
               v-if="downloadable"
               :class="BTN"
@@ -561,11 +580,13 @@ const ARROW =
             @error="((failed = true), (loading = false))"
           />
 
-          <LpIcon
-            v-if="loading && !failed && !covered(current)"
-            name="lucide:loader-circle"
-            :size="28"
-            class="absolute animate-spin text-white/50"
+          <!-- Mounted throughout and driven by `active`, so a cached image that
+               loads at once shows no spinner and a slow one keeps it long
+               enough not to blink. -->
+          <LpLoader
+            :active="loading && !failed && !covered(current)"
+            size="inline"
+            class="absolute text-[28px] text-white/50"
           />
 
           <button