@leavepulse/ui 0.72.8 → 0.73.4

package/dist/index.js

@@ -1,22 +1,22 @@
 import { _ } from "./chunks/LayoutCanvas-CNOAUk7D.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Al3HT5ey.js";
-import { _ as _3 } from "./chunks/LpMapPicker-DRGgh89B.js";
+import { _ as _2 } from "./chunks/LpAddressInput-mf_dEpj_.js";
+import { _ as _3 } from "./chunks/LpMapPicker-DeJRMfFN.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-CPCG0I-c.js";
+import { _ as _4 } from "./chunks/LpActionBar-B55msXTr.js";
+import { _ as _5 } from "./chunks/LpAlert-Cg7oIx1B.js";
+import { _ as _6 } from "./chunks/LpAppShell-B0Yu9MVs.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";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-DPdbth-c.js";
-import { _ as _11 } from "./chunks/LpButton-CFb44IjC.js";
+import { _ as _9 } from "./chunks/LpBadge-0A6sPks3.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-ssZV3_od.js";
+import { _ as _11 } from "./chunks/LpButton-BgdewXxF.js";
 import { _ as _12 } from "./chunks/LpCalendar-CuoWks-0.js";
-import { _ as _13 } from "./chunks/LpCard-r13WRqox.js";
+import { _ as _13 } from "./chunks/LpCard-BJ59q6hR.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
-import { _ as _14 } from "./chunks/LpCheckbox-Cs4SHaHX.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-DRC8VbXW.js";
+import { _ as _14 } from "./chunks/LpCheckbox-B0kJ-t6T.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-CXR_7t_F.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
 import { _ as _16 } from "./chunks/LpColorPicker-1y1QJHZR.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
@@ -30,8 +30,8 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-DY2VjDji.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-DvSZTJ4N.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-CaA4pAre.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-CBIzALSL.js";
 import { confirm, useConfirm } from "./components/confirm.js";
 import { _ as _20 } from "./chunks/LpContextMenu-rx2tCjwk.js";
 import { _ as _21 } from "./chunks/LpDatePicker-CA0QTfBC.js";
@@ -44,31 +44,31 @@ import { _ as _26 } from "./chunks/LpDrawer-RRamxbLV.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-Dl7Z4ZhS.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-EQHiRYhG.js";
-import { _ as _29 } from "./chunks/LpFileTree-zIFEgo3I.js";
+import { _ as _29 } from "./chunks/LpFileTree-CxOh3rL2.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-CzQ2_5rQ.js";
-import { _ as _31 } from "./chunks/LpFormField-Ch69Jd-X.js";
+import { _ as _31 } from "./chunks/LpFormField-BBFg8i2I.js";
 import { _ as _32 } from "./chunks/LpIcon--5WSb3jJ.js";
 import { i, b, a, c } from "./chunks/icons-DMITlfw5.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
-import { _ as _33 } from "./chunks/LpInfraNode-46XOCkfq.js";
-import { _ as _34 } from "./chunks/LpInput-Tw-yxT4I.js";
-import { _ as _35 } from "./chunks/LpLightbox-B95yu22B.js";
+import { _ as _33 } from "./chunks/LpInfraNode-6NLxkAnr.js";
+import { _ as _34 } from "./chunks/LpInput-B2dTt4pc.js";
+import { _ as _35 } from "./chunks/LpLightbox-Coe4OBUl.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-D25jM2_I.js";
+import { _ as _37 } from "./chunks/LpLogViewer-DxiR6Mbd.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _38 } from "./chunks/LpMediaGallery-Bkram-MO.js";
+import { _ as _38 } from "./chunks/LpMediaGallery-B7Km8N9l.js";
 import { _ as _39 } from "./chunks/LpModal-BnjZ2iem.js";
-import { _ as _40 } from "./chunks/LpModalNav-DQpV2kdn.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-3244LUVc.js";
+import { _ as _40 } from "./chunks/LpModalNav-BmxEyqOx.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-u8-ZjRON.js";
 import { _ as _42 } from "./chunks/LpNumberField-e0IBkWU1.js";
 import { _ as _43 } from "./chunks/LpTimeField-BawSVsmt.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-DrZepi0p.js";
