@leavepulse/ui 0.71.1 → 0.72.0

package/dist/chunks/LpSidebarNav-BzNWMZfc.js

@@ -0,0 +1,357 @@
+import { defineComponent, computed, ref, openBlock, createBlock, mergeProps, unref, withCtx, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, toDisplayString, createVNode, normalizeClass, createTextVNode, createSlots, renderSlot } from "vue";
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
+import { _ as _sfc_main$5 } from "./LpBadge-vtCpsDmv.js";
+import "../components/commandSearch.js";
+import "../composables/useHints.js";
+import "../composables/useHintSystem.js";
+import { _ as _sfc_main$4 } from "./LpIcon--5WSb3jJ.js";
+import "../composables/useHotkeys.js";
+import '../assets/MenuShortcut-Cyub0frr.css';import '../assets/LpKeys-BxRhfQda.css';/* empty css                */
+/* empty css                      */
+import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
+import { _ as _sfc_main$1 } from "./LpSkeleton-BB6XIV-w.js";
+import { _ as _sfc_main$3 } from "./LpSidebarRow-BIReMT1f.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "flex items-center gap-3 px-1"
+};
+const _hoisted_2 = { class: "space-y-1" };
+const _hoisted_3 = {
+  key: 0,
+  class: "flex flex-col gap-0.5"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "flex flex-col gap-0.5"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "mx-3 mb-1 border-t border-line"
+};
+const _hoisted_7 = { class: "min-w-0 flex-1 truncate text-left" };
+const _hoisted_8 = {
+  key: 2,
+  class: "px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted"
+};
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpSidebarNav",
+  props: {
+    groups: {},
+    pillId: {},
+    itemActive: {},
+    loading: { type: Boolean },
+    skeletonRows: { default: 6 },
+    skeletonHeader: { type: Boolean, default: true },
+    collapsedKeys: { default: () => [] },
+    hoverFollow: { type: Boolean, default: false },
+    compact: { type: Boolean },
+    pinnable: { type: Boolean },
+    pinned: { default: () => [] },
+    previewDelay: { default: 900 },
+    labels: {}
+  },
+  emits: ["activate", "toggle-section", "toggle-pin"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function sectionKey(section) {
+      return section.key ?? section.title ?? "";
+    }
+    const foldedKeys = computed(() => {
+      const holdsActive = new Set(
+        props.groups.filter((g) => g.items.some((i) => props.itemActive(i) || onPath(i))).map(sectionKey)
+      );
+      return new Set(
+        props.collapsedKeys.filter((k) => k && !holdsActive.has(k))
+      );
+    });
+    function isOpen(section) {
+      return props.compact || !foldedKeys.value.has(sectionKey(section));
+    }
+    const hovered = ref(null);
+    function hover(item) {
+      if (props.hoverFollow && !item.disabled) hovered.value = item.id;
+    }
+    function pillUnder(item) {
+      return hovered.value ? hovered.value === item.id : props.itemActive(item);
+    }
+    function onPath(item) {
+      return !!item.children?.some((c) => props.itemActive(c));
+    }
+    const opened = ref(/* @__PURE__ */ new Set());
+    function expanded(item) {
+      return onPath(item) || opened.value.has(item.id);
+    }
+    function toggle(item) {
+      const next = new Set(opened.value);
+      if (next.has(item.id)) next.delete(item.id);
+      else next.add(item.id);
+      opened.value = next;
+    }
+    const pinnedIds = computed(() => new Set(props.pinned.map((i) => i.id)));
+    function menuOf(item) {
+      const own = item.menu ?? [];
+      if (!props.pinnable) return own;
+      const pinned = pinnedIds.value.has(item.id);
+      return [
+        ...own,
+        {
+          label: pinned ? props.labels.unpin : props.labels.pin,
+          icon: pinned ? "lucide:pin-off" : "lucide:pin",
+          separatorBefore: own.length > 0,
+          onSelect: () => emit("toggle-pin", item.id)
+        }
+      ];
+    }
+    let typed = "";
+    let typedAt = 0;
+    function onKey(event) {
+      const box = event.currentTarget;
+      const list = [...box.querySelectorAll("[data-lp-nav-row]")].filter((r) => r.offsetParent !== null);
+      const at = list.indexOf(document.activeElement);
+      if (at < 0) return;
+      const row = list[at];
+      const go = (i) => {
+        event.preventDefault();
+        list[(i + list.length) % list.length]?.focus();
+      };
+      switch (event.key) {
+        case "ArrowDown":
+          return go(at + 1);
+        case "ArrowUp":
+          return go(at - 1);
+        case "Home":
+          return go(0);
+        case "End":
+          return go(list.length - 1);
+        case "ArrowRight":
+        case "ArrowLeft": {
+          const open = event.key === "ArrowRight";
+          const toggle2 = row.hasAttribute("aria-expanded") ? row : row.parentElement?.querySelector(":scope > button[aria-expanded]");
+          if (toggle2 && toggle2.getAttribute("aria-expanded") === "true" !== open) {
+            event.preventDefault();
+            toggle2.click();
+            return;
+          }
+          if (!open && row.dataset.lpNavNested !== void 0) {
+            for (let i = at - 1; i >= 0; i--) if (list[i].dataset.lpNavNested === void 0) return go(i);
+          }
+          return;
+        }
+      }
+      if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+      const now = Date.now();
+      typed = now - typedAt > 700 ? event.key : typed + event.key;
+      typedAt = now;
+      const needle = typed.toLocaleLowerCase();
+      for (let k = 1; k <= list.length; k++) {
+        const next = list[(at + k) % list.length];
+        if ((next.textContent ?? "").trim().toLocaleLowerCase().startsWith(needle)) return go(at + k);
+      }
+    }
+    const SECTION = "lp-section:";
+    function sectionItem(section) {
+      const icon = section.icon ?? section.items.find((i) => i.icon)?.icon;
+      return { id: `${SECTION}${sectionKey(section)}`, label: section.title ?? "", icon, children: section.items };
+    }
+    function activate(item) {
+      if (item.id.startsWith(SECTION)) return;
+      if (item.children?.length && !item.to && !item.href) toggle(item);
+      emit("activate", item);
+    }
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      "flex min-h-0 flex-1 flex-col gap-4"
+    );
+    return (_ctx, _cache) => {
+      return __props.loading ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
+        key: 0,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          __props.skeletonHeader ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[1] || (_cache[1] = [
+            createElementVNode("div", { class: "lp-skeleton-item size-10 shrink-0 rounded-pill bg-surface-soft" }, null, -1),
+            createElementVNode("div", { class: "flex-1 space-y-2" }, [
+              createElementVNode("div", { class: "lp-skeleton-item h-3.5 w-24 rounded-small bg-surface-soft" }),
+              createElementVNode("div", { class: "lp-skeleton-item h-3 w-16 rounded-small bg-surface-soft/60" })
+            ], -1)
+          ])])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.skeletonRows, (n) => {
+              return openBlock(), createElementBlock("div", {
+                key: n,
+                class: "lp-skeleton-item h-9 rounded-control bg-surface-soft"
+              });
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 16, ["class"])) : (openBlock(), createBlock(_sfc_main$2, {
+        key: 1,
+        class: "min-h-0 flex-1",
+        "content-class": __props.compact ? "flex min-h-full flex-col gap-1" : "flex min-h-full flex-col gap-4",
+        onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: "contents",
+            onKeydown: onKey
+          }, [
+            __props.pinned.length ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              !__props.compact ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.labels.pinned), 1)) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.pinned, (item) => {
+                return openBlock(), createBlock(_sfc_main$3, {
+                  key: `pinned:${item.id}`,
+                  item,
+                  active: __props.itemActive(item),
+                  pill: false,
+                  "pill-id": __props.pillId,
+                  compact: __props.compact,
+                  menu: menuOf(item),
+                  "preview-delay": __props.previewDelay,
+                  "item-active": __props.itemActive,
+                  onActivate: activate
+                }, null, 8, ["item", "active", "pill-id", "compact", "menu", "preview-delay", "item-active"]);
+              }), 128))
+            ])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.groups, (section, si) => {
+              return openBlock(), createElementBlock(Fragment, { key: si }, [
+                __props.compact && section.collapsible && section.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                  createVNode(_sfc_main$3, {
+                    item: sectionItem(section),
+                    active: false,
+                    pill: false,
+                    "pill-id": __props.pillId,
+                    compact: "",
+                    "on-path": section.items.some((i) => __props.itemActive(i) || onPath(i)),
+                    "preview-delay": __props.previewDelay,
+                    "item-active": __props.itemActive,
+                    onActivate: activate
+                  }, null, 8, ["item", "pill-id", "on-path", "preview-delay", "item-active"])
+                ])) : (openBlock(), createBlock(unref(CollapsibleRoot), {
+                  key: 1,
+                  as: "div",
+                  class: "flex flex-col gap-0.5",
+                  open: isOpen(section),
+                  disabled: !section.collapsible || !section.title,
+                  "onUpdate:open": (o) => emit("toggle-section", sectionKey(section), !o)
+                }, {
+                  default: withCtx(() => [
+                    __props.compact && (si > 0 || __props.pinned.length) ? (openBlock(), createElementBlock("div", _hoisted_6)) : !__props.compact && section.title && section.collapsible ? (openBlock(), createBlock(unref(CollapsibleTrigger), {
+                      key: 1,
+                      "data-lp-nav-row": "",
+                      class: "group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-ink/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+                    }, {
+                      default: withCtx(() => [
+                        section.icon ? (openBlock(), createBlock(_sfc_main$4, {
+                          key: 0,
+                          name: section.icon,
+                          size: 14,
+                          class: "shrink-0"
+                        }, null, 8, ["name"])) : createCommentVNode("", true),
+                        createElementVNode("span", _hoisted_7, toDisplayString(section.title), 1),
+                        createVNode(_sfc_main$5, {
+                          tone: "neutral",
+                          class: normalizeClass(["shrink-0 transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none", isOpen(section) ? "opacity-0" : "opacity-100"]),
+                          "aria-hidden": isOpen(section) || void 0
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(section.items.length), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["class", "aria-hidden"]),
+                        createVNode(_sfc_main$4, {
+                          name: "lucide:chevron-down",
+                          size: 14,
+                          class: "shrink-0 text-muted transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-data-[state=closed]/section:-rotate-90 motion-reduce:transition-none"
+                        })
+                      ]),
+                      _: 2
+                    }, 1024)) : !__props.compact && section.title ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(section.title), 1)) : createCommentVNode("", true),
+                    createVNode(unref(CollapsibleContent), { class: "flex flex-col gap-0.5 overflow-hidden data-[state=open]:animate-[collapsible-down_260ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-emphasized)] motion-reduce:animate-none" }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(section.items, (item) => {
+                          return openBlock(), createElementBlock(Fragment, {
+                            key: item.id
+                          }, [
+                            createVNode(_sfc_main$3, {
+                              item,
+                              active: __props.itemActive(item),
+                              pill: pillUnder(item),
+                              "pill-id": __props.pillId,
+                              compact: __props.compact,
+                              menu: menuOf(item),
+                              expandable: !__props.compact && !!item.children?.length,
+                              expanded: expanded(item),
+                              "on-path": onPath(item),
+                              "preview-delay": __props.previewDelay,
+                              hovered: hovered.value === item.id,
+                              "expand-label": __props.labels.expand,
+                              "item-active": __props.itemActive,
+                              onActivate: activate,
+                              onHover: hover,
+                              onToggle: ($event) => toggle(item)
+                            }, createSlots({ _: 2 }, [
+                              _ctx.$slots.item ? {
+                                name: "default",
+                                fn: withCtx((slotProps) => [
+                                  renderSlot(_ctx.$slots, "item", mergeProps({ ref_for: true }, slotProps))
+                                ]),
+                                key: "0"
+                              } : void 0
+                            ]), 1032, ["item", "active", "pill", "pill-id", "compact", "menu", "expandable", "expanded", "on-path", "preview-delay", "hovered", "expand-label", "item-active", "onToggle"]),
+                            !__props.compact && item.children?.length ? (openBlock(), createBlock(unref(CollapsibleRoot), {
+                              key: 0,
+                              open: expanded(item)
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(unref(CollapsibleContent), { class: "flex flex-col gap-0.5 overflow-hidden data-[state=open]:animate-[collapsible-down_220ms_var(--ease-emphasized)] data-[state=closed]:animate-[collapsible-up_180ms_var(--ease-emphasized)] motion-reduce:animate-none" }, {
+                                  default: withCtx(() => [
+                                    (openBlock(true), createElementBlock(Fragment, null, renderList(item.children, (child) => {
+                                      return openBlock(), createBlock(_sfc_main$3, {
+                                        key: child.id,
+                                        nested: "",
+                                        item: child,
+                                        active: __props.itemActive(child),
+                                        pill: pillUnder(child),
+                                        "pill-id": __props.pillId,
+                                        menu: menuOf(child),
+                                        "preview-delay": __props.previewDelay,
+                                        hovered: hovered.value === child.id,
+                                        "item-active": __props.itemActive,
+                                        onActivate: activate,
+                                        onHover: hover
+                                      }, null, 8, ["item", "active", "pill", "pill-id", "menu", "preview-delay", "hovered", "item-active"]);
+                                    }), 128))
+                                  ]),
+                                  _: 2
+                                }, 1024)
+                              ]),
+                              _: 2
+                            }, 1032, ["open"])) : createCommentVNode("", true)
+                          ], 64);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  _: 2
+                }, 1032, ["open", "disabled", "onUpdate:open"]))
+              ], 64);
+            }), 128))
+          ], 32)
+        ]),
+        _: 3
+      }, 8, ["content-class"]));
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/LpSidebarRow-BIReMT1f.js

