@leavepulse/ui 0.22.20 → 0.22.22

package/dist/components/LpFileTree.vue.d.ts

@@ -71,7 +71,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     expand: (node: FileNode) => any;
     select: (node: FileNode) => any;
     summary: (summary: FileTreeSummary) => any;
-    contextmenu: (node: FileNode, event: MouseEvent) => any;
     open: (node: FileNode) => any;
     collapse: (node: FileNode) => any;
     "update:selected": (id: string) => any;
@@ -81,7 +80,6 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     onExpand?: ((node: FileNode) => any) | undefined;
     onSelect?: ((node: FileNode) => any) | undefined;
     onSummary?: ((summary: FileTreeSummary) => any) | undefined;
-    onContextmenu?: ((node: FileNode, event: MouseEvent) => any) | undefined;
     onOpen?: ((node: FileNode) => any) | undefined;
     onCollapse?: ((node: FileNode) => any) | undefined;
     "onUpdate:selected"?: ((id: string) => any) | undefined;

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-CMy2qQ1m.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-Cw50eG_y.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTreeNode.vue.d.ts

@@ -30,13 +30,11 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     check: (node: FileNode, value: boolean) => any;
     focus: (node: FileNode) => any;
     select: (node: FileNode) => any;
-    contextmenu: (node: FileNode, event: MouseEvent) => any;
     toggle: (node: FileNode) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCheck?: ((node: FileNode, value: boolean) => any) | undefined;
     onFocus?: ((node: FileNode) => any) | undefined;
     onSelect?: ((node: FileNode) => any) | undefined;
