@leavepulse/ui 0.69.0 → 0.70.0

package/dist/chunks/{LpMapPicker-BTbkFeSG.js → LpMapPicker-BtIl7NOM.js}

@@ -1,18 +1,20 @@
-import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
+import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, normalizeStyle, createVNode, createCommentVNode, createBlock, toDisplayString } from "vue";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { OSM_TILES, project, tileUrl, unproject } from "../components/address.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./LpLoader-DjJEX8hL.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useResizeObserver } from "../composables/useResizeObserver.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_7 = ["disabled", "title", "aria-label", "aria-busy"];
 const _hoisted_8 = {
-  key: 1,
+  key: 0,
   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 __default__ = { inheritAttrs: false };
@@ -383,24 +385,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         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);
+    useResizeObserver(viewport, (entry) => {
+      if (!entry) return;
+      viewWidth.value = entry.contentRect.width;
+      viewHeight.value = entry.contentRect.height;
+      if (!layers.value.length) {
+        pushLayer();
+        return;
+      }
+      reanchor();
+      refreshTiles();
     });
     onBeforeUnmount(() => {
-      observer?.disconnect();
       clearTimeout(zoomTimer);
       clearTimeout(pruneTimer);
       stopGlide();
@@ -512,21 +508,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: __props.disabled || locating.value,
             title: text.value.locate,
             "aria-label": text.value.locate,
+            "aria-busy": locating.value || void 0,
             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"])
+            locating.value ? (openBlock(), createBlock(_sfc_main$2, {
+              key: 0,
+              size: "inline",
+              delay: 0,
+              "aria-hidden": "true",
+              class: "text-[16px]"
+            })) : (openBlock(), createBlock(_sfc_main$1, {
+              key: 1,
+              name: "lucide:crosshair",
+              size: 16
+            }))
           ], 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),
+        createVNode(_sfc_main$2, {
+          active: loadingTiles.value,
+          size: "inline",
+          "aria-hidden": "true",
+          class: "pointer-events-none absolute left-2 top-2 text-[16px] text-white/70 drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]"
+        }, null, 8, ["active"]),
         props.tiles.attribution ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(props.tiles.attribution), 1)) : createCommentVNode("", true)
       ], 16);
     };

package/dist/chunks/LpMasonry--k0571qG.js

