@leavepulse/ui 0.70.0 → 0.71.0

package/dist/chunks/{LpTableOfContents-rYvo8z5T.js → LpTableOfContents-CraicEs4.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
 import { useLabels } from "../composables/useLpConfig.js";
-import { scrollParent } from "../composables/scroll.js";
+import { scrollParent, atScrollEnd } from "../composables/scroll.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = { class: "mb-2.5 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted" };
@@ -54,7 +54,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const line = Math.max(props.offset, view / 4);
         for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id;
         const scrolled = scroller ? scroller.scrollTop : window.scrollY;
-        const end = scroller ? scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2 : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+        const end = atScrollEnd(headings[0]);
         if (scrolled > 0 && end) current = headings[headings.length - 1].id;
         activeId.value = current;
       };

package/dist/chunks/{LpTagsInput-DgpBFRV2.js → LpTagsInput-DrjmrOge.js}

@@ -1,4 +1,5 @@
 import { defineComponent, useAttrs, computed, ref, useId, watch, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createVNode, mergeProps, TransitionGroup, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withModifiers } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { useField, useFieldControl } from "../composables/useField.js";
 import { prefersReducedMotion } from "../composables/easing.js";
@@ -6,12 +7,12 @@ import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useShift } from "../composables/useShift.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$4 } from "./LpFieldNotice-CurbNuXI.js";
-import { _ as _sfc_main$1 } from "./FieldWrapper-BiennROB.js";
+import { _ as _sfc_main$4 } from "./LpFieldNotice-CPI8EwtU.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-YzbvvC3M.js";
 import { BADGE_REMOVE } from "../components/badge.js";
-import { _ as _sfc_main$2 } from "./LpBadge-HOEPBYmi.js";
-import { _ as _sfc_main$3 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$5 } from "./OptionContent-CmYUUeWj.js";
+import { _ as _sfc_main$2 } from "./LpBadge-C8fKEmTF.js";
+import { _ as _sfc_main$3 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$5 } from "./OptionContent-DPzNsybd.js";
 import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
 import { splitTags, addTags } from "../components/tags.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
@@ -40,6 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpTagsInput",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: { default: () => [] },
     placeholder: {},
     delimiter: { default: () => [",", "\n", "	"] },
@@ -297,6 +299,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     __expose({ focus: () => inputEl.value?.focus(), add: (value) => add(value) });
     const portalTo = usePortalTarget();
     const guardOutside = useOutsideGuard();
+    usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: void 0, hint: void 0, error: void 0 }) });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
         wrapped: hasField.value,

package/dist/chunks/{LpTextarea-DiWjeVoJ.js → LpTextarea-BbYqmG1S.js}

@@ -1,13 +1,15 @@
 import { defineComponent, computed, useAttrs, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, mergeProps } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { useFieldControl } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./FieldWrapper-BiennROB.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-YzbvvC3M.js";
 const _hoisted_1 = ["id", "value", "placeholder", "rows", "disabled", "required", "aria-invalid", "aria-describedby"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpTextarea",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: {},
     placeholder: {},
     rows: {},
@@ -42,6 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         hasField.value ? "" : attrs.class
       )
     );
+    usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: void 0, hint: void 0, error: void 0 }) });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$1, {
         wrapped: hasField.value,

package/dist/chunks/{LpThemeStudio-DguwHdGt.js → LpThemeStudio-B2nPaG-h.js}

@@ -1,13 +1,14 @@
 import { shallowRef, computed, ref, watch, watchEffect, defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, normalizeStyle, Fragment, renderList } from "vue";
+import { u as usePaletteTheme } from "./palette-BiY7yQZL.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { usePersisted } from "../composables/usePersisted.js";
 import { parseColor, rgbToHex } from "../components/color.js";
 import { p as presets, u as useTheme, o as themeToCssRule, s as serializeTheme } from "./useTheme-BOV_-AiY.js";
-import { _ as _sfc_main$1 } from "./LpButton-CVxBfGjd.js";
-import { _ as _sfc_main$6 } from "./LpCodeBlock-BGsQhxw8.js";
-import { _ as _sfc_main$4 } from "./LpColorPicker-DFugXNUi.js";
-import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$5 } from "./LpSegmented-BO99Sr4m.js";
+import { _ as _sfc_main$1 } from "./LpButton-BQDAFXBd.js";
+import { _ as _sfc_main$6 } from "./LpCodeBlock-Czu-fq1M.js";
+import { _ as _sfc_main$4 } from "./LpColorPicker-Ee1DZiRd.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$5 } from "./LpSegmented-D2VST0o3.js";
 import { _ as _sfc_main$3 } from "./LpThemeStudioSection-BwhqYDLf.js";
 function defineTheme(base, overrides = {}) {
   const src = typeof base === "string" ? presets[base] : base;
@@ -169,8 +170,8 @@ function create(key, config) {
       }
     });
   }
