@leavepulse/ui 0.45.1 → 0.47.0

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/LpKeys.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/*
+ * A key combination drawn as keycaps: "Ctrl+K" is two caps, "G I" is G then
+ * I. Written the way LpShortcutsDialog reads combos, and drawn the same way,
+ * so a hint in a palette preview, a tooltip or a menu matches the reference.
+ *
+ *   <LpKeys combo="Ctrl+Shift+P" label="from anywhere" />
+ *
+ * On an Apple keyboard Ctrl and Alt read as the symbols printed on its keys.
+ */
+import { computed } from "vue"
+import { appleModifierLabel, useAppleKeyboard } from "../composables/useHotkeys"
+import { useLabels } from "../composables/useLpConfig"
+import { comboSteps } from "./keys"
+
+const props = withDefaults(
+  defineProps<{
+    /** "Ctrl+K", "Ctrl++", or a sequence "G I". Or keys already split. */
+    combo: string | string[]
+    /** Text after the caps, e.g. what the keys do. */
+    label?: string
+    size?: "sm" | "md"
+  }>(),
+  { size: "md" },
+)
+
+const text = useLabels("shortcuts", { then: "then" })
+const apple = useAppleKeyboard()
+
+const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : comboSteps(props.combo)))
+</script>
+
+<template>
+  <span class="lp-keys" :class="`lp-keys--${size}`">
+    <template v-for="(step, stepIndex) in steps" :key="stepIndex">
+      <span v-if="stepIndex" class="lp-keys__then">{{ text.then }}</span>
+      <kbd v-for="(key, index) in step" :key="`${key}-${index}`">{{ appleModifierLabel(key.trim(), apple) }}</kbd>
+    </template>
+    <span v-if="label || $slots.default" class="lp-keys__label"><slot>{{ label }}</slot></span>
+  </span>
+</template>
+
+<style scoped>
+.lp-keys {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3px;
+  color: var(--color-muted);
+}
+.lp-keys__then {
+  padding: 0 2px;
+  font-size: 0.68rem;
+}
+.lp-keys__label {
+  margin-left: 5px;
+  font-size: 0.75rem;
+}
+kbd {
+  display: inline-flex;
+  min-width: 20px;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border: 1px solid var(--color-line-strong);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
+  color: var(--color-muted-strong);
+  font-family: inherit;
+  font-size: 0.7rem;
+  line-height: 1.5;
+}
+.lp-keys--sm kbd {
+  min-width: 16px;
+  padding: 0 4px;
+  font-size: 0.65rem;
+}
+</style>

package/src/components/LpLightbox.vue

@@ -435,9 +435,12 @@ const ARROW =
 <template>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
     <DialogPortal>
+      <!-- Not `lp-scrim--nested` even over another layer: that variant drops
+           the scrim's blur because a nested dialog brings its own glass panel,
+           and a lightbox has none, so the drawer or dialog it opened from read
+           sharp around the picture. -->
       <DialogOverlay
         class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"
