@leavepulse/ui 0.22.21 → 0.22.22

package/src/components/LpNotificationBell.vue

@@ -16,6 +16,7 @@ import LpEmptyState from "./LpEmptyState.vue"
 import LpIcon from "./LpIcon.vue"
 import LpPopover from "./LpPopover.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import LpShift from "./LpShift.vue"
 
 export interface NotificationItem {
   id: string
@@ -225,52 +226,57 @@ function timeAgo(iso?: string): string {
       </button>
     </header>
 
-    <div v-if="loading" class="space-y-1.5 px-2 pb-2">
-      <div v-for="i in 4" :key="i" class="h-12 animate-pulse rounded-control bg-surface-soft" />
-    </div>
+    <!-- Skeleton → empty → feed are three different heights, so the panel
+         jumped as the list loaded and again whenever it emptied. Easing the
+         swap keeps the popover from snapping under the bell. -->
+    <LpShift axis="height">
+      <div v-if="loading" class="space-y-1.5 px-2 pb-2">
+        <div v-for="i in 4" :key="i" class="h-12 animate-pulse rounded-control bg-surface-soft" />
+      </div>
 
-    <LpEmptyState
-      v-else-if="!items.length"
-      icon="lucide:bell-off"
-      :title="l.empty"
-      class="px-3 py-10"
-    />
+      <LpEmptyState
+        v-else-if="!items.length"
+        icon="lucide:bell-off"
+        :title="l.empty"
+        class="px-3 py-10"
+      />
 
-    <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
-         hover-lit) instead of full-width strips with hard dividers — lighter and
-         easier to scan. Each row carries its own right-click action menu. -->
-    <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
-      <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
-        <component
-          :is="item.link ? 'a' : 'button'"
-          :href="item.link || undefined"
-          :type="item.link ? undefined : 'button'"
-          class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
-          :class="item.read ? '' : 'bg-brand-soft/35'"
-          @click="onSelect(item)"
-        >
-          <span
-            class="grid size-7 shrink-0 place-items-center rounded-control"
-            :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+      <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
+           hover-lit) instead of full-width strips with hard dividers — lighter and
+           easier to scan. Each row carries its own right-click action menu. -->
+      <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
+        <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
+          <component
+            :is="item.link ? 'a' : 'button'"
+            :href="item.link || undefined"
+            :type="item.link ? undefined : 'button'"
+            class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-white/[0.05] focus-visible:bg-white/[0.05]"
+            :class="item.read ? '' : 'bg-brand-soft/35'"
+            @click="onSelect(item)"
           >
-            <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
-          </span>
-          <span class="min-w-0 flex-1">
-            <span class="flex items-center gap-1.5">
-              <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
-                {{ item.title }}
-              </span>
-              <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
+            <span
+              class="grid size-7 shrink-0 place-items-center rounded-control"
+              :class="item.read ? 'bg-surface-soft text-muted' : 'bg-brand-soft text-brand'"
+            >
+              <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
             </span>
-            <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
-              {{ item.body }}
-            </span>
-            <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
-              {{ timeAgo(item.createdAt) }}
+            <span class="min-w-0 flex-1">
+              <span class="flex items-center gap-1.5">
+                <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
+                  {{ item.title }}
+                </span>
+                <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
+              </span>
+              <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
+                {{ item.body }}
+              </span>
+              <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
+                {{ timeAgo(item.createdAt) }}
+              </span>
             </span>
-          </span>
-        </component>
-      </LpContextMenu>
-    </LpScrollArea>
+          </component>
+        </LpContextMenu>
+      </LpScrollArea>
+    </LpShift>
   </LpPopover>
 </template>