-    onContextmenu?: ((node: FileNode, event: MouseEvent) => any) | undefined;
     onToggle?: ((node: FileNode) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpFileTreeNode.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTreeNode-Cgf68Tup.js";
+import { _ as _sfc_main } from "../chunks/LpFileTreeNode-DFg4PhOK.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFormField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFormField-Bn-ZwC6z.js";
+import { _ as _sfc_main } from "../chunks/LpFormField-CesaPWPO.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpInput-BkomKdqQ.js";
+import { _ as _sfc_main } from "../chunks/LpInput-BfLIWV-P.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-CNNSf5pv.js";
+import { _ as _sfc_main } from "../chunks/LpModal-D_o-56To.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNotificationBell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNotificationBell-DWDEkmdA.js";
+import { _ as _sfc_main } from "../chunks/LpNotificationBell-a08cl0yY.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPasswordInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPasswordInput-DgUC2Ur7.js";
+import { _ as _sfc_main } from "../chunks/LpPasswordInput-BfjDrvZq.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShift.vue.d.ts

@@ -0,0 +1,36 @@
+import { ShiftAxis } from '../composables/useShift';
+type __VLS_Props = {
+    /**
+     * 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;
+};
+declare var __VLS_1: {
+    resizing: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
+    resizing: import('vue').Ref<boolean, boolean>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    axis: ShiftAxis;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpShift.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpShift-DXNsauQZ.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-CNNSf5pv.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-D_o-56To.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

package/dist/components/LpTextarea.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTextarea-CRAkhemZ.js";
+import { _ as _sfc_main } from "../chunks/LpTextarea-BDl7PR9U.js";
 export {
   _sfc_main as default
 };

package/dist/composables/useShift.d.ts

@@ -0,0 +1,35 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+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;
+}
+export declare function useShift(options?: UseShiftOptions): UseShift;

package/dist/composables/useShift.js

@@ -0,0 +1,112 @@
+import { ref, watch, toValue, onBeforeUnmount } from "vue";
+const TWEEN_MS = 160;
+function useShift(options = {}) {
+  const el = ref(null);
+  const tweening = ref(false);
+  const resizing = ref(false);
+  let ro;
+  let mo;
+  let raf = 0;
+  let settleTimer;
+  let lastHeight = 0;
+  let lastWidth = 0;
+  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;
+  }
+  function retune() {
+    const node = el.value;
+    if (!node) return;
+    if (inFlight) return;
+    const fromHeight = lastHeight;
+    const fromWidth = lastWidth;
+    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;
+    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;
+      node.style.height = "";
+      node.style.width = "";
+      lastHeight = node.offsetHeight;
+      lastWidth = node.offsetWidth;
+    }, wait);
+  }
+  function teardown() {
+    ro?.disconnect();
+    mo?.disconnect();
+    ro = void 0;
+    mo = void 0;
+    cancelAnimationFrame(raf);
+    clearTimeout(settleTimer);
+    tweening.value = false;
+    resizing.value = false;
+    lastHeight = 0;
+    lastWidth = 0;
+    inFlight = false;
+  }
+  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`;
+      raf = requestAnimationFrame(() => {
+        tweening.value = true;
+        node.style.height = "";
+        node.style.width = "";
+      });
+      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 };
+}
+export {
+  useShift
+};

package/dist/index.d.ts

@@ -67,6 +67,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';
@@ -117,6 +118,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/dist/index.js

@@ -1,9 +1,9 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CxKwIG6T.js";
+import { _ as _2 } from "./chunks/LpAddressInput-peTpNSJK.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _5 } from "./chunks/LpAppShell-D8CAP9oF.js";
+import { _ as _5 } from "./chunks/LpAppShell-CaQYQKZV.js";
 import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
@@ -14,7 +14,7 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-CmgeAdCh.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-DOU_zaTI.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -22,22 +22,22 @@ import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _20 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-CMy2qQ1m.js";
+import { _ as _23 } from "./chunks/LpFileTree-Cw50eG_y.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
-import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
+import { _ as _24 } from "./chunks/LpFormField-CesaPWPO.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
-import { _ as _27 } from "./chunks/LpInput-BkomKdqQ.js";
+import { _ as _27 } from "./chunks/LpInput-BfLIWV-P.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
-import { _ as _31 } from "./chunks/LpModal-CNNSf5pv.js";
-import { _ as _32 } from "./chunks/LpNotificationBell-DWDEkmdA.js";
+import { _ as _31 } from "./chunks/LpModal-D_o-56To.js";
+import { _ as _32 } from "./chunks/LpNotificationBell-a08cl0yY.js";
 import { _ as _33 } from "./chunks/LpNumberField-B3JuQFol.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _36 } from "./chunks/LpPasswordInput-DgUC2Ur7.js";
+import { _ as _36 } from "./chunks/LpPasswordInput-BfjDrvZq.js";
 import { _ as _37 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";
@@ -48,24 +48,25 @@ import { _ as _42 } from "./chunks/LpScrollArea-D8xyKXcF.js";
 import { _ as _43 } from "./chunks/LpSegmented-BmpanyAo.js";
 import { _ as _44 } from "./chunks/LpSelect-Cw8-gL5F.js";
 import { _ as _45 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _46 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _46 } from "./chunks/LpSidebar-D3GGLSE7.js";
-import { _ as _47 } from "./chunks/LpSkeleton-eSFIo4kD.js";
-import { _ as _48 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _49 } from "./chunks/LpStat-CdbEFOvn.js";
-import { _ as _50 } from "./chunks/LpStepper-5dFTrW21.js";
-import { _ as _51 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _52 } from "./chunks/LpTable-DTj52qlg.js";
-import { _ as _53 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _54 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _55 } from "./chunks/LpTextarea-CRAkhemZ.js";
+import { _ as _47 } from "./chunks/LpSidebar-D3GGLSE7.js";
+import { _ as _48 } from "./chunks/LpSkeleton-eSFIo4kD.js";
+import { _ as _49 } from "./chunks/LpSlider-B1SF3pRV.js";
+import { _ as _50 } from "./chunks/LpStat-CdbEFOvn.js";
+import { _ as _51 } from "./chunks/LpStepper-5dFTrW21.js";
+import { _ as _52 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _53 } from "./chunks/LpTable-DTj52qlg.js";
+import { _ as _54 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _55 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _56 } from "./chunks/LpTextarea-BDl7PR9U.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
-import { D, _ as _56, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
-import { _ as _57 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _58 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _59 } from "./chunks/LpTooltip-D1hbjQWG.js";
-import { _ as _60 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
-import { _ as _61 } from "./chunks/LpUptimeBar-CB366k0O.js";
+import { D, _ as _57, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { _ as _58 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _59 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _60 } from "./chunks/LpTooltip-D1hbjQWG.js";
+import { _ as _61 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
+import { _ as _62 } from "./chunks/LpUptimeBar-CB366k0O.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";
@@ -74,6 +75,7 @@ import { appleModifierLabel, isAppleKeyboard, useHotkeys } from "./composables/u
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
 import { useSettled } from "./composables/useSettled.js";
+import { useShift } from "./composables/useShift.js";
 import { useTilt } from "./composables/useTilt.js";
 import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
@@ -155,23 +157,24 @@ export {
   _43 as LpSegmented,
   _44 as LpSelect,
   _45 as LpServiceNode,
+  _46 as LpShift,
   default3 as LpShortcutsDialog,
-  _46 as LpSidebar,
-  _47 as LpSkeleton,
-  _48 as LpSlider,
-  _49 as LpStat,
-  _50 as LpStepper,
-  _51 as LpSwitch,
-  _52 as LpTable,
-  _53 as LpTableOfContents,
-  _54 as LpTabs,
-  _55 as LpTextarea,
-  _56 as LpThemeSwitcher,
-  _57 as LpTilt,
-  _58 as LpToaster,
-  _59 as LpTooltip,
-  _60 as LpTopologyCanvas,
-  _61 as LpUptimeBar,
+  _47 as LpSidebar,
+  _48 as LpSkeleton,
+  _49 as LpSlider,
+  _50 as LpStat,
+  _51 as LpStepper,
+  _52 as LpSwitch,
+  _53 as LpTable,
+  _54 as LpTableOfContents,
+  _55 as LpTabs,
+  _56 as LpTextarea,
+  _57 as LpThemeSwitcher,
+  _58 as LpTilt,
+  _59 as LpToaster,
+  _60 as LpTooltip,
+  _61 as LpTopologyCanvas,
+  _62 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,
@@ -239,6 +242,7 @@ export {
   useLayout,
   useRovingFocus,
   useSettled,
+  useShift,
   u as useTheme,
   useTilt,
   useToast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.22.20",
+  "version": "0.22.22",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -51,6 +51,7 @@ export const COMPONENT_NAMES = [
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",
+  "LpShift",
   "LpShortcutsDialog",
   "LpSidebar",
   "LpSidebarNav",

package/src/components/LpAppShell.vue

@@ -11,6 +11,12 @@
  *  - a default `isActive` (path prefix-match) and a default page title derived
  *    from the nav items, so the header title and the active pill never drift.
  *
+ * The header bar's two content-driven regions — the title block and the actions
+ * cluster — ease between sizes rather than snapping (LpShift). Those regions
+ * change constantly in normal use: actions teleport in per route or per section
+ * tab, and every label is translated, so their measurements move under the
+ * user. Without the easing each change re-lays the bar in a single frame.
+ *
  * Everything product-specific goes through slots: #logo (brand in the rail
  * header), #sidebar-actions / #sidebar-footer (pass-through to LpSidebar),
  * #header-actions (right side of the top bar — bell, search, theme switch),
@@ -18,10 +24,11 @@
  * Overlays that aren't part of the frame (command palette, toaster) live in the
  * host next to <LpAppShell>.
  */
-import { computed, ref, watch } from "vue"
+import { computed, watch } from "vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
+import LpShift from "./LpShift.vue"
 import LpSidebar from "./LpSidebar.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -195,13 +202,26 @@ defineExpose({ openDrawer: _openDrawer })
           <LpIcon name="lucide:menu" :size="18" />
         </LpButton>
 
-        <slot name="header-title">
-          <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
-        </slot>
-
-        <div v-if="$slots['header-actions']" class="ml-auto flex items-center gap-2">
+        <!-- The title block eases its height: a page that adds a subtitle, or a
+             translation that wraps a long title onto a second line, otherwise
+             re-lays the whole bar in one frame. Width is left free so the
+             truncation still resolves against the space actually available. -->
+        <LpShift axis="height" class="flex min-w-0 flex-1 items-center">
+          <slot name="header-title">
+            <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
+          </slot>
+        </LpShift>
+
+        <!-- Actions ease their WIDTH. This is the bar's worst offender: page
+             actions arrive by teleport, so a button appears or disappears with
+             the route or the section tab, and a translation swaps a short label
+             for a long one — each snapping every control to its left sideways.
+             Kept mounted regardless of the slot, so a page that only teleports
+             into it still gets the easing (an empty box measures zero wide and
+             costs nothing). -->
+        <LpShift axis="width" class="ml-auto flex shrink-0 items-center gap-2">
           <slot name="header-actions" />
-        </div>
+        </LpShift>
       </header>
 
       <!-- full-bleed: page owns the whole region (canvas/map); otherwise the

package/src/components/LpFileTree.vue

@@ -103,9 +103,6 @@ const emit = defineEmits<{
   (e: "update:checked", ids: string[]): void
   /** Ticked set changed, with the rolled-up stats already computed. */
   (e: "summary", summary: FileTreeSummary): void
-  /* Not prevented here: a caller that wants the native menu on some rows needs
-     the event intact to decide. */
-  (e: "contextmenu", node: FileNode, event: MouseEvent): void
 }>()
 
 defineSlots<{
@@ -531,7 +528,6 @@ defineExpose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary }
           @toggle="onToggle"
           @focus="focusedId = $event.id"
           @check="onCheck"
-          @contextmenu="(n, e) => emit('contextmenu', n, e)"
         >
           <template #row="slotProps">
             <slot name="row" v-bind="slotProps" />

package/src/components/LpFileTreeNode.vue

@@ -47,7 +47,6 @@ const emit = defineEmits<{
   (e: "toggle", node: FileNode): void
   (e: "focus", node: FileNode): void
   (e: "check", node: FileNode, value: boolean): void
-  (e: "contextmenu", node: FileNode, event: MouseEvent): void
 }>()
 
 // Declared explicitly: the component renders itself, so an inferred slot type
@@ -177,7 +176,6 @@ function onActivate() {
         ]"
         :style="{ paddingLeft: `${depth * 14 + 6}px` }"
         @click.stop="onActivate"
-        @contextmenu="emit('contextmenu', node, $event)"
       >
         <!-- Chevron sits in a fixed-width slot so names line up whether or not
              the row can expand. Leaves get the same gutter, left empty. -->
@@ -283,7 +281,6 @@ function onActivate() {
           @toggle="emit('toggle', $event)"
           @focus="emit('focus', $event)"
           @check="(n, v) => emit('check', n, v)"
-          @contextmenu="(n, e) => emit('contextmenu', n, e)"
         >
           <template #row="slotProps">
             <slot name="row" v-bind="slotProps" />

package/src/components/LpFormField.vue

@@ -2,9 +2,15 @@
 /*
  * Form-control wrapper: label + the control (default slot) + hint/error.
  * Error takes priority over hint. Uses reka Label for proper association.
+ *
+ * The message line eases its height (LpShift): validation messages arrive
+ * and clear as the user types, and each one appearing under the control shoved
+ * every field below it down a line. The control itself is left outside the
+ * eased box, so the thing being typed into never moves.
  */
 import { Label } from "reka-ui"
 import { useId } from "vue"
+import LpShift from "./LpShift.vue"
 
 defineProps<{
   label?: string
@@ -17,6 +23,7 @@ const id = useId()
 </script>
 
 <template>
+  <!-- `gap` covers label→control only; the message carries its own spacing. -->
   <div class="flex flex-col gap-1.5">
     <Label v-if="label" :for="id" class="text-sm font-medium text-ink">
       {{ label }}
@@ -25,7 +32,17 @@ const id = useId()
 
     <slot :id="id" />
 
-    <p v-if="error" class="text-xs text-danger">{{ error }}</p>
-    <p v-else-if="hint" class="text-xs text-muted">{{ hint }}</p>
+    <!-- Swapping hint→error changes the text but not the height, so the eased
+         box only ever moves when a message appears or clears.
+
+         The gap that used to separate the message from the control is carried
+         INSIDE the eased box as padding, not by the parent's `gap`: a flex gap
+         applies to the wrapper whether or not it holds a message, which would
+         leave every message-less field a row taller than before — and would be
+         a step the easing could not cover, since it exists even at height 0. -->
+    <LpShift axis="height">
+      <p v-if="error" class="pt-1.5 text-xs text-danger">{{ error }}</p>
+      <p v-else-if="hint" class="pt-1.5 text-xs text-muted">{{ hint }}</p>
+    </LpShift>
   </div>
 </template>