@leavepulse/ui 0.72.5 → 0.73.0

package/dist/composables/scrollMemory.js

@@ -0,0 +1,111 @@
+import { watch, nextTick, onMounted, onBeforeUnmount } from "vue";
+import { scrollMarginTop } from "./scroll.js";
+const SETTLE_MS = 1500;
+const DIALOG_WAIT_MS = 2e3;
+const SETTLE_STOP = ["wheel", "touchstart", "keydown", "pointerdown"];
+const positions = /* @__PURE__ */ new Map();
+function addressKey() {
+  return `${location.pathname}${location.search}`;
+}
+function useScrollMemory(viewport, path, hash) {
+  if (typeof window === "undefined") return;
+  let current = addressKey();
+  let shown = path();
+  let travelled = false;
+  let stopHold;
+  let pending = 0;
+  const onPop = () => {
+    travelled = true;
+  };
+  window.addEventListener("popstate", onPop);
+  function anchor(value) {
+    if (!value || value === "#") return null;
+    const id = decodeURIComponent(value.replace(/^#/, ""));
+    return document.getElementById(id);
+  }
+  function reach(value, behavior) {
+    const view = viewport();
+    const target = anchor(value);
+    if (!view || !target || !view.contains(target)) return false;
+    const top = target.getBoundingClientRect().top - view.getBoundingClientRect().top + view.scrollTop - scrollMarginTop(target);
+    view.scrollTo({ top: Math.max(0, top), behavior });
+    return true;
+  }
+  function hold(land) {
+    stopHold?.();
+    const view = viewport();
+    const content = view?.firstElementChild;
+    land();
+    if (!content) return;
+    const watcher = new ResizeObserver(land);
+    const timer = window.setTimeout(() => stop(), SETTLE_MS);
+    const stop = () => {
+      watcher.disconnect();
+      window.clearTimeout(timer);
+      for (const name of SETTLE_STOP) window.removeEventListener(name, stop, true);
+      if (stopHold === stop) stopHold = void 0;
+    };
+    for (const name of SETTLE_STOP) window.addEventListener(name, stop, { capture: true, passive: true });
+    watcher.observe(content);
+    stopHold = stop;
+  }
+  function arrive() {
+    const back = travelled;
+    travelled = false;
+    current = addressKey();
+    shown = path();
+    const view = viewport();
+    if (!view) return;
+    const saved = positions.get(current);
+    if (back && saved !== void 0) {
+      hold(() => view.scrollTo({ top: saved, behavior: "instant" }));
+      return;
+    }
+    if (hash()) {
+      hold(() => {
+        if (!reach(hash(), "instant")) view.scrollTo({ top: 0, behavior: "instant" });
+      });
+      return;
+    }
+    stopHold?.();
+    view.scrollTo({ top: 0, left: 0, behavior: "instant" });
+  }
+  function afterDialogs(run) {
+    const since = performance.now();
+    const mine = ++pending;
+    const tick = () => {
+      if (mine !== pending) return;
+      const locked = document.querySelector('[role="dialog"]') || getComputedStyle(document.body).overflow === "hidden";
+      if (locked && performance.now() - since < DIALOG_WAIT_MS) requestAnimationFrame(tick);
+      else run();
+    };
+    requestAnimationFrame(tick);
+  }
+  watch(
+    path,
+    () => {
+      const view = viewport();
+      if (view) positions.set(current, view.scrollTop);
+      void nextTick(() => requestAnimationFrame(arrive));
+    },
+    { flush: "pre" }
+  );
+  watch(hash, (next, previous) => {
+    if (next === previous) return;
+    if (path() !== shown) return;
+    afterDialogs(() => {
+      travelled = false;
+      if (!reach(next, "smooth")) viewport()?.scrollTo({ top: 0, behavior: "smooth" });
+    });
+  });
+  onMounted(() => {
+    if (hash()) requestAnimationFrame(() => hold(() => void reach(hash(), "instant")));
+  });
+  onBeforeUnmount(() => {
+    stopHold?.();
+    window.removeEventListener("popstate", onPop);
+  });
+}
+export {
+  useScrollMemory
+};

package/dist/index.js

@@ -4,7 +4,7 @@ import { _ as _3 } from "./chunks/LpMapPicker-DRGgh89B.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BP1ld7-S.js";
 import { _ as _5 } from "./chunks/LpAlert-n5XPAZfv.js";
-import { _ as _6 } from "./chunks/LpAppShell-DMSJg18Q.js";
+import { _ as _6 } from "./chunks/LpAppShell-rr5kqiK3.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DOu7FN5P.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cg6Az3wz.js";
 import { _ as _9 } from "./chunks/LpBadge-wUYLN4U9.js";
@@ -60,19 +60,19 @@ import { _ as _37 } from "./chunks/LpLogViewer-D25jM2_I.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-Bkram-MO.js";
 import { _ as _39 } from "./chunks/LpModal-BnjZ2iem.js";
-import { _ as _40 } from "./chunks/LpModalNav-CE3iLnxB.js";
+import { _ as _40 } from "./chunks/LpModalNav-DQpV2kdn.js";
 import { _ as _41 } from "./chunks/LpNotificationBell-3244LUVc.js";
 import { _ as _42 } from "./chunks/LpNumberField-e0IBkWU1.js";
 import { _ as _43 } from "./chunks/LpTimeField-BawSVsmt.js";
-import { _ as _44 } from "./chunks/LpNumberFlow-CcxEGUy0.js";
+import { _ as _44 } from "./chunks/LpNumberFlow-Vqj0tP7B.js";
 import { _ as _45 } from "./chunks/LpOtpInput-CeBPsM7D.js";
 import { _ as _46 } from "./chunks/LpPagination-BIIiYHXR.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-BkHKQDhM.js";
-import { _ as _48 } from "./chunks/LpPie-Mr3EtFEd.js";
+import { _ as _48 } from "./chunks/LpPie-DrZepi0p.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-CETEp5W7.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DmZ3wUtP.js";
-import { _ as _51 } from "./chunks/LpProgress-rOlyafqp.js";
+import { _ as _51 } from "./chunks/LpProgress-Yr6ONG5t.js";
 import { _ as _52 } from "./chunks/LpRadio-CWA5Eb3M.js";
 import { _ as _53 } from "./chunks/LpRadioGroup-ggaPL92T.js";
 import { _ as _54 } from "./chunks/LpRollingText-B54Pje7P.js";
@@ -86,26 +86,26 @@ import { _ as _60 } from "./chunks/LpShift-CCq7dofl.js";
 import { _ as _61 } from "./chunks/LpSwap-C96c0LWh.js";
 import { _ as _62 } from "./chunks/LpHintExample-9Py0wc-L.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _63 } from "./chunks/LpSidebar-BciLMBgY.js";
+import { _ as _63 } from "./chunks/LpSidebar-BoNLKgh-.js";
 import { _ as _64 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _65 } from "./chunks/LpSlider-DxYoCJJO.js";
 import { _ as _66 } from "./chunks/LpRangeSlider-CM-0ZITZ.js";
 import { _ as _67 } from "./chunks/LpVideoBackdrop-DS1wGv-X.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { _ as _68 } from "./chunks/LpSparkline-CExIRDb3.js";
-import { _ as _69 } from "./chunks/LpStat-D6V6Fdfc.js";
+import { _ as _69 } from "./chunks/LpStat-BVf2UvEc.js";
 import { _ as _70 } from "./chunks/LpStepper-DpsocBNJ.js";
 import { _ as _71 } from "./chunks/LpSwitch-BnXd1llc.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { resolveRowMenu } from "./components/tableRowMenu.js";
-import { _ as _72 } from "./chunks/LpTableOfContents-CraicEs4.js";
+import { _ as _72 } from "./chunks/LpTableOfContents-BN5zvpnx.js";
 import { default as default13 } from "./components/LpTabs.vue.js";
 import { _ as _73 } from "./chunks/LpBottomNav-CbNQQPuL.js";
 import { _ as _74 } from "./chunks/LpTagsInput-C-mDG648.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _75 } from "./chunks/LpTextarea-TE-yZv2U.js";
-import { _ as _76 } from "./chunks/LpThemeSwitcher-BDrIJswA.js";
+import { _ as _76 } from "./chunks/LpThemeSwitcher-BnEn_mvf.js";
 import { _ as _77 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _78 } from "./chunks/LpToaster-IwTXjbbU.js";
 import { _ as _79 } from "./chunks/LpTooltip-BcBvIx4z.js";
@@ -116,7 +116,7 @@ import { _ as _82 } from "./chunks/LpHints-Bz-BlaSl.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _83 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
 import { _ as _84 } from "./chunks/LpTopologyCanvas-B1gIbS0n.js";
-import { _ as _85 } from "./chunks/LpUptimeBar-BtkZRwY0.js";
+import { _ as _85 } from "./chunks/LpUptimeBar-DqNvvMBK.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";
@@ -124,7 +124,7 @@ import { layoutController, useLayout } from "./layout/useLayout.js";
 import { a as parseTheme, s as serializeTheme } from "./chunks/LpThemeProvider-8MG6yqU9.js";
 import { D, _ as _86, T, b as b2, c as c2, d, e, f, g, l, h, n, i as i2, j, p, r, k, t, m, o, q, u, v } from "./chunks/LpThemeProvider-8MG6yqU9.js";
 import { G, N, d as d2, i as i3, s } from "./chunks/backdrop-Dkf2vM81.js";
-import { _ as _87, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-BJDKf3_Z.js";
+import { _ as _87, a as a2, b as b3, c as c3, d as d3, S, e as e2, u as u2, w } from "./chunks/LpThemeStudio-BpORDvH6.js";
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, parseCombo, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
@@ -164,8 +164,8 @@ import { _ as _88 } from "./chunks/LpFrame-BVQCQLDI.js";
 import { _ as _89 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
 import { _ as _90 } from "./chunks/LpRepeater-D7ZmnIYd.js";
-import { _ as _91 } from "./chunks/LpGauge-BO1PYYqD.js";
-import { _ as _92 } from "./chunks/LpQuota-B12yijdB.js";
+import { _ as _91 } from "./chunks/LpGauge-KZaQ_FDR.js";
+import { _ as _92 } from "./chunks/LpQuota-Dk2MyI2Z.js";
 import { _ as _93 } from "./chunks/LpStatus-DglxttQ7.js";
 import { _ as _94 } from "./chunks/LpRelativeTime-DwgCb5-8.js";
 import { _ as _95 } from "./chunks/LpActivityLine-CJvzrNpj.js";
@@ -181,14 +181,14 @@ import { childProgress, connectorFilled, currentStepIndex, isSettled, overallSta
 import { _ as _98 } from "./chunks/LpLoader-DVwkOmt9.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _99 } from "./chunks/LpCountdown-BxE7stYk.js";
+import { _ as _99 } from "./chunks/LpCountdown-DgeY3cLG.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
 import { _ as _100 } from "./chunks/LpCopyButton-xF7wFVoU.js";
 import { _ as _101 } from "./chunks/LpSecretField-BbmqM9ye.js";
 import { _ as _102 } from "./chunks/LpDataList-Jxyl9H5w.js";
 import { _ as _103 } from "./chunks/LpEditable-Cy6GLbFx.js";
 import { _ as _104 } from "./chunks/LpTruncate-CflAIwiJ.js";
-import { _ as _105 } from "./chunks/LpCodeDisplay-AQx-3nNb.js";
+import { _ as _105 } from "./chunks/LpCodeDisplay-CE9TxCA4.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
 import { _ as _106 } from "./chunks/LpHoverCard-spGxyw7T.js";
 import { _ as _107 } from "./chunks/LpIdenticon-BzdC_qz9.js";
@@ -214,10 +214,10 @@ import { _ as _116 } from "./chunks/LpSpotlight-4F3NeUMY.js";
 import { _ as _117 } from "./chunks/LpGlowBorder-B8V-QzIl.js";
 import { _ as _118 } from "./chunks/LpMagnetic-CtXKLa2Y.js";
 import { spotlightPoint, useSpotlight } from "./composables/useSpotlight.js";
-import { _ as _119 } from "./chunks/LpCommandScope-BlKcgBnK.js";
+import { _ as _119 } from "./chunks/LpCommandScope-CtUhJe8T.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
-import { u as u3 } from "./chunks/palette-Cvxl_1tM.js";
-import { _ as _120 } from "./chunks/LpPaletteTheme-CdEEMMEF.js";
+import { u as u3 } from "./chunks/palette-Co8tSASo.js";
+import { _ as _120 } from "./chunks/LpPaletteTheme-DiLYKQiZ.js";
 const UI_CONFIG_VERSION = 1;
 function serializeConfig(config) {
   const out = {

package/dist/theme/palette.d.ts

@@ -3,10 +3,11 @@ import { type PaletteScope } from "../composables/usePaletteCommands";
 import type { ThemeStudio } from "./studio";
 import type { ThemeStudioPart } from "../components/LpThemeStudio.vue";
 /** Registers the studio itself; no second list of theme options in the app. */
-/** `hide` leaves out the same studio rows the app hides in its own studio. */
+/** `hide` leaves out the same studio rows the app hides in its own studio; `keywords` adds the app's own search words. */
 export declare function usePaletteTheme(studio: MaybeRefOrGetter<ThemeStudio | undefined>, options?: {
     id?: string;
     label?: string;
     scope?: PaletteScope;
     hide?: ThemeStudioPart[];
+    keywords?: string[];
 }): void;

package/package.json

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

package/src/components/LpAppShell.vue

@@ -33,6 +33,7 @@ export default { inheritAttrs: false }
  */
 import { computed, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import { useScrollMemory } from "../composables/scrollMemory"
 import LpBottomNav from "./LpBottomNav.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
@@ -59,8 +60,18 @@ const props = withDefaults(
      * The current route path. Enables the built-in prefix-match active test and
      * the derived page title without the host wiring its own `isActive`. Pass
      * `route.path`. Ignored when a custom `isActive` is provided.
+     *
+     * A new path also places the page in the shell's scroll region: back and
+     * forward return to where it was left, a `hash` lands on that anchor
+     * (honouring its `scroll-margin-top`), anything else starts at the top.
      */
     path?: string
+    /**
+     * The current route hash (`route.hash`). With `path` it lands a page on
+     * its anchor; a new hash on the same path glides there, after a dialog
+     * that started the jump has closed.
+     */
+    hash?: string
     /**
      * Custom active test (router-driven nav). Overrides `path`/`modelValue`.
      */
@@ -177,7 +188,8 @@ const text = useLabels(
 /*
  * The page scrolls inside the shell's own region, not the window, so the
  * router's scroll behaviour never reaches it: without this a route change from
- * a scrolled page landed mid-way down the next one.
+ * a scrolled page landed mid-way down the next one, and back never returned.
+ * A full-bleed page owns its scrolling, so the shell leaves it alone.
  */
 const scrollArea = ref<{ viewportEl: HTMLElement | null } | null>(null)
 const bleedId = `lp-shell-bleed-${useId()}`
@@ -195,9 +207,13 @@ watch(
   () => props.path,
   () => {
     if (drawerOpen.value) drawerOpen.value = false
-    scrollArea.value?.viewportEl?.scrollTo({ top: 0, left: 0, behavior: "instant" })
   },
 )
+useScrollMemory(
+  () => (bleeding.value ? null : scrollArea.value?.viewportEl),
+  () => props.path,
+  () => props.hash,
+)
 
 function onSelect(item: SidebarItem) {
   emit("select", item)

package/src/components/LpNumberFlow.vue

@@ -226,7 +226,7 @@ onBeforeUnmount(stop)
 
 /*
  * The app's locale (reka's ConfigProvider) when the counter has none of its
- * own, the same rule the dates follow: a Russian app read "4,594" otherwise.
+ * own, the same rule the dates follow: a French app read "4,594" otherwise.
  */
 const locale = useLocale(() => props.locale)
 // The grouped and compact forms are written in the locale; the plain one always uses ".".
@@ -250,7 +250,7 @@ function formatAt(v: number, padded: boolean): string {
      * The decimal count is what stays fixed: one place whenever a unit is in
      * play, so the row's shape only changes at a rollover, not on every frame.
      * Written in the app's locale: the cells find the fraction by that
-     * locale's own mark (fractionMark), so "1,2 тыс." keeps its columns.
+     * locale's own mark (fractionMark), so "1,2 k" keeps its columns.
      */
     return compactNumber(v, { plainDecimals: 0, fixed: true, locale: locale.value, words: true })
   }
@@ -492,7 +492,7 @@ const label = computed(
 /* Faded, so a held-open column reads as an empty wheel rather than a zero the
    number actually has. */
 /*
- * A space separator (ru, fr, …) takes a whole column in a monospaced or
+ * A space separator (fr, pl, …) takes a whole column in a monospaced or
  * tabular face, so "7 271" read as "7  271". It is drawn as the narrow gap
  * the locale means.
  */

package/src/components/LpStat.vue

@@ -147,7 +147,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </span>
     </div>
     <!-- A narrow tile moves the delta under the figure rather than breaking the
-         figure itself: "2085 ч" split across two lines reads as two values. -->
+         figure itself: "2085 h" split across two lines reads as two values. -->
     <div class="flex flex-wrap items-baseline gap-x-2">
       <!-- The placeholder sits INSIDE the value's own type size, so its line box
            is the real one: the tile cannot change height when the figure lands. -->

package/src/components/LpTableOfContents.vue

@@ -12,7 +12,7 @@
 import { Motion } from "motion-v"
 import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
-import { atScrollEnd, scrollParent } from "../composables/scroll"
+import { atScrollEnd, scrollMarginTop, scrollParent, scrollToElement } from "../composables/scroll"
 import { usePillTransition } from "../composables/usePillTransition"
 
 export interface TocLink {
@@ -170,7 +170,9 @@ function onClick(id: string, ev: MouseEvent) {
   ev.preventDefault()
   activeId.value = id // mark immediately so the bar jumps to the clicked item
   suppressSpyUntilScrollEnds(el)
-  el.scrollIntoView({ behavior: "smooth", block: "start" })
+  // Only the nearest scrolling box moves: scrollIntoView also shifted every
+  // overflow-hidden ancestor, the shell itself among them.
+  scrollToElement(el, { block: "start", behavior: "smooth", margin: scrollMarginTop(el) })
   // Keep the router's own state: replacing it with null broke scroll
   // restoration and back/forward bookkeeping in vue-router apps.
   history.replaceState(history.state, "", `#${id}`)

package/src/components/commandSearch.ts

@@ -81,21 +81,32 @@ function rankExact<T extends SearchableCommand>(items: T[], terms: CommandSearch
 }
 
 const LATIN_KEYS = "`qwertyuiop[]asdfghjkl;'zxcvbnm,."
-const CYRILLIC_KEYS = "ёйцукенгшщзхъфывапролджэячсмитьбю"
-const LAYOUT_KEYS = new Map([...LATIN_KEYS].flatMap((key, i) => [[key, CYRILLIC_KEYS[i]!], [CYRILLIC_KEYS[i]!, key]]))
+const CYRILLIC_LAYOUTS = ["ґйцукенгшщзхїфівапролджєячсмитьбю", "ёйцукенгшщзхъфывапролджэячсмитьбю"]
+const LAYOUT_MAPS = CYRILLIC_LAYOUTS.map(keys => new Map([...LATIN_KEYS].flatMap((key, i) => [[key, keys[i]!], [keys[i]!, key]])))
 
-export function swapCommandLayout(value: string): string {
+function swapWith(value: string, keys: Map<string, string>): string {
   return [...value].map(char => {
-    const replacement = LAYOUT_KEYS.get(char.toLowerCase())
+    const replacement = keys.get(char.toLowerCase())
     return replacement ? char === char.toUpperCase() ? replacement.toUpperCase() : replacement : char
   }).join("")
 }
 
+/** The query as if typed on the other layout: Latin to Ukrainian by default, `layout` 1 for the other Cyrillic one. */
+export function swapCommandLayout(value: string, layout = 0): string {
+  return swapWith(value, LAYOUT_MAPS[layout] ?? LAYOUT_MAPS[0]!)
+}
+
 export function searchCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): { items: T[]; terms: string[] } {
   const exact = rankExact(items, terms)
   if (exact.length || !terms.include.length) return { items: exact, terms: terms.include }
-  const alternate = { include: terms.include.map(swapCommandLayout), exclude: terms.exclude, groups: terms.groups }
-  return { items: rankExact(items, alternate), terms: alternate.include }
+  let fallback = terms.include
+  for (const keys of LAYOUT_MAPS) {
+    const alternate = { include: terms.include.map(term => swapWith(term, keys)), exclude: terms.exclude, groups: terms.groups }
+    const found = rankExact(items, alternate)
+    if (found.length) return { items: found, terms: alternate.include }
+    if (fallback === terms.include) fallback = alternate.include
+  }
+  return { items: [], terms: fallback }
 }
 
 export function rankCommandItems<T extends SearchableCommand>(items: T[], terms: CommandSearchTerms): T[] {

package/src/components/format.ts

@@ -35,7 +35,7 @@ export interface FormatBytesOptions {
 /**
  * A byte count in the largest unit that keeps it readable: 1 536 → "1.5 kB".
  * Binary steps, the way file managers and storage limits show sizes. Unit
- * names come from Intl, so a Russian app reads "1,5 МБ" without a table of
+ * names come from Intl, so a French app reads "1,5 Mo" without a table of
  * its own. One decimal under 10 (2.4 MB), none above (240 MB). Negative or
  * non-finite input is "—": there is no size to show.
  */
@@ -54,7 +54,7 @@ export function formatBytes(bytes: number, locale?: string, options: FormatBytes
   // Intl's "short" form spells the smallest unit out ("1023 byte", "1023 Byte")
   // while every other unit is a symbol, and its "narrow" form glues English
   // symbols to the figure ("1023B"). Narrow symbols with one no-break space
-  // read the same in every locale: "1023 B", "1.5 kB", "1,5 МБ".
+  // read the same in every locale: "1023 B", "1.5 kB", "1,5 Mo".
   const parts = numberFormat(locale, {
     style: "unit",
     unit: BYTE_UNITS[step],
@@ -79,8 +79,8 @@ const COMPACT_UNITS: readonly (readonly [number, string])[] = [
 ]
 
 /*
- * The unit word and the gap before it as the locale writes them: "тыс." with a
- * no-break space in Russian, "K" glued on in English. Taken from Intl's compact
+ * The unit word and the gap before it as the locale writes them: "Md" with a
+ * no-break space in French, "K" glued on in English. Taken from Intl's compact
  * notation rather than a table, so any locale reads its own.
  */
 const compactSuffixes = new Map<string, string>()
@@ -99,14 +99,14 @@ function compactSuffix(locale: string, step: number): string {
 
 export interface CompactNumberOptions {
   /**
-   * Writes the decimal separator the locale's way ("1,2k" in Russian). The
+   * Writes the decimal separator the locale's way ("1,2k" in French). The
    * k/M/B/T suffixes stay: Intl's own compact notation changes the shape of
-   * the figure per locale ("1,2 тыс."), which a tick label cannot absorb.
+   * the figure per locale ("1,2 k" in French), which a tick label cannot absorb.
    * Unset keeps a plain "." whatever the browser says.
    */
   locale?: string
   /**
-   * With a locale, write the unit as that locale does: "11,9 тыс." in Russian.
+   * With a locale, write the unit as that locale does: "13,1 Md" in French.
    * For a figure read on its own (a stat tile, a counter), where "11,9k" looks
    * foreign; not for axis ticks, where the longer word crowds the axis.
    */
@@ -124,7 +124,7 @@ export interface CompactNumberOptions {
 
 /**
  * A figure shortened with k/M/B/T: 1 200 → "1.2k", 3 400 000 → "3.4M"; with
- * `words` and a locale in that locale's own words, "1,2 тыс." in Russian.
+ * `words` and a locale in that locale's own words, "13,1 Md" in French.
  *
  * The unit is picked by what will PRINT, not by the raw size: 999 950 at one
  * place rounds to "1000k", which reads as the next unit up, so it becomes
@@ -163,7 +163,7 @@ export function compactNumber(value: number, options: CompactNumberOptions = {})
 
 /**
  * The character a locale writes between the whole and the fractional part:
- * "." in English, "," in Russian and German. A counter that splits a grouped
+ * "." in English, "," in French and German. A counter that splits a grouped
  * figure into columns has to find the fraction by this mark, not by ".",
  * because in German "." is the thousands separator.
  */

package/src/components/quota.ts

@@ -65,7 +65,7 @@ export function quotaState(
 
 /**
  * An amount in its unit, locale-aware. Bytes go through `formatBytes`, whose
- * unit names come from Intl, so a Russian app reads "1,5 ГБ" without a
+ * unit names come from Intl, so a French app reads "1,5 Go" without a
  * translation table of its own.
  */
 export function formatAmount(value: number, unit?: QuotaUnit, locale?: string): string {

package/src/components/timeSpan.ts

@@ -19,7 +19,7 @@ export interface TimeSplit {
 
 export type TimeUnit = "d" | "h" | "m" | "s"
 
-/** Unit suffixes, so an app can write "2 д 3 ч" without reformatting. */
+/** Unit suffixes, so an app can write "2 j 3 h" without reformatting. */
 export type TimeUnitLabels = Record<TimeUnit, string>
 
 export const DEFAULT_UNIT_LABELS: TimeUnitLabels = { d: "d", h: "h", m: "m", s: "s" }

package/src/composables/scroll.ts

@@ -46,6 +46,11 @@ export interface ScrollToElementOptions {
 }
 
 /** Scroll the nearest scroller, and only it, so that `el` is in view. */
+/** The element's own `scroll-margin-top`, the gap it asks to keep above it when scrolled to. */
+export function scrollMarginTop(el: Element): number {
+  return Number.parseFloat(getComputedStyle(el).scrollMarginTop) || 0
+}
+
 export function scrollToElement(
   el: Element | null | undefined,
   { block = "nearest", behavior = "auto", margin = 0 }: ScrollToElementOptions = {},

package/src/composables/scrollMemory.ts

@@ -0,0 +1,145 @@
+import { nextTick, onBeforeUnmount, onMounted, watch } from "vue"
+import { scrollMarginTop } from "./scroll"
+
+/*
+ * Where a page lands when the shell's own scroll region changes page. The
+ * region is not the window, so a router's scrollBehavior never reaches it, and
+ * the shell has to answer the questions a browser answers for a plain site:
+ *
+ *  - back and forward return to where the page was left;
+ *  - an address with a hash lands on that anchor, and stays on it while the
+ *    page is still growing (a lazily loaded body, images), until the reader
+ *    scrolls or a moment has passed;
+ *  - a new hash on the same page glides there, once a dialog that started the
+ *    jump (a palette, a menu) has let go of the page;
+ *  - anything else starts at the top.
+ *
+ * The router is not needed: what changed is read from the shell's `path` and
+ * `hash` props, history position from `popstate`, and positions are keyed by
+ * the address the browser shows.
+ */
+
+const SETTLE_MS = 1500
+const DIALOG_WAIT_MS = 2000
+const SETTLE_STOP = ["wheel", "touchstart", "keydown", "pointerdown"] as const
+
+const positions = new Map<string, number>()
+
+function addressKey(): string {
+  return `${location.pathname}${location.search}`
+}
+
+export function useScrollMemory(
+  viewport: () => HTMLElement | null | undefined,
+  path: () => string | undefined,
+  hash: () => string | undefined,
+): void {
+  if (typeof window === "undefined") return
+  let current = addressKey()
+  let shown = path()
+  let travelled = false
+  let stopHold: (() => void) | undefined
+  let pending = 0
+
+  const onPop = () => {
+    travelled = true
+  }
+  window.addEventListener("popstate", onPop)
+
+  function anchor(value: string | undefined): HTMLElement | null {
+    if (!value || value === "#") return null
+    const id = decodeURIComponent(value.replace(/^#/, ""))
+    return document.getElementById(id)
+  }
+
+  function reach(value: string | undefined, behavior: ScrollBehavior): boolean {
+    const view = viewport()
+    const target = anchor(value)
+    if (!view || !target || !view.contains(target)) return false
+    const top = target.getBoundingClientRect().top - view.getBoundingClientRect().top + view.scrollTop - scrollMarginTop(target)
+    view.scrollTo({ top: Math.max(0, top), behavior })
+    return true
+  }
+
+  // Re-applies a landing while the page below it keeps changing size.
+  function hold(land: () => void) {
+    stopHold?.()
+    const view = viewport()
+    const content = view?.firstElementChild
+    land()
+    if (!content) return
+    const watcher = new ResizeObserver(land)
+    const timer = window.setTimeout(() => stop(), SETTLE_MS)
+    const stop = () => {
+      watcher.disconnect()
+      window.clearTimeout(timer)
+      for (const name of SETTLE_STOP) window.removeEventListener(name, stop, true)
+      if (stopHold === stop) stopHold = undefined
+    }
+    for (const name of SETTLE_STOP) window.addEventListener(name, stop, { capture: true, passive: true })
+    watcher.observe(content)
+    stopHold = stop
+  }
+
+  function arrive() {
+    const back = travelled
+    travelled = false
+    current = addressKey()
+    shown = path()
+    const view = viewport()
+    if (!view) return
+    const saved = positions.get(current)
+    if (back && saved !== undefined) {
+      hold(() => view.scrollTo({ top: saved, behavior: "instant" }))
+      return
+    }
+    if (hash()) {
+      hold(() => {
+        if (!reach(hash(), "instant")) view.scrollTo({ top: 0, behavior: "instant" })
+      })
+      return
+    }
+    stopHold?.()
+    view.scrollTo({ top: 0, left: 0, behavior: "instant" })
+  }
+
+  function afterDialogs(run: () => void) {
+    const since = performance.now()
+    const mine = ++pending
+    const tick = () => {
+      if (mine !== pending) return
+      const locked = document.querySelector('[role="dialog"]') || getComputedStyle(document.body).overflow === "hidden"
+      if (locked && performance.now() - since < DIALOG_WAIT_MS) requestAnimationFrame(tick)
+      else run()
+    }
+    requestAnimationFrame(tick)
+  }
+
+  watch(
+    path,
+    () => {
+      const view = viewport()
+      if (view) positions.set(current, view.scrollTop)
+      void nextTick(() => requestAnimationFrame(arrive))
+    },
+    { flush: "pre" },
+  )
+
+  watch(hash, (next, previous) => {
+    if (next === previous) return
+    if (path() !== shown) return
+    afterDialogs(() => {
+      travelled = false
+      if (!reach(next, "smooth")) viewport()?.scrollTo({ top: 0, behavior: "smooth" })
+    })
+  })
+
+  onMounted(() => {
+    if (hash()) requestAnimationFrame(() => hold(() => void reach(hash(), "instant")))
+  })
+
+  onBeforeUnmount(() => {
+    stopHold?.()
+    window.removeEventListener("popstate", onPop)
+  })
+}