@leavepulse/ui 0.22.21 → 0.23.0

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-Bmo6q9Kd.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.d.ts

@@ -7,6 +7,11 @@ type __VLS_Props = {
     label?: string;
     hint?: string;
     error?: string;
+    /**
+     * Marks the label with the required indicator; the attribute still reaches
+     * the <textarea> for native validation.
+     */
+    required?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;

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-1ENb3ZAO.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-B_kj0T2b.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-BgpJgrnP.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,11 +1,11 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CxKwIG6T.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BTqnUXZG.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 _7 } from "./chunks/LpAvatar-D-jHoHR7.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
 import { _ as _10 } from "./chunks/LpButton-5VXXCjwF.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-CObRah9c.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-Cw50eG_y.js";
+import { _ as _23 } from "./chunks/LpFileTree-CN0IOIY7.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-jwqXlAy0.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 _29 } from "./chunks/LpLink-DU9kkKGW.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-Bmo6q9Kd.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 { 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 { _ 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-1ENb3ZAO.js";
+import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-BgpJgrnP.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-BgpJgrnP.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/dist/theme/tokens.d.ts

@@ -11,7 +11,10 @@ export interface ColorTokens {
     brandSoft: string;
     action: string;
     actionHover: string;
+    actionSoft: string;
     accent: string;
+    accentHover: string;
+    accentSoft: string;
     danger: string;
     dangerHover: string;
     dangerSoft: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.22.21",
+  "version": "0.23.0",
   "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/LpAvatar.vue

@@ -12,15 +12,23 @@ import { computed, onMounted, ref } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 
 const avatar = tv({
-  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-pill bg-surface-soft font-medium text-muted-strong",
+  base: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-surface-soft font-medium text-muted-strong",
   variants: {
     size: {
       sm: "size-7 text-xs",
       md: "size-9 text-sm",
       lg: "size-12 text-base",
     },
+    // People read as circles; things (servers, projects, orgs) read as
+    // rounded squares — the same distinction platform icons make.
+    shape: {
+      circle: "rounded-pill",
+      soft: "rounded-card",
+      square: "rounded-control",
+    },
+    ring: { true: "ring-2 ring-line", false: "" },
   },
-  defaultVariants: { size: "md" },
+  defaultVariants: { size: "md", shape: "circle", ring: false },
 })
 
 type AvatarVariants = VariantProps<typeof avatar>
@@ -31,10 +39,14 @@ const props = withDefaults(
     alt?: string
     fallback?: string
     size?: AvatarVariants["size"]
+    /** Silhouette: circle for people, soft/square for servers and projects. */
+    shape?: AvatarVariants["shape"]
+    /** Draws a hairline ring, for avatars laid over imagery or other avatars. */
+    ring?: boolean
     /** Right-click menu (e.g. account quick actions). Consumer-supplied. */
     menuItems?: ContextMenuItemDef[]
   }>(),
-  { size: "md" },
+  { size: "md", shape: "circle", ring: false },
 )
 
 const initials = computed(
@@ -55,12 +67,12 @@ onMounted(() => {
 
 <template>
   <LpContextMenu v-if="menuItems?.length" :items="menuItems">
-    <AvatarRoot :class="avatar({ size })" v-bind="$attrs">
+    <AvatarRoot :class="avatar({ size, shape, ring })" v-bind="$attrs">
       <AvatarImage v-if="src && mounted" :src="src" :alt="alt" class="size-full object-cover" />
       <AvatarFallback>{{ initials }}</AvatarFallback>
     </AvatarRoot>
   </LpContextMenu>
-  <AvatarRoot v-else :class="avatar({ size })" v-bind="$attrs">
+  <AvatarRoot v-else :class="avatar({ size, shape, ring })" v-bind="$attrs">
     <AvatarImage v-if="src" :src="src" :alt="alt" class="size-full object-cover" />
     <AvatarFallback>{{ initials }}</AvatarFallback>
   </AvatarRoot>

package/src/components/LpConfirmDialog.vue

@@ -3,7 +3,7 @@
 import LpButton from "./LpButton.vue"
 import LpModal from "./LpModal.vue"
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     open?: boolean
     title?: string
@@ -11,8 +11,15 @@ withDefaults(
     confirmLabel?: string
     cancelLabel?: string
     danger?: boolean
+    /**
+     * The confirm action is in flight: the button disables and swaps to
+     * `loadingLabel`, and confirming no longer closes the dialog — the owner
+     * closes it once the work settles, so a failure can stay on screen.
+     */
+    loading?: boolean
+    loadingLabel?: string
   }>(),
-  { confirmLabel: "Confirm", cancelLabel: "Cancel" },
+  { confirmLabel: "Confirm", cancelLabel: "Cancel", loadingLabel: "Working…" },
 )
 
 const emit = defineEmits<{
@@ -23,7 +30,9 @@ const emit = defineEmits<{
 
 function confirm() {
   emit("confirm")
-  emit("update:open", false)
+  // An async confirm owns its own dismissal; closing here would tear the
+  // dialog down before the caller knows whether the action succeeded.
+  if (!props.loading) emit("update:open", false)
 }
 function cancel() {
   emit("cancel")
@@ -40,9 +49,15 @@ function cancel() {
   >
     <slot />
     <template #footer>
-      <LpButton variant="ghost" @click="cancel">{{ cancelLabel }}</LpButton>
-      <LpButton :variant="danger ? 'danger' : 'solid'" @click="confirm">
-        {{ confirmLabel }}
+      <LpButton variant="ghost" :disabled="loading" @click="cancel">
+        {{ cancelLabel }}
+      </LpButton>
+      <LpButton
+        :variant="danger ? 'danger' : 'solid'"
+        :disabled="loading"
+        @click="confirm"
+      >
+        {{ loading ? loadingLabel : confirmLabel }}
       </LpButton>
     </template>
   </LpModal>

package/src/components/LpFileTreeNode.vue

@@ -178,8 +178,17 @@ function onActivate() {
         @click.stop="onActivate"
       >
         <!-- 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. -->
-        <span class="flex size-4 shrink-0 items-center justify-center">
+             the row can expand. Leaves get the same gutter, left empty.
+
+             It is its own hit target, like the checkbox: opening a folder to
+             see what is in it is a different intent from selecting it, and on
+             a tree that drives a details pane the two must not be the same
+             click. The row as a whole still does both. -->
+        <span
+          class="flex size-4 shrink-0 items-center justify-center"
+          :class="canExpand ? 'cursor-pointer rounded-sm hover:bg-line' : ''"
+          @click.stop="canExpand && !node.disabled ? emit('toggle', node) : undefined"
+        >
           <LpIcon
             v-if="isLoading"
             name="lucide:loader-circle"