@leavepulse/ui 0.15.3 → 0.15.5

package/dist/composables/useZoomPan.js

@@ -0,0 +1,133 @@
+import { ref, computed } from "vue";
+function useZoomPan(options = {}) {
+  const min = options.min ?? 1;
+  const max = options.max ?? 8;
+  const step = options.step ?? 1.15;
+  const zoomedScale = options.zoomedScale ?? 2;
+  const scale = ref(min);
+  const x = ref(0);
+  const y = ref(0);
+  const panning = ref(false);
+  let viewport = null;
+  const pointers = /* @__PURE__ */ new Map();
+  let start = { x: 0, y: 0, panX: 0, panY: 0 };
+  let pinchStartDistance = 0;
+  let pinchStartScale = 1;
+  const zoomed = computed(() => scale.value > min + 1e-3);
+  function setViewport(el) {
+    viewport = el;
+  }
+  function clamp(value, lo, hi) {
+    return Math.min(hi, Math.max(lo, value));
+  }
+  function clampPan() {
+    if (!viewport) return;
+    const rect = viewport.getBoundingClientRect();
+    const slackX = rect.width * (scale.value - 1) / 2 / scale.value;
+    const slackY = rect.height * (scale.value - 1) / 2 / scale.value;
+    x.value = clamp(x.value, -slackX, slackX);
+    y.value = clamp(y.value, -slackY, slackY);
+  }
+  function zoomAbout(next, px, py) {
+    const clamped = clamp(next, min, max);
+    if (clamped === scale.value) return;
+    const contentX = px / scale.value - x.value;
+    const contentY = py / scale.value - y.value;
+    scale.value = clamped;
+    x.value = px / clamped - contentX;
+    y.value = py / clamped - contentY;
+    clampPan();
+  }
+  function relative(e) {
+    if (!viewport) return { x: 0, y: 0 };
+    const rect = viewport.getBoundingClientRect();
+    return {
+      x: e.clientX - rect.left - rect.width / 2,
+      y: e.clientY - rect.top - rect.height / 2
+    };
+  }
+  function onWheel(e) {
+    e.preventDefault();
+    const point = relative(e);
+    zoomAbout(scale.value * (e.deltaY < 0 ? step : 1 / step), point.x, point.y);
+  }
+  function distance(a, b) {
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+  function onPointerDown(e) {
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 2) {
+      const [a, b] = [...pointers.values()];
+      pinchStartDistance = distance(a, b);
+      pinchStartScale = scale.value;
+      panning.value = false;
+      return;
+    }
+    if (pointers.size > 2) return;
+    if (!zoomed.value) return;
+    panning.value = true;
+    start = { x: e.clientX, y: e.clientY, panX: x.value, panY: y.value };
+    e.currentTarget?.setPointerCapture?.(e.pointerId);
+  }
+  function onPointerMove(e) {
+    if (!pointers.has(e.pointerId)) return;
+    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    if (pointers.size === 2 && pinchStartDistance > 0) {
+      const [a, b] = [...pointers.values()];
+      const mid = { clientX: (a.x + b.x) / 2, clientY: (a.y + b.y) / 2 };
+      const point = relative(mid);
+      zoomAbout(pinchStartScale * (distance(a, b) / pinchStartDistance), point.x, point.y);
+      return;
+    }
+    if (!panning.value) return;
+    x.value = start.panX + (e.clientX - start.x) / scale.value;
+    y.value = start.panY + (e.clientY - start.y) / scale.value;
+    clampPan();
+  }
+  function onPointerUp(e) {
+    pointers.delete(e.pointerId);
+    if (pointers.size < 2) pinchStartDistance = 0;
+    if (pointers.size === 0) panning.value = false;
+  }
+  function zoomBy(factor) {
+    zoomAbout(scale.value * factor, 0, 0);
+  }
+  function toggleZoom(origin) {
+    if (zoomed.value) {
+      reset();
+      return;
+    }
+    const point = origin ? relative({ clientX: origin.x, clientY: origin.y }) : { x: 0, y: 0 };
+    zoomAbout(zoomedScale, point.x, point.y);
+  }
+  function reset() {
+    scale.value = min;
+    x.value = 0;
+    y.value = 0;
+    panning.value = false;
+    pointers.clear();
+    pinchStartDistance = 0;
+  }
+  const style = computed(() => ({
+    transform: `scale(${scale.value}) translate(${x.value}px, ${y.value}px)`,
+    // Settle smoothly on discrete zooms, but follow a drag or pinch exactly.
+    transition: panning.value || pinchStartDistance > 0 ? "none" : void 0
+  }));
+  return {
+    scale,
+    zoomed,
+    panning,
+    style,
+    onWheel,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    zoomBy,
+    toggleZoom,
+    reset,
+    setViewport
+  };
+}
+export {
+  useZoomPan
+};

