@leavepulse/ui 0.47.0 → 0.49.0

package/dist/chunks/LpRangeSlider-C1yF9-nP.js

@@ -0,0 +1,86 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, createElementBlock, Fragment, renderList, normalizeClass, toDisplayString, createCommentVNode } from "vue";
+import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpRangeSlider",
+  props: {
+    modelValue: { default: () => [0, 100] },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    minGap: { default: 0 },
+    disabled: { type: Boolean },
+    ariaLabels: {},
+    format: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function pair(v) {
+      return v && v.length >= 2 ? [v[0], v[1]] : null;
+    }
+    function onUpdate(v) {
+      const value = pair(v);
+      if (value) emit("update:modelValue", value);
+    }
+    function onCommit(v) {
+      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";
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SliderRoot), mergeProps({
+        "model-value": [props.modelValue[0], props.modelValue[1]],
+        min: __props.min,
+        max: __props.max,
+        step: __props.step,
+        "min-steps-between-thumbs": Math.round(__props.minGap / __props.step),
+        disabled: unref(field).disabled,
+        class: unref(rootClass)
+      }, unref(rest), {
+        "onUpdate:modelValue": onUpdate,
+        onValueCommit: onCommit
+      }), {
+        default: withCtx(() => [
+          createVNode(unref(SliderTrack), { class: "relative h-1.5 grow overflow-hidden rounded-pill bg-surface-soft" }, {
+            default: withCtx(() => [
+              createVNode(unref(SliderRange), { class: "absolute h-full rounded-pill bg-brand" })
+            ]),
+            _: 1
+          }),
+          (openBlock(), createElementBlock(Fragment, null, renderList([0, 1], (index) => {
+            return createVNode(unref(SliderThumb), {
+              key: index,
+              id: index === 0 ? unref(field).id : void 0,
+              "aria-label": __props.ariaLabels?.[index],
+              "aria-labelledby": __props.ariaLabels ? void 0 : unref(field).labelId,
+              "aria-describedby": unref(field).describedBy,
+              class: normalizeClass(thumbClass)
+            }, {
+              default: withCtx(() => [
+                __props.format ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass(labelClass)
+                }, toDisplayString(__props.format(props.modelValue[index])), 1)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1032, ["id", "aria-label", "aria-labelledby", "aria-describedby"]);
+          }), 64))
+        ]),
+        _: 1
+      }, 16, ["model-value", "min", "max", "step", "min-steps-between-thumbs", "disabled", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpVideoBackdrop-qWRYBOTQ.js

@@ -0,0 +1,299 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, normalizeStyle, createCommentVNode, createElementVNode, normalizeClass } from "vue";
+import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { planLoop, isNativeLoop, seamReached, seamProgress } from "../components/videoBackdrop.js";
+const _hoisted_1 = ["src"];
+const _hoisted_2 = ["src", "poster", "loop"];
+const _hoisted_3 = ["src"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpVideoBackdrop",
+  props: {
+    src: {},
+    poster: {},
+    start: { default: 0 },
+    end: {},
+    crossfade: { default: 0 },
+    rate: { default: 1 },
+    dim: { default: 0 },
+    fit: { default: "cover" },
+    paused: { type: Boolean, default: false },
+    playWithReducedMotion: { type: Boolean, default: false },
+    easePlayback: { default: 600 }
+  },
+  emits: ["loaded", "error"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const first = ref(null);
+    const second = ref(null);
+    const duration = ref(Number.NaN);
+    const ready = ref(false);
+    const active = ref(0);
+    const incoming = ref(null);
+    const incomingOpacity = ref(0);
+    const running = ref(false);
+    const throttle = ref(1);
+    const SLOWEST_RATE = 1 / 16;
+    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) {
+      return index === 0 ? first.value : second.value;
+    }
+    function setRate(video) {
+      if (!video) return;
+      video.defaultPlaybackRate = props.rate;
+      video.playbackRate = Math.max(SLOWEST_RATE, props.rate * throttle.value);
+    }
+    function applyRate() {
+      setRate(first.value);
+      setRate(second.value);
+    }
+    let ramp = 0;
+    function rampTo(target, ms, done) {
+      if (ramp) cancelAnimationFrame(ramp);
+      ramp = 0;
+      const from = throttle.value;
+      const span = ms * Math.abs(target - from);
+      if (span <= 0) {
+        throttle.value = target;
+        applyRate();
+        done?.();
+        return;
+      }
+      const began = performance.now();
+      const step = (now) => {
+        const k = Math.min(1, (now - began) / span);
+        throttle.value = from + (target - from) * easeTravel(k);
+        applyRate();
+        if (k < 1) ramp = requestAnimationFrame(step);
+        else {
+          ramp = 0;
+          done?.();
+        }
+      };
+      ramp = requestAnimationFrame(step);
+    }
+    function onMetadata(event) {
+      const video = event.target;
+      if (video !== first.value) return;
+      duration.value = video.duration;
+      emit("loaded", { duration: video.duration, width: video.videoWidth, height: video.videoHeight });
+    }
+    function onFirstFrame(event) {
+      const video = event.target;
+      if (video !== first.value || ready.value) return;
+      if (video.currentTime < plan.value.from) video.currentTime = plan.value.from;
+      ready.value = true;
+    }
+    function onError(event) {
+      if (event.target === first.value) emit("error");
+    }
+    function onEnded(event) {
+      const video = event.target;
+      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();
+        old.currentTime = plan.value.from;
+      }
+    }
+    let frame = 0;
+    function watchFrames() {
+      frame = 0;
+      if (!running.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 = 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 startElements() {
+      running.value = true;
+      applyRate();
+      void element(active.value)?.play().catch(() => {
+      });
+      if (incoming.value !== null) void element(incoming.value)?.play().catch(() => {
+      });
+      if (!frame) frame = requestAnimationFrame(watchFrames);
+    }
+    function stopElements() {
+      running.value = false;
+      first.value?.pause();
+      second.value?.pause();
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      const current = element(active.value);
+      if (still.value && current && ready.value) current.currentTime = plan.value.from;
+    }
+    function sync() {
+      const easing = props.easePlayback > 0 && !prefersReducedMotion() ? props.easePlayback : 0;
+      if (playing.value) {
+        if (!running.value) throttle.value = easing ? 0 : 1;
+        startElements();
+        rampTo(1, easing);
+        return;
+      }
+      if (!running.value || pageHidden.value || still.value || !easing) {
+        rampTo(throttle.value, 0);
+        stopElements();
+        return;
+      }
+      rampTo(0, easing, () => {
+        if (!playing.value) stopElements();
+      });
+    }
+    watch(playing, sync, { flush: "post" });
+    watch(() => props.rate, applyRate);
+    watch(
+      () => props.src,
+      () => {
+        ready.value = false;
+        duration.value = Number.NaN;
+        active.value = 0;
+        incoming.value = null;
+        incomingOpacity.value = 0;
+      }
+    );
+    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();
+    });
+    watch(
+      () => [plan.value.from, plan.value.to],
+      ([from, to]) => {
+        finishSeam();
+        const current = element(active.value);
+        if (current && (current.currentTime < from || current.currentTime > to)) current.currentTime = from;
+      }
+    );
+    function onMotionChange(event) {
+      reducedMotion.value = event.matches;
+    }
+    function onVisibility() {
+      pageHidden.value = document.hidden;
+    }
+    let motionQuery = null;
+    onMounted(() => {
+      applyRate();
+      motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+      motionQuery.addEventListener("change", onMotionChange);
+      document.addEventListener("visibilitychange", onVisibility);
+    });
+    onBeforeUnmount(() => {
+      if (frame) cancelAnimationFrame(frame);
+      if (ramp) cancelAnimationFrame(ramp);
+      motionQuery?.removeEventListener("change", onMotionChange);
+      document.removeEventListener("visibilitychange", onVisibility);
+    });
+    function layerStyle(index) {
+      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 isolate overflow-hidden"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: unref(rootClass),
+        "aria-hidden": "true"
+      }, unref(rest)), [
+        __props.poster ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: "absolute inset-0 size-full",
+          style: normalizeStyle({ objectFit: __props.fit }),
+          src: __props.poster,
+          alt: ""
+        }, null, 12, _hoisted_1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["absolute inset-0 transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", ready.value ? "opacity-100" : "opacity-0"])
+        }, [
+          createElementVNode("video", {
+            ref_key: "first",
+            ref: first,
+            class: "absolute inset-0 size-full",
+            style: normalizeStyle(layerStyle(0)),
+            src: __props.src,
+            poster: __props.poster,
+            loop: native.value,
+            muted: "",
+            playsinline: "",
+            preload: "auto",
+            disablepictureinpicture: "",
+            onLoadedmetadata: onMetadata,
+            onLoadeddata: onFirstFrame,
+            onEnded,
+            onError
+          }, null, 44, _hoisted_2),
+          blended.value ? (openBlock(), createElementBlock("video", {
+            key: 0,
+            ref_key: "second",
+            ref: second,
+            class: "absolute inset-0 size-full",
+            style: normalizeStyle(layerStyle(1)),
+            src: __props.src,
+            muted: "",
+            playsinline: "",
+            preload: "auto",
+            disablepictureinpicture: "",
+            onEnded
+          }, null, 44, _hoisted_3)) : createCommentVNode("", true)
+        ], 2),
+        createElementVNode("div", {
+          class: "absolute inset-0 bg-black transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+          style: normalizeStyle({ opacity: Math.min(1, Math.max(0, __props.dim)) })
+        }, null, 4)
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextarea", "LpThemeProvider", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpUptimeBar"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRangeSlider", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextarea", "LpThemeProvider", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpUptimeBar", "LpVideoBackdrop"];