@@ -0,0 +1,185 @@
+import { defineComponent, computed, ref, reactive, onMounted, onBeforeUnmount, watch, openBlock, createElementBlock, mergeProps, unref, createVNode, TransitionGroup, withCtx, Fragment, renderList, normalizeStyle, normalizeClass, createElementVNode, renderSlot } from "vue";
+import { prefersReducedMotion, easingToken } from "../composables/easing.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useReveal } from "../composables/useReveal.js";
+import { masonryColumnCount, placeMasonry } from "../components/masonry.js";
+import { staggerDelay } from "../components/reveal.js";
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpMasonry",
+  props: {
+    items: {},
+    itemKey: {},
+    columns: {},
+    minColumnWidth: { default: 240 },
+    maxColumns: {},
+    gap: { default: 16 },
+    entrance: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: classes, attrs: rest } = useMergedAttrs(
+      () => "relative w-full transition-[height] duration-(--duration-slow) ease-(--ease-emphasized)"
+    );
+    function keyOf(item, index) {
+      const key = props.itemKey;
+      if (typeof key === "function") return key(item, index);
+      if (key != null) return item[key];
+      return index;
+    }
+    const keys = computed(() => props.items.map((item, index) => keyOf(item, index)));
+    const root = ref(null);
+    const width = ref(0);
+    const heights = reactive(/* @__PURE__ */ new Map());
+    const elements = /* @__PURE__ */ new Map();
+    const keyByElement = /* @__PURE__ */ new WeakMap();
+    let observer = null;
+    function heightOf(entry) {
+      const box = entry.borderBoxSize?.[0];
+      return box ? box.blockSize : entry.target.offsetHeight;
+    }
+    function setItem(key, el) {
+      const previous = elements.get(key);
+      if (el instanceof HTMLElement) {
+        if (previous === el) return;
+        if (previous) observer?.unobserve(previous);
+        elements.set(key, el);
+        keyByElement.set(el, key);
+        heights.set(key, el.offsetHeight);
+        observer?.observe(el);
+      } else if (previous && !keys.value.includes(key)) {
+        observer?.unobserve(previous);
+        elements.delete(key);
+        heights.delete(key);
+      }
+    }
+    onMounted(() => {
+      if (typeof ResizeObserver === "undefined") {
+        width.value = root.value?.clientWidth ?? 0;
+        return;
+      }
+      observer = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === root.value) {
+            width.value = entry.contentRect.width;
+            continue;
+          }
+          const key = keyByElement.get(entry.target);
+          if (key !== void 0) heights.set(key, heightOf(entry));
+        }
+      });
+      if (root.value) {
+        width.value = root.value.clientWidth;
+        observer.observe(root.value);
+      }
+      for (const el of elements.values()) observer.observe(el);
+    });
+    onBeforeUnmount(() => observer?.disconnect());
+    const count = computed(
+      () => masonryColumnCount(width.value, {
+        columns: props.columns,
+        minColumnWidth: props.minColumnWidth,
+        maxColumns: props.maxColumns,
+        gap: props.gap
+      })
+    );
+    const layout = computed(
+      () => placeMasonry(
+        keys.value.map((key) => heights.get(key) ?? 0),
+        count.value,
+        width.value,
+        props.gap
+      )
+    );
+    const position = computed(() => {
+      const map = /* @__PURE__ */ new Map();
+      keys.value.forEach((key, index) => map.set(key, { x: layout.value.x[index], y: layout.value.y[index] }));
+      return map;
+    });
+    const placed = reactive(/* @__PURE__ */ new Set());
+    const ready = computed(() => width.value > 0);
+    watch(
+      [layout, ready],
+      () => {
+        if (!ready.value) return;
+        requestAnimationFrame(() => {
+          for (const key of keys.value) placed.add(key);
+          for (const key of placed) if (!keys.value.includes(key)) placed.delete(key);
+        });
+      },
+      { flush: "post" }
+    );
+    function itemStyle(key) {
+      const at = position.value.get(key);
+      return {
+        width: `${layout.value.columnWidth}px`,
+        // `translate`, not `transform`: TransitionGroup runs its own FLIP on any
+        // child whose transition names `transform`, and that FLIP clears the inline
+        // transform when it finishes — every item landed in the top-left corner.
+        translate: at ? `${at.x}px ${at.y}px` : void 0
+      };
+    }
+    const { el: revealEl, revealed } = useReveal({ immediate: () => !props.entrance, threshold: 0.05 });
+    watch(root, (node) => revealEl.value = node);
+    const hidden = computed(() => !ready.value || !revealed.value);
+    watch(
+      () => ready.value && revealed.value,
+      (go) => {
+        if (!go || !props.entrance || prefersReducedMotion()) return;
+        const easing = easingToken("ease-emphasized");
+        keys.value.forEach((key, index) => {
+          const el = elements.get(key);
+          el?.firstElementChild?.animate?.(
+            [
+              { opacity: 0, transform: "translate3d(0, 12px, 0)" },
+              { opacity: 1, transform: "none" }
+            ],
+            { duration: 460, delay: staggerDelay(index, 0, 40, 12), easing, fill: "backwards" }
+          );
+        });
+      },
+      { flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "root",
+        ref: root,
+        class: unref(classes),
+        role: "list",
+        style: { height: `${layout.value.height}px`, opacity: hidden.value ? 0 : void 0 }
+      }, unref(rest)), [
+        createVNode(TransitionGroup, {
+          "enter-active-class": "transition-[opacity,scale] duration-(--duration-slow) ease-(--ease-emphasized)",
+          "enter-from-class": "opacity-0 scale-95",
+          "leave-active-class": "transition-[opacity,scale] duration-(--duration-medium) ease-(--ease-emphasized)",
+          "leave-to-class": "opacity-0 scale-95"
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+              return openBlock(), createElementBlock("div", {
+                key: keys.value[index],
+                ref_for: true,
+                ref: (el) => setItem(keys.value[index], el),
+                role: "listitem",
+                class: normalizeClass(["absolute top-0 left-0", placed.has(keys.value[index]) && "transition-[translate] duration-(--duration-slow) ease-(--ease-emphasized)"]),
+                style: normalizeStyle(itemStyle(keys.value[index]))
+              }, [
+                createElementVNode("div", null, [
+                  renderSlot(_ctx.$slots, "default", {
+                    item,
+                    index
+                  })
+                ])
+              ], 6);
+            }), 128))
+          ]),
+          _: 3
+        })
+      ], 16);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpMediaGallery-CuPcscx3.js → LpMediaGallery-D5swlmZ_.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, renderSlot, mergeProps, unref, Fragment, renderList, createBlock, withCtx, createElementVNode, normalizeClass, toDisplayString, createVNode, createCommentVNode } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$2 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$3 } from "./LpLightbox-B9J8rzsj.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$3 } from "./LpLightbox-XJ0LpTcZ.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["aria-label"];
 const _hoisted_3 = ["aria-label", "onClick"];