package/dist/index.d.ts

@@ -34,6 +34,9 @@ export { default as LpIcon } from './components/LpIcon.vue';
 export { default as LpInfraNode } from './components/LpInfraNode.vue';
 export type { InfraNodeData } from './components/LpInfraNode.vue';
 export { default as LpInput } from './components/LpInput.vue';
+export { default as LpLightbox } from './components/LpLightbox.vue';
+export type { LightboxItem } from './components/lightbox';
+export { fileNameOf } from './components/lightbox';
 export { default as LpLink } from './components/LpLink.vue';
 export { default as LpLogViewer } from './components/LpLogViewer.vue';
 export type { LogLevel, LogLine } from './components/LpLogViewer.vue';
@@ -103,5 +106,7 @@ export { useInputFilter } from './composables/useInputFilter';
 export type { UseInputFilterOptions } from './composables/useInputFilter';
 export { useTilt } from './composables/useTilt';
 export type { UseTilt, UseTiltOptions } from './composables/useTilt';
+export { useZoomPan } from './composables/useZoomPan';
+export type { UseZoomPan, UseZoomPanOptions } from './composables/useZoomPan';
 export { useToast } from './composables/useToast';
 export type { ToastAction, ToastItem, ToastOptions, ToastVariant, } from './composables/useToast';

package/dist/index.js