package/dist/components/LpRangeSlider.vue.d.ts

@@ -0,0 +1,39 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    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;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (value: [number, number]) => any;
+    "update:modelValue": (value: [number, number]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    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;
+}> & Readonly<{
+    onChange?: ((value: [number, number]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: [number, number]) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    step: number;
+    modelValue: [number, number];
+    minGap: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpRangeSlider.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpRangeSlider-C1yF9-nP.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpVideoBackdrop.vue.d.ts

@@ -0,0 +1,66 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    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;
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: () => any;
+    loaded: (info: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    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;
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number;
+}> & Readonly<{
+    onError?: (() => any) | undefined;
+    onLoaded?: ((info: {
+        duration: number;
+        width: number;
+        height: number;
+    }) => any) | undefined;
+}>, {
+    dim: number;
+    crossfade: number;
+    start: number;
+    paused: boolean;
+    rate: number;
+    fit: "cover" | "contain" | "fill" | "none";
+    playWithReducedMotion: boolean;
+    easePlayback: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpVideoBackdrop.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpVideoBackdrop-qWRYBOTQ.js";
+export {
+  _sfc_main as default
+};

package/dist/components/videoBackdrop.d.ts

@@ -0,0 +1,37 @@
+/** The stretch of a clip that loops, and how long two passes overlap at the seam. */
+export interface LoopPlan {
+    /** Where every pass starts, in seconds of media time. */
+    from: number;
+    /** Where every pass ends, in seconds of media time. */
+    to: number;
+    /** Media seconds over which the next pass fades in over the ending one; 0 cuts. */
+    fade: number;
+}
+/**
+ * The loop a backdrop plays, from what was asked and what the clip has.
+ *
+ * `start` and `end` are clamped into the clip and put in order; a stretch
+ * shorter than `minLength` is widened from its start (or, at the clip's end,
+ * backwards), since a loop of a few frames reads as a flicker. The overlap
+ * is at most half the stretch: a seam longer than that would have the next
+ * pass begin before the current one had shown anything of its own.
+ */
+export declare function planLoop(duration: number, options?: {
+    start?: number;
+    end?: number;
+    crossfade?: number;
+    minLength?: number;
+}): LoopPlan;
+/** Whether the pass at `time` has reached the point where the next one must begin. */
+export declare function seamReached(plan: LoopPlan, time: number): boolean;
+/**
+ * How far the incoming pass is through the seam, 0 to 1, from its own media
+ * time: it starts at `from` and is fully in once it has played `fade` seconds.
+ * Measured on the media clock rather than the wall clock, so the fade keeps
+ * pace with a playback rate and holds still while playback stalls.
+ */
+export declare function seamProgress(plan: LoopPlan, incomingTime: number): number;
+/** Whether the whole clip loops with nothing cut and no overlap, which the media element does natively. */
+export declare function isNativeLoop(plan: LoopPlan, duration: number): boolean;
+/** "1:05", "0:07.5": a position on a clip as a range slider labels it. */
+export declare function formatClipTime(seconds: number, precise?: boolean): string;

package/dist/components/videoBackdrop.js

@@ -0,0 +1,40 @@
+function planLoop(duration, options = {}) {
+  if (!Number.isFinite(duration) || duration <= 0) return { from: 0, to: 0, fade: 0 };
+  const clamp = (value) => Math.min(duration, Math.max(0, value));
+  let from = clamp(options.start ?? 0);
+  let to = clamp(options.end ?? duration);
+  if (to < from) [from, to] = [to, from];
+  const minLength = Math.min(duration, Math.max(0, options.minLength ?? 0.5));
+  if (to - from < minLength) {
+    to = Math.min(duration, from + minLength);
+    from = Math.max(0, to - minLength);
+  }
+  const fade = Math.min(Math.max(0, options.crossfade ?? 0), (to - from) / 2);
+  return { from, to, fade };
+}
+function seamReached(plan, time) {
+  return plan.to > plan.from && time >= plan.to - plan.fade;
+}
+function seamProgress(plan, incomingTime) {
+  if (plan.fade <= 0) return 1;
+  return Math.min(1, Math.max(0, (incomingTime - plan.from) / plan.fade));
+}
+function isNativeLoop(plan, duration) {
+  return plan.fade === 0 && plan.from === 0 && plan.to >= duration;
+}
+function formatClipTime(seconds, precise = false) {
+  const safe = Math.max(0, Number.isFinite(seconds) ? seconds : 0);
+  const minutes = Math.floor(safe / 60);
+  const rest = safe - minutes * 60;
+  const whole = Math.floor(rest);
+  const tenth = Math.floor((rest - whole) * 10);
+  const secs = String(whole).padStart(2, "0");
+  return precise && tenth ? `${minutes}:${secs}.${tenth}` : `${minutes}:${secs}`;
+}
+export {
+  formatClipTime,
+  isNativeLoop,
+  planLoop,
+  seamProgress,
+  seamReached
+};

package/dist/index.d.ts

@@ -130,6 +130,10 @@ export { default as LpSidebar } from "./components/LpSidebar.vue";
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue";
 export { default as LpSkeleton } from "./components/LpSkeleton.vue";
 export { default as LpSlider } from "./components/LpSlider.vue";
+export { default as LpRangeSlider } from "./components/LpRangeSlider.vue";
+export { default as LpVideoBackdrop } from "./components/LpVideoBackdrop.vue";
+export { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop";
+export type { LoopPlan } from "./components/videoBackdrop";
 export { default as LpSparkline } from "./components/LpSparkline.vue";
 export { default as LpStat } from "./components/LpStat.vue";
 export { default as LpStepper } from "./components/LpStepper.vue";

package/dist/index.js

@@ -86,24 +86,27 @@ import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
 import { _ as _61 } from "./chunks/LpSidebar-DpEiGi8L.js";
 import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
-import { _ as _64 } from "./chunks/LpSparkline-CB80N8SJ.js";
-import { _ as _65 } from "./chunks/LpStat-B-7udBRP.js";
-import { _ as _66 } from "./chunks/LpStepper-C7XiVKZj.js";
-import { _ as _67 } from "./chunks/LpSwitch-OrcOJX9m.js";
+import { _ as _64 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
+import { _ as _65 } from "./chunks/LpVideoBackdrop-qWRYBOTQ.js";
+import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
+import { _ as _66 } from "./chunks/LpSparkline-CB80N8SJ.js";
+import { _ as _67 } from "./chunks/LpStat-B-7udBRP.js";
+import { _ as _68 } from "./chunks/LpStepper-C7XiVKZj.js";
+import { _ as _69 } from "./chunks/LpSwitch-OrcOJX9m.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
-import { _ as _68 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
-import { _ as _69 } from "./chunks/LpTabs-29iW1XOx.js";
-import { _ as _70 } from "./chunks/LpTagsInput-D1SuqbhB.js";
+import { _ as _70 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
+import { _ as _71 } from "./chunks/LpTabs-29iW1XOx.js";
+import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _71 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _72 } from "./chunks/LpThemeSwitcher-BbYFFT5w.js";
-import { _ as _73 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _74 } from "./chunks/LpToaster-DTtWuKvq.js";
-import { _ as _75 } from "./chunks/LpTooltip-CXVKcOXT.js";
-import { _ as _76 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _77 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
-import { _ as _78 } from "./chunks/LpUptimeBar-ugcv25xj.js";
+import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
+import { _ as _74 } from "./chunks/LpThemeSwitcher-BbYFFT5w.js";
+import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
+import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
+import { _ as _77 } from "./chunks/LpTooltip-CXVKcOXT.js";
+import { _ as _78 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
+import { _ as _79 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";
+import { _ as _80 } from "./chunks/LpUptimeBar-ugcv25xj.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -132,7 +135,7 @@ import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
-import { _ as _79 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
+import { _ as _81 } from "./chunks/LpThemeProvider-Be4r2TQX.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -234,6 +237,7 @@ export {
   _52 as LpRadio,
   _53 as LpRadioGroup,
   _23 as LpRangeCalendar,
+  _64 as LpRangeSlider,
   _54 as LpRollingText,
   _55 as LpScrollArea,
   _57 as LpSection,
@@ -245,24 +249,25 @@ export {
   _61 as LpSidebar,
   _62 as LpSkeleton,
   _63 as LpSlider,
-  _64 as LpSparkline,
-  _65 as LpStat,
-  _66 as LpStepper,
-  _67 as LpSwitch,
+  _66 as LpSparkline,
+  _67 as LpStat,
+  _68 as LpStepper,
+  _69 as LpSwitch,
   default12 as LpTable,
-  _68 as LpTableOfContents,
-  _69 as LpTabs,
-  _70 as LpTagsInput,
-  _71 as LpTextarea,
-  _79 as LpThemeProvider,
-  _72 as LpThemeSwitcher,
-  _73 as LpTilt,
+  _70 as LpTableOfContents,
+  _71 as LpTabs,
+  _72 as LpTagsInput,
+  _73 as LpTextarea,
+  _81 as LpThemeProvider,
+  _74 as LpThemeSwitcher,
+  _75 as LpTilt,
   _43 as LpTimeField,
-  _74 as LpToaster,
-  _75 as LpTooltip,
-  _76 as LpTooltipProvider,
-  _77 as LpTopologyCanvas,
-  _78 as LpUptimeBar,
+  _76 as LpToaster,
+  _77 as LpTooltip,
+  _78 as LpTooltipProvider,
+  _79 as LpTopologyCanvas,
+  _80 as LpUptimeBar,
+  _65 as LpVideoBackdrop,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -321,6 +326,7 @@ export {
   findHotkeyConflicts,
   flagEmoji,
   formatAddress,
+  formatClipTime,
   formatColor,
   formatModified,
   formatRange,
@@ -337,6 +343,7 @@ export {
   i2 as isBrokenBackdropEngine,
   isInternalHref,
   isLight,
+  isNativeLoop,
   layoutController,
   l as light,
   j as lime,
@@ -367,6 +374,7 @@ export {
   parsePaletteQuery,
   parseTheme,
   pendingHotkey,
+  planLoop,
   m as prefersDarkScheme,
   prefersReducedMotion,
   presets,
@@ -392,6 +400,8 @@ export {
   ringWindow,
   r as rose,
   sameRange,
+  seamProgress,
+  seamReached,
   sequenceProgress,
   serializeConfig,
   serializeLayout,

package/package.json

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

package/src/component-names.ts

@@ -63,6 +63,7 @@ export const COMPONENT_NAMES = [
   "LpRadio",
   "LpRadioGroup",
   "LpRangeCalendar",
+  "LpRangeSlider",
   "LpRollingText",
   "LpScrollArea",
   "LpSection",
@@ -91,5 +92,6 @@ export const COMPONENT_NAMES = [
   "LpTooltip",
   "LpTooltipProvider",
   "LpTopologyCanvas",
-  "LpUptimeBar"
+  "LpUptimeBar",
+  "LpVideoBackdrop"
 ] as const

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

@@ -0,0 +1,384 @@
+<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).
+ * - Easing in and out of a pause (`easePlayback`): the picture slows to a
+ *   standstill and gathers speed again instead of freezing and lurching. A
+ *   hidden tab and reduced motion still stop at once.
+ *
+ * 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 { easeTravel, 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
+    /** Milliseconds over which a pause slows the picture to a halt and a resume brings it back up; 0 stops dead. */
+    easePlayback?: number
+  }>(),
+  {
+    start: 0,
+    crossfade: 0,
+    rate: 1,
+    dim: 0,
+    fit: "cover",
+    paused: false,
+    playWithReducedMotion: false,
+    easePlayback: 600,
+  },
+)
+
+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)
+
+/** The elements are playing, which includes slowing down into a pause. */
+const running = ref(false)
+/** Share of `rate` played at, 0 to 1: below 1 while easing into or out of a pause. */
+const throttle = ref(1)
+
+/**
+ * The slowest rate a pause eases down to before the element is paused.
+ * Chromium refuses a rate below a sixteenth; past that point the picture is
+ * all but still anyway.
+ */
+const SLOWEST_RATE = 1 / 16
+
+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 = Math.max(SLOWEST_RATE, props.rate * throttle.value)
+}
+
+function applyRate() {
+  setRate(first.value)
+  setRate(second.value)
+}
+
+let ramp = 0
+/** Move `throttle` to `target` over `ms`, eased, then call `done`. */
+function rampTo(target: number, ms: number, done?: () => void) {
+  if (ramp) cancelAnimationFrame(ramp)
+  ramp = 0
+  const from = throttle.value
+  const span = ms * Math.abs(target - from)
+  if (span <= 0) {
+    throttle.value = target
+    applyRate()
+    done?.()
+    return
+  }
+  const began = performance.now()
+  const step = (now: number) => {
+    const k = Math.min(1, (now - began) / span)
+    throttle.value = from + (target - from) * easeTravel(k)
+    applyRate()
+    if (k < 1) ramp = requestAnimationFrame(step)
+    else {
+      ramp = 0
+      done?.()
+    }
+  }
+  ramp = requestAnimationFrame(step)
+}
+
+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 (!running.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 startElements() {
+  running.value = true
+  applyRate()
+  void element(active.value)?.play().catch(() => {})
+  if (incoming.value !== null) void element(incoming.value)?.play().catch(() => {})
+  if (!frame) frame = requestAnimationFrame(watchFrames)
+}
+
+function stopElements() {
+  running.value = false
+  first.value?.pause()
+  second.value?.pause()
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+  // A still shows the stretch's first frame, not wherever the clip stopped.
+  const current = element(active.value)
+  if (still.value && current && ready.value) current.currentTime = plan.value.from
+}
+
+function sync() {
+  const easing = props.easePlayback > 0 && !prefersReducedMotion() ? props.easePlayback : 0
+  if (playing.value) {
+    // A resume from a standstill gathers speed from the slowest rate.
+    if (!running.value) throttle.value = easing ? 0 : 1
+    startElements()
+    rampTo(1, easing)
+    return
+  }
+  // Nobody sees a hidden tab, and a still is asked for outright: both stop at once.
+  if (!running.value || pageHidden.value || still.value || !easing) {
+    rampTo(throttle.value, 0)
+    stopElements()
+    return
+  }
+  rampTo(0, easing, () => {
+    if (!playing.value) stopElements()
+  })
+}
+
+watch(playing, sync, { flush: "post" })
+watch(() => props.rate, applyRate)
+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(() => {
+  applyRate()
+  motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+  motionQuery.addEventListener("change", onMotionChange)
+  document.addEventListener("visibilitychange", onVisibility)
+})
+
+onBeforeUnmount(() => {
+  if (frame) cancelAnimationFrame(frame)
+  if (ramp) cancelAnimationFrame(ramp)
+  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,
+  }
+}
+
+// `isolate`: the element fading in at the seam is raised over the one going
+// out with a z-index, and without a stacking context of its own here that
+// z-index lifted it over the page's content too, so text laid on the backdrop
+// faded away at every seam.
+const { class: rootClass, attrs: rest } = useMergedAttrs(
+  "pointer-events-none absolute inset-0 isolate 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>

package/src/components/videoBackdrop.ts

@@ -0,0 +1,73 @@
+/*
+ * The parts of LpVideoBackdrop that are plain arithmetic, kept out of the SFC
+ * so they can be tested without a media element.
+ */
+
+/** The stretch of a clip that loops, and how long two passes overlap at the seam. */
+export interface LoopPlan {
+  /** Where every pass starts, in seconds of media time. */
+  from: number
+  /** Where every pass ends, in seconds of media time. */
+  to: number
+  /** Media seconds over which the next pass fades in over the ending one; 0 cuts. */
+  fade: number
+}
+
+/**
+ * The loop a backdrop plays, from what was asked and what the clip has.
+ *
+ * `start` and `end` are clamped into the clip and put in order; a stretch
+ * shorter than `minLength` is widened from its start (or, at the clip's end,
+ * backwards), since a loop of a few frames reads as a flicker. The overlap
+ * is at most half the stretch: a seam longer than that would have the next
+ * pass begin before the current one had shown anything of its own.
+ */
+export function planLoop(
+  duration: number,
+  options: { start?: number; end?: number; crossfade?: number; minLength?: number } = {},
+): LoopPlan {
+  if (!Number.isFinite(duration) || duration <= 0) return { from: 0, to: 0, fade: 0 }
+  const clamp = (value: number) => Math.min(duration, Math.max(0, value))
+  let from = clamp(options.start ?? 0)
+  let to = clamp(options.end ?? duration)
+  if (to < from) [from, to] = [to, from]
+  const minLength = Math.min(duration, Math.max(0, options.minLength ?? 0.5))
+  if (to - from < minLength) {
+    to = Math.min(duration, from + minLength)
+    from = Math.max(0, to - minLength)
+  }
+  const fade = Math.min(Math.max(0, options.crossfade ?? 0), (to - from) / 2)
+  return { from, to, fade }
+}
+
+/** Whether the pass at `time` has reached the point where the next one must begin. */
+export function seamReached(plan: LoopPlan, time: number): boolean {
+  return plan.to > plan.from && time >= plan.to - plan.fade
+}
+
+/**
+ * How far the incoming pass is through the seam, 0 to 1, from its own media
+ * time: it starts at `from` and is fully in once it has played `fade` seconds.
+ * Measured on the media clock rather than the wall clock, so the fade keeps
+ * pace with a playback rate and holds still while playback stalls.
+ */
+export function seamProgress(plan: LoopPlan, incomingTime: number): number {
+  if (plan.fade <= 0) return 1
+  return Math.min(1, Math.max(0, (incomingTime - plan.from) / plan.fade))
+}
+
+/** Whether the whole clip loops with nothing cut and no overlap, which the media element does natively. */
+export function isNativeLoop(plan: LoopPlan, duration: number): boolean {
+  return plan.fade === 0 && plan.from === 0 && plan.to >= duration
+}
+
+/** "1:05", "0:07.5": a position on a clip as a range slider labels it. */
+export function formatClipTime(seconds: number, precise = false): string {
+  const safe = Math.max(0, Number.isFinite(seconds) ? seconds : 0)
+  const minutes = Math.floor(safe / 60)
+  const rest = safe - minutes * 60
+  const whole = Math.floor(rest)
+  const tenth = Math.floor((rest - whole) * 10)
+  const secs = String(whole).padStart(2, "0")
+  return precise && tenth ? `${minutes}:${secs}.${tenth}` : `${minutes}:${secs}`
+}

package/src/index.ts

@@ -180,6 +180,10 @@ export { default as LpSidebar } from "./components/LpSidebar.vue"
 export type { SidebarItem, SidebarSection } from "./components/LpSidebar.vue"
 export { default as LpSkeleton } from "./components/LpSkeleton.vue"
 export { default as LpSlider } from "./components/LpSlider.vue"
+export { default as LpRangeSlider } from "./components/LpRangeSlider.vue"
+export { default as LpVideoBackdrop } from "./components/LpVideoBackdrop.vue"
+export { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop"
+export type { LoopPlan } from "./components/videoBackdrop"
 export { default as LpSparkline } from "./components/LpSparkline.vue"
 export { default as LpStat } from "./components/LpStat.vue"
 export { default as LpStepper } from "./components/LpStepper.vue"