+import { _ as _47 } from "./chunks/LpPasswordInput-Ih7Lv43S.js";
+import { _ as _48 } from "./chunks/LpPie-Idujdb3M.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";
@@ -82,41 +82,41 @@ import { _ as _57 } from "./chunks/LpSection-DFK_uoJE.js";
 import { _ as _58 } from "./chunks/LpSelect-Cxq4yBGd.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _60 } from "./chunks/LpShift-CCq7dofl.js";
-import { _ as _61 } from "./chunks/LpSwap-C96c0LWh.js";
+import { _ as _60 } from "./chunks/LpShift-kKUeG9NS.js";
+import { _ as _61 } from "./chunks/LpSwap-KIS24N8W.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-BoNLKgh-.js";
+import { _ as _63 } from "./chunks/LpSidebar-CR_WKcn2.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-BVf2UvEc.js";
-import { _ as _70 } from "./chunks/LpStepper-DpsocBNJ.js";
-import { _ as _71 } from "./chunks/LpSwitch-BnXd1llc.js";
+import { _ as _69 } from "./chunks/LpStat-DXqKD1h5.js";
+import { _ as _70 } from "./chunks/LpStepper-CKSTFzHE.js";
+import { _ as _71 } from "./chunks/LpSwitch-DlZHmj-M.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 { _ as _73 } from "./chunks/LpBottomNav-Dik-ZcHv.js";
+import { _ as _74 } from "./chunks/LpTagsInput-CHoiid8u.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _75 } from "./chunks/LpTextarea-TE-yZv2U.js";
-import { _ as _76 } from "./chunks/LpThemeSwitcher-BnEn_mvf.js";
+import { _ as _75 } from "./chunks/LpTextarea-CU7C1pLO.js";
+import { _ as _76 } from "./chunks/LpThemeSwitcher-BXJhQYGD.js";
 import { _ as _77 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _78 } from "./chunks/LpToaster-IwTXjbbU.js";
+import { _ as _78 } from "./chunks/LpToaster-C1D35SKk.js";
 import { _ as _79 } from "./chunks/LpTooltip-BcBvIx4z.js";
-import { _ as _80 } from "./chunks/LpTour-BZq-mUMv.js";
+import { _ as _80 } from "./chunks/LpTour-XshJslGg.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _81 } from "./chunks/LpHintLayer-CgObdUsM.js";
-import { _ as _82 } from "./chunks/LpHints-Bz-BlaSl.js";
+import { _ as _81 } from "./chunks/LpHintLayer-Db_s9_DL.js";
+import { _ as _82 } from "./chunks/LpHints-Cxf5GXsx.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-DqNvvMBK.js";
+import { _ as _84 } from "./chunks/LpTopologyCanvas-1OufbBtQ.js";
+import { _ as _85 } from "./chunks/LpUptimeBar-qhvvmmoI.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-BpORDvH6.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-zyOH3dF2.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";
@@ -163,10 +163,10 @@ import { useToast } from "./composables/useToast.js";
 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 _90 } from "./chunks/LpRepeater-DghUJ3bc.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 _93 } from "./chunks/LpStatus-DfZREVe0.js";
 import { _ as _94 } from "./chunks/LpRelativeTime-DwgCb5-8.js";
 import { _ as _95 } from "./chunks/LpActivityLine-CJvzrNpj.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
@@ -175,20 +175,20 @@ import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, decimalMark, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _96 } from "./chunks/LpPipeline-B3aOVOkV.js";
-import { _ as _97 } from "./chunks/LpStepMark-DpzKVyh8.js";
+import { _ as _96 } from "./chunks/LpPipeline-QCZWWB0G.js";
+import { _ as _97 } from "./chunks/LpStepMark-TaAyuNsH.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
-import { _ as _98 } from "./chunks/LpLoader-DVwkOmt9.js";
+import { _ as _98 } from "./chunks/LpLoader-DPTNhqLu.js";
 import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
