@leavepulse/ui 0.43.4 → 0.44.0

package/dist/chunks/{LpToaster-gDB1EaU3.js → LpToaster--oT6lfhL.js}

@@ -1,31 +1,39 @@
 import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createVNode, createTextVNode, toDisplayString, createCommentVNode, withModifiers, normalizeStyle, Teleport } from "vue";
 import { ToastProvider, ToastRoot, ToastTitle, ToastDescription, ToastViewport } from "reka-ui";
+import { useLabels } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = { class: "flex items-start gap-3 p-3.5" };
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col gap-0.5" };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = ["onClick"];
+const _hoisted_3 = ["disabled", "aria-busy", "onClick"];
+const _hoisted_4 = ["aria-label", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpToaster",
+  props: {
+    labels: {}
+  },
   setup(__props) {
+    const props = __props;
+    const text = useLabels("toast", { dismiss: "Dismiss" }, () => props.labels);
     const { queue, dismiss } = useToast();
+    const tag = (t) => `${t.id}:${t.rev}`;
     const closing = ref(/* @__PURE__ */ new Set());
-    function beginClose(id) {
-      if (closing.value.has(id)) return;
-      closing.value = new Set(closing.value).add(id);
-      window.setTimeout(() => finishClose(id), 220);
+    function beginClose(t) {
+      const at = tag(t);
+      if (closing.value.has(at)) return;
+      closing.value = new Set(closing.value).add(at);
+      window.setTimeout(() => finishClose(t.id, at), 220);
     }
-    function finishClose(id) {
-      if (!closing.value.has(id)) return;
+    function finishClose(id, at) {
+      if (!closing.value.has(at)) return;
       const next = new Set(closing.value);
-      next.delete(id);
+      next.delete(at);
       closing.value = next;
-      dismiss(id);
+      if (queue.some((t) => tag(t) === at)) dismiss(id);
     }
-    function onAnimEnd(e, id) {
-      if (e.animationName === "toast-out") finishClose(id);
+    function onAnimEnd(e, t) {
+      if (e.animationName === "toast-out") finishClose(t.id, tag(t));
     }
     const variantIcon = {
       info: "lucide:info",
@@ -64,7 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!queue.some((t) => t.id === id)) pausedAt.delete(id);
         }
         if (closing.value.size) {
-          const live = new Set([...closing.value].filter((id) => queue.some((t) => t.id === id)));
+          const live = new Set([...closing.value].filter((at) => queue.some((t) => tag(t) === at)));
           if (live.size !== closing.value.size) closing.value = live;
         }
         if (queue.some((t) => t.dismissAt !== null)) startTimer();
@@ -89,27 +97,46 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const remaining = t.dismissAt - at;
       return Math.max(0, Math.min(100, remaining / t.duration * 100));
     }
-    async function runClick(t) {
-      if (t.onClick) {
-        await t.onClick();
-        beginClose(t.id);
+    let swiped = null;
+    function onSwipeDone(t) {
+      swiped = tag(t);
+      window.setTimeout(() => swiped = null, 0);
+    }
+    const busy = ref(/* @__PURE__ */ new Set());
+    async function settle(t, run) {
+      const at = tag(t);
+      if (busy.value.has(at)) return;
+      busy.value = new Set(busy.value).add(at);
+      try {
+        await run();
+        beginClose(t);
+      } finally {
+        const next = new Set(busy.value);
+        next.delete(at);
+        busy.value = next;
       }
     }
-    async function runAction(t, action) {
-      await action.onClick();
-      beginClose(t.id);
+    function runClick(t) {
+      if (swiped === tag(t)) return;
+      if (t.onClick) return settle(t, t.onClick);
+    }
+    function runAction(t, action) {
+      return settle(t, action.onClick);
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ToastProvider), null, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(queue), (t) => {
             return openBlock(), createBlock(unref(ToastRoot), {
-              key: t.id,
-              open: !closing.value.has(t.id),
+              key: tag(t),
+              open: !closing.value.has(tag(t)),
               duration: t.duration,
+              type: t.variant === "error" || t.variant === "warning" ? "foreground" : "background",
               class: normalizeClass(["pointer-events-auto relative overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel data-[state=open]:animate-[toast-in_200ms_var(--ease-emphasized)] data-[state=closed]:animate-[toast-out_140ms_ease]", { "cursor-pointer": t.onClick }]),
-              "onUpdate:open": (open) => !open && beginClose(t.id),
-              onAnimationend: (e) => onAnimEnd(e, t.id),
+              "onUpdate:open": (open) => !open && beginClose(t),
+              onAnimationend: (e) => onAnimEnd(e, t),
+              onSwipeEnd: ($event) => onSwipeDone(t),
+              onSwipeCancel: ($event) => onSwipeDone(t),
               onPause: ($event) => onPause(t),
               onResume: ($event) => onResume(t),
               onClick: ($event) => runClick(t)
@@ -147,7 +174,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         return openBlock(), createElementBlock("button", {
                           key: i,
                           type: "button",
-                          class: "inline-flex items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring",
+                          disabled: busy.value.has(tag(t)),
+                          "aria-busy": busy.value.has(tag(t)) || void 0,
+                          class: "inline-flex items-center gap-1.5 rounded-control disabled:opacity-60 border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring",
                           onClick: ($event) => runAction(t, action)
                         }, [
                           action.icon ? (openBlock(), createBlock(_sfc_main$1, {
@@ -163,8 +192,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   createElementVNode("button", {
                     type: "button",
                     class: "group -mr-1 -mt-1 rounded-md p-1 text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
-                    "aria-label": "Dismiss",
-                    onClick: withModifiers(($event) => beginClose(t.id), ["stop"])
+                    "aria-label": unref(text).dismiss,
+                    onClick: withModifiers(($event) => beginClose(t), ["stop"])
                   }, [
                     createVNode(_sfc_main$1, {
                       name: "lucide:x",
@@ -180,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 6)) : createCommentVNode("", true)
               ]),
               _: 2
-            }, 1032, ["open", "duration", "class", "onUpdate:open", "onAnimationend", "onPause", "onResume", "onClick"]);
+            }, 1032, ["open", "duration", "type", "class", "onUpdate:open", "onAnimationend", "onSwipeEnd", "onSwipeCancel", "onPause", "onResume", "onClick"]);
           }), 128)),
           (openBlock(), createBlock(Teleport, { to: "body" }, [
             createVNode(unref(ToastViewport), { class: "fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none" })

package/dist/chunks/{LpTooltip-hCLPAqMG.js → LpTooltip-CBdzeKNf.js}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createTextVNode, toDisplayString } from "vue";
-import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from "reka-ui";
+import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, Fragment, unref, normalizeProps, guardReactiveProps, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createTextVNode, toDisplayString } from "vue";
+import { injectTooltipProviderContext, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent } from "reka-ui";
 import { springStep, springSettled } from "../composables/usePillTransition.js";
 import { PANEL_SURFACE, TOOLTIP_ANIM } from "../components/dropdown.js";
 import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,13 +9,15 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
     sideOffset: {},
     side: { default: "top" },
     label: { type: Boolean },
-    delay: { default: 200 },
+    delay: {},
     showOnPointerFocus: { type: Boolean },
     followCursor: { type: Boolean },
     disabled: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
+    const shared = injectTooltipProviderContext(null);
+    const reducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
     const target = { x: 0, y: 0 };
     const offset = ref({ x: 0, y: 0 });
     let sx = { value: 0, velocity: 0 };
@@ -49,6 +51,10 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
       const half = props.side === "top" || props.side === "bottom" ? rect.height / 2 : 0;
       const dir = props.side === "bottom" ? -1 : 1;
       target.y = e.clientY - (rect.top + rect.height / 2) + half * dir;
+      if (reducedMotion()) {
+        offset.value = { x: target.x, y: target.y };
+        return;
+      }
       if (!frame) frame = requestAnimationFrame(settle);
     };
     const open = ref(false);
@@ -73,10 +79,11 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
       if (frame) cancelAnimationFrame(frame);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TooltipProvider), { "delay-duration": __props.delay }, {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(shared) ? Fragment : unref(TooltipProvider)), normalizeProps(guardReactiveProps(unref(shared) ? {} : { delayDuration: __props.delay ?? 200 })), {
         default: withCtx(() => [
           createVNode(unref(TooltipRoot), {
             open: open.value,
+            "delay-duration": __props.delay,
             "ignore-non-keyboard-focus": !__props.showOnPointerFocus,
             "disable-hoverable-content": __props.followCursor,
             "disable-closing-trigger": __props.followCursor,
@@ -119,10 +126,10 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
               })
             ]),
             _: 3
-          }, 8, ["open", "ignore-non-keyboard-focus", "disable-hoverable-content", "disable-closing-trigger"])
+          }, 8, ["open", "delay-duration", "ignore-non-keyboard-focus", "disable-hoverable-content", "disable-closing-trigger"])
         ]),
         _: 3
