@leavepulse/ui 0.46.0 → 0.48.0

package/src/components/LpRangeSlider.vue

@@ -0,0 +1,96 @@
+<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">
+/*
+ * Two thumbs on one track: a range rather than a value. A price "from – to",
+ * a stretch of a clip to loop, a span of years. The model is `[low, high]`;
+ * the thumbs cannot cross, and `minGap` keeps them that many units apart.
+ * Each thumb can carry a label above it (`format`), shown while it is hovered,
+ * focused or dragged, so the numbers are readable without a second readout.
+ */
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from "reka-ui"
+import { useFieldControl } from "../composables/useField"
+import { useMergedAttrs } from "../composables/useMergedClass"
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: [number, number]
+    min?: number
+    max?: number
+    step?: number
+    /** The least distance the two ends keep between them, in model units. */
+    minGap?: number
+    disabled?: boolean
+    /** Accessible names for the two thumbs when there's no visible label. */
+    ariaLabels?: [string, string]
+    /** Label over each thumb while it is in use: `(value) => "1:05"`. */
+    format?: (value: number) => string
+  }>(),
+  { modelValue: () => [0, 100], min: 0, max: 100, step: 1, minGap: 0 },
+)
+
+const emit = defineEmits<{
+  // fires live while dragging
+  (e: "update:modelValue", value: [number, number]): void
+  // fires once on release (reka valueCommit) — for commit-vs-preview splits
+  (e: "change", value: [number, number]): void
+}>()
+
+function pair(v: number[] | undefined): [number, number] | null {
+  return v && v.length >= 2 ? [v[0]!, v[1]!] : null
+}
+function onUpdate(v: number[] | undefined) {
+  const value = pair(v)
+  if (value) emit("update:modelValue", value)
+}
+function onCommit(v: number[] | undefined) {
+  const value = pair(v)
+  if (value) emit("change", value)
+}
+
+const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }))
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55",
+)
+
+const thumbClass =
+  "group/thumb relative block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
+const labelClass =
+  "pointer-events-none absolute bottom-full left-1/2 mb-1.5 -translate-x-1/2 translate-y-0.5 rounded-control bg-surface-raised px-1.5 py-0.5 text-[11px] whitespace-nowrap text-ink tabular-nums opacity-0 shadow-sm transition-[opacity,translate] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-hover/thumb:translate-y-0 group-hover/thumb:opacity-100 group-focus-visible/thumb:translate-y-0 group-focus-visible/thumb:opacity-100 group-active/thumb:translate-y-0 group-active/thumb:opacity-100 motion-reduce:transition-none"
+</script>
+
+<template>
+  <SliderRoot
+    :model-value="[props.modelValue[0], props.modelValue[1]]"
+    :min="min"
+    :max="max"
+    :step="step"
+    :min-steps-between-thumbs="Math.round(minGap / step)"
+    :disabled="field.disabled"
+    :class="rootClass"
+    v-bind="rest"
+    @update:model-value="onUpdate"
+    @value-commit="onCommit"
+  >
+    <SliderTrack class="relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft">
+      <SliderRange class="absolute h-full rounded-pill bg-brand" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="index in [0, 1] as const"
+      :key="index"
+      :id="index === 0 ? field.id : undefined"
+      :aria-label="ariaLabels?.[index]"
+      :aria-labelledby="ariaLabels ? undefined : field.labelId"
+      :aria-describedby="field.describedBy"
+      :class="thumbClass"
+    >
+      <span v-if="format" :class="labelClass">{{ format(props.modelValue[index]) }}</span>
+    </SliderThumb>
+  </SliderRoot>
+</template>

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)

package/src/components/LpVideoBackdrop.vue

