@leavepulse/ui 0.45.1 → 0.47.0

package/src/components/LpPaletteStats.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/*
+ * A few figures in a palette preview, as tiles: mods and worlds in an
+ * instance, downloads and follows of a project, members online. A number
+ * turns to a new value through LpNumberFlow, text rolls through
+ * LpRollingText, so a figure that refreshes while the row is highlighted
+ * moves instead of blinking.
+ *
+ *   <LpPaletteStats :items="[
+ *     { label: 'Downloads', value: 1250000, compact: true },
+ *     { label: 'Latest', value: '1.21.4' },
+ *   ]" />
+ */
+import LpNumberFlow from "./LpNumberFlow.vue"
+import LpRollingText from "./LpRollingText.vue"
+import type { PaletteStat } from "./commandPalette"
+
+withDefaults(
+  defineProps<{
+    items: PaletteStat[]
+    /** Tiles per row. */
+    columns?: 2 | 3 | 4
+  }>(),
+  { columns: 2 },
+)
+</script>
+
+<template>
+  <dl class="lp-palette-stats" :style="{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }">
+    <div v-for="(item, index) in items" :key="`${item.label}-${index}`" class="lp-palette-stats__tile">
+      <dt>{{ item.label }}</dt>
+      <dd>
+        <LpNumberFlow
+          v-if="typeof item.value === 'number'"
+          :value="item.value"
+          :compact="item.compact"
+          :suffix="item.suffix"
+          :format="item.format"
+          :animate-on-mount="false"
+          grouped
+        />
+        <LpRollingText v-else :value="item.value" align="start" />
+      </dd>
+    </div>
+  </dl>
+</template>
+
+<style scoped>
+.lp-palette-stats {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+}
+.lp-palette-stats__tile {
+  min-width: 0;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-control);
+  background: color-mix(in srgb, var(--color-surface-soft) 55%, transparent);
+}
+dt {
+  overflow: hidden;
+  color: var(--color-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+dd {
+  display: flex;
+  min-width: 0;
+  margin: 2px 0 0;
+  color: var(--color-ink);
+  font-size: 1.125rem;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.3;
+}
+dd :deep(.lp-roll) {
+  max-width: 100%;
+}
+</style>

package/src/components/LpPaletteSwatches.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+/*
+ * A theme's colours as a strip of swatches on its own surface, for a palette
+ * preview of a theme picker: the row says the name, this shows what picking
+ * it would look like. Any CSS colour works.
+ *
+ *   <LpPaletteSwatches
+ *     :background="theme.colors.surface"
+ *     :colors="[theme.colors.ink, theme.colors.brand, theme.colors.accent]"
+ *   />
+ *
+ * A swatch that changes (the same row after a keepOpen pick) eases to its
+ * new colour.
+ */
+defineProps<{
+  colors: string[]
+  /** The surface the swatches sit on, usually the theme's own. */
+  background?: string
+  /** Accessible name of the strip, e.g. the theme's name. */
+  label?: string
+}>()
+</script>
+
+<template>
+  <div
+    class="lp-palette-swatches"
+    role="img"
+    :aria-label="label"
+    :style="{ background, gridTemplateColumns: `repeat(${Math.max(colors.length, 1)}, minmax(0, 1fr))` }"
+  >
+    <span v-for="(color, index) in colors" :key="index" :title="color" :style="{ background: color }" />
+  </div>
+</template>
+
+<style scoped>
+.lp-palette-swatches {
+  display: grid;
+  gap: 0.4rem;
+  padding: 0.7rem;
+  border: 1px solid var(--color-line);
+  border-radius: var(--radius-card);
+  transition: background-color var(--duration-medium, 240ms) ease;
+}
+.lp-palette-swatches span {
+  height: 2rem;
+  border-radius: var(--radius-control);
+  box-shadow: inset 0 0 0 1px rgb(128 128 128 / 0.25);
+  transition: background-color var(--duration-medium, 240ms) ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .lp-palette-swatches,
+  .lp-palette-swatches span {
+    transition: none;
+  }
+}
+</style>

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

@@ -16,12 +16,11 @@
  * look for keys rather than only in the console.
  */
 import { computed } from "vue"
+import LpKeys from "./LpKeys.vue"
 import LpModal from "./LpModal.vue"
 import {
   activeShortcuts,
-  appleModifierLabel,
   mergeShortcutGroups,
-  useAppleKeyboard,
   useHotkeys,
   type ShortcutGroup,
 } from "../composables/useHotkeys"
@@ -49,23 +48,9 @@ const props = withDefaults(
 
 const text = useLabels("shortcuts", {
   title: "Keyboard shortcuts",
-  then: "then",
   conflict: "Also bound elsewhere: only one of them runs",
   group: "General",
 })
-const apple = useAppleKeyboard()
-
-/*
- * One key per "+", except a "+" that is the key itself: "Ctrl++" is Ctrl and
- * plus, not Ctrl and two blanks.
- */
-function keysOf(chord: string): string[] {
-  return chord.split(/\+(?!$)/)
-}
-
-function stepsOf(combo: string): string[] {
-  return combo.trim().split(/\s+/)
-}
 
 const shown = computed(() => (props.live ? mergeShortcutGroups(props.groups, activeShortcuts.value) : props.groups))
 
@@ -112,12 +97,7 @@ useHotkeys(() =>
               >!</span>
             </dt>
             <dd>
-              <template v-for="(step, stepIndex) in stepsOf(entry.combo)" :key="`${step}-${stepIndex}`">
-                <span v-if="stepIndex" class="shortcut-then">{{ text.then }}</span>
-                <kbd v-for="(key, index) in keysOf(step)" :key="`${key}-${index}`">
-                  {{ appleModifierLabel(key.trim(), apple) }}
-                </kbd>
-              </template>
+              <LpKeys :combo="entry.combo" />
             </dd>
           </div>
         </dl>
@@ -181,33 +161,10 @@ useHotkeys(() =>
   cursor: help;
 }
 
-.shortcut-then {
-  align-self: center;
-  padding: 0 2px;
-  color: var(--color-muted);
-  font-size: 0.68rem;
-}
-
 .shortcut-row dd {
   display: flex;
   flex-shrink: 0;
   gap: 3px;
   margin: 0;
 }
-
-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;
-}
 </style>

package/src/components/LpTable.vue

@@ -909,7 +909,12 @@ const countText = computed(() => {
 })
 // A selectable table keeps the bar at all times (the row count until something
 // is selected): ticking the first row must not push the table down.
-const showBar = computed(() => props.summary || !!props.selectable || activeFilters.value.length > 0)
+// As documented on `summary`: the bar shows on its own while filters are
+// active or rows are selected, not merely because rows can be selected, which
+// left a lone "75 rows" over every selectable table.
+const showBar = computed(
+  () => props.summary || (!!props.selectable && props.selected.length > 0) || activeFilters.value.length > 0,
+)
 const filteredOut = computed(() => {
   if (loading.value || failed.value || displayRows.value.length) return false
   if (props.load) return Object.values(hiddenValues.value).some((set) => set.size)
@@ -1098,7 +1103,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/components/commandPalette.ts

@@ -0,0 +1,264 @@
+import { applyQueryFilters, parsePaletteQuery, type CommandSearchTerms, type HighlightPart, type SearchableCommand } from "./commandSearch"
+
+/*
+ * The parts of LpCommandPalette that are plain logic, kept out of the SFC so
+ * they can be tested without mounting a dialog.
+ */
+
+/** The fields of a command that decide whether the preview pane opens for it. */
+export interface PreviewableCommand {
+  preview?: string
+  excerpt?: string
+  noPreview?: boolean
+}
+
+/**
+ * Whether the pane has something to show for a row. `noPreview` on the row
+ * wins, then the app's `hasPreview`; without either, a row qualifies when the
+ * app supplied a `#preview` slot or the row carries text of its own.
+ */
+export function commandHasPreview<T extends PreviewableCommand>(
+  command: T | undefined,
+  options: { slot: boolean; hasPreview?: (command: T) => boolean },
+): boolean {
+  if (!command || command.noPreview) return false
+  if (options.hasPreview) return options.hasPreview(command)
+  return options.slot || !!(command.preview || command.excerpt)
+}
+
+/** One line of LpPaletteFacts: what it is, and what it is set to now. */
+export interface PaletteFact {
+  /** Text, or the preview slot's `highlight(text)` to mark the query. */
+  label: string | HighlightPart[]
+  /** Right-aligned value; a change rolls in rather than swapping. */
+  value?: string | number
+  /** A second, quieter line under the label. */
+  hint?: string | HighlightPart[]
+  icon?: string
+  /** A colour dot in place of the icon: a role colour, a status. */
+  color?: string
+  /** Marks the row that is in effect now: the current theme, the open tab. */
+  current?: boolean
+  /** Draw the value in the monospace face: ids, paths, versions. */
+  mono?: boolean
+}
+
+/** One tile of LpPaletteStats. */
+export interface PaletteStat {
+  label: string
+  /** A number counts to its new value; text rolls. */
+  value: number | string
+  /** Abbreviate a number: 1.2k, 3.4M. */
+  compact?: boolean
+  suffix?: string
+  format?: (value: number) => string
+}
+
+/** The fields of a command that let typing enter its mode. */
+export interface PrefixedCommand {
+  prefix?: string
+  children?: unknown
+  disabled?: boolean
+}
+
+/**
+ * The mode a query opens by its prefix, and the query left after it. Only a
+ * command with `children` and a non-empty `prefix` qualifies; letters match
+ * in any case, and the longest prefix wins, so "mr " and "m" can live side by
+ * side. Leading spaces are ignored: they are never what someone meant.
+ */
+export function matchModePrefix<T extends PrefixedCommand>(
+  query: string,
+  commands: readonly T[],
+): { command: T; rest: string } | null {
+  const typed = query.trimStart().toLowerCase()
+  let best: T | null = null
+  for (const command of commands) {
+    const prefix = command.prefix?.toLowerCase()
+    if (!prefix || !command.children || command.disabled || !typed.startsWith(prefix)) continue
+    if (!best || prefix.length > (best.prefix?.length ?? 0)) best = command
+  }
+  if (!best) return null
+  return { command: best, rest: query.trimStart().slice(best.prefix!.length) }
+}
+
+/** The fields of a command that make it a "search elsewhere" row. */
+export interface FallbackCommand extends SearchableCommand {
+  fallback?: boolean
+  hidden?: boolean
+}
+
+/**
+ * The fallback rows to show for a query, with their labels filled in. They
+ * appear only while positive words are typed, whatever those words are: the
+ * row offers to search somewhere else for them, so matching it against them
+ * would hide it exactly when it is needed. Exclusions and `in:` scopes still
+ * apply, to the row's own label, keywords and group. `{query}` in the label
+ * becomes the positive words, without the operators.
+ */
+export function fallbackRows<T extends FallbackCommand>(
+  items: readonly T[],
+  raw: string,
+): { command: T; label: string }[] {
+  const parsed = parsePaletteQuery(raw.trim())
+  if (!parsed.text) return []
+  return applyQueryFilters(
+    items.filter((c) => c.fallback),
+    parsed,
+  ).map((command) => ({ command, label: command.label.split("{query}").join(parsed.text) }))
+}
+
+/**
+ * A remembered pick that is not a root command: one chosen inside a mode, or
+ * a result a search fetched. It keeps what the row needs to be drawn again
+ * and where it was found, so the palette can find the live command next time
+ * (`path` through static children, or the app's `resolveRecent`), and fall
+ * back to its `href` when neither can.
+ */
+export interface RecentEntry {
+  id: string
+  label: string
+  description?: string
+  icon?: string
+  image?: string | { src?: string | null; alt?: string; fallback?: string; icon?: string; shape?: "circle" | "soft" | "square" }
+  href?: string
+  /** Ids of the modes it was picked in, outermost first. */
+  path: string[]
+  /** The command's `recentData`, kept as given for `resolveRecent`. */
+  data?: unknown
+}
+
+/** A stored history item: a root command id (the old format), or an entry. */
+export type RecentItem = string | RecentEntry
+
+/** The fields of a command a history entry is built from and resolved to. */
+export interface RecentSource {
+  id: string
+  label: string
+  description?: string
+  icon?: string
+  image?: RecentEntry["image"]
+  href?: string
+  recentData?: unknown
+  disabled?: boolean
+  children?: unknown
+}
+
+function isEntry(value: unknown): value is RecentEntry {
+  if (!value || typeof value !== "object") return false
+  const v = value as Record<string, unknown>
+  return (
+    typeof v.id === "string"
+    && typeof v.label === "string"
+    && Array.isArray(v.path)
+    && v.path.every((step) => typeof step === "string")
+  )
+}
+
+/** Stored history, with anything malformed dropped rather than trusted. */
+export function readRecent(stored: unknown): RecentItem[] {
+  if (!Array.isArray(stored)) return []
+  return stored.filter((v): v is RecentItem => typeof v === "string" || isEntry(v))
+}
+
+function recentKey(item: RecentItem): string {
+  return typeof item === "string" ? item : [...item.path, item.id].join("\u0000")
+}
+
+/**
+ * The history item for a pick. A root pick stays a bare id, the format older
+ * versions wrote and still read; anything deeper becomes an entry with only
+ * the fields that survive JSON.
+ */
+export function toRecentItem(command: RecentSource, path: readonly string[]): RecentItem {
+  if (!path.length) return command.id
+  const entry: RecentEntry = { id: command.id, label: command.label, path: [...path] }
+  if (command.description) entry.description = command.description
+  if (command.icon) entry.icon = command.icon
+  if (typeof command.image === "string") entry.image = command.image
+  else if (command.image) {
+    const { src, alt, fallback, icon, shape } = command.image
+    entry.image = { src, alt, fallback, icon, shape }
+  }
+  if (command.href) entry.href = command.href
+  if (command.recentData !== undefined) entry.data = command.recentData
+  return entry
+}
+
+/** The history with `item` first and any earlier copy of it dropped. */
+export function pushRecent(list: readonly RecentItem[], item: RecentItem, keep: number): RecentItem[] {
+  const key = recentKey(item)
+  return [item, ...list.filter((v) => recentKey(v) !== key)].slice(0, keep)
+}
+
+/**
+ * The live commands a history stands for, newest first. A bare id is looked
+ * up among the root commands; an entry is followed down its path through
+ * static children, then offered to `resolve` (for results a fetcher found),
+ * and last rebuilt from its own fields when it has an `href` to follow.
+ * Whatever none of these can find is skipped, so a stored history never
+ * resurrects something that cannot run.
+ */
+export function resolveRecentItems<T extends RecentSource>(
+  items: readonly RecentItem[],
+  commands: readonly T[],
+  options: { limit: number; resolve?: (entry: RecentEntry) => T | null | undefined; fromEntry: (entry: RecentEntry) => T },
+): { command: T; path: string[] }[] {
+  const out: { command: T; path: string[] }[] = []
+  const seen = new Set<string>()
+  for (const item of items) {
+    if (out.length >= options.limit) break
+    const key = recentKey(item)
+    if (seen.has(key)) continue
+    const found = typeof item === "string" ? commands.find((c) => c.id === item) : findEntry(item, commands, options)
+    if (!found || found.disabled || found.children) continue
+    seen.add(key)
+    out.push({ command: found, path: typeof item === "string" ? [] : [...item.path] })
+  }
+  return out
+}
+
+function findEntry<T extends RecentSource>(
+  entry: RecentEntry,
+  commands: readonly T[],
+  options: { resolve?: (entry: RecentEntry) => T | null | undefined; fromEntry: (entry: RecentEntry) => T },
+): T | undefined {
+  let level: readonly T[] | null = commands
+  for (const step of entry.path) {
+    const mode: T | undefined = level?.find((c) => c.id === step)
+    level = mode && Array.isArray(mode.children) ? (mode.children as T[]) : null
+  }
+  const live = level?.find((c) => c.id === entry.id)
+  if (live) return live
+  const resolved = options.resolve?.(entry)
+  if (resolved) return resolved
+  return entry.href ? options.fromEntry(entry) : undefined
+}
+
+/**
+ * Whether a recent row survives the operators typed so far. Recent rows show
+ * while no positive words are typed, so "-theme" or "in:recent" filters them
+ * like any other row; an `in:` scope matches the row's own group or the
+ * Recent heading it sits under.
+ */
+export function recentVisible(command: SearchableCommand, terms: CommandSearchTerms, recentLabel: string): boolean {
+  if (!applyQueryFilters([{ ...command, group: undefined }], { ...terms, groups: [] }).length) return false
+  return terms.groups.every((term) =>
+    [command.group, recentLabel].some((group) => group?.toLowerCase().includes(term)),
+  )
+}
+
+/**
+ * The name a mode's chip shows. `modeLabel` when given; otherwise the label,
+ * with a `{query}` placeholder and the quotes around it taken out, since the
+ * words it stood for are in the box now ("Search mods for "{query}"" reads
+ * "Search mods").
+ */
+export function modeChipLabel(command: { label: string; modeLabel?: string }): string {
+  if (command.modeLabel) return command.modeLabel
+  if (!command.label.includes("{query}")) return command.label
+  return command.label
+    .replace(/\s*["'“”«»]?\{query\}["'“”«»]?/g, "")
+    .replace(/\s+(for|in|on|:)$/i, "")
+    .trim()
+}