package/src/components/LpShift.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+/*
+ * Wraps content whose size is derived from what's inside it, so that everything
+ * around it shifts smoothly instead of jumping.
+ *
+ * Reach for it wherever a change of content changes a box's measurements: a
+ * toolbar that gains or loses a button, a label swapped by a translation, a
+ * placeholder replaced by the loaded thing, a validation message appearing
+ * under a field. Those all resize in a single frame otherwise, and everything
+ * they push jolts with them.
+ *
+ *   <LpShift axis="width">
+ *     <slot name="actions" />
+ *   </LpShift>
+ *
+ * Note it is the NEIGHBOURS that motivate this, not the box: a fixed-height
+ * header never resizes, yet its controls jump whenever one of them changes
+ * width. Easing that one box is what makes the row glide.
+ *
+ * Content is measured through a wrapper that is never itself pinned, so the
+ * slot keeps whatever layout it brings (flex row, grid, plain text). `axis`
+ * picks which dimension is content-derived: pin only the one that actually
+ * moves, so the other stays free to respond to the surrounding layout.
+ *
+ * The mechanism — measure the natural size, pin it in pixels, tween — lives in
+ * `useShift`, and LpModal drives its panel with the same composable.
+ */
+import { computed } from "vue"
+import { useShift, type ShiftAxis } from "../composables/useShift"
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Which dimension eases. `"width"` for a row that gains/loses controls,
+     * `"height"` for a stack whose content grows, `"both"` when either can.
+     */
+    axis?: ShiftAxis
+    /** Tween length in ms. Defaults to the kit's `--duration-fast`. */
+    duration?: number
+    /**
+     * Turn the easing off entirely — the wrapper stays, the box resizes
+     * instantly. For a box that is being driven by something else (a drag, a
+     * canvas), where a tween would fight the thing already animating it.
+     */
+    disabled?: boolean
+  }>(),
+  { axis: "height", disabled: false },
+)
+
+const { el, tweening, resizing } = useShift({
+  axis: () => props.axis,
+  duration: () => props.duration,
+  enabled: () => !props.disabled,
+})
+
+// Only the pinned axis is transitioned: naming the other one would animate a
+// dimension the layout is still free to set, so a flex row settling into place
+// would ease sideways for no reason.
+//
+// Spelled out as whole literals rather than built from `axis`. The consuming
+// app's Tailwind scans this file as TEXT, so a class assembled at runtime is a
+// class it never sees — the utility simply wouldn't be emitted.
+const TRANSITION_CLASS: Record<ShiftAxis, string> = {
+  height: "transition-[height]",
+  width: "transition-[width]",
+  both: "transition-[height,width]",
+}
+const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
+
+defineExpose({ resizing })
+</script>
+
+<template>
+  <!-- `overflow-hidden` only while a tween owns the size: the box is briefly
+       smaller than the content it already holds, and without the clip that
+       content spills past the easing edge. Dropped once settled, so nothing
+       that legitimately overflows — a dropdown, a focus ring — is clipped at
+       rest. -->
+  <div
+    ref="el"
+    :class="[
+      tweening && !disabled
+        ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
+        : '',
+      resizing ? 'overflow-hidden' : '',
+    ]"
+  >
+    <slot :resizing="resizing" />
+  </div>
+</template>

package/src/composables/useShift.ts