-      }, 8, ["delay-duration"]);
+      }, 16);
     };
   }
 });

package/dist/chunks/LpTooltipProvider-CftjV7Xc.js

@@ -0,0 +1,25 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, renderSlot } from "vue";
+import { TooltipProvider } from "reka-ui";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTooltipProvider",
+  props: {
+    delay: { default: 200 },
+    skipDelay: { default: 300 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipProvider), {
+        "delay-duration": __props.delay,
+        "skip-delay-duration": __props.skipDelay
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["delay-duration", "skip-delay-duration"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpTopologyCanvas-Cm1L39uL.js → LpTopologyCanvas-DocsLal3.js}

@@ -1,4 +1,4 @@
-import { defineComponent, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
+import { defineComponent, h, markRaw, computed, watch, openBlock, createBlock, unref, withCtx, createVNode, createCommentVNode, normalizeClass, createElementVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, renderSlot } from "vue";
 import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
@@ -34,7 +34,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const GroupNode = defineComponent({
+      props: { label: { type: [String, Object], default: void 0 } },
+      setup: (props2) => () => typeof props2.label === "string" ? h("div", { class: "px-3 pt-2 text-xs font-medium text-muted" }, props2.label) : null
+    });
     const nodeTypes = {
+      group: markRaw(GroupNode),
       infra: markRaw(_sfc_main$3),
       service: markRaw(_sfc_main$2),
       lane: markRaw(_sfc_main$1)

package/dist/chunks/{LpUptimeBar-DvAMno0S.js → LpUptimeBar-DLtxOMRy.js}

@@ -1,8 +1,9 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, createElementVNode, toDisplayString, createCommentVNode, createVNode, withCtx, Fragment, renderList, normalizeStyle, createBlock, createTextVNode } from "vue";
-import { _ as _sfc_main$3 } from "./LpNumberFlow-amWYaeuA.js";
+import { _ as _sfc_main$3 } from "./LpNumberFlow-z4WPZcZu.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-CM5gkSeF.js";
-import { _ as _sfc_main$1 } from "./LpTooltip-hCLPAqMG.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-CBdzeKNf.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import '../assets/LpUptimeBar-B98o9krI.css';const _hoisted_1 = {
   key: 0,
   class: "text-xs"
@@ -12,7 +13,7 @@ const _hoisted_3 = {
   key: 0,
   class: "flex items-center gap-1.5"
 };
-const _hoisted_4 = ["aria-label", "onPointerenter"];
+const _hoisted_4 = ["tabindex", "aria-label", "onPointerenter", "onFocus", "onBlur", "onKeydown"];
 const _hoisted_5 = {
   key: 1,
   class: "flex items-center gap-2 text-xs text-muted"
@@ -33,7 +34,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     endLabel: {},
     showUptime: { type: Boolean, default: true },
     title: {},
-    colors: {}
+    colors: {},
+    labels: {}
   },
   setup(__props) {
     const props = __props;
@@ -46,13 +48,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const opacityFor = (status) => status === "empty" ? 0.4 : 1;
     const colorFor = (status) => props.colors?.[status] ?? defaultColor[status];
-    const statusLabel = {
-      operational: "Operational",
-      degraded: "Degraded",
-      down: "Down",
-      maintenance: "Maintenance",
-      empty: "No data"
-    };
+    const statusLabel = useLabels(
+      "uptimeBar",
+      {
+        operational: "Operational",
+        degraded: "Degraded",
+        down: "Down",
+        maintenance: "Maintenance",
+        empty: "No data"
+      },
+      () => props.labels
+    );
     const uptimePct = computed(() => {
       const tracked = props.segments.filter((s) => s.status !== "empty");
       if (!tracked.length) return null;
@@ -66,8 +72,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (i == null) return null;
       const seg = props.segments[i];
       if (!seg) return null;
-      return { status: seg.status, text: seg.label ?? statusLabel[seg.status] };
+      return { status: seg.status, text: seg.label ?? statusLabel.value[seg.status] };
     });
+    const focusIndex = ref(-1);
+    const slots = ref([]);
+    const tabStop = computed(
+      () => focusIndex.value >= 0 && focusIndex.value < props.segments.length ? focusIndex.value : props.segments.length - 1
+    );
+    function onSlotKeydown(e, i) {
+      const last = props.segments.length - 1;
+      const next = e.key === "ArrowRight" ? Math.min(last, i + 1) : e.key === "ArrowLeft" ? Math.max(0, i - 1) : e.key === "Home" ? 0 : e.key === "End" ? last : -1;
+      if (next < 0) return;
+      e.preventDefault();
+      focusIndex.value = next;
+      slots.value[next]?.focus();
+    }
     const uptimeDecimals = computed(() => {
       const v = uptimePct.value;
       if (v == null) return 0;
@@ -109,10 +128,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               (openBlock(true), createElementBlock(Fragment, null, renderList(__props.segments, (seg, i) => {
                 return openBlock(), createElementBlock("button", {
                   key: i,
+                  ref_for: true,
+                  ref_key: "slots",
+                  ref: slots,
                   type: "button",
                   class: "lp-uptime__slot min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  "aria-label": seg.label ?? statusLabel[seg.status],
-                  onPointerenter: ($event) => hovered.value = i
+                  tabindex: i === tabStop.value ? 0 : -1,
+                  "aria-label": seg.label ?? unref(statusLabel)[seg.status],
+                  onPointerenter: ($event) => hovered.value = i,
+                  onFocus: ($event) => {
+                    focusIndex.value = i;
+                    hovered.value = i;
+                  },
+                  onBlur: ($event) => hovered.value === i && (hovered.value = null),
+                  onKeydown: ($event) => onSlotKeydown($event, i)
                 }, [
                   createElementVNode("span", {
                     class: "lp-uptime__mark block h-full rounded-[1px] transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none",