package/dist/chunks/{LpModal-hk1noDcr.js → LpModal-eBMt2Fqn.js}

@@ -6,8 +6,9 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { useShift } from "../composables/useShift.js";
 import { useModalLayer } from "../components/modalDepth.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon-6tSrZ3Zy.js";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
+import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 const _hoisted_1 = {
   key: 0,
   "data-lp-modal-aside": "",
@@ -65,9 +66,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     __expose({ close });
     function onEscape(event) {
+      guardOutside(event);
       if (!props.dismissible) event.preventDefault();
     }
     const onInteractOutside = (event) => {
+      guardOutside(event);
       if (!props.dismissible) return event.preventDefault();
       const target = event.target;
       if (target instanceof Element && target.closest("[data-lp-modal-aside]")) {
@@ -151,13 +154,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { flush: "post" }
     );
+    const portalTo = usePortalTarget();
+    const guardOutside = useOutsideGuard();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(DialogRoot), {
         open: __props.open,
         "onUpdate:open": onOpenChange
       }, {
         default: withCtx(() => [
-          createVNode(unref(DialogPortal), null, {
+          createVNode(unref(DialogPortal), { to: unref(portalTo) }, {
             default: withCtx(() => [
               createVNode(unref(DialogOverlay), {
                 class: normalizeClass([{ "lp-scrim--light": unref(frosted), "lp-scrim--nested": unref(layer).nested, "lp-scrim--covered": unref(layer).covered }, "lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[fade-out_120ms_ease]"]),
@@ -261,7 +266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ], 4)
             ]),
             _: 3
-          })
+          }, 8, ["to"])
         ]),
         _: 3
       }, 8, ["open"]);

package/dist/chunks/{LpModalNav-DQd2keZm.js → LpModalNav-D4Z0wVHR.js}

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, openBlock, createBlock, createSlots, withCtx, renderSlot, createElementVNode, normalizeClass, createVNode, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import { useGlass } from "../composables/useGlass.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$2 } from "./LpButton-DNR-YAq5.js";
-import { _ as _sfc_main$3 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$1 } from "./LpModal-hk1noDcr.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-DfIiS-lB.js";
+import { _ as _sfc_main$2 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpModal-eBMt2Fqn.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-D-M0Y_7U.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpNotificationBell-X84PJIxD.js → LpNotificationBell-DPZmP5dM.js}

@@ -1,15 +1,18 @@
-import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted, onBeforeUnmount, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, Transition, mergeModels } from "vue";
+import { defineComponent, computed, useModel, getCurrentInstance, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createVNode, Fragment, renderList, resolveDynamicComponent, normalizeClass, unref, createTextVNode, Transition, mergeModels } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
-import { _ as _sfc_main$9 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$8 } from "./LpButton-DNR-YAq5.js";
-import { _ as _sfc_main$6 } from "./LpContextMenu-CRnjoqSt.js";
-import { _ as _sfc_main$4 } from "./LpEmptyState-om1UnFjV.js";
-import { _ as _sfc_main$7 } from "./LpIcon-6tSrZ3Zy.js";
-import { _ as _sfc_main$1 } from "./LpPopover-DVnkHaOu.js";
-import { _ as _sfc_main$a } from "./LpRollingText-DB7upf-5.js";
+import { useNow } from "../composables/useNow.js";
+import { _ as _sfc_main$a } from "./LpBadge-HOEPBYmi.js";
+import { _ as _sfc_main$9 } from "./LpButton-CVxBfGjd.js";
+import { _ as _sfc_main$6 } from "./LpContextMenu-COwOwRgI.js";
+import { _ as _sfc_main$4 } from "./LpEmptyState-KTKipws2.js";
+import { _ as _sfc_main$7 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpPopover-BEIcqb9p.js";
+import { _ as _sfc_main$8 } from "./LpRelativeTime-CKzVqAo9.js";
+import { _ as _sfc_main$b } from "./LpRollingText-DB7upf-5.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$3 } from "./LpSkeleton-BB6XIV-w.js";
 import { _ as _sfc_main$2 } from "./LpShift-DXNsauQZ.js";
+import { toneLook } from "../components/tone.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 = { class: "flex items-center gap-0.5" };
@@ -67,11 +70,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         empty: "No notifications",
         ariaLabel: "",
         unread: "{count} unread",
-        unreadItem: "Unread",
-        justNow: "just now",
-        minutes: "{n}m",
-        hours: "{n}h",
-        days: "{n}d"
+        unreadItem: "Unread"
       },
       () => props.labels
     );