-  const exported = computed(() => {
-    const s = state.value;
+  function exportState(s) {
+    const built = build(s);
     const preset = Object.entries(presets).find(([, p]) => p.name === base(s).name)?.[0];
     const source = preset ? `"${preset}"` : "yourTheme";
     const overrides = [];
@@ -178,9 +179,11 @@ function create(key, config) {
     if (s.size !== "default") overrides.push(`density: ${JSON.stringify(STUDIO_SIZES[s.size])}`);
     const shaped = overrides.length ? `defineTheme(${source}, { ${overrides.join(", ")} })` : source;
     const code = s.brand ? `withBrand(${shaped}, "${s.brand}")` : overrides.length ? shaped : preset ? `presets.${preset}` : source;
-    return { code, json: serializeTheme(theme.value), css: themeToCssRule(theme.value) };
-  });
-  return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset };
+    return { code, json: serializeTheme(built), css: themeToCssRule(built) };
+  }
+  const exported = computed(() => exportState(state.value));
+  const preview = (draft) => ({ theme: build(draft), exported: exportState(draft) });
+  return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset, preview };
 }
 const _hoisted_1 = { class: "flex flex-col gap-4" };
 const _hoisted_2 = { class: "flex items-center justify-between" };
@@ -246,7 +249,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const r = event.currentTarget?.getBoundingClientRect();
       return r ? { x: r.left + r.width / 2, y: r.top + r.height / 2 } : void 0;
     }
-    const tuneTo = (key) => (value) => studio.tune({ [key]: value });
+    const tuneTo = (key, value) => studio.tune({ [key]: value });
+    usePaletteTheme(() => studio ?? void 0);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [
@@ -347,7 +351,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "model-value": unref(state).corners,
               size: "sm",
               options: [{ value: "sharp", label: unref(text).sharp }, { value: "default", label: unref(text).default }, { value: "round", label: unref(text).round }],
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tuneTo("corners"))
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tuneTo("corners", $event))
             }, null, 8, ["model-value", "options"])
           ]),
           _: 1
@@ -361,7 +365,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "model-value": unref(state).size,
               size: "sm",
               options: [{ value: "compact", label: unref(text).compact }, { value: "default", label: unref(text).default }, { value: "comfortable", label: unref(text).comfortable }],
-              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tuneTo("size"))
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => tuneTo("size", $event))
             }, null, 8, ["model-value", "options"])
           ]),
           _: 1
@@ -375,7 +379,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "model-value": unref(state).motion,
               size: "sm",
               options: [{ value: "fast", label: unref(text).fast }, { value: "normal", label: unref(text).normal }, { value: "slow", label: unref(text).slow }],
-              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tuneTo("motion"))
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => tuneTo("motion", $event))
             }, null, 8, ["model-value", "options"])
           ]),
           _: 1

package/dist/chunks/{LpThemeSwitcher-D5uz0MhK.js → LpThemeSwitcher-C0A5sg_E.js}

