@leavepulse/ui 0.45.1 → 0.46.0

package/dist/composables/useClipboard.js

@@ -1,5 +1,39 @@
 import { ref, onScopeDispose } from "vue";
 import { useToast } from "./useToast.js";
+async function writeAsync(text) {
+  if (typeof navigator === "undefined" || !navigator.clipboard) return false;
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function writeLegacy(text) {
+  if (typeof document === "undefined") return false;
+  const active = document.activeElement;
+  const selection = document.getSelection();
+  const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i)) : [];
+  const field = document.createElement("textarea");
+  field.value = text;
+  field.setAttribute("readonly", "");
+  field.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none";
+  document.body.appendChild(field);
+  field.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch {
+    ok = false;
+  }
+  field.remove();
+  if (selection) {
+    selection.removeAllRanges();
+    for (const range of ranges) selection.addRange(range);
+  }
+  active?.focus?.({ preventScroll: true });
+  return ok;
+}
 const COPIED_MS = 1400;
 function useClipboard() {
   const copied = ref(false);
@@ -8,8 +42,7 @@ function useClipboard() {
   async function copy(text, options = {}) {
     const { toast = false, errorToast = false } = options;
     try {
-      await navigator.clipboard?.writeText(text);
-      if (!navigator.clipboard) throw new Error("clipboard unavailable");
+      if (!await writeAsync(text) && !writeLegacy(text)) throw new Error("clipboard unavailable");
       copied.value = true;
       clearTimeout(timer);
       timer = setTimeout(() => copied.value = false, COPIED_MS);

package/dist/index.js

@@ -1,42 +1,42 @@
 import { _ } from "./chunks/LayoutCanvas-BkaGXTjx.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CJOYGZlI.js";
+import { _ as _2 } from "./chunks/LpAddressInput-iOJhmRzy.js";
 import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-CnfFVIwC.js";
 import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-B07Lf48e.js";
+import { _ as _6 } from "./chunks/LpAppShell-BmMYcEVx.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
-import { _ as _8 } from "./chunks/LpAvatar-C1XStdOo.js";
+import { _ as _8 } from "./chunks/LpAvatar-DeSb6H0c.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-CQJd73Gm.js";
 import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
-import { _ as _13 } from "./chunks/LpCard-C2IvucmX.js";
+import { _ as _13 } from "./chunks/LpCard-BdxkMXjo.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
 import { _ as _14 } from "./chunks/LpCheckbox-Bkj13CbW.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-ca7ANFyW.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-zz4VGkG4.js";
+import { _ as _16 } from "./chunks/LpColorPicker-BLqPX5Vw.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { parseCommandQuery, rankCommandItems } from "./components/commandSearch.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-BTVAR4tF.js";
-import { _ as _18 } from "./chunks/LpConfirmHost-Ci_uCHgQ.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-Ca-CTlxT.js";
+import { _ as _18 } from "./chunks/LpConfirmHost-BAaSaT2b.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _19 } from "./chunks/LpContextMenu-BqkAYa9X.js";
+import { _ as _19 } from "./chunks/LpContextMenu-1cKew_Dc.js";
 import { _ as _20 } from "./chunks/LpDatePicker-BrdFtSTy.js";
 import { _ as _21 } from "./chunks/LpDateRangePicker-Drd7EbIz.js";
 import { _ as _22 } from "./chunks/LpRangeCalendar-DZuaRV0W.js";
 import { clampRange, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _23 } from "./chunks/LpDisclosure-Cc23-JOT.js";
 import { _ as _24 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _25 } from "./chunks/LpDrawer-CfRhHwmE.js";
-import { _ as _26 } from "./chunks/LpDropdownMenu-DdJGQzPn.js";
+import { _ as _25 } from "./chunks/LpDrawer-CBFVD624.js";
+import { _ as _26 } from "./chunks/LpDropdownMenu-DrpJJBp0.js";
 import { default as default4 } from "./components/LpDropzone.vue.js";
 import { _ as _27 } from "./chunks/LpEmptyState-BJbZXC8D.js";
-import { _ as _28 } from "./chunks/LpFileTree-CNurOvkV.js";
+import { _ as _28 } from "./chunks/LpFileTree-bk5VjBey.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _29 } from "./chunks/LpFieldNotice-wtieLUTj.js";
 import { _ as _30 } from "./chunks/LpFormField-CtVYj6tO.js";
@@ -48,19 +48,19 @@ import { _ as _33 } from "./chunks/LpInput-D-YGQbEv.js";
 import { _ as _34 } from "./chunks/LpLightbox-DSDahF23.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _35 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _36 } from "./chunks/LpLogViewer-KypbgOyo.js";
+import { _ as _36 } from "./chunks/LpLogViewer-BDFXzvcl.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _37 } from "./chunks/LpMediaGallery-YKr-cQPN.js";
-import { _ as _38 } from "./chunks/LpModal-BzTVeNqe.js";
-import { _ as _39 } from "./chunks/LpModalNav-CjABSGCu.js";
-import { _ as _40 } from "./chunks/LpNotificationBell-CCwyJP5C.js";
+import { _ as _38 } from "./chunks/LpModal-JNa3B_Lr.js";
+import { _ as _39 } from "./chunks/LpModalNav-BAxC9et7.js";
+import { _ as _40 } from "./chunks/LpNotificationBell-DsqSyMwS.js";
 import { _ as _41 } from "./chunks/LpNumberField-B77O-z28.js";
 import { _ as _42 } from "./chunks/LpTimeField-Cqe7fXnh.js";
 import { _ as _43 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
 import { _ as _44 } from "./chunks/LpOtpInput-CziPF3Oq.js";
 import { _ as _45 } from "./chunks/LpPagination-BcDlo3r_.js";
 import { _ as _46 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
-import { _ as _47 } from "./chunks/LpPie-BEJ2SfI6.js";
+import { _ as _47 } from "./chunks/LpPie-BdSnta11.js";
 import { _ as _48 } from "./chunks/LpPhoneInput-BCbrrhgE.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _49 } from "./chunks/LpPopover-DCKeqiVn.js";
@@ -68,14 +68,14 @@ import { _ as _50 } from "./chunks/LpProgress-CBU1iI69.js";
 import { _ as _51 } from "./chunks/LpRadio-B5AfqTpZ.js";
 import { _ as _52 } from "./chunks/LpRadioGroup-DmEW0l78.js";
 import { _ as _53 } from "./chunks/LpRollingText-DB7upf-5.js";
-import { _ as _54 } from "./chunks/LpScrollArea-Bry1fdOM.js";
+import { _ as _54 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
 import { _ as _55 } from "./chunks/LpSegmented-C09EEam2.js";
 import { _ as _56 } from "./chunks/LpSection-tKEH0jYf.js";
 import { _ as _57 } from "./chunks/LpSelect-DNIL6MB9.js";
 import { _ as _58 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _59 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _60 } from "./chunks/LpSidebar-Bwws_X29.js";
+import { _ as _60 } from "./chunks/LpSidebar-DpEiGi8L.js";
 import { _ as _61 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _62 } from "./chunks/LpSlider-Cuzmrd7p.js";
 import { _ as _63 } from "./chunks/LpSparkline-CB80N8SJ.js";
@@ -89,7 +89,7 @@ import { _ as _68 } from "./chunks/LpTabs-29iW1XOx.js";
 import { _ as _69 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _70 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _71 } from "./chunks/LpThemeSwitcher-B4aVPbNC.js";
+import { _ as _71 } from "./chunks/LpThemeSwitcher-BbYFFT5w.js";
 import { _ as _72 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _73 } from "./chunks/LpToaster-DTtWuKvq.js";
 import { _ as _74 } from "./chunks/LpTooltip-CXVKcOXT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -594,6 +594,10 @@ const grouped = computed<{ name: string; items: Command[] }[]>(() => {
  */
 const expanded = ref(new Set<string>())
 const moreOf = new WeakMap<Command, string>()
+// The first row each "Show more" hides. Unfolding removes the "Show more" row
+// itself, so the highlight has to be handed to this one: an id that is gone
+// from the list sends the selection back to the top, and the list with it.
+const firstHidden = new WeakMap<Command, string>()
 
 /*
  * Folding hides at least two rows: a "Show 1 more" row takes the same space
@@ -609,6 +613,7 @@ function folded(name: string, items: Command[]): Command[] {
     keepOpen: true,
   }
   moreOf.set(more, name)
+  firstHidden.set(more, items[limit].id)
   return [...items.slice(0, limit), more]
 }
 
@@ -822,6 +827,7 @@ function run(c: Command | undefined) {
   // was hidden: the arrows carry on from where the fold was.
   const group = moreOf.get(c)
   if (group !== undefined) {
+    selectedId.value = firstHidden.get(c) ?? null
     expanded.value = new Set([...expanded.value, group])
     inputRef.value?.focus()
     return

package/src/components/LpContextMenu.vue

@@ -9,6 +9,7 @@
 import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from "reka-ui"
 import { computed } from "vue"
 import ContextMenuItems from "./ContextMenuItems.vue"
+import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
 
 export interface ContextMenuItemDef {
@@ -40,6 +41,17 @@ const props = defineProps<{
    * native-menu mode on that first click and swallow it.
    */
   always?: boolean
+  /**
+   * What the menu acts on, shown as a heading above the items: the row's name
+   * in a list of similar rows, so the user sees which one the right-click hit.
+   * Also names the menu for assistive tech.
+   */
+  title?: string
+  /** A muted second line under `title`, e.g. a version or a path. */
+  subtitle?: string
+  /** An icon beside the title, or `titleImage` for a picture (an avatar, a logo). */
+  titleIcon?: string
+  titleImage?: string
 }>()
 
 // With no items the trigger is disabled, so the element keeps the browser's
@@ -87,7 +99,13 @@ function returnFocus(event: Event) {
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-if="items.length">
-      <ContextMenuContent :collision-padding="8" :class="PANEL" @close-auto-focus="returnFocus">
+      <ContextMenuContent
+        :collision-padding="8"
+        :class="PANEL"
+        :aria-label="title"
+        @close-auto-focus="returnFocus"
+      >
+        <MenuTitle v-if="title" :title="title" :subtitle="subtitle" :icon="titleIcon" :image="titleImage" />
         <ContextMenuItems :items="items" :panel="PANEL" />
       </ContextMenuContent>
     </ContextMenuPortal>

package/src/components/LpDropdownMenu.vue

@@ -9,16 +9,25 @@ import {
 } from "reka-ui"
 import { POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
+import MenuTitle from "./MenuTitle.vue"
 
 export interface MenuItem {
   label: string
   icon?: string
   danger?: boolean
   separatorBefore?: boolean
+  disabled?: boolean
   onSelect?: () => void
 }
 
-defineProps<{ items: MenuItem[] }>()
+defineProps<{
+  items: MenuItem[]
+  /** A heading naming what the menu acts on; see LpContextMenu's `title`. */
+  title?: string
+  subtitle?: string
+  titleIcon?: string
+  titleImage?: string
+}>()
 </script>
 
 <template>
@@ -32,12 +41,15 @@ defineProps<{ items: MenuItem[] }>()
         :side-offset="6"
         align="end"
         :class="[POPOVER_PANEL, 'z-(--z-popover) min-w-44 p-1 outline-none']"
+        :aria-label="title"
       >
+        <MenuTitle v-if="title" :title="title" :subtitle="subtitle" :icon="titleIcon" :image="titleImage" />
         <template v-for="(item, i) in items" :key="i">
           <DropdownMenuSeparator v-if="item.separatorBefore" class="my-1 h-px bg-line" />
           <DropdownMenuItem
-            class="group/item flex cursor-pointer 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-[highlighted]:bg-brand-soft"
+            class="group/item flex cursor-pointer 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"
             :class="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?.()"
           >
             <LpIcon

package/src/components/LpDropzone.vue

@@ -23,7 +23,7 @@ export default { inheritAttrs: false }
  * invisible to a keyboard: nothing focusable, nothing that Enter activates, and
  * the file dialog unreachable without a mouse.
  */
-import { onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { useReveal } from "../composables/useReveal"
 import LpIcon from "./LpIcon.vue"
@@ -35,6 +35,13 @@ const props = withDefaults(
     /** Take more than one at a time. */
     multiple?: boolean
     disabled?: boolean
+    /**
+     * A drag the page itself cannot see is over the zone. Desktop shells
+     * (Tauri, Electron) often take file drags natively, and the page then gets
+     * no dragenter or dragover at all, only the shell's own events; the app
+     * hit-tests those and passes the answer here so the zone lights up the same.
+     */
+    dragOver?: boolean
     /**
      * Also accept a paste anywhere on the page, not only while focused.
      * Off by default: two zones both listening would each take the same
@@ -95,11 +102,12 @@ const input = ref<HTMLInputElement | null>(null)
  * may not — one stuck increment and the zone stays lit after the drag is long
  * gone, which is exactly what it did.
  */
-const over = ref(false)
+const pointerOver = ref(false)
+const over = computed(() => pointerOver.value || (props.dragOver && !props.disabled))
 
 function onDragOver(event: DragEvent) {
   if (props.disabled) return
-  over.value = true
+  pointerOver.value = true
   if (event.dataTransfer) event.dataTransfer.dropEffect = "copy"
 }
 
@@ -108,7 +116,7 @@ function onDragLeave(event: DragEvent) {
   // drag merely crossed a child, and the highlight stays.
   const to = event.relatedTarget as Node | null
   if (to && (event.currentTarget as HTMLElement).contains(to)) return
-  over.value = false
+  pointerOver.value = false
 }
 
 /** Does the file match `accept`? Mirrors the input's own matching so a drop
@@ -146,7 +154,7 @@ function take(list: FileList | File[] | null | undefined) {
 }
 
 function onDrop(event: DragEvent) {
-  over.value = false
+  pointerOver.value = false
   take(event.dataTransfer?.files)
 }
 

package/src/components/LpModal.vue

@@ -332,7 +332,7 @@ watch(
           {{ ariaLabel }}
         </DialogTitle>
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
-          <div class="flex flex-col gap-1">
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
             <DialogTitle class="text-base font-semibold text-ink">
               <slot name="title">{{ title }}</slot>
             </DialogTitle>
@@ -340,6 +340,12 @@ watch(
               {{ description }}
             </DialogDescription>
           </div>
+          <!-- Controls that act on the whole dialog (a period, a filter) sit
+               beside the close button, not inside the title: the title is a
+               heading, and a button in it would be read out as part of it. -->
+          <div v-if="$slots.actions" class="flex shrink-0 flex-wrap items-center justify-end gap-2">
+            <slot name="actions" />
+          </div>
           <!-- Marked so the auto-focus pass skips it: it is first in the DOM
                and last in usefulness. Still reachable by Tab and Escape. -->
           <DialogClose

package/src/components/LpModalNav.vue

@@ -211,6 +211,10 @@ const railPanel = computed(() => [
       </div>
     </template>
 
+    <template v-if="$slots.actions" #actions>
+      <slot name="actions" />
+    </template>
+
     <slot />
 
     <template v-if="$slots.footer" #footer>

package/src/components/LpScrollArea.vue

@@ -13,6 +13,7 @@ import {
   ScrollAreaThumb,
   ScrollAreaViewport,
 } from "reka-ui"
+import { prefersReducedMotion } from "../composables/easing"
 
 // `fade` softens whichever of the top/bottom edges currently has content beyond
 // it, so a clipped list reads as continuing rather than as cut off. On by
@@ -182,6 +183,29 @@ watch(
 
 onBeforeUnmount(stopEdgeWatch)
 
+/*
+ * A press on the bar beside the thumb. reka treats any press on the track as
+ * "put the thumb's middle under the pointer" and sets the scroll in one go,
+ * so a press that just missed the narrow thumb yanked the content by half a
+ * thumb, and a press further away teleported it. Like a native bar, a press
+ * off the thumb now pages one viewport towards the pointer, smoothly; the
+ * thumb itself has a hit area as wide as the bar (see its `before:`), so a
+ * press that meant to grab it does.
+ */
+function onTrackPointerDown(event: PointerEvent, axis: "x" | "y") {
+  const el = viewportEl.value
+  const bar = event.currentTarget as HTMLElement
+  const thumb = bar.querySelector<HTMLElement>("[data-lp-thumb]")
+  if (!el || !thumb || event.button !== 0 || thumb.contains(event.target as Node)) return
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  const rect = thumb.getBoundingClientRect()
+  const before = axis === "y" ? event.clientY < rect.top : event.clientX < rect.left
+  const step = (axis === "y" ? el.clientHeight : el.clientWidth) * 0.85 * (before ? -1 : 1)
+  const behavior = prefersReducedMotion() ? "auto" : "smooth"
+  el.scrollBy(axis === "y" ? { top: step, behavior } : { left: step, behavior })
+}
+
 function onThumbPointerDown() {
   dragging.value = true
   const stop = () => {
@@ -230,6 +254,7 @@ function onThumbPointerDown() {
       class="group z-1 flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
+      @pointerdown.capture="onTrackPointerDown($event, 'y')"
     >
       <!-- Sized with min-width, not width: reka sets an inline
            `width: var(--reka-scroll-area-thumb-width)` on the thumb, and for a
@@ -238,7 +263,8 @@ function onThumbPointerDown() {
            leaving an invisible thumb. A minimum wins over that without fighting
            the positioning reka owns. -->
       <ScrollAreaThumb
-        class="min-w-1 rounded-l-pill bg-brand/40 transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
+        data-lp-thumb
+        class="relative min-w-1 rounded-l-pill bg-brand/40 before:absolute before:inset-y-0 before:right-0 before:-left-2.5 before:content-[''] transition-[min-width,background-color] duration-[var(--duration-fast)] group-hover:min-w-1.5 group-hover:bg-brand"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>
@@ -247,9 +273,11 @@ function onThumbPointerDown() {
       orientation="horizontal"
       class="group z-1 flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
       :class="barFade"
+      @pointerdown.capture="onTrackPointerDown($event, 'x')"
     >
       <ScrollAreaThumb
-        class="min-h-1 rounded-t-pill bg-brand/40 transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
+        data-lp-thumb
+        class="relative min-h-1 rounded-t-pill bg-brand/40 before:absolute before:inset-x-0 before:bottom-0 before:-top-2.5 before:content-[''] transition-[min-height,background-color] duration-[var(--duration-fast)] group-hover:min-h-1.5 group-hover:bg-brand"
         @pointerdown="onThumbPointerDown"
       />
     </ScrollAreaScrollbar>

package/src/components/LpTable.vue

@@ -1098,7 +1098,7 @@ const barInsetTop = computed(() =>
   <LpScrollArea
     v-bind="scrollAttrs"
     :fade="false"
-    class="min-h-0 flex-1 rounded-card border border-line"
+    class="min-h-0 flex-1 rounded-card border border-line bg-surface"
     :style="load && floor ? { minHeight: `${floor + 2}px` } : undefined"
     :bar-inset-top="barInsetTop"
   >

package/src/components/MenuTitle.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/*
+ * The heading row of a menu: what the menu acts on, so a right-click on one of
+ * many look-alike rows says which one it caught before anything is chosen.
+ * Not an item: it takes no focus or highlight, and long names truncate rather
+ * than widening the panel. Internal: LpContextMenu and LpDropdownMenu render it
+ * from their `title` props.
+ */
+import LpIcon from "./LpIcon.vue"
+
+defineProps<{
+  title: string
+  subtitle?: string
+  icon?: string
+  image?: string
+}>()
+</script>
+
+<template>
+  <div class="flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2" aria-hidden="true">
+    <img v-if="image" :src="image" alt="" class="size-7 shrink-0 rounded-md object-cover" />
+    <span
+      v-else-if="icon"
+      class="grid size-7 shrink-0 place-items-center rounded-md bg-surface-soft text-muted"
+    >
+      <LpIcon :name="icon" :size="15" />
+    </span>
+    <span class="flex min-w-0 flex-col">
+      <span class="truncate text-sm font-medium text-ink">{{ title }}</span>
+      <span v-if="subtitle" class="truncate text-xs text-muted">{{ subtitle }}</span>
+    </span>
+  </div>
+  <div class="mb-1 h-px bg-line" role="presentation" />
+</template>

package/src/composables/useClipboard.ts

@@ -13,7 +13,9 @@ import { useToast } from "./useToast"
  *
  * Why every call is allowed to fail: the Clipboard API needs a secure context
  * and, in some browsers, a permission. It is absent over plain http, rejects
- * outside a user gesture, and is missing entirely in a non-DOM test runner. A
+ * outside a user gesture, and is missing entirely in a non-DOM test runner.
+ * Where it is missing or refuses, the old copy command is tried before
+ * giving up (see `writeLegacy`). A
  * copy that cannot happen is a disappointment, not an exception, and a rejected
  * promise reaching a component means an unhandled rejection in the console of
  * an app that did nothing wrong.
@@ -23,6 +25,51 @@ import { useToast } from "./useToast"
  * than any message, and the two are complementary rather than alternatives.
  */
 
+/** The Clipboard API, where there is one and it agrees. */
+async function writeAsync(text: string): Promise<boolean> {
+  if (typeof navigator === "undefined" || !navigator.clipboard) return false
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch {
+    return false
+  }
+}
+
+/*
+ * The old copy command, for where the Clipboard API is missing or refuses.
+ * Embedded Chromium (CEF in a Tauri or Electron-like shell) rejects
+ * `writeText` when the host answers no permission requests, and plain http
+ * has no API at all, while a copy command run inside the click still works
+ * there. It copies the selection, so a throwaway text field holds the text
+ * and the page's own selection and focus are put back afterwards.
+ */
+function writeLegacy(text: string): boolean {
+  if (typeof document === "undefined") return false
+  const active = document.activeElement as HTMLElement | null
+  const selection = document.getSelection()
+  const ranges = selection ? Array.from({ length: selection.rangeCount }, (_, i) => selection.getRangeAt(i)) : []
+  const field = document.createElement("textarea")
+  field.value = text
+  field.setAttribute("readonly", "")
+  field.style.cssText = "position:fixed;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none"
+  document.body.appendChild(field)
+  field.select()
+  let ok = false
+  try {
+    ok = document.execCommand("copy")
+  } catch {
+    ok = false
+  }
+  field.remove()
+  if (selection) {
+    selection.removeAllRanges()
+    for (const range of ranges) selection.addRange(range)
+  }
+  active?.focus?.({ preventScroll: true })
+  return ok
+}
+
 /** How long `copied` stays true — long enough to read, short enough to not linger. */
 const COPIED_MS = 1400
 
@@ -81,12 +128,7 @@ export function useClipboard(): UseClipboard {
   async function copy(text: string, options: CopyOptions = {}): Promise<boolean> {
     const { toast = false, errorToast = false } = options
     try {
-      // Optional-chained: `navigator.clipboard` is undefined, not throwing, on
-      // an insecure origin, and that should take the same path as a rejection.
-      await navigator.clipboard?.writeText(text)
-      // A missing API resolves `undefined` rather than rejecting, so confirm
-      // the write was actually possible before claiming it happened.
-      if (!navigator.clipboard) throw new Error("clipboard unavailable")
+      if (!(await writeAsync(text)) && !writeLegacy(text)) throw new Error("clipboard unavailable")
 
       copied.value = true
       clearTimeout(timer)