@leavepulse/ui 0.87.0 → 0.88.0

package/dist/components/badge.js

@@ -1,4 +1,4 @@
-const BADGE_REMOVE = "grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring";
+const BADGE_REMOVE = "lp-tap grid size-4 shrink-0 place-items-center rounded-pill text-muted outline-none transition-colors duration-fast hover:bg-ink/10 hover:text-ink focus-visible:ring-2 focus-visible:ring-ring";
 export {
   BADGE_REMOVE
 };

package/dist/components/dropdown.d.ts

@@ -14,6 +14,19 @@ export declare const PANEL_SURFACE = "group rounded-control border border-line b
  * rest use z-(--z-popover)).
  */
 export declare const POPOVER_PANEL: string;
+/**
+ * Keeps a free-form panel (popover, menu, hover card) inside the window. Its
+ * width stops 0.5rem short of each edge, so a w-96 panel or a long menu label
+ * no longer runs off a phone; its height stops at the room reka measured on the
+ * side it opened, and the rest scrolls. A date picker opened in landscape used
+ * to hang off the top of the screen with its first weeks out of reach.
+ */
+export declare const PANEL_FIT = "max-w-[calc(100vw-1rem)] max-h-(--reka-popper-available-height) overflow-y-auto";
+/**
+ * A list row on a touch screen: 2.5rem tall instead of 2, so a thumb picks the
+ * row it is on and not its neighbour. A mouse keeps the compact row.
+ */
+export declare const TOUCH_ROW = "[@media(hover:none)_and_(pointer:coarse)]:py-2.5";
 /**
  * A selectable option row: layout, highlight state, and the staggered cascade.
  * Cascades downward by default and upward when the panel is flipped above the
@@ -40,4 +53,5 @@ export declare const COMBOBOX_PANEL: {
     readonly position: "popper";
     readonly sideOffset: 6;
 };
+export declare const COMBOBOX_FIT = "flex flex-col max-h-[min(18rem,var(--reka-popper-available-height,18rem))]";
 export declare const CLOSE_ICON: string;

package/dist/components/dropdown.js

@@ -3,19 +3,25 @@ const POPOVER_ANIM = "data-[state=open]:animate-[popover-in_140ms_var(--ease-emp
 const TOOLTIP_ANIM = "data-[state=delayed-open]:animate-[popover-in_120ms_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_100ms_ease] data-[side=top]:data-[state=delayed-open]:animate-[popover-in-up_120ms_var(--ease-emphasized)] data-[side=top]:data-[state=closed]:animate-[popover-out-up_100ms_ease]";
 const PANEL_SURFACE = "group rounded-control border border-line bg-surface-overlay shadow-panel backdrop-blur";
 const POPOVER_PANEL = PANEL_SURFACE + " " + POPOVER_ANIM;
-const OPTION_ITEM = "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none animate-[rise-in_180ms_var(--ease-emphasized)_both] [--rise:-6px] group-data-[side=top]:[--rise:6px] data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand";
+const PANEL_FIT = "max-w-[calc(100vw-1rem)] max-h-(--reka-popper-available-height) overflow-y-auto";
+const TOUCH_ROW = "[@media(hover:none)_and_(pointer:coarse)]:py-2.5";
+const OPTION_ITEM = "flex cursor-pointer items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm text-ink outline-none " + TOUCH_ROW + " animate-[rise-in_180ms_var(--ease-emphasized)_both] [--rise:-6px] group-data-[side=top]:[--rise:6px] data-[highlighted]:bg-brand-soft data-[highlighted]:text-brand";
 const optionStagger = (index) => ({
   animationDelay: `${staggerDelay(index, 0, 22, 12)}ms`
 });
 const COMBOBOX_PANEL = { collisionPadding: 8, position: "popper", sideOffset: 6 };
+const COMBOBOX_FIT = "flex flex-col max-h-[min(18rem,var(--reka-popper-available-height,18rem))]";
 const CLOSE_ICON = "transition-transform duration-medium ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0";
 export {
   CLOSE_ICON,
+  COMBOBOX_FIT,
   COMBOBOX_PANEL,
   OPTION_ITEM,
+  PANEL_FIT,
   PANEL_SURFACE,
   POPOVER_ANIM,
   POPOVER_PANEL,
   TOOLTIP_ANIM,
+  TOUCH_ROW,
   optionStagger
 };

package/dist/components/menuWhen.js

@@ -1,5 +1,5 @@
 import { defineComponent, h } from "vue";
-import { _ as _sfc_main } from "../chunks/LpContextMenu-DYpDm6iI.js";
+import { _ as _sfc_main } from "../chunks/LpContextMenu-DEFirphS.js";
 const MenuWhen = defineComponent({
   name: "MenuWhen",
   inheritAttrs: false,

package/dist/components/modalDepth.d.ts

@@ -1,4 +1,5 @@
 import { type ComputedRef } from "vue";
+export declare const MODAL_MAX_HEIGHT = "min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)))";
 export interface ModalLayer {
     /** Join the stack on top. Ignored on the server, where nothing would ever release it. */
     claim: () => void;