@@ -1,13 +1,14 @@
 import { defineComponent, ref, useId, computed, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { u as usePaletteTheme } from "./palette-BiY7yQZL.js";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { useLabels } from "../composables/useLpConfig.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import { u as useTheme, p as presets } from "./useTheme-BOV_-AiY.js";
-import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-DguwHdGt.js";
+import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-B2nPaG-h.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-COwOwRgI.js";
-import { _ as _sfc_main$2 } from "./LpIcon-HJP5xMz4.js";
-import { _ as _sfc_main$4 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-DXpFJjlO.js";
+import { _ as _sfc_main$2 } from "./LpIcon-DkP-9mzK.js";
+import { _ as _sfc_main$4 } from "./LpRollingText-DiL717LK.js";
 import { _ as _sfc_main$3 } from "./LpShift-DXNsauQZ.js";
 const _hoisted_1 = ["aria-label", "title"];
 const _hoisted_2 = {
@@ -168,6 +169,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const triggerLabel = computed(
       () => props["aria-label"] ?? text.value.trigger.replace("{name}", labelName.value)
     );
+    usePaletteTheme(() => tuner ?? void 0);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(PopoverRoot), {
         open: studioOpen.value,

package/dist/chunks/{LpTimeField-BFQVf_PW.js → LpTimeField-DQ8WvPr2.js}

@@ -1,14 +1,16 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { Time } from "@internationalized/date";
 import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
 import { useFieldControl, focusLeft } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "LpTimeField",
   props: {
+    palette: { type: [Boolean, Object], default: void 0 },
     modelValue: {},
     disabled: { type: Boolean },
     invalid: { type: Boolean },
@@ -53,6 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         field.value.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
       ].join(" ")
     );
+    usePaletteControl({ disabled: () => field.value.disabled, invalid: () => field.value.invalid });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(TimeFieldRoot), mergeProps({
         "model-value": value.value,

package/dist/chunks/{LpToaster-Wv9ksj4q.js → LpToaster-BTTl_wuy.js}

@@ -4,8 +4,8 @@ import { prefersReducedMotion } from "../composables/easing.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useToast } from "../composables/useToast.js";
 import { CLOSE_ICON } from "../components/dropdown.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-Dmq7DmFw.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
 import { toneLook } from "../components/tone.js";
 import { usePortalTarget } from "../composables/useView.js";
 const _hoisted_1 = { class: "flex items-start gap-3 p-3.5" };

package/dist/chunks/{LpTooltip-Cz8SQwRt.js → LpTooltip-BcBvIx4z.js}

@@ -1,10 +1,11 @@
-import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, unref, normalizeProps, guardReactiveProps, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, ref, watch, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent, unref, normalizeProps, guardReactiveProps, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createElementVNode, 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 { prefersReducedMotion } from "../composables/easing.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpTooltip-B61SYd4K.css';const EDGE = 8;
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTooltip",
   props: {
     content: {},
@@ -22,6 +23,17 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
     const PassThrough = (_, { slots }) => slots.default?.();
     const target = { x: 0, y: 0 };
     const offset = ref({ x: 0, y: 0 });
+    const tipBody = ref(null);
+    function inView(x) {
+      const panel = tipBody.value?.parentElement;
+      if (!panel) return x;
+      const rect = panel.getBoundingClientRect();
+      const placed = rect.left - offset.value.x;
+      const width = panel.ownerDocument.defaultView?.innerWidth ?? window.innerWidth;
+      const min = EDGE - placed;
+      const max = width - EDGE - rect.width - placed;
+      return max < min ? x : Math.min(max, Math.max(min, x));
+    }
     let sx = { value: 0, velocity: 0 };
     let sy = { value: 0, velocity: 0 };
     let frame = 0;
@@ -53,6 +65,7 @@ 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;
+      target.x = inView(target.x);
       if (prefersReducedMotion()) {
         offset.value = { x: target.x, y: target.y };
         return;
@@ -121,9 +134,14 @@ import '../assets/LpTooltip-B61SYd4K.css';const _sfc_main = /* @__PURE__ */ defi
                     style: normalizeStyle(__props.followCursor ? { translate: `${offset.value.x}px ${offset.value.y}px` } : void 0)
                   }, {
                     default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "content", {}, () => [
-                        createTextVNode(toDisplayString(__props.content), 1)
-                      ])
+                      createElementVNode("div", {
+                        ref_key: "tipBody",
+                        ref: tipBody
+                      }, [
+                        renderSlot(_ctx.$slots, "content", {}, () => [
+                          createTextVNode(toDisplayString(__props.content), 1)
+                        ])
+                      ], 512)
                     ]),
                     _: 3
                   }, 8, ["onInteractOutside", "onEscapeKeyDown", "side", "side-offset", "data-lp-follow", "class", "style"])

package/dist/chunks/{LpTopologyCanvas-ZhKthfgz.js → LpTopologyCanvas-B0wEvAoq.js}

@@ -3,7 +3,7 @@ import { Background } from "@vue-flow/background";
 import { Controls } from "@vue-flow/controls";
 import { MarkerType, useVueFlow, VueFlow, SelectionMode, Panel } from "@vue-flow/core";
 import { MiniMap } from "@vue-flow/minimap";
-import { _ as _sfc_main$3 } from "./LpInfraNode-CUC3t4na.js";
+import { _ as _sfc_main$3 } from "./LpInfraNode-yTh4-5qa.js";
 import { _ as _sfc_main$1 } from "./LpLaneNode-HtnQf2FF.js";
 import { _ as _sfc_main$2 } from "./LpServiceNode-D8uJ8sGk.js";
 import { _ as _sfc_main$4 } from "./LpWaypointEdge-D8yHlQiw.js";

package/dist/chunks/{LpTour-NfRJNEIP.js → LpTour-BgCfNlaW.js}

@@ -8,7 +8,7 @@ import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { useView, usePortalTarget, viewDocument, viewWindow } from "../composables/useView.js";
 import { scrollToElement } from "../composables/scroll.js";
 import { PANEL_SURFACE } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./TourCard-BXuVHsfn.js";
+import { _ as _sfc_main$1 } from "./TourCard--2IfgnUU.js";
 import { holeOf, panelsAround, holeClip } from "../components/tour.js";
 const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpTruncate-D_5Pfv5B.js → LpTruncate-TcqfkyJM.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, onMounted, watch, nextTick, computed, openBlock, createElementBlock, mergeProps, unref, createVNode, withCtx, createElementVNode, normalizeStyle, normalizeClass, Fragment, toDisplayString, createTextVNode, createBlock, createCommentVNode } from "vue";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
-import { _ as _sfc_main$2 } from "./LpCopyButton-DzHjnFs0.js";
-import { _ as _sfc_main$1 } from "./LpTooltip-Cz8SQwRt.js";
+import { _ as _sfc_main$2 } from "./LpCopyButton-Dmq7DmFw.js";
+import { _ as _sfc_main$1 } from "./LpTooltip-BcBvIx4z.js";
 import { middleTruncate } from "../components/fieldText.js";
 const _hoisted_1 = ["tabindex"];
 const _hoisted_2 = { "aria-hidden": "true" };

package/dist/chunks/{LpUptimeBar-DWegV2p6.js → LpUptimeBar-DRadGq4Y.js}

@@ -1,12 +1,16 @@
 import { defineComponent, computed, ref, openBlock, createElementBlock, mergeProps, unref, toDisplayString, createCommentVNode, createElementVNode, createVNode, withCtx, createBlock, Fragment, renderList, normalizeStyle, createTextVNode } from "vue";
-import { _ as _sfc_main$5 } from "./LpNumberFlow-Cfyh033Q.js";
-import { _ as _sfc_main$4 } from "./LpRollingText-DB7upf-5.js";
+import { _ as _sfc_main$6 } from "./LpNumberFlow-5khYxsfX.js";
+import { _ as _sfc_main$5 } from "./LpRollingText-DiL717LK.js";
+import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
 import { _ as _sfc_main$2 } from "./LpSkeleton-BB6XIV-w.js";
 import { _ as _sfc_main$1 } from "./LpSwap-DzE6M3Mg.js";
-import { _ as _sfc_main$3 } from "./LpTooltip-Cz8SQwRt.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-BcBvIx4z.js";
 import { TONES } from "../components/tone.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useLocale } from "../composables/useLocale.js";
+import { DEFAULT_UNIT_LABELS, toEpoch, formatTime } from "../components/timeSpan.js";
+import { uptimeShare, UPTIME_SEVERITY, uptimeRange, uptimeFigure } from "../components/uptimeBar.js";
 import '../assets/LpUptimeBar-B98o9krI.css';const _hoisted_1 = ["aria-busy"];
 const _hoisted_2 = {
   key: 0,
@@ -17,21 +21,33 @@ const _hoisted_3 = {
   class: "text-xs"
 };
 const _hoisted_4 = { class: "font-medium text-ink" };
-const _hoisted_5 = {
+const _hoisted_5 = { class: "flex min-w-36 flex-col gap-1" };
+const _hoisted_6 = { class: "flex items-center gap-1.5" };
+const _hoisted_7 = {
+  key: 1,
+  class: "mt-0.5 flex flex-col gap-0.5"
+};
+const _hoisted_8 = { class: "flex-1" };
+const _hoisted_9 = {
+  key: 2,
+  class: "mt-0.5 flex flex-col gap-0.5 border-t border-current/15 pt-1"
+};
+const _hoisted_10 = {
   key: 0,
-  class: "flex items-center gap-1.5"
+  class: "opacity-70"
 };
-const _hoisted_6 = ["tabindex", "aria-label", "onPointerenter", "onFocus", "onBlur", "onKeydown"];
-const _hoisted_7 = {
+const _hoisted_11 = ["tabindex", "aria-label", "onPointerenter", "onFocus", "onBlur", "onKeydown"];
+const _hoisted_12 = {
   key: 2,
   class: "flex items-center gap-2 text-xs text-muted"
 };
-const _hoisted_8 = { class: "shrink-0" };
-const _hoisted_9 = {
+const _hoisted_13 = { class: "shrink-0" };
+const _hoisted_14 = {
   key: 0,
   class: "shrink-0 text-muted-strong"
 };
-const _hoisted_10 = { class: "shrink-0" };
+const _hoisted_15 = { class: "ml-1 text-muted" };
+const _hoisted_16 = { class: "shrink-0" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -41,6 +57,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     startLabel: {},
     endLabel: {},
     showUptime: { type: Boolean, default: true },
+    uptime: {},
+    locale: {},
     title: {},
     colors: {},
     labels: {},
@@ -66,17 +84,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         down: "Down",
         maintenance: "Maintenance",
         empty: "No data",
-        loading: "Loading"
+        loading: "Loading",
+        uptime: "uptime"
       },
       () => props.labels
     );
     const skeletonCount = computed(() => props.segments.length || props.skeletonSlices);
-    const uptimePct = computed(() => {
-      const tracked = props.segments.filter((s) => s.status !== "empty");
-      if (!tracked.length) return null;
-      const up = tracked.filter((s) => s.status === "operational" || s.status === "maintenance").length;
-      return up / tracked.length * 100;
-    });
+    const locale = useLocale(() => props.locale);
+    const units = useLabels("time", DEFAULT_UNIT_LABELS);
+    const uptimePct = computed(() => (props.uptime ?? null) !== null ? props.uptime : uptimeShare(props.segments));
     const MARK_WIDTH = 0.64;
     const hovered = ref(null);
     const tip = computed(() => {
@@ -84,7 +100,22 @@ 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.value[seg.status] };
+      return {
+        status: seg.status,
+        text: seg.label ?? statusLabel.value[seg.status],
+        range: seg.start !== void 0 ? uptimeRange(seg.start, seg.end, locale.value) : "",
+        parts: UPTIME_SEVERITY.filter((st) => (seg.durations?.[st] ?? 0) > 0).map((st) => ({
+          status: st,
+          text: statusLabel.value[st],
+          time: formatTime(seg.durations[st], "units", units.value, 2)
+        })),
+        events: (seg.events ?? []).slice(0, 4).map((e) => ({
+          status: e.status ?? seg.status,
+          text: e.text,
+          at: e.at !== void 0 && Number.isFinite(toEpoch(e.at)) ? new Intl.DateTimeFormat(locale.value, { hour: "2-digit", minute: "2-digit" }).format(toEpoch(e.at)) : ""
+        })),
+        more: Math.max(0, (seg.events?.length ?? 0) - 4)
+      };
     });
     const focusIndex = ref(-1);
     const slots = ref([]);
@@ -99,12 +130,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       focusIndex.value = next;
       slots.value[next]?.focus();
     }
-    const uptimeDecimals = computed(() => {
-      const v = uptimePct.value;
-      if (v == null) return 0;
-      const trimmed = Number(v.toFixed(2));
-      return Number.isInteger(trimmed) ? 0 : String(trimmed).split(".")[1].length;
-    });
+    const figure = computed(() => uptimePct.value == null ? null : uptimeFigure(uptimePct.value));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex flex-col gap-1.5"
     );
@@ -144,17 +170,79 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: hovered.value === null
             }, {
               content: withCtx(() => [
-                tip.value ? (openBlock(), createElementBlock("span", _hoisted_5, [
-                  createElementVNode("span", {
-                    class: "size-1.5 shrink-0 rounded-full",
-                    style: normalizeStyle({ backgroundColor: colorFor(tip.value.status) })
-                  }, null, 4),
-                  createVNode(_sfc_main$4, {
-                    value: tip.value.text,
-                    duration: 180,
-                    align: "start"
-                  }, null, 8, ["value"])
-                ])) : createCommentVNode("", true)
+                tip.value ? (openBlock(), createBlock(_sfc_main$4, {
+                  key: 0,
+                  axis: "both",
+                  class: "flex"
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", _hoisted_5, [
+                      createElementVNode("span", _hoisted_6, [
+                        createElementVNode("span", {
+                          class: "size-1.5 shrink-0 rounded-full transition-colors duration-[var(--duration-fast)]",
+                          style: normalizeStyle({ backgroundColor: colorFor(tip.value.status) })
+                        }, null, 4),
+                        createVNode(_sfc_main$5, {
+                          value: tip.value.text,
+                          duration: 180,
+                          align: "start",
+                          class: "font-medium"
+                        }, null, 8, ["value"])
+                      ]),
+                      tip.value.range ? (openBlock(), createBlock(_sfc_main$5, {
+                        key: 0,
+                        value: tip.value.range,
+                        duration: 180,
+                        align: "start",
+                        class: "text-[0.7rem] opacity-70 tabular-nums"
+                      }, null, 8, ["value"])) : createCommentVNode("", true),
+                      tip.value.parts.length > 1 || tip.value.parts.length === 1 && tip.value.parts[0].status !== tip.value.status ? (openBlock(), createElementBlock("span", _hoisted_7, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(tip.value.parts, (part) => {
+                          return openBlock(), createElementBlock("span", {
+                            key: part.status,
+                            class: "flex items-center gap-1.5 tabular-nums"
+                          }, [
+                            createElementVNode("span", {
+                              class: "size-1.5 shrink-0 rounded-full",
+                              style: normalizeStyle({ backgroundColor: colorFor(part.status) })
+                            }, null, 4),
+                            createElementVNode("span", _hoisted_8, toDisplayString(part.text), 1),
+                            createVNode(_sfc_main$5, {
+                              value: part.time,
+                              duration: 180,
+                              align: "end",
+                              class: "opacity-80"
+                            }, null, 8, ["value"])
+                          ]);
+                        }), 128))
+                      ])) : createCommentVNode("", true),
+                      tip.value.events.length ? (openBlock(), createElementBlock("span", _hoisted_9, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(tip.value.events, (event, n) => {
+                          return openBlock(), createElementBlock("span", {
+                            key: n,
+                            class: "flex items-baseline gap-1.5"
+                          }, [
+                            event.at ? (openBlock(), createBlock(_sfc_main$5, {
+                              key: 0,
+                              value: event.at,
+                              duration: 180,
+                              align: "start",
+                              class: "shrink-0 tabular-nums opacity-70"
+                            }, null, 8, ["value"])) : createCommentVNode("", true),
+                            createVNode(_sfc_main$5, {
+                              value: event.text,
+                              duration: 180,
+                              align: "start",
+                              wrap: ""
+                            }, null, 8, ["value"])
+                          ]);
+                        }), 128)),
+                        tip.value.more ? (openBlock(), createElementBlock("span", _hoisted_10, "+" + toDisplayString(tip.value.more), 1)) : createCommentVNode("", true)
+                      ])) : createCommentVNode("", true)
+                    ])
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true)
               ]),
               default: withCtx(() => [
                 createElementVNode("div", {
@@ -170,7 +258,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       type: "button",
                       class: "lp-uptime__slot min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring",
                       tabindex: i === tabStop.value ? 0 : -1,
-                      "aria-label": seg.label ?? unref(statusLabel)[seg.status],
+                      "aria-label": [seg.label ?? unref(statusLabel)[seg.status], seg.start !== void 0 ? unref(uptimeRange)(seg.start, seg.end, unref(locale)) : ""].filter(Boolean).join(", "),
                       onPointerenter: ($event) => hovered.value = i,
                       onFocus: ($event) => {
                         focusIndex.value = i;
@@ -190,7 +278,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           scale: hovered.value === i ? `${MARK_WIDTH} 1.12` : void 0
                         })
                       }, null, 4)
-                    ], 40, _hoisted_6);
+                    ], 40, _hoisted_11);
                   }), 128))
                 ], 32)
               ]),