@@ -11,7 +11,7 @@ import { _ as _10 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _11 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _12 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _13 } from "./chunks/LpConfirmDialog-D6Rhge21.js";
+import { _ as _13 } from "./chunks/LpConfirmDialog-C-iOXJIM.js";
 import { _ as _14 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _15 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _16 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -19,53 +19,56 @@ import { _ as _17 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _18 } from "./chunks/LpDrawer-BHzCy-Aa.js";
 import { _ as _19 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _20 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _21 } from "./chunks/LpFileTree-BQz8Rfgz.js";
+import { _ as _21 } from "./chunks/LpFileTree-YOJCuIjJ.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _22 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _23 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _24 } from "./chunks/LpInfraNode-C_PHcthC.js";
 import { _ as _25 } from "./chunks/LpInput-BauZRyzm.js";
-import { _ as _26 } from "./chunks/LpLink-DHwOEp4e.js";
-import { _ as _27 } from "./chunks/LpLogViewer-BvzRZPjs.js";
-import { _ as _28 } from "./chunks/LpModal-d6SZpfBH.js";
-import { _ as _29 } from "./chunks/LpNotificationBell-BtfRoL2i.js";
-import { _ as _30 } from "./chunks/LpNumberField-C5ar-OwE.js";
-import { _ as _31 } from "./chunks/LpOtpInput-DqaT0Z75.js";
-import { _ as _32 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _33 } from "./chunks/LpPasswordInput-DIHFw4u0.js";
-import { _ as _34 } from "./chunks/LpPhoneInput-LQvVFGMw.js";
+import { _ as _26 } from "./chunks/LpLightbox-BYIA9qne.js";
+import { fileNameOf } from "./components/lightbox.js";
+import { _ as _27 } from "./chunks/LpLink-DHwOEp4e.js";
+import { _ as _28 } from "./chunks/LpLogViewer-BvzRZPjs.js";
+import { _ as _29 } from "./chunks/LpModal-DeZlvK1B.js";
+import { _ as _30 } from "./chunks/LpNotificationBell-BtfRoL2i.js";
+import { _ as _31 } from "./chunks/LpNumberField-C5ar-OwE.js";
+import { _ as _32 } from "./chunks/LpOtpInput-DqaT0Z75.js";
+import { _ as _33 } from "./chunks/LpPagination-CeGuNe_q.js";
+import { _ as _34 } from "./chunks/LpPasswordInput-DIHFw4u0.js";
+import { _ as _35 } from "./chunks/LpPhoneInput-LQvVFGMw.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _35 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _36 } from "./chunks/LpProgress-BhI0IbjC.js";
-import { _ as _37 } from "./chunks/LpRadio-CL-pI0_O.js";
-import { _ as _38 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
-import { _ as _39 } from "./chunks/LpScrollArea-De9DLpa1.js";
-import { _ as _40 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _41 } from "./chunks/LpSelect-DznhPEWX.js";
-import { _ as _42 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
-import { _ as _43 } from "./chunks/LpSidebar-B11IDRQi.js";
-import { _ as _44 } from "./chunks/LpSkeleton-eSFIo4kD.js";
-import { _ as _45 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _46 } from "./chunks/LpStat-CdbEFOvn.js";
-import { _ as _47 } from "./chunks/LpStepper-5dFTrW21.js";
-import { _ as _48 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _49 } from "./chunks/LpTable-CKGaUbEM.js";
-import { _ as _50 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _51 } from "./chunks/LpTabs-D7aTVPOb.js";
-import { _ as _52 } from "./chunks/LpTextarea-CRAkhemZ.js";
+import { _ as _36 } from "./chunks/LpPopover-8268UmlC.js";
+import { _ as _37 } from "./chunks/LpProgress-BhI0IbjC.js";
+import { _ as _38 } from "./chunks/LpRadio-CL-pI0_O.js";
+import { _ as _39 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
+import { _ as _40 } from "./chunks/LpScrollArea-De9DLpa1.js";
+import { _ as _41 } from "./chunks/LpSegmented-BmpanyAo.js";
+import { _ as _42 } from "./chunks/LpSelect-DznhPEWX.js";
+import { _ as _43 } from "./chunks/LpServiceNode-Dc-Ut5RS.js";
+import { _ as _44 } from "./chunks/LpSidebar-B11IDRQi.js";
+import { _ as _45 } from "./chunks/LpSkeleton-eSFIo4kD.js";
+import { _ as _46 } from "./chunks/LpSlider-B1SF3pRV.js";
+import { _ as _47 } from "./chunks/LpStat-CdbEFOvn.js";
+import { _ as _48 } from "./chunks/LpStepper-5dFTrW21.js";
+import { _ as _49 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _50 } from "./chunks/LpTable-CKGaUbEM.js";
+import { _ as _51 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _52 } from "./chunks/LpTabs-D7aTVPOb.js";
+import { _ as _53 } from "./chunks/LpTextarea-CRAkhemZ.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-BgWwfkxs.js";
-import { D, _ as _53, b, c, d, e, f, l, g, h, n, r, t, i, u, v } from "./chunks/LpThemeSwitcher-BgWwfkxs.js";
-import { _ as _54 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _55 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _56 } from "./chunks/LpTooltip-CIwoRCag.js";
-import { _ as _57 } from "./chunks/LpTopologyCanvas-DVwyQfKa.js";
-import { _ as _58 } from "./chunks/LpUptimeBar-CB366k0O.js";
+import { D, _ as _54, b, c, d, e, f, l, g, h, n, r, t, i, u, v } from "./chunks/LpThemeSwitcher-BgWwfkxs.js";
+import { _ as _55 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _56 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _57 } from "./chunks/LpTooltip-CIwoRCag.js";
+import { _ as _58 } from "./chunks/LpTopologyCanvas-DVwyQfKa.js";
+import { _ as _59 } 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";
 import { useLayout } from "./layout/useLayout.js";
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { useTilt } from "./composables/useTilt.js";
+import { useZoomPan } from "./composables/useZoomPan.js";
 import { useToast } from "./composables/useToast.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -125,39 +128,40 @@ export {
   _23 as LpIcon,
   _24 as LpInfraNode,
   _25 as LpInput,
-  _26 as LpLink,
-  _27 as LpLogViewer,
-  _28 as LpModal,
-  _29 as LpNotificationBell,
-  _30 as LpNumberField,
-  _31 as LpOtpInput,
-  _32 as LpPagination,
-  _33 as LpPasswordInput,
-  _34 as LpPhoneInput,
-  _35 as LpPopover,
-  _36 as LpProgress,
-  _37 as LpRadio,
-  _38 as LpRadioGroup,
-  _39 as LpScrollArea,
-  _40 as LpSegmented,
-  _41 as LpSelect,
-  _42 as LpServiceNode,
-  _43 as LpSidebar,
-  _44 as LpSkeleton,
-  _45 as LpSlider,
-  _46 as LpStat,
-  _47 as LpStepper,
-  _48 as LpSwitch,
-  _49 as LpTable,
-  _50 as LpTableOfContents,
-  _51 as LpTabs,
-  _52 as LpTextarea,
-  _53 as LpThemeSwitcher,
-  _54 as LpTilt,
-  _55 as LpToaster,
-  _56 as LpTooltip,
-  _57 as LpTopologyCanvas,
-  _58 as LpUptimeBar,
+  _26 as LpLightbox,
+  _27 as LpLink,
+  _28 as LpLogViewer,
+  _29 as LpModal,
+  _30 as LpNotificationBell,
+  _31 as LpNumberField,
+  _32 as LpOtpInput,
+  _33 as LpPagination,
+  _34 as LpPasswordInput,
+  _35 as LpPhoneInput,
+  _36 as LpPopover,
+  _37 as LpProgress,
+  _38 as LpRadio,
+  _39 as LpRadioGroup,
+  _40 as LpScrollArea,
+  _41 as LpSegmented,
+  _42 as LpSelect,
+  _43 as LpServiceNode,
+  _44 as LpSidebar,
+  _45 as LpSkeleton,
+  _46 as LpSlider,
+  _47 as LpStat,
+  _48 as LpStepper,
+  _49 as LpSwitch,
+  _50 as LpTable,
+  _51 as LpTableOfContents,
+  _52 as LpTabs,
+  _53 as LpTextarea,
+  _54 as LpThemeSwitcher,
+  _55 as LpTilt,
+  _56 as LpToaster,
+  _57 as LpTooltip,
+  _58 as LpTopologyCanvas,
+  _59 as LpUptimeBar,
   UI_CONFIG_VERSION,
   addLeaf,
   addTab,
@@ -177,6 +181,7 @@ export {
   defineTheme,
   deserializeLayout,
   fileIcon,
+  fileNameOf,
   flagEmoji,
   formatModified,
   formatSize,
@@ -210,5 +215,6 @@ export {
   u as useTheme,
   useTilt,
   useToast,
+  useZoomPan,
   v as violet
 };

package/package.json

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

package/src/component-names.ts

@@ -31,6 +31,7 @@ export const COMPONENT_NAMES = [
   "LpInfraNode",
   "LpInput",
   "LpLaneNode",
+  "LpLightbox",
   "LpLink",
   "LpLogViewer",
   "LpModal",

package/src/components/LpFileTree.vue

@@ -477,7 +477,7 @@ defineExpose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary }
 </script>
 
 <template>
-  <div v-if="loading" class="flex flex-col gap-1">
+  <div v-if="loading" class="flex h-full w-full min-w-0 flex-col gap-1 overflow-hidden">
     <div
       v-for="n in skeletonRows"
       :key="n"
@@ -495,9 +495,10 @@ defineExpose({ reveal, expandAll, collapseAll, checkAll, clearChecked, summary }
 
   <!-- h-full so the tree fills whatever box the caller gave it and the scroll
        area below gets a bounded height; without it the rows just grow past the
-       container and nothing ever scrolls. -->
-  <div v-else class="flex h-full min-h-0 flex-col">
-    <LpScrollArea class="min-h-0 flex-1">
+       container and nothing ever scrolls. min-w-0/w-full for the same reason
+       sideways: a long path must truncate inside the box rather than widen it. -->
+  <div v-else class="flex h-full w-full min-w-0 flex-col">
+    <LpScrollArea class="min-h-0 w-full min-w-0 flex-1">
       <ul
         ref="root"
         role="tree"