@@ -0,0 +1,303 @@
+<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 muted, looping video behind something: a page's hero, a panel, an app's
+ * wallpaper. It fills the box it is put in (position it, the backdrop is
+ * `absolute inset-0` inside it) and keeps out of the way of what sits on top:
+ * no controls, no pointer events, no sound.
+ *
+ * Over a plain `<video loop muted autoplay>` it adds what a backdrop needs:
+ *
+ * - A stretch of the clip to loop (`start`, `end`), so a recording's dull
+ *   opening or closing seconds never show.
+ * - A seam without a jump (`crossfade`): a second element starts the next
+ *   pass at `start` shortly before the current one ends and fades in over it,
+ *   paced on its own media clock, so a clip whose last frame does not match
+ *   its first still loops without a visible cut.
+ * - Speed (`rate`) and a darkening veil (`dim`) for text laid over it.
+ * - Pausing where motion is unwanted: `paused`, a hidden tab, and the
+ *   system's reduced-motion setting, which shows the first frame of the
+ *   stretch instead (`playWithReducedMotion` overrides it).
+ *
+ * The second element exists only while there is a seam to blend, so a plain
+ * loop decodes one stream. Both play the same `src`: a URL the media element
+ * fetches by range, or an object URL of a file already in memory.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { isNativeLoop, planLoop, seamProgress, seamReached } from "./videoBackdrop"
+
+const props = withDefaults(
+  defineProps<{
+    src: string
+    /** Shown until the first frame decodes, and instead of motion when it is unwanted. */
+    poster?: string
+    /** Where the looped stretch begins, in seconds. */
+    start?: number
+    /** Where it ends, in seconds; the clip's end when unset. */
+    end?: number
+    /** Seconds of media over which the next pass fades in at the seam; 0 cuts straight back. */
+    crossfade?: number
+    /** Playback rate: 0.5 is half speed. */
+    rate?: number
+    /** A dark veil over the picture, 0 to 1, for text laid on top. */
+    dim?: number
+    fit?: "cover" | "contain" | "fill" | "none"
+    paused?: boolean
+    /** Keep playing when the system asks for reduced motion (it shows a still otherwise). */
+    playWithReducedMotion?: boolean
+  }>(),
+  { start: 0, crossfade: 0, rate: 1, dim: 0, fit: "cover", paused: false, playWithReducedMotion: false },
+)
+
+const emit = defineEmits<{
+  /** The clip's length and picture size, once known: what a trim control needs. */
+  (e: "loaded", info: { duration: number; width: number; height: number }): void
+  /** The clip could not be played (missing file, a codec this engine lacks). */
+  (e: "error"): void
+}>()
+
+const first = ref<HTMLVideoElement | null>(null)
+const second = ref<HTMLVideoElement | null>(null)
+const duration = ref(Number.NaN)
+const ready = ref(false)
+/** Which element carries the current pass. */
+const active = ref<0 | 1>(0)
+/** The element fading in over it at the seam, and how far it has come. */
+const incoming = ref<0 | 1 | null>(null)
+const incomingOpacity = ref(0)
+
+const reducedMotion = ref(prefersReducedMotion())
+const pageHidden = ref(typeof document !== "undefined" && document.hidden)
+
+const plan = computed(() =>
+  planLoop(duration.value, { start: props.start, end: props.end, crossfade: props.crossfade }),
+)
+const native = computed(() => isNativeLoop(plan.value, duration.value))
+const blended = computed(() => plan.value.fade > 0)
+const still = computed(() => reducedMotion.value && !props.playWithReducedMotion)
+const playing = computed(() => ready.value && !props.paused && !pageHidden.value && !still.value)
+
+function element(index: 0 | 1) {
+  return index === 0 ? first.value : second.value
+}
+
+function setRate(video: HTMLVideoElement | null) {
+  if (!video) return
+  // `defaultPlaybackRate` too: a reload of the source resets the rate to it.
+  video.defaultPlaybackRate = props.rate
+  video.playbackRate = props.rate
+}
+
+function onMetadata(event: Event) {
+  const video = event.target as HTMLVideoElement
+  if (video !== first.value) return
+  duration.value = video.duration
+  emit("loaded", { duration: video.duration, width: video.videoWidth, height: video.videoHeight })
+}
+
+function onFirstFrame(event: Event) {
+  const video = event.target as HTMLVideoElement
+  if (video !== first.value || ready.value) return
+  // A clip whose stretch starts later is moved there before it shows.
+  if (video.currentTime < plan.value.from) video.currentTime = plan.value.from
+  ready.value = true
+}
+
+function onError(event: Event) {
+  if (event.target === first.value) emit("error")
+}
+
+/** The pass ran out without the seam being caught (frames are not watched in a hidden tab). */
+function onEnded(event: Event) {
+  const video = event.target as HTMLVideoElement
+  if (video !== element(active.value)) return
+  video.currentTime = plan.value.from
+  if (playing.value) void video.play().catch(() => {})
+}
+
+function finishSeam() {
+  const done = incoming.value
+  if (done === null) return
+  const old = element(active.value)
+  active.value = done
+  incoming.value = null
+  incomingOpacity.value = 0
+  if (old) {
+    old.pause()
+    // Parked at the start, so the next seam begins on a decoded frame.
+    old.currentTime = plan.value.from
+  }
+}
+
+let frame = 0
+function watchFrames() {
+  frame = 0
+  if (!playing.value) return
+  const current = element(active.value)
+  const loop = plan.value
+  if (current && !native.value) {
+    if (current.currentTime < loop.from - 0.05) current.currentTime = loop.from
+    if (!blended.value) {
+      if (current.currentTime >= loop.to) current.currentTime = loop.from
+    } else if (incoming.value === null && seamReached(loop, current.currentTime)) {
+      const next: 0 | 1 = active.value === 0 ? 1 : 0
+      const video = element(next)
+      if (video) {
+        setRate(video)
+        if (Math.abs(video.currentTime - loop.from) > 0.05) video.currentTime = loop.from
+        incoming.value = next
+        incomingOpacity.value = 0
+        void video.play().catch(() => {})
+      }
+    }
+    if (incoming.value !== null) {
+      const video = element(incoming.value)
+      incomingOpacity.value = video ? seamProgress(loop, video.currentTime) : 1
+      if (incomingOpacity.value >= 1) finishSeam()
+    }
+  }
+  frame = requestAnimationFrame(watchFrames)
+}
+
+function sync() {
+  const current = element(active.value)
+  const other = element(active.value === 0 ? 1 : 0)
+  if (playing.value) {
+    void current?.play().catch(() => {})
+    if (incoming.value !== null) void other?.play().catch(() => {})
+    if (!frame) frame = requestAnimationFrame(watchFrames)
+    return
+  }
+  current?.pause()
+  other?.pause()
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+  // A still shows the stretch's first frame, not wherever the clip stopped.
+  if (still.value && current && ready.value) current.currentTime = plan.value.from
+}
+
+watch(playing, sync, { flush: "post" })
+watch(() => props.rate, () => {
+  setRate(first.value)
+  setRate(second.value)
+})
+watch(
+  () => props.src,
+  () => {
+    ready.value = false
+    duration.value = Number.NaN
+    active.value = 0
+    incoming.value = null
+    incomingOpacity.value = 0
+  },
+)
+// With the seam turned off the second element unmounts; if it was carrying
+// the pass, the first takes over from the same moment before it goes.
+watch(blended, (on) => {
+  if (on) return
+  const carrier = second.value
+  if (active.value === 1 && carrier && first.value) first.value.currentTime = carrier.currentTime
+  active.value = 0
+  incoming.value = null
+  incomingOpacity.value = 0
+  sync()
+})
+
+// A new stretch takes effect at once rather than at the next seam.
+watch(
+  () => [plan.value.from, plan.value.to] as const,
+  ([from, to]) => {
+    finishSeam()
+    const current = element(active.value)
+    if (current && (current.currentTime < from || current.currentTime > to)) current.currentTime = from
+  },
+)
+
+function onMotionChange(event: MediaQueryListEvent) {
+  reducedMotion.value = event.matches
+}
+function onVisibility() {
+  pageHidden.value = document.hidden
+}
+let motionQuery: MediaQueryList | null = null
+
+onMounted(() => {
+  setRate(first.value)
+  setRate(second.value)
+  motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+  motionQuery.addEventListener("change", onMotionChange)
+  document.addEventListener("visibilitychange", onVisibility)
+})
+
+onBeforeUnmount(() => {
+  if (frame) cancelAnimationFrame(frame)
+  motionQuery?.removeEventListener("change", onMotionChange)
+  document.removeEventListener("visibilitychange", onVisibility)
+})
+
+function layerStyle(index: 0 | 1) {
+  const fading = incoming.value === index
+  return {
+    objectFit: props.fit,
+    zIndex: fading ? 1 : 0,
+    opacity: fading ? incomingOpacity.value : index === active.value ? 1 : 0,
+  }
+}
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "pointer-events-none absolute inset-0 overflow-hidden",
+)
+</script>
+
+<template>
+  <div :class="rootClass" aria-hidden="true" v-bind="rest">
+    <!-- Under the video, which fades in over it: removing a still laid on top
+         would flash the page between the two. -->
+    <img v-if="poster" class="absolute inset-0 size-full" :style="{ objectFit: fit }" :src="poster" alt="" />
+    <div
+      class="absolute inset-0 transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+      :class="ready ? 'opacity-100' : 'opacity-0'"
+    >
+      <video
+        ref="first"
+        class="absolute inset-0 size-full"
+        :style="layerStyle(0)"
+        :src="src"
+        :poster="poster"
+        :loop="native"
+        muted
+        playsinline
+        preload="auto"
+        disablepictureinpicture
+        @loadedmetadata="onMetadata"
+        @loadeddata="onFirstFrame"
+        @ended="onEnded"
+        @error="onError"
+      />
+      <video
+        v-if="blended"
+        ref="second"
+        class="absolute inset-0 size-full"
+        :style="layerStyle(1)"
+        :src="src"
+        muted
+        playsinline
+        preload="auto"
+        disablepictureinpicture
+        @ended="onEnded"
+      />
+    </div>
+    <div
+      class="absolute inset-0 bg-black transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+      :style="{ opacity: Math.min(1, Math.max(0, dim)) }"
+    />
+  </div>
+</template>