@@ -93,13 +92,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const buttonLabel = computed(
       () => hasUnread.value ? `${l.value.ariaLabel}, ${l.value.unread.replace("{count}", String(unread.value))}` : l.value.ariaLabel
     );
-    const TONE_CLASS = {
-      brand: "bg-brand-soft text-brand",
-      action: "bg-action-soft text-action",
-      danger: "bg-danger-soft text-danger",
-      accent: "bg-accent-soft text-accent",
-      muted: "bg-surface-soft text-muted-strong"
-    };
     const instance = getCurrentInstance();
     const handlesClear = computed(() => Boolean(instance?.vnode.props?.onClear));
     const contextMenu = computed(() => {
@@ -124,6 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     function onSelect(item) {
       if (!item.read) emit("markRead", item.id);
+      open.value = false;
       emit("select", item);
     }
     function rowMenu(item) {
@@ -145,7 +138,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         actions.push({
           label: l.value.open,
           icon: "lucide:external-link",
-          onSelect: () => emit("select", item)
+          onSelect: () => onSelect(item)
         });
       }
       actions.push({
@@ -157,28 +150,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       return actions;
     }
-    const now = ref(null);
-    let clock;
-    onMounted(() => {
-      now.value = Date.now();
-      clock = setInterval(() => now.value = Date.now(), 3e4);
-    });
-    onBeforeUnmount(() => clearInterval(clock));
-    function timeAgo(iso) {
-      if (!iso || now.value === null) 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((now.value - then) / 1e3));
-      const n = (template, value) => template.replace("{n}", String(value));
-      if (secs < 45) return l.value.justNow;
-      const mins = Math.round(secs / 60);
-      if (mins < 60) return n(l.value.minutes, mins);
-      const hrs = Math.round(mins / 60);
-      if (hrs < 24) return n(l.value.hours, hrs);
-      const days = Math.round(hrs / 24);
-      if (days < 7) return n(l.value.days, days);
-      return new Date(then).toLocaleDateString();
+    const customNow = useNow(() => !!props.formatTime, { nextIn: () => 3e4 });
+    function customTime(iso) {
+      void customNow.value;
+      return props.formatTime ? props.formatTime(iso) : "";
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
@@ -192,7 +167,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         trigger: withCtx(() => [
           createVNode(_sfc_main$6, { items: contextMenu.value }, {
             default: withCtx(() => [
-              createVNode(_sfc_main$8, {
+              createVNode(_sfc_main$9, {
                 variant: "ghost",
                 size: "sm",
                 class: "relative",
@@ -209,14 +184,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     "leave-active-class": "animate-[chip-out_var(--duration-fast)_ease] motion-reduce:animate-none"
                   }, {
                     default: withCtx(() => [
-                      hasUnread.value ? (openBlock(), createBlock(_sfc_main$9, {
+                      hasUnread.value ? (openBlock(), createBlock(_sfc_main$a, {
                         key: 0,
                         "aria-hidden": "true",
                         tone: "danger",
                         class: "absolute -right-1 -top-1 min-w-4 justify-center px-1 py-0 text-[10px] leading-4"
                       }, {
                         default: withCtx(() => [
-                          createVNode(_sfc_main$a, {
+                          createVNode(_sfc_main$b, {
                             value: badgeLabel.value,
                             duration: 220
                           }, null, 8, ["value"])
@@ -285,7 +260,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         }, {
                           default: withCtx(() => [
                             createElementVNode("span", {
-                              class: normalizeClass(["grid size-7 shrink-0 place-items-center rounded-control", item.read ? "bg-surface-soft text-muted" : TONE_CLASS[item.tone ?? "brand"]])
+                              class: normalizeClass(["grid size-7 shrink-0 place-items-center rounded-control", item.read ? "bg-surface-soft text-muted" : unref(toneLook)(item.tone, "brand").chip])
                             }, [
                               createVNode(_sfc_main$7, {
                                 name: item.icon || "lucide:bell",
@@ -301,7 +276,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 !item.read ? (openBlock(), createElementBlock("span", _hoisted_8, toDisplayString(l.value.unreadItem), 1)) : createCommentVNode("", true)
                               ]),
                               item.body ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(item.body), 1)) : createCommentVNode("", true),
-                              item.createdAt ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(timeAgo(item.createdAt)), 1)) : createCommentVNode("", true)
+                              item.createdAt ? (openBlock(), createElementBlock("span", _hoisted_10, [
+                                __props.formatTime ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                  createTextVNode(toDisplayString(customTime(item.createdAt)), 1)
+                                ], 64)) : (openBlock(), createBlock(_sfc_main$8, {
+                                  key: 1,
+                                  date: item.createdAt,
+                                  format: "narrow",
+                                  tooltip: false
+                                }, null, 8, ["date"]))
+                              ])) : createCommentVNode("", true)
                             ])
                           ]),
                           _: 2

package/dist/chunks/LpNumberField-B9k-h2HE.js

@@ -0,0 +1,140 @@
+import { defineComponent, useId, useAttrs, computed, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createCommentVNode, mergeProps, createElementBlock, toDisplayString } from "vue";
+import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
+import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { useFieldControl, focusLeft } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { useMergedClass } from "../composables/useMergedClass.js";
+const _hoisted_1 = ["id"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpNumberField",
+  props: {
+    modelValue: {},
+    min: {},
+    max: {},
+    step: {},
+    stepSnapping: { type: Boolean, default: true },
+    formatOptions: {},
+    locale: {},
+    readonly: { type: Boolean },
+    disableWheelChange: { type: Boolean },
+    invertWheelChange: { type: Boolean },
+    focusOnChange: { type: Boolean, default: true },
+    steppers: { type: Boolean, default: true },
+    disabled: { type: Boolean },
+    unit: {},
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    labels: {}
+  },
+  emits: ["update:modelValue", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const unitId = useId();
+    const text = useLabels(
+      "numberField",
+      { increase: "Increase", decrease: "Decrease" },
+      () => props.labels
+    );
+    const SIZE = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    const attrs = useAttrs();
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    const describedBy = computed(
+      () => [field.value.describedBy, props.unit ? unitId : void 0].filter(Boolean).join(" ") || void 0
+    );
+    const inputAttrs = computed(() => {
+      const { class: _c, style: _s, id: _i, name: _n, ...rest } = attrs;
+      return rest;
+    });
+    function onFocusOut(event) {
+      if (focusLeft(event)) emit("blur", event);
+    }
+    const rootClass = useMergedClass(
+      () => [
+        "@container flex w-full items-center rounded-control border bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+        SIZE[props.size],
+        field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
+      ].join(" ")
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NumberFieldRoot), {
+        "model-value": __props.modelValue ?? void 0,
+        min: __props.min,
+        max: __props.max,
+        step: __props.step,
+        "step-snapping": __props.stepSnapping,
+        readonly: __props.readonly,
+        "disable-wheel-change": __props.disableWheelChange,
+        "invert-wheel-change": __props.invertWheelChange,
+        "focus-on-change": __props.focusOnChange,
+        "format-options": __props.formatOptions,
+        locale: __props.locale,
+        disabled: unref(field).disabled,
+        required: unref(field).required,
+        "data-lp-ring-owner": "",
+        class: normalizeClass(unref(rootClass)),
+        style: normalizeStyle(unref(attrs).style),
+        name: typeof unref(attrs).name === "string" ? unref(attrs).name : void 0,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => emit("update:modelValue", Number.isNaN(v) ? null : v ?? null)),
+        onFocusout: onFocusOut
+      }, {
+        default: withCtx(() => [
+          __props.steppers ? (openBlock(), createBlock(unref(NumberFieldDecrement), {
+            key: 0,
+            "aria-label": unref(text).decrease,
+            class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:minus",
+                size: 15,
+                class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+              })
+            ]),
+            _: 1
+          }, 8, ["aria-label"])) : createCommentVNode("", true),
+          createVNode(unref(NumberFieldInput), mergeProps(inputAttrs.value, {
+            id: unref(field).id,
+            "aria-describedby": describedBy.value,
+            "aria-invalid": unref(field).invalid || void 0,
+            class: ["min-w-0 flex-1 bg-transparent text-ink outline-none placeholder:text-muted [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none", __props.steppers ? "text-center @max-[8.5rem]:px-3 @max-[8.5rem]:text-left" : "px-3"]
+          }), null, 16, ["id", "aria-describedby", "aria-invalid", "class"]),
+          __props.unit ? (openBlock(), createElementBlock("span", {
+            key: 1,
+            id: unref(unitId),
+            class: normalizeClass(["shrink-0 pr-1 text-xs text-muted", !__props.steppers && "pr-3"])
+          }, toDisplayString(__props.unit), 11, _hoisted_1)) : createCommentVNode("", true),
+          __props.steppers ? (openBlock(), createBlock(unref(NumberFieldIncrement), {
+            key: 2,
+            "aria-label": unref(text).increase,
+            class: "group grid h-full w-8 shrink-0 place-items-center @max-[8.5rem]:hidden text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$1, {
+                name: "lucide:plus",
+                size: 15,
+                class: "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:scale-75 motion-reduce:group-active:scale-100"
+              })
+            ]),
+            _: 1
+          }, 8, ["aria-label"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["model-value", "min", "max", "step", "step-snapping", "readonly", "disable-wheel-change", "invert-wheel-change", "focus-on-change", "format-options", "locale", "disabled", "required", "class", "style", "name"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};