@leavepulse/ui 0.73.0 → 0.73.4

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/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