@leavepulse/ui 0.73.0 → 0.73.6

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-rr5kqiK3.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-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.73.0",
+  "version": "0.73.6",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCommandPalette.vue

@@ -1250,6 +1250,10 @@ function onRowClick(event: MouseEvent, c: Command) {
 }
 
 async function run(row: Command | undefined) {
+  // A closing palette has already reset to its first rows, where the command
+  // just run sits again as recent: an Enter that lands during the fade ran it
+  // a second time (two snapshots for one pick).
+  if (!props.open) return
   if (!row || row.disabled || executing.value) return
   const c = fallbackOf.get(row) ?? row
   // The highlight stays on the same index, which is now the first row that

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/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/useMergedClass.ts

@@ -1,5 +1,6 @@
 import { computed, useAttrs, type ComputedRef, type MaybeRefOrGetter, toValue } from "vue"
-import { cn } from "tailwind-variants"
+import { extendTailwindMerge } from "tailwind-merge"
+import { cx } from "tailwind-variants"
 
 /*
  * "The class the consumer passed should win."
@@ -23,6 +24,28 @@ import { cn } from "tailwind-variants"
  * the component said nothing about shadows.
  */
 
+/*
+ * tailwind-merge knows Tailwind's own scales only, so the kit's named tokens
+ * (`rounded-card`, `shadow-panel`, `ease-emphasized`) looked like unrelated
+ * classes to it: `class="rounded-card"` on a box that rounds itself
+ * `rounded-control` kept both, and stylesheet order picked the control radius.
+ * Named here from tokens.css, so a consumer's token wins like any utility.
+ */
+const kitMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      radius: ["control", "card", "pill", "inner", "small"],
+      shadow: ["panel"],
+      ease: ["emphasized", "travel", "settle"],
+    },
+  },
+})
+
+function merge(...classes: (string | undefined | null | false)[]): string {
+  const joined = cx(...classes)
+  return joined ? kitMerge(joined) : ""
+}
+
 /**
  * Merges the component's own classes with the `class` attribute the consumer
  * passed, resolving Tailwind conflicts in the consumer's favour.
@@ -43,7 +66,7 @@ export function useMergedClass(
   const attrs = useAttrs()
   // `cn` returns undefined when everything it was given was empty; a class
   // binding is happier with "" than with undefined.
-  return computed(() => cn(toValue(own), attrs.class as string | undefined) ?? "")
+  return computed(() => merge(toValue(own), attrs.class as string | undefined))
 }
 
 /**
@@ -82,5 +105,5 @@ export function useMergedAttrs(own: MaybeRefOrGetter<string | undefined>): {
  * component merging a class onto a child rather than its own root.
  */
 export function mergeClass(...classes: (string | undefined | null | false)[]): string {
-  return cn(...classes) ?? ""
+  return merge(...classes)
 }

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