-import { _ as _99 } from "./chunks/LpCountdown-DgeY3cLG.js";
+import { _ as _99 } from "./chunks/LpCountdown-BNNhnQAK.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-CE9TxCA4.js";
+import { _ as _100 } from "./chunks/LpCopyButton-Cw-lF7Q3.js";
+import { _ as _101 } from "./chunks/LpSecretField-osKPNdNT.js";
+import { _ as _102 } from "./chunks/LpDataList-CcAA-rD9.js";
+import { _ as _103 } from "./chunks/LpEditable-CSuJIPbG.js";
+import { _ as _104 } from "./chunks/LpTruncate-qgKA-3K3.js";
+import { _ as _105 } from "./chunks/LpCodeDisplay-BCghfBFC.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";
@@ -200,7 +200,7 @@ import { pseudoLocalize } from "./composables/pseudoLocale.js";
 import { _ as _110 } from "./chunks/LpTextReveal-CtAnOUkp.js";
 import { _ as _111 } from "./chunks/LpShinyText-DX2ajtWq.js";
 import { _ as _112 } from "./chunks/LpTypewriter-BCL_a6wE.js";
-import { _ as _113 } from "./chunks/LpScramble-Bn9OoOtC.js";
+import { _ as _113 } from "./chunks/LpScramble-DeT_D36q.js";
 import { useScramble } from "./composables/useScramble.js";
 import { useInView } from "./composables/useInView.js";
 import { SCRAMBLE_GLYPHS, graphemes, planScramble, randomGlyph, scrambleFrame, seededRandom, settledCells } from "./components/scramble.js";
@@ -217,7 +217,7 @@ import { spotlightPoint, useSpotlight } from "./composables/useSpotlight.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-Co8tSASo.js";
-import { _ as _120 } from "./chunks/LpPaletteTheme-DiLYKQiZ.js";
+import { _ as _120 } from "./chunks/LpPaletteTheme-CWAIjBCi.js";
 const UI_CONFIG_VERSION = 1;
 function serializeConfig(config) {
   const out = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.72.8",
+  "version": "0.73.4",
   "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/LpShift.vue

@@ -304,8 +304,10 @@ defineExpose({ resizing })
       resizing ? 'overflow-hidden' : '',
       // While the box holds a width its content has outgrown, a flex row would
       // squeeze its children to fit (a button's keys folding into a column)
-      // instead of letting the easing edge clip them.
-      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
+      // instead of letting the easing edge clip them. A single child that is
+      // itself a wrapping row is laid out at the width the box is heading for,
+      // or it would break onto a second line until the tween lands.
+      resizing && axis !== 'height' ? '[&>*]:shrink-0 [&>*:only-child]:min-w-(--lp-shift-to-w)' : '',
       resizing && anchor === 'end' ? 'justify-end' : '',
     ]"
   >

package/src/components/LpStat.vue

@@ -8,11 +8,12 @@ export default { inheritAttrs: false }
 <script setup lang="ts">
 // Stat tile: dot + caps label, big mono value, optional delta/trend badge and a
 // subtitle. A product pattern, fully token-driven — re-skins with the theme.
-import { computed } from "vue"
+import { computed, ref } from "vue"
 import LpIcon from "./LpIcon.vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
 import LpSkeleton from "./LpSkeleton.vue"
 import LpStatus from "./LpStatus.vue"
+import { useFitScale } from "../composables/useFitScale"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { TONES } from "./tone"
 
@@ -124,6 +125,20 @@ const FADE = {
   leaveToClass: "opacity-0",
 } as const
 
+/*
+ * The figure never wraps, so on a narrow tile a long one ("200 h 23 min", a
+ * word instead of a number) ran past the edge and was cut mid-letter. It now
+ * shrinks to the tile's width, down to `FIT_MIN` of its size, and only past
+ * that is it cut, with an ellipsis and the whole value on hover. The line box
+ * keeps its height, so a row of tiles stays level whichever of them shrank.
+ */
+const FIT_MIN = 0.6
+const row = ref<HTMLElement | null>(null)
+const figure = ref<HTMLElement | null>(null)
+const fit = useFitScale(row, figure, FIT_MIN)
+const figureStyle = computed(() => (fit.scale.value < 1 ? { fontSize: `calc(var(--text-3xl, 1.875rem) * ${fit.scale.value})`, lineHeight: "calc(var(--text-3xl, 1.875rem) * var(--text-3xl--line-height, 1.2))" } : undefined))
+const figureTitle = computed(() => (fit.clipped.value && !props.loading ? `${props.prefix ?? ""}${props.value}${props.valueSuffix ?? ""}` : undefined))
+
 // A stat tile spaces its label and value on a fixed gap; a dense KPI row needs that tighter.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
   "flex flex-col gap-2",
