@leavepulse/ui 0.22.20 → 0.22.22

package/src/components/LpModal.vue

@@ -9,7 +9,8 @@ import {
   DialogTitle,
 } from "reka-ui"
 import type { ComponentPublicInstance } from "vue"
-import { computed, onBeforeUnmount, ref, useSlots, watch } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import { useShift } from "../composables/useShift"
 import { CLOSE_ICON } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -86,20 +87,14 @@ const bodyPad = computed(() =>
 
 /*
  * Height is content-derived, so a body that arrives late — a placeholder swapped
- * for the loaded thing — resizes the panel in a single frame, right on top of
- * the open animation. CSS alone can't smooth it: `height: auto` isn't
- * interpolable, and the keyword-interpolation escape hatches
- * (`interpolate-size`, `calc-size()`) are Chromium-only, so they would do
- * nothing in the WebKitGTK launcher. Measuring and pinning a pixel height is
- * what works on every engine.
+ * for the loaded thing — would resize the panel in a single frame, right on top
+ * of the open animation. The easing is set up further down.
  *
  * The pin is always the panel's own natural height, so `max-h` still clips and
  * the body keeps `flex-1 min-h-0` — an over-tall panel hands its overflow to the
  * scroll area exactly as before. A panel whose size never moves is pinned once
  * and never transitions.
  */
-// reka renders a real element but exposes it as a component instance, so the
-// panel is reached through $el.
 const panelRef = ref<ComponentPublicInstance | null>(null)
 
 /**
@@ -156,130 +151,27 @@ function onOpenAutoFocus(event: Event) {
     return
   }
 }
-const tweening = ref(false)
-const resizing = ref(false)
-
-/** Kept in step with the `duration-fast` utility on the panel. */
-const TWEEN_MS = 160
-
-let ro: ResizeObserver | undefined
-let mo: MutationObserver | undefined
-let raf = 0
-let settleTimer: ReturnType<typeof setTimeout> | undefined
-/** Where the panel last settled, so a retune has a height to ease FROM. */
-let lastHeight = 0
-/** True while a tween owns the height, so observers don't cancel it midway. */
-let inFlight = false
-
-// The height is driven imperatively rather than through a style binding. By the
-// time replacement content is in the DOM the panel has already reflowed to its
-// new size, so a bound value would only ever be written once, with no earlier
-// height for the transition to start from. Writing the OLD height, forcing a
-// reflow, then writing the new one gives the transition both ends.
-const retune = (el: HTMLElement) => {
-  // 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 just wrote.
-  if (inFlight) return
-  // Remembered, not measured: by the time either observer fires the panel has
-  // already reflowed, so the element can only report where it is going.
-  const from = lastHeight
-  el.style.height = ""
-  // `max-h` comes from a class, so the panel already reports the clipped figure
-  // once the cap bites. Pinning that would leave a short panel sitting over
-  // content it can no longer grow to fit, so the natural height is measured with
-  // the cap lifted and the clamp is left to CSS afterwards.
-  el.style.maxHeight = "none"
-  const to = el.offsetHeight
-  el.style.maxHeight = ""
-  lastHeight = to
-  // Nothing moved, so there is nothing to ease — and leaving the height unset
-  // keeps the panel free to size itself.
-  if (to === 0 || from === 0 || to === from) return
-  el.style.height = `${from}px`
-  void el.offsetHeight
-  el.style.height = `${to}px`
-
-  inFlight = true
-  // While the panel is still catching up, the body is shorter than the content
-  // it already holds, so the scroll area would flash a bar for an overflow that
-  // resolves itself the moment the transition lands.
-  resizing.value = true
-  clearTimeout(settleTimer)
-  settleTimer = setTimeout(() => {
-    inFlight = false
-    resizing.value = false
-    // Released once the panel has arrived. A height left pinned in pixels stops
-    // being a starting point and becomes a cap: content that grows afterwards
-    // is clipped, and `max-h` can no longer size the panel itself.
-    el.style.height = ""
-    // Re-read rather than trusting `to`: `max-h` may have clamped the panel
-    // short of it, and the next tween has to start from where it really sits.
-    lastHeight = el.offsetHeight
-  }, TWEEN_MS)
-}
+// The panel's height eases between content-derived sizes — see
+// `useShift`, which owns the measure/pin/tween mechanism and is shared
+// with LpShift. Gated on `open`, because the panel is portalled and remounts
+// on every open: a remount must measure afresh rather than ease in from the
+// size the previous incarnation happened to hold.
+const {
+  el: sizedEl,
+  tweening,
+  resizing,
+} = useShift({ axis: "height", enabled: () => props.open })
 
-// Keyed off `open` rather than the ref: the panel is portalled and remounts on
-// every open, and the teardown has to run on close, when the ref is already gone.
+// reka renders a real element but exposes it as a component instance, so the
+// sized element is handed over through $el once the panel has mounted.
 watch(
-  () => props.open,
-  (isOpen) => {
-    ro?.disconnect()
-    mo?.disconnect()
-    ro = undefined
-    mo = undefined
-    cancelAnimationFrame(raf)
-    clearTimeout(settleTimer)
-    tweening.value = false
-    resizing.value = false
-
-    lastHeight = 0
-    inFlight = false
-
-    const el = panelRef.value?.$el
-    if (!isOpen || !(el instanceof HTMLElement)) return
-
-    lastHeight = el.offsetHeight
-    el.style.height = `${el.offsetHeight}px`
-    // The opening panel must not animate its height in from the pre-content box,
-    // 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 panel at its opening size.
-    raf = requestAnimationFrame(() => {
-      tweening.value = true
-      el.style.height = ""
-    })
-
-    // Two triggers, since either can move the height 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 panel —
-    // that would feed the pin straight back in.
-    const watchChildren = () => {
-      if (!ro) return
-      ro.disconnect()
-      for (const child of Array.from(el.children)) ro.observe(child)
-    }
-    if (typeof ResizeObserver !== "undefined") {
-      ro = new ResizeObserver(() => retune(el))
-      watchChildren()
-    }
-    if (typeof MutationObserver !== "undefined") {
-      mo = new MutationObserver(() => {
-        watchChildren()
-        retune(el)
-      })
-      mo.observe(el, { childList: true, subtree: true, characterData: true })
-    }
+  () => (props.open ? panelRef.value : null),
+  (panel) => {
+    const el = panel?.$el
+    sizedEl.value = el instanceof HTMLElement ? el : null
   },
   { flush: "post" },
 )
-
-onBeforeUnmount(() => {
-  ro?.disconnect()
-  mo?.disconnect()
-  cancelAnimationFrame(raf)
-  clearTimeout(settleTimer)
-})
 </script>
 
 <template>

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"