@leavepulse/ui 0.22.21 → 0.23.0

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"

package/src/theme/presets.ts

@@ -35,7 +35,10 @@ export const dark: TokenSet = {
     brandSoft: "rgba(0, 188, 255, 0.16)",
     action: "#39e58c",
     actionHover: "#4dffa1",
+    actionSoft: "rgba(57, 229, 140, 0.14)",
     accent: "#f0b35a",
+    accentHover: "#f2bf74",
+    accentSoft: "rgba(240, 179, 90, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -64,7 +67,10 @@ export const light: TokenSet = {
     brandSoft: "rgba(0, 134, 199, 0.12)",
     action: "#1f9d5f",
     actionHover: "#23b06b",
+    actionSoft: "rgba(31, 157, 95, 0.12)",
     accent: "#aa6f1d",
+    accentHover: "#b88641",
+    accentSoft: "rgba(170, 111, 29, 0.12)",
     danger: "#c2333b",
     dangerHover: "#d23b44",
     dangerSoft: "rgba(194, 51, 59, 0.12)",
@@ -93,7 +99,10 @@ export const lime: TokenSet = {
     brandSoft: "rgba(196, 240, 66, 0.14)",
     action: "#5fd97a",
     actionHover: "#74e88d",
+    actionSoft: "rgba(95, 217, 122, 0.14)",
     accent: "#ffb84d",
+    accentHover: "#ffc369",
+    accentSoft: "rgba(255, 184, 77, 0.14)",
     danger: "#ff6f6f",
     dangerHover: "#ff8585",
     dangerSoft: "rgba(255, 111, 111, 0.14)",
@@ -148,7 +157,10 @@ export const leavepulse: TokenSet = {
     brandSoft: "rgba(0, 188, 255, 0.2)",
     action: "#44c2ad",
     actionHover: "#56d3be",
+    actionSoft: "rgba(68, 194, 173, 0.14)",
     accent: "#d36a2c",
+    accentHover: "#da824e",
+    accentSoft: "rgba(211, 106, 44, 0.14)",
     danger: "#f87171",
     dangerHover: "#fca5a5",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -181,7 +193,10 @@ export const rose: TokenSet = {
     brandSoft: "rgba(251, 113, 133, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#ef4444",
     dangerHover: "#f56565",
     dangerSoft: "rgba(239, 68, 68, 0.14)",
@@ -210,7 +225,10 @@ export const amber: TokenSet = {
     brandSoft: "rgba(245, 158, 11, 0.14)",
     action: "#4ade80",
     actionHover: "#5cea90",
+    actionSoft: "rgba(74, 222, 128, 0.14)",
     accent: "#38bdf8",
+    accentHover: "#58c8f9",
+    accentSoft: "rgba(56, 189, 248, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -239,7 +257,10 @@ export const violet: TokenSet = {
     brandSoft: "rgba(167, 139, 250, 0.14)",
     action: "#34d399",
     actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
     accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
     danger: "#f87171",
     dangerHover: "#fa8a8a",
     dangerSoft: "rgba(248, 113, 113, 0.14)",
@@ -268,7 +289,10 @@ export const nord: TokenSet = {
     brandSoft: "rgba(136, 192, 208, 0.16)",
     action: "#a3be8c",
     actionHover: "#b3cb9f",
+    actionSoft: "rgba(163, 190, 140, 0.16)",
     accent: "#ebcb8b",
+    accentHover: "#eed39e",
+    accentSoft: "rgba(235, 203, 139, 0.16)",
     danger: "#bf616a",
     dangerHover: "#cb727b",
     dangerSoft: "rgba(191, 97, 106, 0.16)",

package/src/theme/tokens.ts

@@ -18,7 +18,10 @@ export interface ColorTokens {
   brandSoft: string
   action: string
   actionHover: string
+  actionSoft: string
   accent: string
+  accentHover: string
+  accentSoft: string
   danger: string
   dangerHover: string
   dangerSoft: string
@@ -99,7 +102,10 @@ export const COLOR_VARS: Record<keyof ColorTokens, string> = {
   brandSoft: "--color-brand-soft",
   action: "--color-action",
   actionHover: "--color-action-hover",
+  actionSoft: "--color-action-soft",
   accent: "--color-accent",
+  accentHover: "--color-accent-hover",
+  accentSoft: "--color-accent-soft",
   danger: "--color-danger",
   dangerHover: "--color-danger-hover",
   dangerSoft: "--color-danger-soft",

package/src/tokens/tokens.css

@@ -36,7 +36,10 @@
   --color-brand-soft: rgba(0, 188, 255, 0.16);
   --color-action: #39e58c;
   --color-action-hover: #4dffa1;
+  --color-action-soft: rgba(57, 229, 140, 0.14);
   --color-accent: #f0b35a;
+  --color-accent-hover: #f2bf74;
+  --color-accent-soft: rgba(240, 179, 90, 0.14);
   --color-danger: #ff6f6f;
   --color-danger-hover: #ff8585;
   --color-danger-soft: rgba(255, 111, 111, 0.14);