@@ -0,0 +1,236 @@
+import { onBeforeUnmount, ref, toValue, watch, type MaybeRefOrGetter, type Ref } from "vue"
+
+/*
+ * "Let this box shift its neighbours smoothly instead of jolting them."
+ *
+ * A box sized by what's inside it resizes in a single frame: a button appears
+ * in a toolbar, a translation swaps a short word for a long one, a placeholder
+ * is replaced by the loaded thing — and the layout snaps. Every neighbour it
+ * pushes snaps with it.
+ *
+ * The easing is applied to the BOX, but the point of it is the neighbours. A
+ * header of fixed height never resizes, yet the controls inside it jump the
+ * moment one of them changes width; giving that one box its width back
+ * gradually is what turns the jump into a glide. So this is named for what the
+ * user sees — things shifting — not for the measurement that achieves it.
+ *
+ * CSS alone cannot smooth this. `width`/`height: auto` are not interpolable,
+ * and the keyword-interpolation escape hatches (`interpolate-size`,
+ * `calc-size()`) are Chromium-only, so they'd do nothing in the WebKitGTK
+ * launcher. Measuring the natural size and pinning it in pixels is what works
+ * on every engine.
+ *
+ * This was first solved inside LpModal, whose panel grows as its body arrives.
+ * The mechanism is the same wherever content drives size, so it lives here and
+ * LpModal consumes it — see also LpShift, the wrapper form.
+ */
+
+export type ShiftAxis = "height" | "width" | "both"
+
+export interface UseShiftOptions {
+  /** Which dimension is content-derived. Default `"height"`. */
+  axis?: MaybeRefOrGetter<ShiftAxis | undefined>
+  /** Tween length. Defaults to the kit's `--duration-fast` (160ms). */
+  duration?: MaybeRefOrGetter<number | undefined>
+  /**
+   * Gate: while falsy the element is left entirely alone — no observers, no
+   * pinning. Use it for a box that only exists while something is open, so a
+   * remounted element starts measuring from scratch rather than easing in from
+   * a size it held in a previous life. Default: always active.
+   */
+  enabled?: MaybeRefOrGetter<unknown>
+}
+
+export interface UseShift {
+  /** Attach to the element whose content-derived size should ease. */
+  el: Ref<HTMLElement | null>
+  /**
+   * True while a tween owns the size. Bind the transition utilities off this,
+   * so the element is only transition-enabled once it has a size to ease FROM
+   * (otherwise the very first pin animates in from zero).
+   */
+  tweening: Ref<boolean>
+  /**
+   * True while the element is still catching up to its new size. During the
+   * tween the box is briefly smaller than the content it already holds, so any
+   * scroll region inside it would raise a bar for an overflow that resolves
+   * itself as the tween lands — hide the bar (not the scrolling) on this.
+   */
+  resizing: Ref<boolean>
+  /** Re-measure and ease to the current natural size. Rarely needed by hand. */
+  retune: () => void
+}
+
+/** Kept in step with the `duration-fast` token the transition utilities use. */
+const TWEEN_MS = 160
+
+export function useShift(
+  options: UseShiftOptions = {},
+): UseShift {
+  const el = ref<HTMLElement | null>(null)
+  const tweening = ref(false)
+  const resizing = ref(false)
+
+  let ro: ResizeObserver | undefined
+  let mo: MutationObserver | undefined
+  let raf = 0
+  let settleTimer: ReturnType<typeof setTimeout> | undefined
+  /** Where the box last settled, so a retune has a size to ease FROM. */
+  let lastHeight = 0
+  let lastWidth = 0
+  /** True while a tween owns the size, so observers don't cancel it midway. */
+  let inFlight = false
+
+  const axisOf = () => toValue(options.axis) ?? "height"
+  const wantsHeight = () => axisOf() !== "width"
+  const wantsWidth = () => axisOf() !== "height"
+
+  function reducedMotion() {
+    return (
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+    )
+  }
+
+  /*
+   * The size is driven imperatively rather than through a style binding. By the
+   * time replacement content is in the DOM the box has already reflowed to its
+   * new size, so a bound value would only ever be written once, with no earlier
+   * size for the transition to start from. Writing the OLD size, forcing a
+   * reflow, then writing the new one gives the transition both ends.
+   */
+  function retune() {
+    const node = el.value
+    if (!node) return
+    // One swap wakes both observers — the mutation as content lands, the resize
+    // as it reflows — and the second call would clear the pin the first wrote.
+    if (inFlight) return
+
+    // Remembered, not measured: by the time either observer fires the box has
+    // already reflowed, so the element can only report where it is going.
+    const fromHeight = lastHeight
+    const fromWidth = lastWidth
+
+    // Measured with any cap lifted, then the clamp is left to CSS. A `max-*`
+    // from a class makes the element report the clipped figure once the cap
+    // bites, and pinning that would hold the box short of the content it now
+    // has to fit.
+    if (wantsHeight()) {
+      node.style.height = ""
+      node.style.maxHeight = "none"
+    }
+    if (wantsWidth()) {
+      node.style.width = ""
+      node.style.maxWidth = "none"
+    }
+    const toHeight = wantsHeight() ? node.offsetHeight : 0
+    const toWidth = wantsWidth() ? node.offsetWidth : 0
+    if (wantsHeight()) node.style.maxHeight = ""
+    if (wantsWidth()) node.style.maxWidth = ""
+    lastHeight = toHeight
+    lastWidth = toWidth
+
+    // Nothing moved on either axis, so there is nothing to ease — and leaving
+    // the size unset keeps the box free to size itself.
+    //
+    // Only the FROM size has to be non-zero. A target of zero is a real
+    // collapse — the last message cleared, the list emptied — and is exactly
+    // the case worth easing; an earlier guard against `to === 0` silently
+    // dropped it, so content vanishing still snapped. A zero FROM is the
+    // different thing it was meant to catch: the box was not in the layout yet,
+    // so there is no size to ease out of.
+    const movesHeight =
+      wantsHeight() && fromHeight !== 0 && toHeight !== fromHeight
+    const movesWidth = wantsWidth() && fromWidth !== 0 && toWidth !== fromWidth
+    if (!movesHeight && !movesWidth) return
+
+    if (movesHeight) node.style.height = `${fromHeight}px`
+    if (movesWidth) node.style.width = `${fromWidth}px`
+    void node.offsetHeight
+    if (movesHeight) node.style.height = `${toHeight}px`
+    if (movesWidth) node.style.width = `${toWidth}px`
+
+    inFlight = true
+    resizing.value = true
+    clearTimeout(settleTimer)
+    const wait = reducedMotion() ? 0 : (toValue(options.duration) ?? TWEEN_MS)
+    settleTimer = setTimeout(() => {
+      inFlight = false
+      resizing.value = false
+      // Released once the box has arrived. A size left pinned in pixels stops
+      // being a starting point and becomes a cap: content that grows afterwards
+      // is clipped, and `max-*` can no longer size the element itself.
+      node.style.height = ""
+      node.style.width = ""
+      // Re-read rather than trusting the target: a `max-*` may have clamped the
+      // box short of it, and the next tween has to start from where it sits.
+      lastHeight = node.offsetHeight
+      lastWidth = node.offsetWidth
+    }, wait)
+  }
+
+  function teardown() {
+    ro?.disconnect()
+    mo?.disconnect()
+    ro = undefined
+    mo = undefined
+    cancelAnimationFrame(raf)
+    clearTimeout(settleTimer)
+    tweening.value = false
+    resizing.value = false
+    lastHeight = 0
+    lastWidth = 0
+    inFlight = false
+  }
+
+  // Keyed off the element AND the gate: a portalled box remounts on every open,
+  // and the teardown has to run on close, when the ref is already gone.
+  watch(
+    [el, () => toValue(options.enabled) ?? true],
+    ([node, enabled]) => {
+      teardown()
+      if (!enabled || !node) return
+
+      lastHeight = node.offsetHeight
+      lastWidth = node.offsetWidth
+      if (wantsHeight()) node.style.height = `${lastHeight}px`
+      if (wantsWidth()) node.style.width = `${lastWidth}px`
+      // A box must not animate in from its pre-content size, so the transition
+      // only arms once that first pin has painted. The pin is dropped in the
+      // same frame: it exists to give the first `retune` something to start
+      // from, and holding it would cap the box at its opening size.
+      raf = requestAnimationFrame(() => {
+        tweening.value = true
+        node.style.height = ""
+        node.style.width = ""
+      })
+
+      // Two triggers, since either can move the size alone: the resize observer
+      // catches a child growing in place (an image decoding, a list filling
+      // in), the mutation observer catches one subtree swapped for another,
+      // where every observed box may keep its size. Children are observed,
+      // never the element itself — that would feed the pin straight back in.
+      const watchChildren = () => {
+        if (!ro) return
+        ro.disconnect()
+        for (const child of Array.from(node.children)) ro.observe(child)
+      }
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(() => retune())
+        watchChildren()
+      }
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(() => {
+          watchChildren()
+          retune()
+        })
+        mo.observe(node, { childList: true, subtree: true, characterData: true })
+      }
+    },
+    { flush: "post" },
+  )
+
+  onBeforeUnmount(teardown)
+
+  return { el, tweening, resizing, retune }
+}

package/src/index.ts

@@ -99,6 +99,7 @@ export { default as LpSelect } from "./components/LpSelect.vue"
 export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
 export { default as LpServiceNode } from "./components/LpServiceNode.vue"
 export type { ServiceNodeData } from "./components/LpServiceNode.vue"
+export { default as LpShift } from "./components/LpShift.vue"
 export { default as LpShortcutsDialog } from "./components/LpShortcutsDialog.vue"
 export type { ShortcutEntry, ShortcutGroup } from "./components/LpShortcutsDialog.vue"
 export { default as LpSidebar } from "./components/LpSidebar.vue"
@@ -192,6 +193,8 @@ export { useRovingFocus } from "./composables/useRovingFocus"
 export type { RovingItem, UseRovingFocusOptions } from "./composables/useRovingFocus"
 export { useSettled } from "./composables/useSettled"
 export type { UseSettledOptions } from "./composables/useSettled"
+export { useShift } from "./composables/useShift"
+export type { ShiftAxis, UseShift, UseShiftOptions } from "./composables/useShift"
 export { useTilt } from "./composables/useTilt"
 export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
 export { useZoomPan } from "./composables/useZoomPan"