package/dist/components/modalDepth.js

@@ -1,5 +1,6 @@
 import { ref, computed } from "vue";
 const STEP = 20;
+const MODAL_MAX_HEIGHT = "min(90vh, calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)))";
 const STATE_KEY = /* @__PURE__ */ Symbol.for("@leavepulse/ui:modal-stack");
 const g = globalThis;
 const state = g[STATE_KEY] ??= { stack: ref([]), nextId: 0, elements: /* @__PURE__ */ new Map() };
@@ -41,6 +42,7 @@ function topModalElement() {
   return state.elements.get(id)?.() ?? null;
 }
 export {
+  MODAL_MAX_HEIGHT,
   anyModalOpen,
   topModalElement,
   useModalLayer

package/dist/composables/useReveal.js

@@ -1,10 +1,10 @@
 import { nodeWindow } from "./realm.js";
-import { ref, watch, toValue, onBeforeUnmount } from "vue";
+import { ref, toValue, watch, onBeforeUnmount } from "vue";
 import { prefersReducedMotion } from "./easing.js";
 function useReveal(options = {}) {
   const { threshold = 0.25, rootMargin = "0px" } = options;
   const el = ref(null);
-  const revealed = ref(typeof window === "undefined");
+  const revealed = ref(!!toValue(options.immediate));
   let observer = null;
   function stop() {
     observer?.disconnect();
@@ -17,7 +17,7 @@ function useReveal(options = {}) {
   watch(
     [el, () => toValue(options.immediate)],
     ([node, immediate]) => {
-      if (revealed.value) return;
+      if (revealed.value || typeof window === "undefined") return;
       if (immediate || prefersReducedMotion()) {
         reveal();
         return;

package/dist/composables/useTouchHold.d.ts

@@ -0,0 +1,19 @@
+export interface TouchHoldOptions {
+    /** Whether a touch press may start a hold now. */
+    enabled: () => boolean;
+    /** How long the finger must stay, in ms. */
+    delay: () => number;
+    onHold: () => void;
+}
+export declare function useTouchHold(options: TouchHoldOptions): {
+    /** Drops a hold in progress, as if the finger had been lifted off the screen. */
+    cancel: () => void;
+    handlers: {
+        onPointerdown: (event: PointerEvent) => void;
+        onPointermove: (event: PointerEvent) => void;
+        onPointerup: (event: PointerEvent) => void;
+        onPointercancel: (event?: PointerEvent) => void;
+        onClickCapture: (event: MouseEvent) => void;
+        onContextmenu: (event: Event) => void;
+    };
+};

package/dist/composables/useTouchHold.js

@@ -0,0 +1,60 @@
+import { onBeforeUnmount } from "vue";
+const SLOP = 8;
+const CLICK_AFTER_RELEASE_MS = 350;
+function useTouchHold(options) {
+  let timer = 0;
+  let finger = null;
+  let start = { x: 0, y: 0 };
+  let held = false;
+  function stop() {
+    window.clearTimeout(timer);
+    timer = 0;
+  }
+  function onPointerDown(event) {
+    if (timer && event.pointerId !== finger) return;
+    held = false;
+    if (event.pointerType !== "touch" || !options.enabled()) return;
+    finger = event.pointerId;
+    start = { x: event.clientX, y: event.clientY };
+    stop();
+    timer = window.setTimeout(() => {
+      timer = 0;
+      held = true;
+      options.onHold();
+    }, options.delay());
+  }
+  function onPointerMove(event) {
+    if (!timer || event.pointerId !== finger) return;
+    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > SLOP) stop();
+  }
+  function onPointerUp(event) {
+    if (finger !== null && event.pointerId !== finger) return;
+    finger = null;
+    stop();
+    if (held) window.setTimeout(() => held = false, CLICK_AFTER_RELEASE_MS);
+  }
+  function onPointerCancel(event) {
+    if (event && finger !== null && event.pointerId !== finger) return;
+    finger = null;
+    stop();
+    held = false;
+  }
+  function onClickCapture(event) {
+    if (!held) return;
+    held = false;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+  function onContextMenu(event) {
+    if (timer || held) event.preventDefault();
+  }
+  onBeforeUnmount(stop);
+  return {
+    /** Drops a hold in progress, as if the finger had been lifted off the screen. */
+    cancel: () => onPointerCancel(),
+    handlers: { onPointerdown: onPointerDown, onPointermove: onPointerMove, onPointerup: onPointerUp, onPointercancel: onPointerCancel, onClickCapture, onContextmenu: onContextMenu }
+  };
+}
+export {
+  useTouchHold
+};

package/dist/index.js

@@ -1,15 +1,15 @@
 import { _ } from "./chunks/LayoutCanvas-j4TZqx1A.js";
-import { _ as _2 } from "./chunks/LpAddressInput-CfqQR5jE.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BCqR0zmv.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DVfiy3rR.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-Cx_MSZl9.js";
-import { _ as _5 } from "./chunks/LpAlert-CYtbpRYW.js";
-import { _ as _6 } from "./chunks/LpAppShell-BQG98odS.js";
-import { _ as _7 } from "./chunks/LpAutocomplete-VNID5zdy.js";
+import { _ as _4 } from "./chunks/LpActionBar-43WHmTsM.js";
+import { _ as _5 } from "./chunks/LpAlert-Q0h7Gucu.js";
+import { _ as _6 } from "./chunks/LpAppShell-BWaVRsDB.js";
+import { _ as _7 } from "./chunks/LpAutocomplete-YPxAPHEo.js";
 import { _ as _8 } from "./chunks/LpAvatar-CfLBqlY1.js";
 import { _ as _9 } from "./chunks/LpBadge-Bh5roBr_.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-Zv1fn9e_.js";
-import { _ as _11 } from "./chunks/LpButton-DSHioIfD.js";
+import { _ as _11 } from "./chunks/LpButton-BvVoF-PO.js";
 import { _ as _12 } from "./chunks/LpCalendar-aACjUhpM.js";
 import { _ as _13 } from "./chunks/LpCard-xXBqLVGo.js";
 import { default as default2 } from "./components/LpChart.vue.js";
@@ -18,10 +18,10 @@ import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceSc
 import { chartView, lttbIndices, minMaxBuckets, panRange, slotOf, sourceOf, zoomRange } from "./components/chartWindow.js";
 import { useChartSync } from "./composables/useChartSync.js";
 import { createLinkedView, linkChart, linkLog, linkPipeline, linkTable, linkTopology, provideLinkedView, useLinkedView } from "./composables/useLinkedView.js";
-import { _ as _14 } from "./chunks/LpCheckbox-P7tEw8GO.js";
-import { _ as _15 } from "./chunks/LpCodeBlock-BNThgUdQ.js";
+import { _ as _14 } from "./chunks/LpCheckbox-C9VnPIQf.js";
+import { _ as _15 } from "./chunks/LpCodeBlock-BgWcg2mk.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-EXpwcX-t.js";
+import { _ as _16 } from "./chunks/LpColorPicker-KGMG8QEh.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems, searchCommandItems, swapCommandLayout } from "./components/commandSearch.js";
@@ -33,21 +33,21 @@ import { default as default6 } from "./components/LpPaletteStats.vue.js";
 import { default as default7 } from "./components/LpPaletteSwatches.vue.js";
 import { default as default8 } from "./components/LpKeys.vue.js";
 import { comboKeys, comboSteps } from "./components/keys.js";
-import { _ as _18 } from "./chunks/LpConfirmDialog-DPiPVRn_.js";
-import { _ as _19 } from "./chunks/LpConfirmHost-Ddiljlog.js";
+import { _ as _18 } from "./chunks/LpConfirmDialog-y6k0ryWR.js";
+import { _ as _19 } from "./chunks/LpConfirmHost-D-X0tDym.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _20 } from "./chunks/LpContextMenu-DYpDm6iI.js";
-import { _ as _21 } from "./chunks/LpDatePicker-BElEHVm6.js";
-import { _ as _22 } from "./chunks/LpDateRangePicker-vLt-drEu.js";
+import { _ as _20 } from "./chunks/LpContextMenu-DEFirphS.js";
+import { _ as _21 } from "./chunks/LpDatePicker-Dlyvgsan.js";
+import { _ as _22 } from "./chunks/LpDateRangePicker-CAn2yGbn.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-C9gkNMYw.js";
 import { clampRange, dayAllowed, defaultDatePresets, defaultRangePresets, formatRange, normalizeRange, sameRange } from "./components/dateRange.js";
 import { _ as _24 } from "./chunks/LpDisclosure-D4JZ-o8K.js";
 import { _ as _25 } from "./chunks/LpDivider-CUX46KR0.js";
-import { _ as _26 } from "./chunks/LpDrawer-C97k-3L2.js";
-import { _ as _27 } from "./chunks/LpDropdownMenu-BPEsqZCN.js";
+import { _ as _26 } from "./chunks/LpDrawer-iRHwJOGn.js";
+import { _ as _27 } from "./chunks/LpDropdownMenu-CdCe7D2d.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
-import { _ as _28 } from "./chunks/LpEmptyState-DrHBR3yh.js";
-import { _ as _29 } from "./chunks/LpFileTree-BcQgsw4e.js";
+import { _ as _28 } from "./chunks/LpEmptyState-DLOm07KH.js";
+import { _ as _29 } from "./chunks/LpFileTree-BN_zybBN.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-DUPo1Yii.js";
 import { _ as _31 } from "./chunks/LpFormField-jbM7K1Hg.js";
@@ -55,61 +55,61 @@ import { _ as _32 } from "./chunks/LpIcon-CxHFPwKt.js";
 import { i, b, a, c } from "./chunks/icons-C8ccRCKw.js";
 import { default as default10 } from "./components/LpImageEditor.vue.js";
 import { _ as _33 } from "./chunks/LpInfraNode-BYiMFDnA.js";
-import { _ as _34 } from "./chunks/LpInput-BU5IsOlE.js";
-import { _ as _35 } from "./chunks/LpLightbox-REei-y5e.js";
+import { _ as _34 } from "./chunks/LpInput-DGMpxrcg.js";
+import { _ as _35 } from "./chunks/LpLightbox-a24V_0Wk.js";
 import { fileNameOf, isVideoItem } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-BCkqdH66.js";
-import { _ as _38 } from "./chunks/LpLogInspector-Bwz351LY.js";
+import { _ as _37 } from "./chunks/LpLogViewer-BuIzr_6h.js";
+import { _ as _38 } from "./chunks/LpLogInspector-BhJTJIst.js";
 import { compilePattern, findIds, messageShape, structuredPayload, timeMs } from "./components/logTools.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
-import { _ as _39 } from "./chunks/LpMediaGallery-BF1Bch3v.js";
-import { _ as _40 } from "./chunks/LpModal-BK2T5uIG.js";
-import { _ as _41 } from "./chunks/LpModalNav-Dk4eHpg6.js";
-import { _ as _42 } from "./chunks/LpNotificationBell-CMwUXhFg.js";
-import { _ as _43 } from "./chunks/LpNotificationFeed-BXsRp9jm.js";
-import { _ as _44 } from "./chunks/LpNumberField-QUMXvpqx.js";
-import { _ as _45 } from "./chunks/LpTimeField-Mi8H1g_9.js";
+import { _ as _39 } from "./chunks/LpMediaGallery-B7DOV_aL.js";
+import { _ as _40 } from "./chunks/LpModal-D1E7rQzw.js";
+import { _ as _41 } from "./chunks/LpModalNav-DivqT1NV.js";
+import { _ as _42 } from "./chunks/LpNotificationBell-KRgdRZs-.js";
+import { _ as _43 } from "./chunks/LpNotificationFeed-CMGYU8c-.js";
+import { _ as _44 } from "./chunks/LpNumberField-C0LSu-tl.js";
+import { _ as _45 } from "./chunks/LpTimeField-Dio7Tj9A.js";
 import { _ as _46 } from "./chunks/LpNumberFlow-Vqj0tP7B.js";
 import { _ as _47 } from "./chunks/LpOtpInput-C14XagVB.js";
 import { _ as _48 } from "./chunks/LpPagination-DGLntZJN.js";
-import { _ as _49 } from "./chunks/LpPasswordInput-W9AZfzaL.js";
-import { _ as _50 } from "./chunks/LpPie-pbrNFbRP.js";
-import { _ as _51 } from "./chunks/LpPhoneInput-DsRv-Qla.js";
+import { _ as _49 } from "./chunks/LpPasswordInput-LPVI7D3v.js";
+import { _ as _50 } from "./chunks/LpPie-CsiBXe-e.js";
+import { _ as _51 } from "./chunks/LpPhoneInput-BdglZsGH.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _52 } from "./chunks/LpPopover-BQSuxtai.js";
+import { _ as _52 } from "./chunks/LpPopover-w2rr4x7n.js";
 import { _ as _53 } from "./chunks/LpProgress-D_MSjowb.js";
-import { _ as _54 } from "./chunks/LpRadio-CWA5Eb3M.js";
-import { _ as _55 } from "./chunks/LpRadioGroup-D94KMStE.js";
+import { _ as _54 } from "./chunks/LpRadio-4KyxeSz4.js";
+import { _ as _55 } from "./chunks/LpRadioGroup-Cr_fmrBY.js";
 import { _ as _56 } from "./chunks/LpRollingText-B54Pje7P.js";
 import { _ as _57 } from "./chunks/LpScrollArea-CqvwfZs2.js";
 import { _ as _58 } from "./chunks/LpPageScrollbar-C9sTeU-2.js";
-import { _ as _59 } from "./chunks/LpSegmented-DD8MPj4j.js";
-import { _ as _60 } from "./chunks/LpSection-RKCwB0xN.js";
-import { _ as _61 } from "./chunks/LpSelect-BeXz1TWh.js";
+import { _ as _59 } from "./chunks/LpSegmented-DzFYP0ZF.js";
+import { _ as _60 } from "./chunks/LpSection-CwsfNR7N.js";
+import { _ as _61 } from "./chunks/LpSelect-Dffg5r4I.js";
 import { fitChips, toggledValues } from "./components/select.js";
 import { _ as _62 } from "./chunks/LpServiceNode-Cln2ntdw.js";
 import { _ as _63 } from "./chunks/LpShift-DAgS_d2x.js";
 import { _ as _64 } from "./chunks/LpSwap-M7nFeW3C.js";
 import { _ as _65 } from "./chunks/LpHintExample-YzCXiSUp.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _66 } from "./chunks/LpSidebar-DUFlf6Uu.js";
-import { _ as _67 } from "./chunks/LpContextSwitcher-BPDSkKyA.js";
+import { _ as _66 } from "./chunks/LpSidebar-DQtCYlT4.js";
+import { _ as _67 } from "./chunks/LpContextSwitcher-COw6GHPW.js";
 import { _ as _68 } from "./chunks/LpSkeleton-leTl53V9.js";
-import { _ as _69 } from "./chunks/LpSlider-BCy5rjwK.js";
-import { _ as _70 } from "./chunks/LpRangeSlider-CkP9hYUC.js";
+import { _ as _69 } from "./chunks/LpSlider-DUd4gXnw.js";
+import { _ as _70 } from "./chunks/LpRangeSlider-DbaITHtC.js";
 import { _ as _71 } from "./chunks/LpVideoBackdrop-57i8RY8g.js";
 import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } from "./components/videoBackdrop.js";
 import { default as default12 } from "./components/LpVideoTrim.vue.js";
-import { _ as _72 } from "./chunks/LpVideoCompress-CPUxXh-c.js";
+import { _ as _72 } from "./chunks/LpVideoCompress-CvxNdyjp.js";
 import { bitrateForHeight, canTranscodeVideo, estimateTranscodedBytes, probeVideo, transcodeVideo, transcodedName } from "./composables/videoTranscode.js";
-import { _ as _73 } from "./chunks/LpVideoPlayer-BbCjEQAx.js";
+import { _ as _73 } from "./chunks/LpVideoPlayer-FMuxTAU8.js";
 import { useVideoMedia } from "./composables/useVideoMedia.js";
 import { dragEnd, normalizeRange as normalizeRange2, parseClipTime, setEnd } from "./components/videoTrim.js";
 import { _ as _74 } from "./chunks/LpSparkline-11ryFdPX.js";
-import { _ as _75 } from "./chunks/LpStat-eVz7iUfD.js";
+import { _ as _75 } from "./chunks/LpStat-SyVb5JXm.js";
 import { _ as _76 } from "./chunks/LpStepper-DBNRA6Q2.js";
-import { _ as _77 } from "./chunks/LpSwitch-D7hmVsif.js";
+import { _ as _77 } from "./chunks/LpSwitch-D-mcaA6C.js";
 import { default as default13 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { filterRows, showOnly, shownValues } from "./components/tableFilter.js";
@@ -118,29 +118,29 @@ import { resolveRowMenu } from "./components/tableRowMenu.js";
 import { _ as _78 } from "./chunks/LpTableOfContents-CKkWEK6R.js";
 import { default as default14 } from "./components/LpTabs.vue.js";
 import { _ as _79 } from "./chunks/LpBottomNav-9AqvZlRW.js";
-import { _ as _80 } from "./chunks/LpTagsInput-D9uOSlvf.js";
+import { _ as _80 } from "./chunks/LpTagsInput-DD8-xe3F.js";
 import { addTags, splitTags } from "./components/tags.js";
-import { _ as _81 } from "./chunks/LpTextarea-DwE-lQt4.js";
-import { _ as _82 } from "./chunks/LpThemeSwitcher-B3R3nNid.js";
+import { _ as _81 } from "./chunks/LpTextarea-CQg-dVxN.js";
+import { _ as _82 } from "./chunks/LpThemeSwitcher-B3c44xFH.js";
 import { _ as _83 } from "./chunks/LpTilt-B7KHX1zH.js";
-import { _ as _84 } from "./chunks/LpToaster-DOJn6Vey.js";
-import { _ as _85 } from "./chunks/LpTooltip-Bz_rrq5S.js";
-import { _ as _86 } from "./chunks/LpTour-DUI_hoPv.js";
+import { _ as _84 } from "./chunks/LpToaster-Cdx1tnHB.js";
+import { _ as _85 } from "./chunks/LpTooltip-BKde8Xjv.js";
+import { _ as _86 } from "./chunks/LpTour-BGUKUxSZ.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
-import { _ as _87 } from "./chunks/LpHintLayer-CUSRLtLu.js";
-import { _ as _88 } from "./chunks/LpHints-BF40CP4_.js";
+import { _ as _87 } from "./chunks/LpHintLayer-nuMqfzvy.js";
+import { _ as _88 } from "./chunks/LpHints-ByAd3a76.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, dropzoneTip, hintKey, hintSummary, hotkeyTip, localHintStorage, noteDropzone, noteHotkeyTarget, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _89 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
-import { _ as _90 } from "./chunks/LpTopologyCanvas-5RFMP4gR.js";
+import { _ as _90 } from "./chunks/LpTopologyCanvas-CQ0l6A5h.js";
 import { clusterGraph, diffTopology, findPath, layeredLayout, neighborhood, topologyToSvg } from "./components/topologyGraph.js";
-import { _ as _91 } from "./chunks/LpUptimeBar-G7PfNJUH.js";
+import { _ as _91 } from "./chunks/LpUptimeBar-Dt6SY_-m.js";
 import { addLeaf, addTab, countBlocks, countLeaves, deserializeLayout, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, serializeLayout, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
 import { layoutController, useLayout } from "./layout/useLayout.js";
 import { useWorkspaces } from "./layout/useWorkspaces.js";
-import { _ as _92 } from "./chunks/LpWorkspaceSwitcher-bjkncjSl.js";
-import { _ as _93 } from "./chunks/LpInspector-CEko6-pS.js";
-import { _ as _94 } from "./chunks/LpWindow-Dp_0nNqg.js";
+import { _ as _92 } from "./chunks/LpWorkspaceSwitcher-DCIiOQt_.js";
+import { _ as _93 } from "./chunks/LpInspector-oTfkOdYd.js";
+import { _ as _94 } from "./chunks/LpWindow-DsPeiDCZ.js";
 import { WINDOW_DOCKS, clampRect, dockAt, dockedRect, isWindowRect, resizeRect, snapRect, useWindowLayer } from "./composables/windowing.js";
 import { THEME_COOKIE, applyTheme, applyThemeWithTransition, bootstrapTheme, cacheSystemThemes, normalizeTheme, parseTheme, prefersDarkScheme, revealTransition, serializeTheme, themeEntries, themeFromCookie, themeToCssRule, themeToCssVars, useTheme } from "./theme/useTheme.js";
 import { GLASS_BACKDROP_ATTR, NO_BACKDROP_ATTR, detectBackdropFilter, isBrokenBackdropEngine, setGlassBackdrop } from "./theme/backdrop.js";
@@ -188,14 +188,14 @@ import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
 import { _ as _95 } from "./chunks/LpThemeProvider-XK6ZeWAE.js";
 import { _ as _96 } from "./chunks/LpFrame-Bv5Fphte.js";
-import { _ as _97 } from "./chunks/LpThemeStudio-COn2H76d.js";
+import { _ as _97 } from "./chunks/LpThemeStudio-BPPctXgd.js";
 import { _ as _98 } from "./chunks/LpThemeStudioSection-B7bt8Iyg.js";
 import { isInternalHref, resolveLink } from "./components/link.js";
-import { _ as _99 } from "./chunks/LpRepeater-DLLcbQ6J.js";
+import { _ as _99 } from "./chunks/LpRepeater-C0rns2xW.js";
 import { _ as _100 } from "./chunks/LpGauge-KZaQ_FDR.js";
 import { _ as _101 } from "./chunks/LpQuota-BaCq5YOQ.js";
 import { _ as _102 } from "./chunks/LpStatus-C6GqSHJj.js";
-import { _ as _103 } from "./chunks/LpRelativeTime-0zI-44ve.js";
+import { _ as _103 } from "./chunks/LpRelativeTime-CN5bWD73.js";
 import { _ as _104 } from "./chunks/LpActivityLine-Ea-t5Vza.js";
 import { TONE_COLOR, TONE_SOFT, arcPath, capacityThresholds, meterFraction, toneAt } from "./components/meter.js";
 import { TONES, TONE_ALIASES, toneLook, toneOf } from "./components/tone.js";
@@ -203,7 +203,7 @@ import { formatAmount, quotaSegments, quotaState } from "./components/quota.js";
 import { compactNumber, decimalMark, formatBytes } from "./components/format.js";
 import { STATUS_LABELS, STATUS_LOOK } from "./components/status.js";
 import { formatRelativeTime } from "./components/relativeTime.js";
-import { _ as _105 } from "./chunks/LpPipeline-BHWmvOiv.js";
+import { _ as _105 } from "./chunks/LpPipeline-DVcoSs--.js";
 import { _ as _106 } from "./chunks/LpStepMark-CPGVj1XG.js";
 import { childProgress, connectorFilled, currentStepIndex, isSettled, overallStatus, stepElapsed } from "./components/pipeline.js";
 import { _ as _107 } from "./chunks/LpLoader-Bf1yZwaU.js";
@@ -211,14 +211,14 @@ import { useLoadingGate } from "./composables/useLoadingGate.js";
 import { useNow } from "./composables/useNow.js";
 import { _ as _108 } from "./chunks/LpCountdown-DVl7vXI1.js";
 import { DEFAULT_MILESTONES, DEFAULT_UNIT_LABELS, ceilToSecond, crossedMilestone, formatElapsed, formatTime, msToNextSecond, splitTime, timeParts } from "./components/timeSpan.js";
-import { _ as _109 } from "./chunks/LpCopyButton-CxX682t4.js";
-import { _ as _110 } from "./chunks/LpSecretField-Au7ZQTtm.js";
-import { _ as _111 } from "./chunks/LpDataList-DCtF7krm.js";
-import { _ as _112 } from "./chunks/LpEditable-CeRAzYMv.js";
-import { _ as _113 } from "./chunks/LpTruncate-CynJhsEw.js";
-import { _ as _114 } from "./chunks/LpCodeDisplay-DsiE-Qy9.js";
+import { _ as _109 } from "./chunks/LpCopyButton-BGzw95Xc.js";
+import { _ as _110 } from "./chunks/LpSecretField-BwrZ4TfT.js";
+import { _ as _111 } from "./chunks/LpDataList-B56Gu6Yt.js";
+import { _ as _112 } from "./chunks/LpEditable-DfRUAGkA.js";
+import { _ as _113 } from "./chunks/LpTruncate-C_C8eiIE.js";
+import { _ as _114 } from "./chunks/LpCodeDisplay-DBi1YPLp.js";
 import { formatRemaining, groupCode, middleTruncate, normalizeCode } from "./components/fieldText.js";
-import { _ as _115 } from "./chunks/LpHoverCard-CHE9jAJG.js";
+import { _ as _115 } from "./chunks/LpHoverCard-DYguY2AP.js";
 import { _ as _116 } from "./chunks/LpIdenticon-Dbbr4fvt.js";
 import { hashString, identicon, identiconRects, identiconSvg } from "./components/identicon.js";
 import { _ as _117 } from "./chunks/LpShaderBackdrop-wQygYb5h.js";
@@ -246,7 +246,7 @@ import { _ as _128 } from "./chunks/LpCommandScope-DRUvHiX7.js";
 import { createPaletteRegistry, mergePaletteCommands, usePaletteCommands, vPalette } from "./composables/usePaletteCommands.js";
 import { commandShortcuts, commandToHotkey, commandToMenuItem, commandToPalette, useCommands } from "./composables/useCommands.js";
 import { usePaletteTheme } from "./theme/palette.js";
-import { _ as _129 } from "./chunks/LpPaletteTheme-wiJtP5hV.js";
+import { _ as _129 } from "./chunks/LpPaletteTheme-CLwO-SDf.js";
 const uk = {
   actionBar: { dismiss: "Закрити" },
   activityLine: { busy: "Завантаження" },
@@ -518,6 +518,7 @@ const uk = {
     running: "Виконується…",
     select: "вибрати",
     close: "закрити",
+    dismiss: "Закрити",
     back: "назад",
     searching: "Пошук…",
     searchFailed: "Пошук зараз недоступний.",

package/package.json

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

package/src/components/ContextMenuItems.vue

@@ -32,6 +32,7 @@ import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 import type { ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import MenuShortcut from "./MenuShortcut.vue"
+import { TOUCH_ROW } from "./dropdown"
 
 defineOptions({ name: "ContextMenuItems" })
 
@@ -71,7 +72,7 @@ const portalTo = usePortalTarget()
 const guardOutside = useOutsideGuard()
 
 const ITEM =
-  "group/item flex cursor-pointer select-none items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft"
+  "group/item flex cursor-pointer select-none items-center gap-2 rounded-inner px-2.5 py-1.5 text-sm outline-none transition-[background-color,color] duration-[var(--duration-fast)] data-[disabled]:pointer-events-none data-[disabled]:opacity-45 data-[highlighted]:bg-brand-soft " + TOUCH_ROW
 const ICON =
   "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[highlighted]/item:translate-x-0.5"
 </script>

package/src/components/IconCloseButton.vue

@@ -12,7 +12,7 @@ defineProps<{ label: string; inline?: boolean }>()
 <template>
   <button
     type="button"
-    class="group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
+    class="lp-tap group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink"
     :class="inline ? undefined : 'rounded-inner p-1 focus-visible:ring-2 focus-visible:ring-ring'"
     :aria-label="label"
   >

package/src/components/LpAlert.vue

@@ -120,7 +120,7 @@ const messageKey = () => [props.variant, props.title ?? "", slotText(slots.defau
         />
       </Transition>
     </span>
-    <LpSwap :swap-key="messageKey()" class="min-w-0 flex-1">
+    <LpSwap :swap-key="messageKey()" class="min-w-0 flex-1 [overflow-wrap:anywhere]">
       <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
       <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">
         <slot />

package/src/components/LpAutocomplete.vue

@@ -40,7 +40,7 @@ import { computed, nextTick, ref, useId, watch, useAttrs } from "vue"
 import { useOwnField, mergeDescribedBy } from "../composables/useField"
 import { useInputFilter } from "../composables/useInputFilter"
 import { useLabels } from "../composables/useLpConfig"
-import { CLOSE_ICON, OPTION_ITEM, optionStagger, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
+import { CLOSE_ICON, OPTION_ITEM, optionStagger, COMBOBOX_FIT, COMBOBOX_PANEL, POPOVER_PANEL } from "./dropdown"
 import LpIcon from "./LpIcon.vue"
 import OptionContent from "./OptionContent.vue"
 import type { LpOptionBase, OptionSelection } from "./options"
@@ -335,7 +335,7 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
           :required="field.required || undefined"
           :aria-invalid="isInvalidState || undefined"
           :aria-describedby="describedBy"
-          class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
+          class="lp-autofill lp-entry min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
           :class="showSelected && 'text-transparent placeholder:text-transparent'"
           @beforeinput="onBeforeInput"
           @paste="onPaste"
@@ -388,11 +388,11 @@ usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.v
         @interact-outside="guardOutside"
         @escape-key-down="guardOutside"
         v-bind="COMBOBOX_PANEL"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden']"
+        :class="[POPOVER_PANEL, 'z-(--z-popover) w-(--reka-combobox-trigger-width) overflow-hidden', COMBOBOX_FIT]"
         @open-auto-focus.prevent
         @mousedown.prevent
       >
-        <ComboboxViewport class="max-h-72 overflow-y-auto p-1">
+        <ComboboxViewport class="max-h-72 min-h-0 flex-1 overflow-y-auto p-1">
           <div v-if="loading" class="px-3 py-4 text-center text-sm italic text-muted">
             {{ loadingText ?? labels.loading }}
           </div>

package/src/components/LpButton.vue

@@ -25,7 +25,7 @@ import { resolveLink, type LinkTarget } from "./link"
 
 const button = tv({
   base: [
-    "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-semibold",
+    "lp-tap inline-flex select-none items-center justify-center gap-2 whitespace-nowrap font-semibold",
     "rounded-control transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
     // tactile press: dips slightly on click, springs back on release.
     "active:scale-[0.97] motion-reduce:active:scale-100",

package/src/components/LpCheckbox.vue

@@ -118,7 +118,7 @@ usePaletteControl({ label: () => props.label, disabled: () => field.value.disabl
       :aria-describedby="describedBy"
       :aria-busy="pending || undefined"
       :class="description ? 'mt-px' : ''"
-      class="relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+      class="lp-tap relative flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
       @update:model-value="onUpdate"
     >
       <CheckboxIndicator

package/src/components/LpCodeBlock.vue

@@ -295,7 +295,7 @@ const CodeLine: FunctionalComponent<{ n: number }> = ({ n }) =>
         v-if="!locked && !hasFolds"
         :value="code"
         spellcheck="false"
-        class="lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none"
+        class="lp-entry lp-scrollbar-none absolute inset-0 size-full resize-none overflow-auto whitespace-pre bg-transparent p-3 leading-relaxed text-transparent caret-brand outline-none"
         :class="[wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre', lineNumbers ? 'pl-13' : '']"
         @input="onInput"
         @scroll="syncScroll"
@@ -305,7 +305,7 @@ const CodeLine: FunctionalComponent<{ n: number }> = ({ n }) =>
         class="lp-scrollbar-none m-0 overflow-auto p-3 leading-relaxed"
         :class="[
           wrap ? 'whitespace-pre-wrap break-words' : 'whitespace-pre',
-          editing ? 'pointer-events-none' : '',
+          editing ? 'lp-entry pointer-events-none' : '',
           editing && height ? 'h-full overflow-hidden' : '',
         ]"
       ><code class="block"><template

package/src/components/LpColorPicker.vue

@@ -56,7 +56,7 @@ import {
 } from "./color"
 import { useClipboard } from "../composables/useClipboard"
 import { useLabels } from "../composables/useLpConfig"
-import { POPOVER_PANEL } from "./dropdown"
+import { PANEL_FIT, POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpRollingText from "./LpRollingText.vue"
@@ -716,7 +716,7 @@ const guardOutside = useOutsideGuard()
         :side="side"
         :align="align"
         :side-offset="6"
-        :class="[POPOVER_PANEL, 'z-(--z-popover) w-64 select-none rounded-card p-3 outline-none']"
+        :class="[POPOVER_PANEL, PANEL_FIT, 'z-(--z-popover) w-64 select-none rounded-card p-3 outline-none']"
         @open-auto-focus="onPanelOpen"
       >
         <!-- The same menu inside the panel: copy/paste is wanted most while
@@ -823,7 +823,7 @@ const guardOutside = useOutsideGuard()
                 autocapitalize="off"
                 autocomplete="off"
                 :aria-label="l.value"
-                class="min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted"
+                class="lp-entry min-w-0 flex-1 select-text bg-transparent font-mono text-xs text-ink outline-none placeholder:text-muted"
                 :class="rolling ? 'text-transparent' : ''"
                 @input="onInput"
                 @keydown.enter="commitTyped"