hexo-theme-stellar 2.0.0-rc.5 → 2.0.0

package/scripts/lib/regions.js

@@ -61,7 +61,10 @@ function resolveRegion(layers, region, options = {}) {
     result.brand = false;
     result.menu = [];
   }
-  if (region === "leftbar") result.footer = { actions: [] };
+  if (region === "leftbar") {
+    result.menuColumns = 1;
+    result.footer = { actions: [] };
+  }
   for (const layer of layers) {
     const current = regionLayer(layer?.[region]);
     if (!current) continue;
@@ -72,6 +75,9 @@ function resolveRegion(layers, region, options = {}) {
     if (["topbar", "leftbar"].includes(region) && Array.isArray(current.menu)) {
       result.menu = current.menu.map(clone);
     }
+    if (region === "leftbar" && current.menuColumns != null) {
+      result.menuColumns = current.menuColumns;
+    }
     if (region === "leftbar" && Array.isArray(current.footer?.actions)) {
       result.footer.actions = current.footer.actions.map(clone);
     }
@@ -112,6 +118,7 @@ function resolveRegions(options = {}) {
         menu: clone(state.menu)
       } : {}),
       ...(region === "leftbar" ? {
+        menuColumns: state.menuColumns,
         defaultState: options.defaultState || "expanded",
         footer: clone(state.footer)
       } : {})

package/scripts/lib/source-config.js

@@ -7,6 +7,11 @@ const snapshots = new WeakMap();
 
 function sourcePathForData(key) { return `source/_data/${key}.yml`; }
 function sourcePathForPage(page) { return page.source ? `source/${page.source}` : (page.path || "<page>"); }
+// hexo-front-matter 只识别 LF；Hexo 宿主通过 hexo-fs 读取源码时会去除 BOM 并规范化 CRLF，
+// 直接读取源码必须保持一致，否则 Windows 上的 CRLF 内容会丢失全部 Front Matter。
+function readSourceText(file) {
+  return fs.readFileSync(file, "utf8").replace(/^\uFEFF/, "").replace(/\r\n/g, "\n");
+}
 function sourceCache(ctx) {
   if (!snapshots.has(ctx)) snapshots.set(ctx, new Map());
   return snapshots.get(ctx);
@@ -29,7 +34,7 @@ function readFrontMatter(ctx, page) {
   const stamp = [stat.ino, stat.size, stat.mtimeNs, stat.ctimeNs].join(":");
   const previous = cache.get(page.source);
   if (previous?.stamp === stamp) return previous.config;
-  const config = frontMatter.parse(fs.readFileSync(file, "utf8"));
+  const config = frontMatter.parse(readSourceText(file));
   delete config._content;
   cache.set(page.source, { stamp, config });
   return config;

package/scripts/schema/config-rules.js

@@ -156,6 +156,7 @@ const CONFIG_RULES = Object.freeze([
   ["leftbar.default_state", { values: ["expanded", "collapsed"] }],
   ["leftbar.enabled", { type: ["boolean"] }],
   ["leftbar.brand", regionBrand(leftbarBrandProperties)],
+  ["leftbar.menu_columns", { minimum: 1, maximum: 5, validator: "non_negative_integer" }],
   ["leftbar.menu", { validator: "menu_items", items: menuItem }],
   ["leftbar.footer.actions", { validator: "footer_actions", items: footerAction }],
   ["leftbar.widgets", { items: widgetItems }],
@@ -169,6 +170,7 @@ const CONFIG_RULES = Object.freeze([
   ["profiles.*.topbar.widgets", { type: ["array", "null"], defaultValue: null, items: widgetItems }],
   ["profiles.*.leftbar.enabled", { type: ["boolean", "null"], defaultValue: null }],
   ["profiles.*.leftbar.brand", inheritedRegionBrand(leftbarBrandProperties)],
+  ["profiles.*.leftbar.menu_columns", { type: ["number", "null"], defaultValue: null, minimum: 1, maximum: 5, validator: "nullable_non_negative_integer" }],
   ["profiles.*.leftbar.menu", { type: ["array", "null"], defaultValue: null, validator: "menu_items", items: menuItem }],
   ["profiles.*.leftbar.footer.actions", { type: ["array", "null"], defaultValue: null, validator: "footer_actions", items: footerAction }],
   ["profiles.*.leftbar.widgets", { type: ["array", "null"], defaultValue: null, items: widgetItems }],
@@ -274,6 +276,7 @@ const CONFIG_RULES = Object.freeze([
   ["services.contributors.provider", { values: ["github"] }],
   ["services.contributors.github.repositories", { validator: "contributor_repositories", items: contributorRepository }],
   ["services.github.*", { validator: "absolute_http_url" }],
+  ["services.gravatar.base_url", { validator: "absolute_http_url" }],
   ["services.github_card.provider", { values: ["github_readme_stats"] }],
   ["services.github_card.github_readme_stats", { runtimeKey: "github_readme_stats" }],
   ["services.github_card.github_readme_stats.endpoint", { type: ["string"], validator: "absolute_http_url" }],

package/scripts/schema/content-config-rules.js

@@ -127,6 +127,7 @@ const CONTENT_OVERRIDE_DEFINITIONS = [
   ["leftbar.brand.ghuser", ["string", "null"], literal(null)],
   ["leftbar.brand.search", ["boolean", "null"], literal(null)],
   ["leftbar.brand.href", ["string", "null"], literal(null)],
+  ["leftbar.menu_columns", ["number", "null"], literal(null), { minimum: 1, maximum: 5 }],
   ["leftbar.menu", ["array", "null"], literal(null), { items: MENU_ITEMS }],
   ["leftbar.footer", "object", literal({}), { boundary: "sealed" }],
   ["leftbar.footer.actions", ["array", "null"], literal(null), { items: ACTION_ITEMS }],
@@ -172,6 +173,8 @@ const COLLECTION_TARGET_DEFINITIONS = [
   ["hero.enabled", ["boolean", "null"], literal(null)],
   ["hero.background", "object", literal({}), { boundary: "sealed" }],
   ["hero.background.image", ["string", "null"], literal(null)],
+  ["hero.background.video", ["string", "null"], literal(null)],
+  ["hero.background.parallax", "number", literal(0.2), { minimum: 0, maximum: 1 }],
   ["hero.background.effect", ["object", "null"], literal(null), { boundary: "registered_schema" }],
   ["hero.preview", ["object", "null"], literal(null), { boundary: "sealed" }],
   ["hero.preview.type", ["string", "null"], literal(null), { values: ["terminal", "image"] }],
@@ -209,6 +212,7 @@ const FRONT_MATTER_TARGET_DEFINITIONS = [
   ["tagline", ["string", "null"], literal(null)],
   ["banner", "object", literal({}), { boundary: "sealed" }],
   ["banner.enabled", ["boolean", "null"], literal(null)],
+  ["banner.background", ["boolean", "null"], literal(null)],
   ["banner.avatar", ["string", "null"], literal(null)],
   ["banner.headline", ["string", "null"], literal(null)],
   ["banner.tagline", ["string", "null"], literal(null)],

package/scripts/schema/content-config-schema.js

@@ -166,6 +166,7 @@ function targetNode(target) {
     ...(target.boundary === "sealed" ? { sealed: true } : {}),
     ...(target.values ? { values: clone(target.values) } : {}),
     ...(target.minimum !== undefined ? { minimum: target.minimum } : {}),
+    ...(target.maximum !== undefined ? { maximum: target.maximum } : {}),
     ...(target.exclusiveMinimum !== undefined ? { exclusiveMinimum: target.exclusiveMinimum } : {})
   };
 }
@@ -271,6 +272,7 @@ function decorateSharedSchemas(schema) {
     schema.properties[region].properties.brand.properties.href.validator = "nullable_safe_navigation_url";
     schema.properties[region].properties.menu.validator = "menu_items";
   }
+  schema.properties.leftbar.properties.menu_columns.validator = "nullable_non_negative_integer";
   schema.properties.leftbar.properties.footer.properties.actions.validator = "footer_actions";
 
   const effect = schema.properties.hero?.properties.background?.properties.effect;

package/scripts/schema/model-schema.js

@@ -206,6 +206,7 @@ function regionConfigSchemas(factory) {
       schema.type = ["object", "boolean", "null"];
       return schema;
     })(),
+    menuColumns: field("number", { example: 1 }),
     menu: array(menuItem, { example: [] }),
     footer: object({
       actions: array(actionItem, { example: [] })
@@ -232,6 +233,7 @@ function bannerSchema(factory) {
   const { field, object } = factory;
   return object({
     enabled: field("boolean", { example: true }),
+    background: field("boolean", { example: true }),
     avatar: field("string", { example: "/avatar.webp" }),
     headline: field("string", { example: "开始使用 Stellar" }),
     tagline: field("string", { example: "十分钟搭好站点" })
@@ -253,6 +255,8 @@ function heroSchema(factory, options = {}) {
     enabled: field("boolean", { example: true }),
     background: object({
       image: field("string", { example: "/hero.webp", consumers: options.pathConsumers }),
+      video: field("string", { example: "/hero.mp4", consumers: options.pathConsumers }),
+      parallax: field("number", { example: 0.2 }),
       effect: object({
         type: field("string", { example: "galaxy" }),
         options: field("object", {

package/source/css/_common/base.styl

@@ -20,6 +20,7 @@ hr
 
 img
   max-width: 100%
+  height: auto
 
 li
   font-size: 'calc(%s - 1px)' % var(--fs-content)

package/source/css/_common/input.styl

@@ -9,6 +9,8 @@ input.copy-area
   font-weight: $fw-700
   color: var(--text-p3)
 
+// 圆环与圆点画在同一个背景层上：元素落在非整数像素位置时，border 圆环与内部盒子会被
+// 分别对齐，Firefox 下圆点最多偏离圆心 1 个物理像素，因此不用 border 绘制圆环。
 input.ui-radio
   -webkit-appearance: none
   -moz-appearance: none
@@ -19,25 +21,20 @@ input.ui-radio
   width: 16px
   height: 16px
   margin: 0
-  border: 2px solid var(--text-p3)
+  border: 0
   border-radius: 50%
   corner-shape: round
-  background: none
+  --radio-ring: var(--text-p3)
+  --radio-dot-size: 0
+  // 外环：16px 内取 2px 环宽（半径 8px → 6px）；圆点：8px（半径 4px）
+  background-image: radial-gradient(circle closest-side, transparent 0 5.875px, var(--radio-ring) 6.125px 100%), radial-gradient(circle closest-side, var(--theme) 0 3.875px, transparent 4.125px)
+  background-position: center, center
+  background-repeat: no-repeat, no-repeat
+  background-size: 16px 16px, var(--radio-dot-size) var(--radio-dot-size)
   cursor: pointer
-  &:before
-    content: ""
-    display: block
-    width: 8px
-    height: 8px
-    margin: 2px
-    border-radius: 50%
-    background: var(--theme)
-    transform: scale(0)
   &:checked
-    border-color: var(--theme)
-  &:checked:before
-    background: var(--theme)
-    transform: scale(1)
+    --radio-ring: var(--theme)
+    --radio-dot-size: 8px
   &:focus-visible
     outline: 2px solid var(--theme)
     outline-offset: 2px

package/source/css/_common/loading.styl

@@ -41,3 +41,20 @@ svg.loading
 .article-footer
   .loading-wrap
     background: none
+
+.loading-wrap.navigation-loading
+  position: fixed
+  top: calc(env(safe-area-inset-top, 0px) + 1rem)
+  left: 50%
+  transform: translateX(-50%)
+  z-index: 1000
+  display: flex
+  align-items: center
+  gap: .5rem
+  padding: .5rem 1rem
+  background: var(--card)
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .12)
+  pointer-events: none
+  .lazy-icon
+    flex-shrink: 0
+    margin: 0

package/source/css/_components/pages/settings.styl

@@ -54,7 +54,6 @@
   grid-column: 1 / -1
   min-width: 0
 
-.settings-provider-note,
 .settings-empty
   margin: 0
   color: var(--text-p2)

package/source/css/_components/partial/cover.styl

@@ -78,6 +78,9 @@
     inset: 0
     overflow: hidden
     background: var(--background)
+    &.has-parallax
+      top: var(--hero-parallax-inset, 0%)
+      bottom: var(--hero-parallax-inset, 0%)
     &.image
       .wiki-cover-background-image,
       .wiki-cover-background-blur
@@ -101,6 +104,23 @@
         inset: 0
         pointer-events: none
         background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--background) 100%)
+    &.has-video
+      background: #000000
+      .wiki-cover-background-video
+        display: block
+        position: absolute
+        z-index: 2
+        inset: 0
+        width: 100%
+        height: 100%
+        object-fit: cover
+        pointer-events: none
+      .wiki-cover-background-overlay
+        position: absolute
+        z-index: 3
+        inset: 0
+        pointer-events: none
+        background: rgba(black, .15)
     &.has-effect
       &:not(.image)
         background: var(--hero-effect-background, #000000)

package/source/css/_components/sidebar/nav-area.styl

@@ -9,3 +9,13 @@
   .menu
     .ui-collection__item
       font-size: $fs-15
+
+.site-region--leftbar .widget-instance--menu .ui-collection[data-layout='grid']
+  --ui-grid-min: 0px
+  &[data-variant='icon']
+    .ui-collection__item
+      padding-inline: 0
+    .ui-collection__content
+      display: none
+    .ui-collection__initial
+      display: block

package/source/css/_components/sidebar/search.styl

@@ -252,10 +252,62 @@ html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .s
   background: var(--card)
   box-shadow: $boxshadow-card-float
   overflow: hidden
+  // 打开动画随 [open] 触发；关闭动画由 main.js 添加 .is-closing 并在动画结束后调用 close()
+  &[open]
+    animation: search-dialog-in 0.24s ease-out backwards
+  &.is-closing
+    animation: search-dialog-out 0.18s ease-in both
   &::backdrop
     background: rgba(black, .38)
     backdrop-filter: blur(8px)
     -webkit-backdrop-filter: blur(8px)
+    animation: search-backdrop-in 0.24s ease-out backwards
+  &.is-closing::backdrop
+    animation: search-backdrop-out 0.18s ease-in both
+
+@keyframes search-dialog-in
+  from
+    opacity: 0
+    transform: translateY(8px) scale(.97)
+  to
+    opacity: 1
+    transform: none
+
+@keyframes search-dialog-out
+  from
+    opacity: 1
+    transform: none
+  to
+    opacity: 0
+    transform: translateY(8px) scale(.97)
+
+@keyframes search-backdrop-in
+  from
+    opacity: 0
+  to
+    opacity: 1
+
+@keyframes search-backdrop-out
+  from
+    opacity: 1
+  to
+    opacity: 0
+
+@keyframes search-dialog-in-fluid
+  from
+    opacity: 0
+    transform: translateY(16px)
+  to
+    opacity: 1
+    transform: none
+
+@keyframes search-dialog-out-fluid
+  from
+    opacity: 1
+    transform: none
+  to
+    opacity: 0
+    transform: translateY(16px)
 
 .search-dialog__panel
   box-sizing: border-box
@@ -359,6 +411,9 @@ html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .s
 
 html[data-search-open]
   overflow: hidden
+  // 锁定滚动会移除常驻滚动条槽位，按 main.js 实测宽度补位，避免页面内容宽度变化后重排
+  body
+    padding-right: var(--stellar-scrollbar-gutter, 0px)
 
 @media screen and (max-width: $device-tablet)
   .search-dialog
@@ -367,6 +422,11 @@ html[data-search-open]
     max-height: none
     border: 0
     border-radius: 0
+    // 全屏浮层不做缩放，避免露出被裁切的边缘
+    &[open]
+      animation-name: search-dialog-in-fluid
+    &.is-closing
+      animation-name: search-dialog-out-fluid
   .search-dialog__panel
     height: 100%
     padding: unquote('max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))')
@@ -375,6 +435,10 @@ html[data-search-open]
 
 @media (prefers-reduced-motion: reduce)
   .search-dialog,
-  .search-dialog::backdrop
+  .search-dialog[open],
+  .search-dialog.is-closing,
+  .search-dialog::backdrop,
+  .search-dialog[open]::backdrop,
+  .search-dialog.is-closing::backdrop
     animation: none
     transition: none

package/source/css/_components/widgets/toc.styl

@@ -38,7 +38,7 @@
     top: 4px
     left: 0
     width: 4px
-    height: unquote('max(0px, calc(var(--toc-active-height, 8px) - 8px))')
+    height: calc(var(--toc-active-height, 8px) - 8px)
     border-radius: 4px
     background: var(--theme)
     opacity: var(--toc-active-opacity, 0)

package/source/css/_components/wiki-card.styl

@@ -185,7 +185,9 @@
     height: 2.5rem
     app-icon()
     background: var(--block)
-    color: var(--text-p2)
+    // 未配置 icon 时的默认图标：颜色跟随封面平均色自适应（深色封面显示为接近白色）。
+    // --text-banner 只在有封面时由 adaptive-text 写入 .wiki-card-info，无封面时回退到次要文字色。
+    color: var(--text-banner, var(--text-p2))
     img
       width: 100%
       height: 100%

package/source/js/main.js

@@ -103,6 +103,10 @@ const rightbarDrawerQuery = '(max-width: 1180px)';
 let shellDrawerTrigger = null;
 let searchDialogTrigger = null;
 let searchDialogRestoreFocus = true;
+// 退场动画的安全兜底时长，需大于 search.styl 中 search-dialog-out 的 0.18s
+const searchCloseFallbackDelay = 260;
+let searchCloseTimer = null;
+let searchCloseListener = null;
 let shellInputModality = 'pointer';
 
 function regionElement(region) {
@@ -244,6 +248,11 @@ function applySearchScope(dialog, value, refresh = true) {
   }
 }
 
+function searchMotionEnabled() {
+  if (typeof window.matchMedia !== 'function') return true;
+  return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
 function configureSearchScope(dialog, trigger) {
   const group = dialog?.querySelector('.search-dialog__scope');
   if (!group) return false;
@@ -265,10 +274,30 @@ function configureSearchScope(dialog, trigger) {
   return true;
 }
 
-function closeSearch() {
-  const dialog = searchDialogElement();
-  if (!dialog?.open) return;
-  dialog.close();
+function clearSearchClosePending(dialog) {
+  if (searchCloseTimer !== null) {
+    clearTimeout(searchCloseTimer);
+    searchCloseTimer = null;
+  }
+  if (searchCloseListener) {
+    dialog.removeEventListener('animationend', searchCloseListener);
+    searchCloseListener = null;
+  }
+  dialog.classList.remove('is-closing');
+}
+
+// 锁定页面滚动会移除常驻滚动条，先把槽位宽度写进 CSS 变量供补位使用
+function syncSearchScrollbarGutter() {
+  const root = document.documentElement;
+  if (root.hasAttribute('data-search-open')) return;
+  const gutter = Math.max(0, window.innerWidth - root.clientWidth);
+  root.style.setProperty('--stellar-scrollbar-gutter', gutter + 'px');
+}
+
+// 关闭动画播放期间浮层仍处于打开状态，退出动画结束或兜底超时后才真正 close 并恢复焦点
+function finishSearchClose(dialog) {
+  clearSearchClosePending(dialog);
+  if (dialog.open) dialog.close();
   document.documentElement.removeAttribute('data-search-open');
   if (searchDialogRestoreFocus && searchDialogTrigger?.focus) searchDialogTrigger.focus();
   else if (searchDialogTrigger?.blur) searchDialogTrigger.blur();
@@ -276,12 +305,29 @@ function closeSearch() {
   searchDialogRestoreFocus = true;
 }
 
+function closeSearch() {
+  const dialog = searchDialogElement();
+  if (!dialog?.open || searchCloseTimer !== null) return;
+  if (!searchMotionEnabled()) {
+    finishSearchClose(dialog);
+    return;
+  }
+  searchCloseListener = function (event) {
+    if (event.animationName !== 'search-dialog-out') return;
+    finishSearchClose(dialog);
+  };
+  dialog.classList.add('is-closing');
+  dialog.addEventListener('animationend', searchCloseListener);
+  searchCloseTimer = setTimeout(function () { finishSearchClose(dialog); }, searchCloseFallbackDelay);
+}
+
 function openSearch(trigger, restoreFocus = true) {
   const dialog = searchDialogElement();
   const input = dialog?.querySelector('.search-input');
   const wrapper = dialog?.querySelector('.search-wrapper');
   const result = dialog?.querySelector('.search-result');
   if (!dialog || !input) return;
+  clearSearchClosePending(dialog);
   searchDialogTrigger = trigger || document.activeElement;
   searchDialogRestoreFocus = restoreFocus;
   input.value = '';
@@ -294,6 +340,7 @@ function openSearch(trigger, restoreFocus = true) {
   }
   result?.replaceChildren();
   if (!dialog.open) dialog.showModal();
+  syncSearchScrollbarGutter();
   document.documentElement.setAttribute('data-search-open', '');
   input.focus();
 }

package/source/js/profile.js

@@ -2,7 +2,7 @@
   var SUPPORTED_PROVIDERS = ['artalk', 'waline', 'twikoo'];
   var SETTINGS_ICON = 'default:settings';
   var PROFILE_ICON = 'default:profile';
-  var GRAVATAR_BASE_URL = 'https://gravatar.com/avatar/';
+  var GRAVATAR_BASE_URL = window.stellarClientData.ctx.services.gravatar.baseUrl.replace(/\/+$/, '') + '/';
   var localStore = null;
   var sessionStore = null;
   var gravatarHashes = new Map();

package/source/js/runtime/extensions/hero-parallax.js

@@ -0,0 +1,70 @@
+const SELECTOR = '.wiki-hero';
+
+export function mount(root, context = {}) {
+  const heroes = [...root.querySelectorAll(SELECTOR)];
+  if (root.matches?.(SELECTOR)) heroes.unshift(root);
+  const cleanups = heroes.map(hero => {
+    const background = hero.querySelector('.wiki-cover-background');
+    if (!background?.matches('.image, .has-video, .has-effect')) return () => {};
+    const configuredStrength = Number(background.getAttribute('data-parallax'));
+    const strength = Number.isFinite(configuredStrength) ? Math.max(0, Math.min(1, configuredStrength)) : 0;
+    const fades = background.matches('.has-video, .image:not(.has-effect)');
+    const documentRef = hero.ownerDocument;
+    const windowRef = documentRef.defaultView;
+    const motion = windowRef.matchMedia('(prefers-reduced-motion: reduce)');
+    let frame = null;
+    let visible = true;
+
+    function update() {
+      frame = null;
+      const rect = hero.getBoundingClientRect();
+      if (fades) {
+        const opacity = rect.height > 0 ? Math.max(0, Math.min(1, (rect.top + rect.height) / rect.height)) : 1;
+        background.style.opacity = String(opacity);
+      }
+      if (motion.matches || strength === 0) {
+        background.style.removeProperty('transform');
+        background.style.removeProperty('--hero-parallax-inset');
+        background.classList.remove('has-parallax');
+        return;
+      }
+      background.style.setProperty('--hero-parallax-inset', `${-strength * 100}%`);
+      background.classList.add('has-parallax');
+      const offset = Math.max(-rect.height * strength, Math.min(rect.height * strength, -rect.top * strength));
+      background.style.transform = `translate3d(0, ${offset}px, 0)`;
+    }
+    function schedule() {
+      if (frame === null && visible && !documentRef.hidden) frame = windowRef.requestAnimationFrame(update);
+    }
+    const observer = new windowRef.IntersectionObserver(entries => {
+      visible = entries[0].isIntersecting;
+      // Commit the endpoint even when a large scroll moves the Hero offscreen.
+      if (frame !== null) windowRef.cancelAnimationFrame(frame);
+      update();
+    });
+    observer.observe(hero);
+    const resize = new windowRef.ResizeObserver(schedule);
+    resize.observe(hero);
+    windowRef.addEventListener('scroll', schedule, { passive: true });
+    windowRef.addEventListener('resize', schedule);
+    documentRef.addEventListener('visibilitychange', schedule);
+    motion.addEventListener('change', schedule);
+    update();
+    return () => {
+      if (frame !== null) windowRef.cancelAnimationFrame(frame);
+      observer.disconnect();
+      resize.disconnect();
+      windowRef.removeEventListener('scroll', schedule);
+      windowRef.removeEventListener('resize', schedule);
+      documentRef.removeEventListener('visibilitychange', schedule);
+      motion.removeEventListener('change', schedule);
+      background.style.removeProperty('transform');
+      background.style.removeProperty('--hero-parallax-inset');
+      if (fades) background.style.removeProperty('opacity');
+      background.classList.remove('has-parallax');
+    };
+  });
+  const cleanup = () => cleanups.forEach(dispose => dispose());
+  context.onCleanup?.(cleanup);
+  return cleanup;
+}

package/source/js/runtime/extensions/partial-navigation.js

@@ -79,6 +79,20 @@ export function mount(root, context) {
   }
   async function navigate(url, { pop = false, position } = {}) {
     const request = queue.begin();
+    const loading = document.createElement('div');
+    loading.className = 'loading-wrap navigation-loading';
+    loading.setAttribute('role', 'status');
+    const icon = document.createElement('div');
+    icon.className = 'lazy-icon';
+    icon.setAttribute('aria-hidden', 'true');
+    loading.append(icon);
+    // Fast navigations should finish without flashing a loading indicator.
+    const loadingTimer = setTimeout(() => document.body.append(loading), 150);
+    const clearLoading = () => {
+      clearTimeout(loadingTimer);
+      loading.remove();
+    };
+    request.signal.addEventListener('abort', clearLoading, { once: true });
     let timedOut = false;
     const timeout = setTimeout(() => { timedOut = true; request.abort(); }, 15000);
     if (!pop) remember();
@@ -134,7 +148,10 @@ export function mount(root, context) {
       });
     } catch (error) {
       if ((!request.signal.aborted || timedOut) && !lifetime.signal.aborted) fallback(url, pop);
-    } finally { clearTimeout(timeout); }
+    } finally {
+      clearTimeout(timeout);
+      clearLoading();
+    }
   }
 
   document.addEventListener('click', event => {

package/source/js/runtime/extensions/settings.js

@@ -90,7 +90,6 @@ export function mount(root, context) {
   const provider = String(page.dataset.provider || '').toLowerCase();
   const api = globalThis.window?.stellarProfile;
   const form = page.querySelector('[data-profile-form]');
-  const note = page.querySelector('[data-provider-note]');
   const status = page.querySelector('[data-profile-status]');
   const avatar = page.querySelector('[data-profile-avatar]');
   const avatarFallback = page.querySelector('[data-profile-avatar-fallback]');
@@ -174,8 +173,8 @@ export function mount(root, context) {
     if (urlInput) urlInput.value = identity.url || '';
     if (form) form.hidden = !supported;
     if (logoutButton) logoutButton.hidden = !supported;
-    if (note) note.hidden = supported;
-    renderAvatar(identity);
+    if (supported) renderAvatar(identity);
+    else if (avatar) avatar.hidden = true;
   }
 
   function onSubmit(event) {