@@ -199,25 +287,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["swap-key"]),
-        __props.startLabel || __props.endLabel || __props.showUptime ? (openBlock(), createElementBlock("div", _hoisted_7, [
-          createElementVNode("span", _hoisted_8, toDisplayString(__props.startLabel), 1),
-          _cache[3] || (_cache[3] = createElementVNode("span", { class: "h-px flex-1 bg-line" }, null, -1)),
-          __props.showUptime ? (openBlock(), createElementBlock("span", _hoisted_9, [
+        __props.startLabel || __props.endLabel || __props.showUptime ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          createElementVNode("span", _hoisted_13, toDisplayString(__props.startLabel), 1),
+          _cache[2] || (_cache[2] = createElementVNode("span", { class: "h-px flex-1 bg-line" }, null, -1)),
+          __props.showUptime ? (openBlock(), createElementBlock("span", _hoisted_14, [
             __props.loading ? (openBlock(), createBlock(_sfc_main$2, {
               key: 0,
               class: "inline-block h-[0.9em] w-8 align-middle"
-            })) : uptimePct.value != null ? (openBlock(), createBlock(_sfc_main$5, {
+            })) : figure.value ? (openBlock(), createBlock(_sfc_main$6, {
               key: 1,
-              value: uptimePct.value,
-              decimals: uptimeDecimals.value,
+              value: figure.value.value,
+              decimals: figure.value.decimals,
+              grouped: "",
               suffix: "%"
             }, null, 8, ["value", "decimals"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               createTextVNode("—")
             ], 64)),
-            _cache[2] || (_cache[2] = createElementVNode("span", { class: "text-muted" }, " uptime", -1))
+            createElementVNode("span", _hoisted_15, toDisplayString(unref(statusLabel).uptime), 1)
           ])) : createCommentVNode("", true),
-          _cache[4] || (_cache[4] = createElementVNode("span", { class: "h-px flex-1 bg-line" }, null, -1)),
-          createElementVNode("span", _hoisted_10, toDisplayString(__props.endLabel), 1)
+          _cache[3] || (_cache[3] = createElementVNode("span", { class: "h-px flex-1 bg-line" }, null, -1)),
+          createElementVNode("span", _hoisted_16, toDisplayString(__props.endLabel), 1)
         ])) : createCommentVNode("", true)
       ], 16, _hoisted_1);
     };

package/dist/chunks/{MenuTitle-BjQZX8tQ.js → MenuTitle-Dab3EGOp.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, Fragment, createElementVNode, createVNode, createCommentVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
 const _hoisted_1 = {
   class: "flex max-w-72 min-w-0 items-center gap-2 px-2.5 pt-1.5 pb-2",
   "aria-hidden": "true"

package/dist/chunks/{OptionContent-CmYUUeWj.js → OptionContent-DPzNsybd.js}

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, createBlock, createCommentVNode, createElementVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "./LpIcon-HJP5xMz4.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DkP-9mzK.js";
 const _hoisted_1 = { class: "flex min-w-0 items-center gap-2.5" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "flex min-w-0 flex-col" };