@@ -0,0 +1,302 @@
+import { defineComponent, ref, watch, onBeforeUnmount, computed, openBlock, createBlock, withCtx, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, resolveDynamicComponent, createTextVNode, unref, Fragment, renderList, mergeProps, createVNode, normalizeClass, normalizeStyle, renderSlot } from "vue";
+import { Motion } from "motion-v";
+import { useLocale } from "../composables/useLocale.js";
+import { usePillTransition } from "../composables/usePillTransition.js";
+import { useLinkComponent } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$2 } from "./LpBadge-vtCpsDmv.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-rx2tCjwk.js";
+import { _ as _sfc_main$1 } from "./LpHoverCard-spGxyw7T.js";
+import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
+import LpKeys from "../components/LpKeys.vue.js";
+import { _ as _sfc_main$5 } from "./LpNumberFlow-CcxEGUy0.js";
+import { resolveLink } from "../components/link.js";
+const _hoisted_1 = { class: "relative flex flex-col" };
+const _hoisted_2 = {
+  key: 1,
+  class: "lp-sweep absolute inset-y-0 left-0 w-2/5 rounded-pill bg-brand"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "relative z-10 shrink-0"
+};
+const _hoisted_4 = {
+  key: 1,
+  class: "relative z-10 text-xs font-semibold uppercase"
+};
+const _hoisted_5 = {
+  key: 2,
+  class: "relative z-10 size-1 shrink-0 rounded-full bg-current opacity-50"
+};
+const _hoisted_6 = { class: "relative z-10 min-w-0 flex-1 truncate text-left" };
+const _hoisted_7 = {
+  key: 1,
+  class: "relative z-10 size-2 shrink-0 rounded-full bg-brand"
+};
+const _hoisted_8 = {
+  key: 0,
+  class: "absolute inset-0 animate-ping rounded-pill bg-brand/30"
+};
+const _hoisted_9 = {
+  key: 3,
+  class: "w-5 shrink-0",
+  "aria-hidden": "true"
+};
+const _hoisted_10 = ["aria-label", "aria-expanded"];
+const _hoisted_11 = {
+  key: 0,
+  class: "flex flex-col"
+};
+const _hoisted_12 = {
+  key: 0,
+  class: "flex items-center gap-2 border-b border-line px-3 py-2 text-sm font-medium text-ink"
+};
+const _hoisted_13 = { class: "min-w-0 flex-1 truncate" };
+const _hoisted_14 = {
+  key: 1,
+  class: "flex flex-col gap-0.5"
+};
+const _hoisted_15 = { class: "flex items-center gap-2 px-2 py-1 text-sm font-medium text-ink" };
+const _hoisted_16 = { class: "min-w-0 flex-1 truncate" };
+const _hoisted_17 = {
+  key: 0,
+  class: "flex max-h-[min(70vh,30rem)] flex-col gap-0.5 overflow-y-auto"
+};
+const _hoisted_18 = { class: "min-w-0 flex-1 truncate" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSidebarRow",
+  props: {
+    item: {},
+    active: { type: Boolean },
+    pill: { type: Boolean },
+    pillId: {},
+    compact: { type: Boolean },
+    nested: { type: Boolean },
+    menu: { default: () => [] },
+    expandable: { type: Boolean },
+    expanded: { type: Boolean },
+    onPath: { type: Boolean },
+    previewDelay: { default: 900 },
+    hovered: { type: Boolean },
+    expandLabel: {},
+    itemActive: {}
+  },
+  emits: ["activate", "hover", "toggle"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const locale = useLocale();
+    const pillTransition = usePillTransition();
+    const linkComponent = useLinkComponent();
+    function rowOf(item) {
+      const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href });
+      if (link) return link;
+      return { is: "button", props: { type: "button", disabled: item.disabled || void 0 } };
+    }
+    const bumped = ref(false);
+    let bumpTimer;
+    watch(
+      () => props.item.badge,
+      (now, was) => {
+        if (typeof now !== "number" || typeof was !== "number" || now <= was) return;
+        bumped.value = true;
+        clearTimeout(bumpTimer);
+        bumpTimer = setTimeout(() => bumped.value = false, 1200);
+      }
+    );
+    onBeforeUnmount(() => clearTimeout(bumpTimer));
+    const initials = computed(
+      () => props.item.label.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => [...w][0]).join("")
+    );
+    const hasBadge = computed(() => props.item.badge != null || props.item.dot);
+    const card = computed(() => !props.item.disabled && (props.compact || !!props.item.preview));
+    const delay = computed(() => props.compact && !props.item.preview ? 250 : props.previewDelay);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        disabled: !card.value,
+        side: "right",
+        align: "start",
+        "side-offset": __props.compact ? 12 : 16,
+        "open-delay": delay.value,
+        "close-delay": 120,
+        touch: "none",
+        "panel-class": __props.item.preview ? "w-80 p-0 overflow-hidden" : "w-56 p-2"
+      }, {
+        trigger: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_sfc_main$4, {
+              items: __props.menu,
+              title: (__props.item.menuTitle ?? __props.item.label) || void 0,
+              "title-icon": __props.item.icon
+            }, {
+              default: withCtx(() => [
+                (openBlock(), createBlock(resolveDynamicComponent(rowOf(__props.item).is), mergeProps(rowOf(__props.item).props, {
+                  "aria-current": __props.active ? "page" : void 0,
+                  "aria-disabled": __props.item.disabled || void 0,
+                  "aria-label": __props.compact ? __props.item.label : void 0,
+                  "data-lp-nav-row": "",
+                  "aria-keyshortcuts": __props.item.hotkey,
+                  "aria-busy": __props.item.busy ? true : void 0,
+                  "data-lp-nav-nested": __props.nested || void 0,
+                  class: ["group/item relative flex items-center rounded-control font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", [
+                    __props.compact ? ["ml-1 size-10 justify-center", __props.onPath && !__props.active ? "bg-ink/[0.06]" : ""] : __props.nested ? "gap-2.5 py-1.5 pl-9 pr-3 text-[13px]" : "gap-3 px-3 py-2 text-sm",
+                    __props.item.disabled ? "cursor-not-allowed text-muted/50" : __props.active || __props.hovered || __props.onPath ? "text-ink" : "text-muted hover:text-ink"
+                  ]],
+                  onClick: _cache[0] || (_cache[0] = ($event) => emit("activate", __props.item)),
+                  onPointerenter: _cache[1] || (_cache[1] = ($event) => emit("hover", __props.item))
+                }), {
+                  default: withCtx(() => [
+                    __props.item.busy !== void 0 && __props.item.busy !== false ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      class: normalizeClass(["pointer-events-none absolute bottom-0.5 z-10 h-0.5 overflow-hidden rounded-pill bg-brand/15", __props.compact ? "inset-x-2" : "inset-x-3"])
+                    }, [
+                      typeof __props.item.busy === "number" ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: "block h-full rounded-pill bg-brand transition-[width] duration-(--duration-medium) ease-[var(--ease-emphasized)]",
+                        style: normalizeStyle({ width: `${Math.round(Math.min(1, Math.max(0, __props.item.busy)) * 100)}%` })
+                      }, null, 4)) : (openBlock(), createElementBlock("span", _hoisted_2))
+                    ], 2)) : createCommentVNode("", true),
+                    __props.pill ? (openBlock(), createBlock(unref(Motion), {
+                      key: 1,
+                      "layout-id": __props.pillId,
+                      transition: unref(pillTransition),
+                      class: "absolute inset-0 z-0 rounded-control bg-brand-soft"
+                    }, null, 8, ["layout-id", "transition"])) : createCommentVNode("", true),
+                    renderSlot(_ctx.$slots, "default", {
+                      item: __props.item,
+                      active: __props.active
+                    }, () => [
+                      __props.item.icon ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                        createVNode(_sfc_main$3, {
+                          name: __props.item.icon,
+                          size: __props.nested ? 15 : 17,
+                          class: normalizeClass(["transition-colors", __props.active ? "text-brand" : ""])
+                        }, null, 8, ["name", "size", "class"]),
+                        __props.compact && hasBadge.value ? (openBlock(), createElementBlock("span", {
+                          key: 0,
+                          class: normalizeClass(["absolute -right-1 -top-1 size-2 rounded-full bg-brand ring-2 ring-surface-raised", bumped.value ? "animate-pulse" : ""])
+                        }, null, 2)) : createCommentVNode("", true)
+                      ])) : __props.compact ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(initials.value), 1)) : __props.nested ? (openBlock(), createElementBlock("span", _hoisted_5)) : createCommentVNode("", true),
+                      !__props.compact ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                        createElementVNode("span", _hoisted_6, toDisplayString(__props.item.label), 1),
+                        __props.item.hotkey && !hasBadge.value && !__props.expandable ? (openBlock(), createBlock(LpKeys, {
+                          key: 0,
+                          combo: __props.item.hotkey,
+                          size: "sm",
+                          "aria-hidden": "true",
+                          class: "pointer-events-none absolute right-2 z-10 rounded-small bg-surface-raised/90 opacity-0 transition-opacity duration-(--duration-fast) group-hover/item:opacity-100 group-focus-visible/item:opacity-100"
+                        }, null, 8, ["combo"])) : createCommentVNode("", true),
+                        __props.item.dot && __props.item.badge == null ? (openBlock(), createElementBlock("span", _hoisted_7)) : createCommentVNode("", true),
+                        __props.item.badge != null ? (openBlock(), createBlock(_sfc_main$2, {
+                          key: 2,
+                          tone: __props.active ? "brand" : "neutral",
+                          class: "relative z-10 shrink-0"
+                        }, {
+                          default: withCtx(() => [
+                            bumped.value ? (openBlock(), createElementBlock("span", _hoisted_8)) : createCommentVNode("", true),
+                            typeof __props.item.badge === "number" ? (openBlock(), createBlock(_sfc_main$5, {
+                              key: 1,
+                              value: __props.item.badge,
+                              grouped: "",
+                              locale: unref(locale),
+                              "animate-on-mount": false
+                            }, null, 8, ["value", "locale"])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                              createTextVNode(toDisplayString(__props.item.badge), 1)
+                            ], 64))
+                          ]),
+                          _: 1
+                        }, 8, ["tone"])) : createCommentVNode("", true),
+                        __props.expandable ? (openBlock(), createElementBlock("span", _hoisted_9)) : createCommentVNode("", true)
+                      ], 64)) : createCommentVNode("", true)
+                    ])
+                  ]),
+                  _: 3
+                }, 16, ["aria-current", "aria-disabled", "aria-label", "aria-keyshortcuts", "aria-busy", "data-lp-nav-nested", "class"]))
+              ]),
+              _: 3
+            }, 8, ["items", "title", "title-icon"]),
+            __props.expandable && !__props.compact ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: "absolute right-2 top-1/2 z-20 grid size-6 -translate-y-1/2 place-items-center rounded-small text-muted outline-none transition-colors hover:bg-ink/[0.06] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+              "aria-label": __props.expandLabel,
+              "aria-expanded": __props.expanded,
+              onClick: _cache[2] || (_cache[2] = ($event) => emit("toggle"))
+            }, [
+              createVNode(_sfc_main$3, {
+                name: "lucide:chevron-right",
+                size: 14,
+                class: normalizeClass(["transition-transform duration-(--duration-fast) ease-[var(--ease-emphasized)] motion-reduce:transition-none", __props.expanded ? "rotate-90" : ""])
+              }, null, 8, ["class"])
+            ], 8, _hoisted_10)) : createCommentVNode("", true)
+          ])
+        ]),
+        default: withCtx(() => [
+          __props.item.preview ? (openBlock(), createElementBlock("div", _hoisted_11, [
+            __props.compact ? (openBlock(), createElementBlock("div", _hoisted_12, [
+              createElementVNode("span", _hoisted_13, toDisplayString(__props.item.label), 1),
+              __props.item.hotkey ? (openBlock(), createBlock(LpKeys, {
+                key: 0,
+                combo: __props.item.hotkey,
+                size: "sm"
+              }, null, 8, ["combo"])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            (openBlock(), createBlock(resolveDynamicComponent(__props.item.preview)))
+          ])) : (openBlock(), createElementBlock("div", _hoisted_14, [
+            createElementVNode("div", _hoisted_15, [
+              createElementVNode("span", _hoisted_16, toDisplayString(__props.item.label), 1),
+              __props.item.badge != null ? (openBlock(), createBlock(_sfc_main$2, {
+                key: 0,
+                tone: "neutral"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(typeof __props.item.badge === "number" ? __props.item.badge.toLocaleString(unref(locale)) : __props.item.badge), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              __props.item.hotkey ? (openBlock(), createBlock(LpKeys, {
+                key: 1,
+                combo: __props.item.hotkey,
+                size: "sm"
+              }, null, 8, ["combo"])) : createCommentVNode("", true)
+            ]),
+            __props.item.children?.length ? (openBlock(), createElementBlock("div", _hoisted_17, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child) => {
+                return openBlock(), createBlock(resolveDynamicComponent(rowOf(child).is), mergeProps({
+                  key: child.id
+                }, { ref_for: true }, rowOf(child).props, {
+                  "aria-current": __props.itemActive?.(child) ? "page" : void 0,
+                  class: ["flex shrink-0 items-center gap-2 rounded-control px-2 py-1.5 text-left text-[13px] outline-none transition-colors hover:bg-ink/[0.05] focus-visible:ring-2 focus-visible:ring-ring", child.disabled ? "opacity-50" : __props.itemActive?.(child) ? "text-brand" : "text-muted hover:text-ink"],
+                  onClick: ($event) => emit("activate", child)
+                }), {
+                  default: withCtx(() => [
+                    child.icon ? (openBlock(), createBlock(_sfc_main$3, {
+                      key: 0,
+                      name: child.icon,
+                      size: 15,
+                      class: "shrink-0"
+                    }, null, 8, ["name"])) : createCommentVNode("", true),
+                    createElementVNode("span", _hoisted_18, toDisplayString(child.label), 1),
+                    child.badge != null ? (openBlock(), createBlock(_sfc_main$2, {
+                      key: 1,
+                      tone: "neutral"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(child.badge), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1040, ["aria-current", "class", "onClick"]);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ]))
+        ]),
+        _: 3
+      }, 8, ["disabled", "side-offset", "open-delay", "panel-class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};