-        :class="{ 'lp-scrim--nested': layer.nested }"
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent

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/LpPaletteFacts.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+/*
+ * A short list of facts in a palette preview: a label, and what it is set to
+ * now. The tabs of a page, the fields of a settings section, a person's
+ * standing, the instance a world belongs to. An icon or a colour dot leads
+ * each row; `current` marks the one in effect.
+ *
+ *   <LpPaletteFacts
+ *     title="Now"
+ *     :items="[
+ *       { icon: 'lucide:server', label: 'Instance', value: 'Survival' },
+ *       { color: '#5865f2', label: 'Role colour', value: '#5865F2', mono: true },
+ *     ]"
+ *   />
+ *
+ * Values roll when they change while the row is on screen (a theme picked
+ * with keepOpen, a count that refreshed), through LpRollingText. The `value`
+ * slot draws a value of the app's own (chips, a switch) instead.
+ */
+import HighlightText from "./HighlightText.vue"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import type { PaletteFact } from "./commandPalette"
+
+withDefaults(
+  defineProps<{
+    items: PaletteFact[]
+    /** Small heading over the list. */
+    title?: string
+    /** Plain rows instead of soft tiles, for a list read as text. */
+    plain?: boolean
+  }>(),
+  { plain: false },
+)
+
+defineSlots<{
+  value?: (props: { item: PaletteFact; index: number }) => unknown
+}>()
+</script>
+
+<template>
+  <section class="lp-palette-facts" :class="{ 'lp-palette-facts--plain': plain }">
+    <p v-if="title" class="lp-palette-facts__title">{{ title }}</p>
+    <ul class="lp-palette-facts__list">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="lp-palette-facts__row"
+        :class="{ 'is-current': item.current }"
+        :aria-current="item.current || undefined"
+      >
+        <span v-if="item.color" class="lp-palette-facts__dot" :style="{ background: item.color }" />
+        <LpIcon v-else-if="item.icon" :name="item.icon" :size="15" class="lp-palette-facts__icon" />
+        <span class="lp-palette-facts__label">
+          <span class="lp-palette-facts__name"><HighlightText :text="item.label" /></span>
+          <span v-if="item.hint?.length" class="lp-palette-facts__hint"><HighlightText :text="item.hint" /></span>
+        </span>
+        <span
+          v-if="item.value !== undefined && item.value !== '' || $slots.value"
+          class="lp-palette-facts__value"
+          :class="{ 'lp-palette-facts__value--mono': item.mono }"
+        >
+          <slot name="value" :item="item" :index="index">
+            <LpRollingText v-if="item.value !== undefined" :value="item.value" align="end" />
+          </slot>
+        </span>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.lp-palette-facts {
+  min-width: 0;
+}
+.lp-palette-facts__title {
+  margin: 0 0 0.4rem;
+  color: var(--color-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.lp-palette-facts__list {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.lp-palette-facts__row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.4rem 0.6rem;
+  border-radius: var(--radius-control);
+  background: color-mix(in srgb, var(--color-ink) 3%, transparent);
+  color: var(--color-ink);
+  font-size: 0.8125rem;
+  transition: background-color var(--duration-fast, 150ms) ease;
+}
+.lp-palette-facts--plain .lp-palette-facts__row {
+  padding: 0.15rem 0;
+  background: transparent;
+}
+.lp-palette-facts__row.is-current {
+  background: var(--color-brand-soft);
+}
+.lp-palette-facts--plain .lp-palette-facts__row.is-current {
+  background: transparent;
+  color: var(--color-brand);
+}
+.lp-palette-facts__icon {
+  flex-shrink: 0;
+  color: var(--color-muted);
+  transition: color var(--duration-fast, 150ms) ease;
+}
+.is-current .lp-palette-facts__icon {
+  color: var(--color-brand);
+}
+.lp-palette-facts__dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  flex-shrink: 0;
+  margin: 0 0.15rem;
+  border-radius: 9999px;
+  box-shadow: 0 0 0 1px var(--color-line);
+}
+.lp-palette-facts__label {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  flex-direction: column;
+}
+.lp-palette-facts__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lp-palette-facts__hint {
+  margin-top: 1px;
+  color: var(--color-muted);
+  font-size: 0.75rem;
+  line-height: 1.45;
+}
+.lp-palette-facts__value {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 55%;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.lp-palette-facts__value :deep(.lp-roll) {
+  max-width: 100%;
+}
+.lp-palette-facts__value--mono {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+</style>

package/src/components/LpPaletteHeader.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+/*
+ * The head of a palette preview: what kind of thing this is (eyebrow), its
+ * name, a line under the name, and a lead paragraph. A picture or an icon
+ * sits beside the name; badges and other extras go in the default slot,
+ * between the name and the lead.
+ *
+ *   <LpPaletteHeader
+ *     eyebrow="Modrinth"
+ *     :title="hit.title"
+ *     :subtitle="hit.author"
+ *     :image="{ src: hit.iconUrl, fallback: initials }"
+ *     :lead="hit.description"
+ *   >
+ *     <LpBadge>{{ hit.version }}</LpBadge>
+ *   </LpPaletteHeader>
+ *
+ * Title, subtitle and lead take the preview slot's `highlight(text)` as well
+ * as a string, to mark what was typed:
+ *
+ *   <LpPaletteHeader :title="highlight(command.label)" />
+ *
+ * The picture goes through LpAvatar: it fades in once loaded and falls back
+ * to the initials or the icon when the link is dead.
+ */
+import { computed } from "vue"
+import LpAvatar from "./LpAvatar.vue"
+import LpIcon from "./LpIcon.vue"
+import HighlightText from "./HighlightText.vue"
+import type { HighlightPart } from "./commandSearch"
+import type { CommandImage } from "./LpCommandPalette.vue"
+
+const props = defineProps<{
+  eyebrow?: string
+  /** Text, or the preview slot's `highlight(text)` to mark the query. */
+  title?: string | HighlightPart[]
+  subtitle?: string | HighlightPart[]
+  lead?: string | HighlightPart[]
+  /** Icon beside the title, on a soft tile. */
+  icon?: string
+  /** Picture beside the title; wins over `icon`, which becomes its fallback. */
+  image?: string | CommandImage | null
+}>()
+
+const picture = computed<CommandImage | null>(() => {
+  if (!props.image) return null
+  const image = typeof props.image === "string" ? { src: props.image } : props.image
+  return { ...image, icon: image.icon ?? props.icon }
+})
+</script>
+
+<template>
+  <header class="lp-palette-header">
+    <div class="lp-palette-header__row">
+      <slot name="media">
+        <LpAvatar
+          v-if="picture"
+          :src="picture.src ?? undefined"
+          :alt="picture.alt ?? ''"
+          :fallback="picture.fallback"
+          :icon="picture.icon"
+          :shape="picture.shape ?? 'soft'"
+          :pixel-size="44"
+          class="lp-palette-header__media"
+        />
+        <span v-else-if="icon" class="lp-palette-header__tile">
+          <LpIcon :name="icon" :size="18" />
+        </span>
+      </slot>
+      <div class="lp-palette-header__text">
+        <p v-if="eyebrow" class="lp-palette-header__eyebrow">{{ eyebrow }}</p>
+        <h3 v-if="title?.length || $slots.title" class="lp-palette-header__title">
+          <slot name="title"><HighlightText v-if="title" :text="title" /></slot>
+        </h3>
+        <p v-if="subtitle?.length" class="lp-palette-header__subtitle"><HighlightText :text="subtitle" /></p>
+      </div>
+    </div>
+    <div v-if="$slots.default" class="lp-palette-header__extra"><slot /></div>
+    <p v-if="lead?.length || $slots.lead" class="lp-palette-header__lead">
+      <slot name="lead"><HighlightText v-if="lead" :text="lead" /></slot>
+    </p>
+  </header>
+</template>
+
+<style scoped>
+.lp-palette-header {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.lp-palette-header__row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.75rem;
+}
+.lp-palette-header__media {
+  flex-shrink: 0;
+}
+.lp-palette-header__tile {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  flex-shrink: 0;
+  place-items: center;
+  border-radius: var(--radius-control);
+  background: var(--color-brand-soft);
+  color: var(--color-brand);
+}
+.lp-palette-header__text {
+  min-width: 0;
+  flex: 1;
+}
+.lp-palette-header__eyebrow {
+  margin: 0 0 2px;
+  color: var(--color-muted);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.lp-palette-header__title {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  color: var(--color-ink);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.lp-palette-header__subtitle {
+  margin: 2px 0 0;
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.lp-palette-header__extra {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.lp-palette-header__lead {
+  margin: 0;
+  color: var(--color-muted-strong);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+  white-space: pre-line;
+}
+</style>

package/src/components/LpPalettePreview.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/*
+ * The body of LpCommandPalette's `#preview` slot. It spaces the blocks inside
+ * it (LpPaletteHeader, LpPaletteFacts, LpPaletteStats, LpKeys, anything of the
+ * app's own) and brings them in one after another, the way the palette's own
+ * pane brings in paragraphs. Every app that filled the slot wrote this same
+ * wrapper with the same stagger; it is one element here.
+ *
+ *   <template #preview="{ command, highlight }">
+ *     <LpPalettePreview>
+ *       <LpPaletteHeader :eyebrow="command.group" :title="highlight(command.label)" />
+ *       <LpPaletteFacts :items="rows" />
+ *     </LpPalettePreview>
+ *   </template>
+ *
+ * The pane remounts its body for every highlighted row, so the entrance plays
+ * per row; reduced motion shows the blocks at once.
+ */
+withDefaults(
+  defineProps<{
+    /** Space between blocks. */
+    gap?: "sm" | "md" | "lg"
+  }>(),
+  { gap: "md" },
+)
+</script>
+
+<template>
+  <div class="lp-palette-preview" :class="`lp-palette-preview--${gap}`">
+    <slot />
+  </div>
+</template>
+
+<style>
+.lp-palette-preview {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  color: var(--color-ink);
+}
+.lp-palette-preview--sm {
+  gap: 0.6rem;
+}
+.lp-palette-preview--md {
+  gap: 0.9rem;
+}
+.lp-palette-preview--lg {
+  gap: 1.25rem;
+}
+.lp-palette-preview > * {
+  min-width: 0;
+  animation: lp-palette-in 260ms var(--ease-emphasized, ease-out) both;
+}
+.lp-palette-preview > :nth-child(2) {
+  animation-delay: 40ms;
+}
+.lp-palette-preview > :nth-child(3) {
+  animation-delay: 80ms;
+}
+.lp-palette-preview > :nth-child(4) {
+  animation-delay: 120ms;
+}
+.lp-palette-preview > :nth-child(n + 5) {
+  animation-delay: 160ms;
+}
+@keyframes lp-palette-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-palette-preview > * {
+    animation: none;
+  }
+}
+</style>