@leavepulse/ui 0.16.2 → 0.17.1

package/dist/chunks/LpMapPicker-DFKrd1Ne.js

@@ -0,0 +1,509 @@
+import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, Fragment, renderList, createVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
+import { OSM_TILES, project, tileUrl, unproject } from "../components/address.js";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["tabindex", "aria-label"];
+const _hoisted_2 = ["src", "onLoad"];
+const _hoisted_3 = { class: "absolute right-2 top-2 flex flex-col gap-1.5" };
+const _hoisted_4 = ["disabled", "title", "aria-label"];
+const _hoisted_5 = ["disabled", "title", "aria-label"];
+const _hoisted_6 = ["title", "aria-label"];
+const _hoisted_7 = ["disabled", "title", "aria-label"];
+const _hoisted_8 = {
+  key: 1,
+  class: "pointer-events-none absolute bottom-0 right-0 rounded-tl-control bg-black/45 px-1.5 py-0.5 text-[10px] text-white/75 backdrop-blur-sm"
+};
+const PAN_STEP = 80;
+const ZOOM_MS = 220;
+const CONTROL = "flex size-8 items-center justify-center rounded-control bg-black/45 text-white/90 outline-none backdrop-blur-sm transition-[background-color,scale] duration-[var(--duration-fast)] hover:bg-black/65 hover:scale-105 focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpMapPicker",
+  props: {
+    modelValue: {},
+    tiles: { default: () => OSM_TILES },
+    zoom: { default: 13 },
+    center: { default: () => ({ lat: 50.11, lon: 14.44 }) },
+    disabled: { type: Boolean },
+    height: { default: "20rem" },
+    locatable: { type: Boolean, default: true },
+    zoomInLabel: { default: "Zoom in" },
+    zoomOutLabel: { default: "Zoom out" },
+    locateLabel: { default: "Use my location" },
+    recentreLabel: { default: "Back to the pin" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const seenTiles = /* @__PURE__ */ new Set();
+    const tileSize = computed(() => props.tiles.tileSize ?? 256);
+    const minZoom = computed(() => props.tiles.minZoom ?? 1);
+    const maxZoom = computed(() => props.tiles.maxZoom ?? 19);
+    const viewport = ref(null);
+    const viewWidth = ref(0);
+    const viewHeight = ref(0);
+    const level = ref(clampZoom(props.zoom));
+    const mapCenter = ref(props.modelValue ?? props.center);
+    const zooming = ref(false);
+    let zoomTimer;
+    let pruneTimer;
+    function clampZoom(value) {
+      return Math.round(Math.min(maxZoom.value, Math.max(minZoom.value, value)));
+    }
+    const origin = computed(() => {
+      const point = project(mapCenter.value.lat, mapCenter.value.lon, level.value, tileSize.value);
+      return { x: point.x - viewWidth.value / 2, y: point.y - viewHeight.value / 2 };
+    });
+    const layers = ref([]);
+    let nextLayerId = 1;
+    const active = computed(() => layers.value[layers.value.length - 1]);
+    function anchorFor(atLevel) {
+      const size = tileSize.value;
+      const factor = 2 ** (atLevel - level.value);
+      return {
+        x: Math.floor(origin.value.x * factor / size) * size,
+        y: Math.floor(origin.value.y * factor / size) * size
+      };
+    }
+    function pushLayer() {
+      layers.value = [
+        ...layers.value,
+        {
+          id: nextLayerId++,
+          level: level.value,
+          anchor: anchorFor(level.value),
+          tiles: [],
+          range: { firstX: 0, firstY: 0, lastX: -1, lastY: -1 }
+        }
+      ];
+      refreshTiles();
+    }
+    function pruneLayers() {
+      if (layers.value.length < 2) return;
+      layers.value = [layers.value[layers.value.length - 1]];
+    }
+    function reanchor() {
+      const layer = active.value;
+      if (!layer) return;
+      const next = anchorFor(layer.level);
+      const dx = layer.anchor.x - next.x;
+      const dy = layer.anchor.y - next.y;
+      if (!dx && !dy) return;
+      layer.anchor = next;
+      for (const tile of layer.tiles) {
+        tile.left += dx;
+        tile.top += dy;
+      }
+    }
+    function refreshTiles() {
+      const layer = active.value;
+      if (!layer || !viewWidth.value || !viewHeight.value) return;
+      const size = tileSize.value;
+      const count = 2 ** layer.level;
+      const firstX = Math.floor(origin.value.x / size) - 1;
+      const firstY = Math.floor(origin.value.y / size) - 1;
+      const lastX = Math.floor((origin.value.x + viewWidth.value) / size) + 1;
+      const lastY = Math.floor((origin.value.y + viewHeight.value) / size) + 1;
+      const seen = layer.range;
+      if (seen.firstX === firstX && seen.firstY === firstY && seen.lastX === lastX && seen.lastY === lastY) {
+        return;
+      }
+      layer.range = { firstX, firstY, lastX, lastY };
+      const previous = new Map(layer.tiles.map((tile) => [tile.key, tile]));
+      const next = [];
+      for (let y = firstY; y <= lastY; y++) {
+        if (y < 0 || y >= count) continue;
+        for (let x = firstX; x <= lastX; x++) {
+          const wrapped = (x % count + count) % count;
+          const key = `${layer.level}/${x}/${y}`;
+          const existing = previous.get(key);
+          if (existing) {
+            next.push(existing);
+            continue;
+          }
+          const url = tileUrl(props.tiles, layer.level, wrapped, y);
+          next.push({
+            key,
+            url,
+            left: x * size - layer.anchor.x,
+            top: y * size - layer.anchor.y,
+            // Anything fetched before paints at once: replaying the fade on a
+            // cached tile is what makes a zoom look like a reload.
+            loaded: seenTiles.has(url)
+          });
+        }
+      }
+      layer.tiles = next;
+    }
+    const loadingTiles = computed(() => active.value?.tiles.some((tile) => !tile.loaded) ?? false);
+    function onTileLoad(tile) {
+      tile.loaded = true;
+      seenTiles.add(tile.url);
+      if (!loadingTiles.value) pruneLayers();
+    }
+    function layerStyle(layer) {
+      const factor = 2 ** (layer.level - level.value);
+      const originX = origin.value.x * factor;
+      const originY = origin.value.y * factor;
+      return {
+        transform: `scale(${1 / factor}) translate3d(${layer.anchor.x - originX}px, ${layer.anchor.y - originY}px, 0)`,
+        transformOrigin: "0 0",
+        transition: zooming.value ? "transform var(--duration-medium) var(--ease-emphasized)" : void 0
+      };
+    }
+    const pin = computed(() => {
+      if (!props.modelValue) return null;
+      const point = project(props.modelValue.lat, props.modelValue.lon, level.value, tileSize.value);
+      return { left: point.x - origin.value.x, top: point.y - origin.value.y };
+    });
+    function viewportPoint(e) {
+      const rect = viewport.value?.getBoundingClientRect();
+      return rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : { x: 0, y: 0 };
+    }
+    function toLatLon(at) {
+      return unproject(origin.value.x + at.x, origin.value.y + at.y, level.value, tileSize.value);
+    }
+    const panning = ref(false);
+    let moved = false;
+    let last = { x: 0, y: 0 };
+    let velocity = { x: 0, y: 0 };
+    let lastMove = 0;
+    let glideFrame;
+    function stopGlide() {
+      if (glideFrame !== void 0) cancelAnimationFrame(glideFrame);
+      glideFrame = void 0;
+      velocity = { x: 0, y: 0 };
+    }
+    function onPointerDown(e) {
+      if (props.disabled || e.button !== 0 || zooming.value) return;
+      stopGlide();
+      panning.value = true;
+      moved = false;
+      last = { x: e.clientX, y: e.clientY };
+      lastMove = performance.now();
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    function onPointerMove(e) {
+      if (!panning.value) return;
+      const dx = e.clientX - last.x;
+      const dy = e.clientY - last.y;
+      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) moved = true;
+      const now = performance.now();
+      const dt = now - lastMove;
+      if (dt > 0) {
+        velocity = {
+          x: velocity.x * 0.7 + dx / dt * 0.3,
+          y: velocity.y * 0.7 + dy / dt * 0.3
+        };
+      }
+      lastMove = now;
+      last = { x: e.clientX, y: e.clientY };
+      panBy(-dx, -dy);
+    }
+    function onPointerUp(e) {
+      if (!panning.value) return;
+      panning.value = false;
+      e.currentTarget.releasePointerCapture?.(e.pointerId);
+      if (!moved && !props.disabled) {
+        emit("update:modelValue", toLatLon(viewportPoint(e)));
+        return;
+      }
+      if (performance.now() - lastMove > 90) velocity = { x: 0, y: 0 };
+      glide();
+    }
+    function glide() {
+      if (reducedMotion() || Math.hypot(velocity.x, velocity.y) < 0.05) {
+        velocity = { x: 0, y: 0 };
+        return;
+      }
+      let previous = performance.now();
+      const step = (now) => {
+        const dt = Math.min(now - previous, 32);
+        previous = now;
+        const friction = Math.exp(-dt / 240);
+        velocity = { x: velocity.x * friction, y: velocity.y * friction };
+        panBy(-velocity.x * dt, -velocity.y * dt);
+        if (Math.hypot(velocity.x, velocity.y) > 0.015) {
+          glideFrame = requestAnimationFrame(step);
+        } else {
+          stopGlide();
+        }
+      };
+      glideFrame = requestAnimationFrame(step);
+    }
+    function reducedMotion() {
+      return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    function panBy(dx, dy) {
+      mapCenter.value = unproject(
+        origin.value.x + dx + viewWidth.value / 2,
+        origin.value.y + dy + viewHeight.value / 2,
+        level.value,
+        tileSize.value
+      );
+      refreshTiles();
+    }
+    function zoomBy(delta, at) {
+      if (props.disabled) return;
+      const target = clampZoom(level.value + delta);
+      if (target === level.value) return;
+      stopGlide();
+      const point = at ?? { x: viewWidth.value / 2, y: viewHeight.value / 2 };
+      const ground = toLatLon(point);
+      const world = project(ground.lat, ground.lon, target, tileSize.value);
+      level.value = target;
+      mapCenter.value = unproject(
+        world.x - point.x + viewWidth.value / 2,
+        world.y - point.y + viewHeight.value / 2,
+        target,
+        tileSize.value
+      );
+      zooming.value = true;
+      pushLayer();
+      clearTimeout(zoomTimer);
+      zoomTimer = setTimeout(() => zooming.value = false, ZOOM_MS);
+      clearTimeout(pruneTimer);
+      pruneTimer = setTimeout(pruneLayers, 1200);
+    }
+    function onWheel(e) {
+      if (props.disabled) return;
+      e.preventDefault();
+      zoomBy(e.deltaY < 0 ? 1 : -1, viewportPoint(e));
+    }
+    function onDoubleClick(e) {
+      zoomBy(1, viewportPoint(e));
+    }
+    function onKeydown(e) {
+      if (props.disabled) return;
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          panBy(0, -PAN_STEP);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          panBy(0, PAN_STEP);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          panBy(-PAN_STEP, 0);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          panBy(PAN_STEP, 0);
+          break;
+        case "+":
+        case "=":
+          e.preventDefault();
+          zoomBy(1);
+          break;
+        case "-":
+          e.preventDefault();
+          zoomBy(-1);
+          break;
+        case "0":
+          e.preventDefault();
+          recentre();
+          break;
+      }
+    }
+    const canRecentre = computed(() => {
+      if (!pin.value) return false;
+      const { left, top } = pin.value;
+      return left < 0 || top < 0 || left > viewWidth.value || top > viewHeight.value;
+    });
+    function recentre() {
+      if (!props.modelValue) return;
+      stopGlide();
+      mapCenter.value = props.modelValue;
+      reanchor();
+      refreshTiles();
+    }
+    const locating = ref(false);
+    function locate() {
+      if (!navigator.geolocation || locating.value) return;
+      locating.value = true;
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          locating.value = false;
+          const next = { lat: position.coords.latitude, lon: position.coords.longitude };
+          emit("update:modelValue", next);
+          mapCenter.value = next;
+          reanchor();
+          refreshTiles();
+        },
+        () => {
+          locating.value = false;
+        },
+        { enableHighAccuracy: true, timeout: 1e4 }
+      );
+    }
+    watch(
+      () => props.modelValue,
+      (value) => {
+        if (!value || panning.value) return;
+        mapCenter.value = value;
+        if (level.value < props.zoom) {
+          level.value = clampZoom(props.zoom);
+          pushLayer();
+          return;
+        }
+        reanchor();
+        refreshTiles();
+      }
+    );
+    watch(
+      () => props.tiles,
+      () => {
+        layers.value = [];
+        pushLayer();
+      }
+    );
+    let observer;
+    onMounted(() => {
+      const el = viewport.value;
+      if (!el) return;
+      observer = new ResizeObserver(([entry]) => {
+        viewWidth.value = entry.contentRect.width;
+        viewHeight.value = entry.contentRect.height;
+        if (!layers.value.length) {
+          pushLayer();
+          return;
+        }
+        reanchor();
+        refreshTiles();
+      });
+      observer.observe(el);
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      clearTimeout(zoomTimer);
+      clearTimeout(pruneTimer);
+      stopGlide();
+    });
+    __expose({ zoomIn: () => zoomBy(1), zoomOut: () => zoomBy(-1), recentre, locate });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "relative overflow-hidden rounded-control border border-line bg-surface-soft",
+        style: normalizeStyle({ height: __props.height })
+      }, [
+        createElementVNode("div", {
+          ref_key: "viewport",
+          ref: viewport,
+          class: normalizeClass(["absolute inset-0 touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-ring", __props.disabled ? "cursor-not-allowed opacity-55" : panning.value ? "cursor-grabbing" : "cursor-grab"]),
+          tabindex: __props.disabled ? -1 : 0,
+          role: "application",
+          "aria-label": __props.recentreLabel,
+          onPointerdown: onPointerDown,
+          onPointermove: onPointerMove,
+          onPointerup: onPointerUp,
+          onPointercancel: onPointerUp,
+          onWheel,
+          onDblclick: onDoubleClick,
+          onKeydown
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(layers.value, (layer) => {
+            return openBlock(), createElementBlock("div", {
+              key: layer.id,
+              class: "absolute left-0 top-0 will-change-transform motion-reduce:transition-none",
+              style: normalizeStyle(layerStyle(layer))
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(layer.tiles, (tile) => {
+                return openBlock(), createElementBlock("img", {
+                  key: tile.key,
+                  src: tile.url,
+                  alt: "",
+                  draggable: "false",
+                  class: normalizeClass(["absolute max-w-none", tile.loaded ? "" : "animate-[map-tile-in_var(--duration-medium)_ease] motion-reduce:animate-none"]),
+                  style: normalizeStyle({
+                    left: `${tile.left}px`,
+                    top: `${tile.top}px`,
+                    width: `${tileSize.value}px`,
+                    height: `${tileSize.value}px`
+                  }),
+                  onLoad: ($event) => onTileLoad(tile)
+                }, null, 46, _hoisted_2);
+              }), 128))
+            ], 4);
+          }), 128)),
+          pin.value ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: "pointer-events-none absolute",
+            style: normalizeStyle({ left: `${pin.value.left}px`, top: `${pin.value.top}px`, transform: "translate(-50%, -100%)" })
+          }, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:map-pin",
+              size: 30,
+              class: "block animate-[map-pin-in_var(--duration-medium)_var(--ease-emphasized)] text-danger drop-shadow-[0_2px_4px_rgba(0,0,0,0.45)] motion-reduce:animate-none"
+            })
+          ], 4)) : createCommentVNode("", true)
+        ], 42, _hoisted_1),
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("button", {
+            class: normalizeClass(CONTROL),
+            type: "button",
+            disabled: __props.disabled || level.value >= maxZoom.value,
+            title: __props.zoomInLabel,
+            "aria-label": __props.zoomInLabel,
+            onClick: _cache[0] || (_cache[0] = ($event) => zoomBy(1))
+          }, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:plus",
+              size: 16
+            })
+          ], 8, _hoisted_4),
+          createElementVNode("button", {
+            class: normalizeClass(CONTROL),
+            type: "button",
+            disabled: __props.disabled || level.value <= minZoom.value,
+            title: __props.zoomOutLabel,
+            "aria-label": __props.zoomOutLabel,
+            onClick: _cache[1] || (_cache[1] = ($event) => zoomBy(-1))
+          }, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:minus",
+              size: 16
+            })
+          ], 8, _hoisted_5),
+          canRecentre.value ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: normalizeClass(CONTROL),
+            type: "button",
+            title: __props.recentreLabel,
+            "aria-label": __props.recentreLabel,
+            onClick: recentre
+          }, [
+            createVNode(_sfc_main$1, {
+              name: "lucide:locate-fixed",
+              size: 16
+            })
+          ], 8, _hoisted_6)) : createCommentVNode("", true),
+          __props.locatable ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            class: normalizeClass(CONTROL),
+            type: "button",
+            disabled: __props.disabled || locating.value,
+            title: __props.locateLabel,
+            "aria-label": __props.locateLabel,
+            onClick: locate
+          }, [
+            createVNode(_sfc_main$1, {
+              name: locating.value ? "lucide:loader-circle" : "lucide:crosshair",
+              size: 16,
+              class: normalizeClass(locating.value ? "animate-spin" : "")
+            }, null, 8, ["name", "class"])
+          ], 8, _hoisted_7)) : createCommentVNode("", true)
+        ]),
+        loadingTiles.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          name: "lucide:loader-circle",
+          size: 16,
+          class: "pointer-events-none absolute left-2 top-2 animate-spin text-white/70 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+        })) : createCommentVNode("", true),
+        props.tiles.attribution ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(props.tiles.attribution), 1)) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpModal-CezA8eJ3.js → LpModal-J-KRPO7F.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useSlots, openBlock, createBlock, unref, wit
 import { DialogRoot, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from "reka-ui";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpScrollArea-De9DLpa1.js";
+import { _ as _sfc_main$2 } from "./LpScrollArea-CKhOx0_l.js";
 const _hoisted_1 = { class: "fixed inset-0 z-(--z-modal) flex items-center justify-center pointer-events-none" };
 const _hoisted_2 = {
   key: 0,

package/dist/chunks/{LpNotificationBell-BtfRoL2i.js → LpNotificationBell-D8sdQLgu.js}

@@ -1,11 +1,11 @@
-import { defineComponent, useModel, computed, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createVNode, createTextVNode, mergeModels } from "vue";
+import { defineComponent, computed, useModel, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, createVNode, createTextVNode, mergeModels } from "vue";
 import { _ as _sfc_main$7 } from "./LpBadge-CXzBPnwO.js";
 import { _ as _sfc_main$6 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$4 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$2 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$5 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpPopover-8268UmlC.js";
-import { _ as _sfc_main$3 } from "./LpScrollArea-De9DLpa1.js";
+import { _ as _sfc_main$3 } from "./LpScrollArea-CKhOx0_l.js";
 const _hoisted_1 = { class: "flex items-center justify-between gap-2 px-3 py-2.5" };
 const _hoisted_2 = { class: "text-sm font-semibold" };
 const _hoisted_3 = {
@@ -35,7 +35,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     emptyLabel: {},
     title: {},
     maxBadge: { default: 9 },
-    menuItems: {}
+    menuItems: {},
+    labels: {},
+    formatTime: {}
   }, {
     "open": { type: Boolean, ...{ default: false } },
     "openModifiers": {}
@@ -43,6 +45,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["markRead", "markUnread", "markAllRead", "dismiss", "select"], ["update:open"]),
   setup(__props, { emit: __emit }) {
     const props = __props;
+    const l = computed(() => ({
+      title: props.title ?? props.labels?.title ?? "Notifications",
+      markAllRead: props.labels?.markAllRead ?? "Mark all read",
+      markAsRead: props.labels?.markAsRead ?? "Mark as read",
+      markAsUnread: props.labels?.markAsUnread ?? "Mark as unread",
+      open: props.labels?.open ?? "Open",
+      dismiss: props.labels?.dismiss ?? "Dismiss",
+      empty: props.emptyLabel ?? props.labels?.empty ?? "No notifications",
+      ariaLabel: props.labels?.ariaLabel ?? props.labels?.title ?? "Notifications"
+    }));
     const open = useModel(__props, "open");
     const emit = __emit;
     const unread = computed(
@@ -55,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const contextMenu = computed(
       () => props.menuItems ?? [
         {
-          label: "Mark all read",
+          label: l.value.markAllRead,
           icon: "lucide:check-check",
           disabled: !hasUnread.value,
           onSelect: () => emit("markAllRead")
@@ -70,26 +82,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const actions = [];
       if (item.read) {
         actions.push({
-          label: "Mark as unread",
+          label: l.value.markAsUnread,
           icon: "lucide:dot",
           onSelect: () => emit("markUnread", item.id)
         });
       } else {
         actions.push({
-          label: "Mark as read",
+          label: l.value.markAsRead,
           icon: "lucide:check",
           onSelect: () => emit("markRead", item.id)
         });
       }
       if (item.link) {
         actions.push({
-          label: "Open",
+          label: l.value.open,
           icon: "lucide:external-link",
           onSelect: () => emit("select", item)
         });
       }
       actions.push({
-        label: "Dismiss",
+        label: l.value.dismiss,
         icon: "lucide:x",
         danger: true,
         separatorBefore: true,
@@ -99,6 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function timeAgo(iso) {
       if (!iso) return "";
+      if (props.formatTime) return props.formatTime(iso);
       const then = new Date(iso).getTime();
       if (Number.isNaN(then)) return "";
       const secs = Math.max(0, Math.round((Date.now() - then) / 1e3));
@@ -127,7 +140,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 variant: "ghost",
                 size: "sm",
                 class: "relative",
-                "aria-label": "Notifications",
+                "aria-label": l.value.ariaLabel,
                 onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
               }, {
                 default: withCtx(() => [
@@ -147,20 +160,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   })) : createCommentVNode("", true)
                 ]),
                 _: 1
-              })
+              }, 8, ["aria-label"])
             ]),
             _: 1
           }, 8, ["items"])
         ]),
         default: withCtx(() => [
           createElementVNode("header", _hoisted_1, [
-            createElementVNode("span", _hoisted_2, toDisplayString(__props.title ?? "Notifications"), 1),
+            createElementVNode("span", _hoisted_2, toDisplayString(l.value.title), 1),
             hasUnread.value ? (openBlock(), createElementBlock("button", {
               key: 0,
               type: "button",
               class: "rounded-md px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft",
               onClick: _cache[1] || (_cache[1] = ($event) => emit("markAllRead"))
-            }, " Mark all read ")) : createCommentVNode("", true)
+            }, toDisplayString(l.value.markAllRead), 1)) : createCommentVNode("", true)
           ]),
           __props.loading ? (openBlock(), createElementBlock("div", _hoisted_3, [
             (openBlock(), createElementBlock(Fragment, null, renderList(4, (i) => {
@@ -172,7 +185,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])) : !__props.items.length ? (openBlock(), createBlock(_sfc_main$2, {
             key: 1,
             icon: "lucide:bell-off",
-            title: __props.emptyLabel ?? "No notifications",
+            title: l.value.empty,
             class: "px-3 py-10"
           }, null, 8, ["title"])) : (openBlock(), createBlock(_sfc_main$3, {
             key: 2,

package/dist/chunks/{LpScrollArea-De9DLpa1.js → LpScrollArea-CKhOx0_l.js}

@@ -18,7 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose({ viewportEl });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ScrollAreaRoot), {
-        class: "relative overflow-hidden",
+        class: "relative flex flex-col overflow-hidden",
         type: "hover",
         "scroll-hide-delay": 500
       }, {
@@ -46,7 +46,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ScrollAreaViewport), {
             ref_key: "viewportRef",
             ref: viewportRef,
-            class: normalizeClass(["size-full min-w-0 [&>div]:!block [&>div]:!min-w-0", [
+            class: normalizeClass(["w-full min-h-0 min-w-0 flex-1 [&>div]:!block [&>div]:!min-w-0", [
               __props.instant ? "" : "scroll-smooth motion-reduce:scroll-auto",
               __props.fade ? "[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]" : ""
             ]]),

package/dist/chunks/{LpSidebar-B11IDRQi.js → LpSidebar-Bk7SrINq.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps, createBlock } from "vue";
-import { _ as _sfc_main$2 } from "./LpDrawer-BHzCy-Aa.js";
-import { _ as _sfc_main$1 } from "./LpSidebarNav-TIUNHZX-.js";
+import { _ as _sfc_main$2 } from "./LpDrawer-Fxk7ViQ-.js";
+import { _ as _sfc_main$1 } from "./LpSidebarNav-Cpd-yHXb.js";
 const _hoisted_1 = {
   key: 1,
   class: "mt-2 flex shrink-0 flex-col gap-2"

package/dist/chunks/{LpSidebarNav-TIUNHZX-.js → LpSidebarNav-Cpd-yHXb.js}

@@ -4,7 +4,7 @@ import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$4 } from "./LpBadge-CXzBPnwO.js";
 import { _ as _sfc_main$2 } from "./LpContextMenu-D0mzXqA7.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpScrollArea-De9DLpa1.js";
+import { _ as _sfc_main$1 } from "./LpScrollArea-CKhOx0_l.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-h-0 flex-1 flex-col gap-4"