@@ -148,10 +163,16 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     </div>
     <!-- A narrow tile moves the delta under the figure rather than breaking the
          figure itself: "2085 h" split across two lines reads as two values. -->
-    <div class="flex flex-wrap items-baseline gap-x-2">
+    <div ref="row" class="flex min-w-0 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. -->
-      <span class="whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink">
+      <span
+        ref="figure"
+        class="max-w-full whitespace-nowrap font-mono text-3xl font-medium tracking-tight text-ink"
+        :class="fit.clipped.value ? 'inline-block overflow-hidden text-ellipsis align-bottom' : ''"
+        :style="figureStyle"
+        :title="figureTitle"
+      >
         <!-- Each side wrapped in a plain element: LpNumberFlow renders more
              than one root node, which a Transition cannot fade. -->
         <Transition v-bind="FADE">

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/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)
+  })
+}

package/src/composables/useFitScale.ts

@@ -0,0 +1,43 @@
+import { onBeforeUnmount, onMounted, ref, watch, type Ref } from "vue"
+
+/*
+ * How much a line that must not wrap has to shrink to fit its box. Text width
+ * grows in step with the font size, so the width the content would have at
+ * full size is its current width over the current scale, and one measurement
+ * gives the answer. The scale stops at `min`: past it the text would be too
+ * small to read, and `clipped` says the caller should cut it instead.
+ */
+export function useFitScale(
+  box: Ref<HTMLElement | null | undefined>,
+  content: Ref<HTMLElement | null | undefined>,
+  min = 0.6,
+) {
+  const scale = ref(1)
+  const clipped = ref(false)
+  let observer: ResizeObserver | undefined
+
+  function measure() {
+    const room = box.value?.clientWidth ?? 0
+    const width = content.value?.scrollWidth ?? 0
+    if (!room || !width) return
+    const natural = width / scale.value
+    const next = Math.max(min, Math.min(1, Math.floor((room / natural) * 100) / 100))
+    if (next !== scale.value) scale.value = next
+    clipped.value = natural * next > room + 0.5
+  }
+
+  function observe() {
+    observer?.disconnect()
+    if (typeof ResizeObserver === "undefined") return
+    observer = new ResizeObserver(measure)
+    if (box.value) observer.observe(box.value)
+    if (content.value) observer.observe(content.value)
+    measure()
+  }
+
+  onMounted(observe)
+  watch([box, content], observe, { flush: "post" })
+  onBeforeUnmount(() => observer?.disconnect())
+
+  return { scale, clipped }
+}

package/src/composables/useShift.ts

@@ -62,6 +62,9 @@ export interface UseShift {
   retune: () => void
 }
 
+/** Set on the box while it eases its width: where that width will land. */
+export const TARGET_WIDTH = "--lp-shift-to-w"
+
 /** Kept in step with the `duration-fast` token the transition utilities use. */
 const TWEEN_MS = 160
 
@@ -190,6 +193,8 @@ export function useShift(
     if (wantsWidth()) node.style.width = ""
     const toHeight = wantsHeight() ? node.offsetHeight : 0
     const toWidth = wantsWidth() ? node.offsetWidth : 0
+    // offsetWidth is rounded, and content that needs 406.4px wraps at 406.
+    const exactWidth = wantsWidth() ? Math.ceil(node.getBoundingClientRect().width) : 0
     restoreScroll(tops)
     lastHeight = toHeight
     lastWidth = toWidth
@@ -215,6 +220,10 @@ export function useShift(
     void node.offsetHeight
     if (movesHeight) node.style.height = `${toHeight}px`
     if (movesWidth) node.style.width = `${toWidth}px`
+    // The width the box is heading for, for content that would otherwise lay
+    // itself out at every in-between width: a wrapping row inside a widening
+    // box broke onto a second line for the length of the tween.
+    if (movesWidth) node.style.setProperty(TARGET_WIDTH, `${exactWidth}px`)
     restoreScroll(tops)
 
     inFlight = true
@@ -233,6 +242,7 @@ export function useShift(
       // clearing it let the box spread to the window's edges.
       if (wantsHeight()) node.style.height = ""
       if (wantsWidth()) node.style.width = ""
+      node.style.removeProperty(TARGET_WIDTH)
       // Re-read rather than trusting the target: the layout around may have
       // moved meanwhile, and the next tween has to start from where it sits.
       lastHeight = node.offsetHeight