@leavepulse/ui 0.46.0 → 0.47.0

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/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>

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>