@leavepulse/ui 0.60.0 → 0.61.0

package/README.md

@@ -161,6 +161,14 @@ scroll restoration and anchor jumps keep working:
 
 Hide a specific scrollbar with the `lp-scrollbar-none` class.
 
+Selected text takes the operating system's accent unless told otherwise (on
+Linux that is the GTK theme, so it can come out red or green next to the kit
+palette). Opt into the theme's colour the same way:
+
+```css
+@import "@leavepulse/ui/selection.css"; /* after the tokens — reads --color-brand */
+```
+
 ## Develop
 
 ```bash

package/dist/assets/{LpTable-BZZf_rrt.css → LpTable-DpXyPzs8.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-1d2375a8],
-.lp-row-leave-active[data-v-1d2375a8] {
+.lp-row-enter-active[data-v-a9d69d56],
+.lp-row-leave-active[data-v-a9d69d56] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-1d2375a8] {
+.lp-row-move[data-v-a9d69d56] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-1d2375a8],
-.lp-row-leave-to[data-v-1d2375a8] {
+.lp-row-enter-from[data-v-a9d69d56],
+.lp-row-leave-to[data-v-a9d69d56] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-1d2375a8] {
+.lp-row-empty.lp-row-leave-active[data-v-a9d69d56] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-1d2375a8] {
+.lp-tick[data-v-a9d69d56] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-1d2375a8] {
+.lp-tick-open[data-v-a9d69d56] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-1d2375a8],
-.lp-tick-cue[data-v-1d2375a8] {
+.lp-tick-hidden[data-v-a9d69d56],
+.lp-tick-cue[data-v-a9d69d56] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-1d2375a8],
-.lp-tick-cue[data-v-1d2375a8]:focus-within {
+tr:hover .lp-tick-cue[data-v-a9d69d56],
+.lp-tick-cue[data-v-a9d69d56]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-1d2375a8],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-1d2375a8] {
+tr:hover .lp-tick-cue[data-v-a9d69d56] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-1d2375a8],
-  .lp-tick-cue[data-v-1d2375a8] {
+.lp-tick-hidden[data-v-a9d69d56],
+  .lp-tick-cue[data-v-a9d69d56] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-1d2375a8],
-  .lp-row-leave-active[data-v-1d2375a8],
-  .lp-row-move[data-v-1d2375a8],
-  .lp-tick[data-v-1d2375a8] {
+.lp-row-enter-active[data-v-a9d69d56],
+  .lp-row-leave-active[data-v-a9d69d56],
+  .lp-row-move[data-v-a9d69d56],
+  .lp-tick[data-v-a9d69d56] {
     transition: none;
 }
 }

package/dist/chunks/{LpAddressInput-DD4zTN4P.js → LpAddressInput-CzdZguBo.js}

@@ -2,7 +2,7 @@ import { defineComponent, defineAsyncComponent, computed, watch, ref, onMounted,
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
 import { flagEmoji, loadCountries } from "../components/countries.js";
-import { _ as _sfc_main$2 } from "./LpAutocomplete-PnL2ntKl.js";
+import { _ as _sfc_main$2 } from "./LpAutocomplete-D9mY5Tqk.js";
 import { _ as _sfc_main$3 } from "./LpButton-CJSD7N0Z.js";
 import { _ as _sfc_main$1 } from "./LpFormField-DMPPL1jF.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CTuDVTYv.js";

package/dist/chunks/{LpAppShell-Cv-Y9qNA.js → LpAppShell-BXMNDEpF.js}

@@ -4,7 +4,7 @@ import { _ as _sfc_main$2 } from "./LpButton-CJSD7N0Z.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$5 } from "./LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$4 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$1 } from "./LpSidebar-B3E_iViL.js";
+import { _ as _sfc_main$1 } from "./LpSidebar-D8tub3bt.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["href"];
 const _hoisted_2 = { class: "flex min-w-0 flex-1 flex-col" };

package/dist/chunks/{LpAutocomplete-PnL2ntKl.js → LpAutocomplete-D9mY5Tqk.js}

@@ -1,18 +1,27 @@
-import { defineComponent, computed, useAttrs, ref, watch, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createCommentVNode, mergeProps, createElementBlock, withModifiers, toDisplayString, createTextVNode, Fragment, renderList, createElementVNode } from "vue";
+import { defineComponent, computed, useAttrs, ref, watch, openBlock, createBlock, unref, normalizeStyle, normalizeClass, withCtx, createVNode, createElementBlock, createCommentVNode, createElementVNode, mergeProps, Transition, toDisplayString, withModifiers, createTextVNode, Fragment, renderList, nextTick } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
 import { useFieldControl } from "../composables/useField.js";
 import { useInputFilter } from "../composables/useInputFilter.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { CLOSE_ICON, POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
-const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = {
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "relative flex min-w-0 flex-1 self-stretch" };
+const _hoisted_3 = {
   key: 0,
-  class: "px-3 py-4 text-center text-sm italic text-muted"
+  class: "pointer-events-none absolute inset-0 flex min-w-0 items-center gap-1.5",
+  "aria-hidden": "true"
 };
-const _hoisted_3 = { class: "flex min-w-0 flex-col" };
-const _hoisted_4 = { class: "truncate" };
+const _hoisted_4 = ["aria-label"];
 const _hoisted_5 = {
+  key: 0,
+  class: "px-3 py-4 text-center text-sm italic text-muted"
+};
+const _hoisted_6 = { class: "flex min-w-0 items-center gap-2.5" };
+const _hoisted_7 = ["src"];
+const _hoisted_8 = { class: "flex min-w-0 flex-col" };
+const _hoisted_9 = { class: "truncate" };
+const _hoisted_10 = {
   key: 0,
   class: "truncate text-xs text-muted"
 };
@@ -35,7 +44,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     filter: { type: Boolean, default: true },
     minChars: { default: 1 },
     pattern: {},
-    restrict: {}
+    restrict: {},
+    selected: {}
   },
   emits: ["update:modelValue", "select"],
   setup(__props, { emit: __emit }) {
@@ -78,6 +88,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const open = ref(false);
     const focused = ref(false);
+    const showSelected = computed(() => !!props.selected?.label && !focused.value);
+    const draft = ref(null);
+    const showImage = computed(() => !!props.selected?.image && (!focused.value || draft.value !== null));
     const canOpen = computed(
       () => text.value.length >= props.minChars && (props.loading || filtered.value.length > 0)
     );
@@ -96,21 +109,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onInput(event) {
       filterInput(event);
       typing.value = true;
+      draft.value = null;
       text.value = event.target.value;
     }
-    function onFocus() {
+    function onFocus(event) {
       typing.value = false;
       focused.value = true;
+      if (props.selected?.label) {
+        draft.value = props.selected.label;
+        const input = event.target;
+        void nextTick(() => input.select());
+      }
       if (canOpen.value) open.value = true;
     }
+    function onBlur() {
+      focused.value = false;
+      draft.value = null;
+    }
     function choose(opt) {
       typing.value = false;
+      draft.value = null;
       emit("update:modelValue", opt.value);
       emit("select", opt.value);
       open.value = false;
     }
     function clear() {
       typing.value = false;
+      draft.value = null;
       emit("update:modelValue", "");
       open.value = false;
     }
@@ -134,34 +159,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]])
           }, {
             default: withCtx(() => [
-              __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+              __props.icon || __props.selected?.image ? (openBlock(), createElementBlock("span", {
                 key: 0,
-                name: __props.icon,
-                size: 16,
-                class: "shrink-0 text-muted"
-              }, null, 8, ["name"])) : createCommentVNode("", true),
-              createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
-                id: unref(field).id,
-                "model-value": text.value,
-                placeholder: __props.placeholder,
-                disabled: unref(field).disabled,
-                required: unref(field).required || void 0,
-                "aria-invalid": isInvalidState.value || void 0,
-                "aria-describedby": unref(field).describedBy,
-                class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
-                onBeforeinput: unref(onBeforeInput),
-                onPaste: unref(onPaste),
-                onCompositionend: unref(onCompositionEnd),
-                onInput,
-                onFocus,
-                onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false)
-              }), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "onBeforeinput", "onPaste", "onCompositionend"]),
+                class: normalizeClass(["relative grid shrink-0 place-items-center", __props.selected?.image ? "size-5" : "size-4"])
+              }, [
+                __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+                  key: 0,
+                  name: __props.icon,
+                  size: 16,
+                  class: normalizeClass(["col-start-1 row-start-1 text-muted transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "scale-75 opacity-0" : "opacity-100"])
+                }, null, 8, ["name", "class"])) : createCommentVNode("", true),
+                __props.selected?.image ? (openBlock(), createElementBlock("img", {
+                  key: 1,
+                  src: __props.selected.image,
+                  alt: "",
+                  class: normalizeClass(["col-start-1 row-start-1 size-5 rounded-full object-cover transition-[opacity,scale] duration-[var(--duration-fast)] motion-reduce:transition-none", showImage.value ? "opacity-100" : "scale-75 opacity-0"])
+                }, null, 10, _hoisted_1)) : createCommentVNode("", true)
+              ], 2)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_2, [
+                createVNode(unref(ComboboxInput), mergeProps(inputAttrs.value, {
+                  id: unref(field).id,
+                  "model-value": draft.value ?? text.value,
+                  placeholder: __props.placeholder,
+                  disabled: unref(field).disabled,
+                  required: unref(field).required || void 0,
+                  "aria-invalid": isInvalidState.value || void 0,
+                  "aria-describedby": unref(field).describedBy,
+                  class: ["lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted", showSelected.value && "text-transparent placeholder:text-transparent"],
+                  onBeforeinput: unref(onBeforeInput),
+                  onPaste: unref(onPaste),
+                  onCompositionend: unref(onCompositionEnd),
+                  onInput,
+                  onFocus,
+                  onBlur
+                }), null, 16, ["id", "model-value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby", "class", "onBeforeinput", "onPaste", "onCompositionend"]),
+                createVNode(Transition, {
+                  "enter-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                  "leave-active-class": "transition-opacity duration-[var(--duration-fast)] motion-reduce:transition-none",
+                  "enter-from-class": "opacity-0",
+                  "leave-to-class": "opacity-0"
+                }, {
+                  default: withCtx(() => [
+                    __props.selected?.label ? (openBlock(), createElementBlock("span", _hoisted_3, [
+                      createElementVNode("span", {
+                        class: normalizeClass(["max-w-full shrink-0 truncate", showSelected.value ? "" : "invisible"])
+                      }, toDisplayString(__props.selected.label), 3),
+                      __props.selected.hint ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: normalizeClass(["min-w-0 truncate text-sm text-muted transition-[opacity,translate] duration-[var(--duration-fast)] motion-reduce:transition-none", showSelected.value ? "opacity-100" : "-translate-x-1 opacity-0"])
+                      }, toDisplayString(__props.selected.hint), 3)) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                })
+              ]),
               __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
                 key: 1,
                 type: "button",
                 class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
                 "aria-label": unref(labels).clear,
-                onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
+                onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["prevent"])),
                 onClick: clear
               }, [
@@ -170,7 +227,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   size: 16,
                   class: normalizeClass(unref(CLOSE_ICON))
                 }, null, 8, ["class"])
-              ], 40, _hoisted_1)) : createCommentVNode("", true)
+              ], 40, _hoisted_4)) : createCommentVNode("", true)
             ]),
             _: 1
           }, 8, ["class"]),
@@ -181,13 +238,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 position: "popper",
                 "side-offset": 6,
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"]),
-                onOpenAutoFocus: _cache[2] || (_cache[2] = withModifiers(() => {
+                onOpenAutoFocus: _cache[1] || (_cache[1] = withModifiers(() => {
                 }, ["prevent"]))
               }, {
                 default: withCtx(() => [
                   createVNode(unref(ComboboxViewport), { class: "max-h-72 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -205,9 +262,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           onSelect: withModifiers(($event) => choose(opt), ["prevent"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_3, [
-                              createElementVNode("span", _hoisted_4, toDisplayString(opt.label ?? opt.value), 1),
-                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                            createElementVNode("span", _hoisted_6, [
+                              opt.image ? (openBlock(), createElementBlock("img", {
+                                key: 0,
+                                src: opt.image,
+                                alt: "",
+                                class: "size-6 shrink-0 rounded-full object-cover"
+                              }, null, 8, _hoisted_7)) : createCommentVNode("", true),
+                              createElementVNode("span", _hoisted_8, [
+                                createElementVNode("span", _hoisted_9, toDisplayString(opt.label ?? opt.value), 1),
+                                opt.description ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                              ])
                             ])
                           ]),
                           _: 2

package/dist/chunks/{LpAvatar-CwGs1JCQ.js → LpAvatar-K6MOMfgn.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, ref, onMounted, openBlock, createBlock, withCtx, createVNode, unref, mergeProps, createCommentVNode, createElementBlock, Fragment, createTextVNode, toDisplayString } from "vue";
 import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
 import { tv } from "tailwind-variants";
-import { _ as _sfc_main$1 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };

package/dist/chunks/{LpCard-B2D0GIUU.js → LpCard-D9HVgX8Y.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, withCtx, resolveDynamicComponent, mergeProps, unref, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,

package/dist/chunks/{LpColorPicker-CvBF8TeL.js → LpColorPicker-BO1ZTY51.js}

@@ -5,7 +5,7 @@ import { useFieldControl } from "../composables/useField.js";
 import { DEFAULT_SWATCHES, formatColor, opaqueCss, parseColor, rgbToHsv, isLight, clampHsv } from "../components/color.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$3 } from "./LpRollingText-DB7upf-5.js";
 const _hoisted_1 = ["id", "disabled", "aria-label", "aria-invalid", "aria-describedby"];

package/dist/chunks/{LpContextMenu-BnN1k7ga.js → LpContextMenu-Cv_F2iCG.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeClass, createCommentVNode } from "vue";
 import { ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuContent } from "reka-ui";
 import { hints } from "../composables/useHints.js";
-import { HINT_SIGNALS } from "../composables/useHintSystem.js";
+import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem.js";
 import { _ as _sfc_main$2 } from "./ContextMenuItems-qXReFtQW.js";
 import { _ as _sfc_main$1 } from "./MenuTitle-FeC6I24N.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
@@ -34,8 +34,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function opened(open) {
       if (open) hints.use(HINT_SIGNALS.contextMenu);
     }
-    function leftClick() {
-      if (hinted.value) hints.use(HINT_SIGNALS.contextTarget);
+    function leftClick(event) {
+      if (!hinted.value) return;
+      hints.use(HINT_SIGNALS.contextTarget);
+      const el = event.currentTarget;
+      noteContextTarget(event.target.closest?.("[data-lp-context-row]") ?? el);
     }
     function returnFocus(event) {
       const saved = field;

package/dist/chunks/{LpFileTree-DEqh2ySW.js → LpFileTree-DTwUj0L-.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import { computeStats, formatSize, sortNodes, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CX8fdGSU.js";
-import { _ as _sfc_main$3 } from "./LpFileTreeNode-DCZA7sQ-.js";
+import { _ as _sfc_main$3 } from "./LpFileTreeNode-D-XLPZ6T.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { useLabels } from "../composables/useLpConfig.js";

package/dist/chunks/{LpFileTreeNode-DCZA7sQ-.js → LpFileTreeNode-D-XLPZ6T.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, resolveComponent, openBlock, createElementBl
 import { prefersReducedMotion, easingToken } from "../composables/easing.js";
 import { sortNodes, formatSize, formatModified, fileIcon } from "../components/fileTree.js";
 import { _ as _sfc_main$3 } from "./LpCheckbox-DV9W6T3H.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = ["aria-level", "aria-selected", "aria-expanded", "aria-disabled"];

package/dist/chunks/{LpLogViewer-BuPe23sZ.js → LpLogViewer-D9UgNz2m.js}

@@ -2,7 +2,7 @@ import { defineComponent, useModel, computed, ref, shallowRef, onMounted, onBefo
 import { prefersReducedMotion } from "../composables/easing.js";
 import { useClipboard } from "../composables/useClipboard.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
-import { _ as _sfc_main$3 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$3 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-Hz3-JWUG.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";

package/dist/chunks/{LpModalNav-Cw7m-eks.js → LpModalNav-D4rmflQn.js}

@@ -4,7 +4,7 @@ import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$2 } from "./LpButton-CJSD7N0Z.js";
 import { _ as _sfc_main$3 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$1 } from "./LpModal-QFfctZsj.js";
-import { _ as _sfc_main$4 } from "./LpSidebar-B3E_iViL.js";
+import { _ as _sfc_main$4 } from "./LpSidebar-D8tub3bt.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpModalNav",

package/dist/chunks/{LpNotificationBell-xH_JphpS.js → LpNotificationBell-CyylOlZR.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, useModel, getCurrentInstance, ref, onMounted
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$8 } from "./LpBadge-Fe0D1bYx.js";
 import { _ as _sfc_main$7 } from "./LpButton-CJSD7N0Z.js";
-import { _ as _sfc_main$5 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$5 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$3 } from "./LpEmptyState-CX8fdGSU.js";
 import { _ as _sfc_main$6 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$1 } from "./LpPopover-DCKeqiVn.js";

package/dist/chunks/{LpPie-BD5Lsh-2.js → LpPie-B2deu8CI.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { useReveal } from "../composables/useReveal.js";
 import { resolveSlices, arcPath, calloutLabels, formatTick } from "../components/chart.js";
-import { _ as _sfc_main$2 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$2 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$4 } from "./LpNumberFlow-z4WPZcZu.js";
 import { _ as _sfc_main$5 } from "./LpRollingText-DB7upf-5.js";

package/dist/chunks/{LpSidebar-B3E_iViL.js → LpSidebar-D8tub3bt.js}

@@ -2,7 +2,7 @@ import { defineComponent, computed, ref, useId, openBlock, createElementBlock, F
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$3 } from "./LpDrawer-C97yoWmh.js";
 import { _ as _sfc_main$1 } from "./LpInput-C7FHxzj2.js";
-import { _ as _sfc_main$2 } from "./LpSidebarNav-32sAXNM-.js";
+import { _ as _sfc_main$2 } from "./LpSidebarNav-BBSRg34G.js";
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = {
   key: 2,

package/dist/chunks/{LpSidebarNav-32sAXNM-.js → LpSidebarNav-BBSRg34G.js}

@@ -3,7 +3,7 @@ import { Motion } from "motion-v";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$3 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 import { _ as _sfc_main$1 } from "./LpScrollArea-Hz3-JWUG.js";
 import { resolveLink } from "../components/link.js";

package/dist/chunks/LpSwap-D82jiecV.js

@@ -0,0 +1,38 @@
+import { defineComponent, openBlock, createBlock, withCtx, createVNode, Transition, createElementBlock, renderSlot } from "vue";
+import { _ as _sfc_main$1 } from "./LpShift-DXNsauQZ.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSwap",
+  props: {
+    swapKey: {},
+    disabled: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        axis: "height",
+        disabled: __props.disabled
+      }, {
+        default: withCtx(() => [
+          createVNode(Transition, {
+            mode: "out-in",
+            css: !__props.disabled,
+            "enter-active-class": "animate-[tab-in_220ms_var(--ease-emphasized)] motion-reduce:animate-none",
+            "leave-active-class": "transition-opacity duration-[var(--duration-fast)] ease-out motion-reduce:transition-none",
+            "leave-to-class": "opacity-0"
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock("div", { key: __props.swapKey }, [
+                renderSlot(_ctx.$slots, "default")
+              ]))
+            ]),
+            _: 3
+          }, 8, ["css"])
+        ]),
+        _: 3
+      }, 8, ["disabled"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpThemeSwitcher-CeBG0e_D.js → LpThemeSwitcher-ZFFftBQn.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, onMounted, ref, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, createElementBlock, createVNode, toDisplayString, createCommentVNode } from "vue";
 import { useLabels } from "../composables/useLpConfig.js";
 import { u as useTheme, p as presets } from "./useTheme-2qHG8NEU.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-BnN1k7ga.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu-Cv_F2iCG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CTuDVTYv.js";
 const _hoisted_1 = ["aria-label", "title"];
 const _hoisted_2 = {

package/dist/chunks/{LpToaster-BcKs7vX7.js → LpToaster-D3OisETH.js}

@@ -154,7 +154,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let copiedTimer;
     const copyable = (t) => t.variant === "error" || t.variant === "warning";
     async function copyToast(t) {
-      if (!await copy([t.title, t.message].filter(Boolean).join("\n"))) return;
+      if (!await copy([t.title, t.message, t.details].filter(Boolean).join("\n"))) return;
       copiedId.value = tag(t);
       clearTimeout(copiedTimer);
       copiedTimer = setTimeout(() => copiedId.value = null, 1500);

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpHintLayer", "LpHints", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRangeSlider", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextarea", "LpThemeProvider", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpTour", "LpUptimeBar", "LpVideoBackdrop"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpConfirmHost", "LpContextMenu", "LpDatePicker", "LpDateRangePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFieldNotice", "LpFileTree", "LpFormField", "LpHintLayer", "LpHints", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpKeys", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPaletteFacts", "LpPaletteHeader", "LpPalettePreview", "LpPaletteStats", "LpPaletteSwatches", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRangeCalendar", "LpRangeSlider", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwap", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTagsInput", "LpTextarea", "LpThemeProvider", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTooltipProvider", "LpTopologyCanvas", "LpTour", "LpUptimeBar", "LpVideoBackdrop"];

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-DD4zTN4P.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-CzdZguBo.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAppShell.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAppShell-Cv-Y9qNA.js";
+import { _ as _sfc_main } from "../chunks/LpAppShell-BXMNDEpF.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpAutocomplete.vue.d.ts

@@ -2,6 +2,14 @@ export interface AutocompleteOption {
     value: string;
     label?: string;
     description?: string;
+    /** A picture beside the option: an avatar, an icon of a server. */
+    image?: string;
+}
+/** What the field's value stands for: a name for an id, with an optional muted hint and picture. */
+export interface AutocompleteSelection {
+    label: string;
+    hint?: string;
+    image?: string;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -31,6 +39,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     pattern?: RegExp | string;
     /** Allowed-character RegExp; hard-blocks other input (see LpInput). */
     restrict?: RegExp;
+    /**
+     * What the current value stands for, shown in the field itself while it is
+     * not being edited: a picked id reads as a person (avatar in place of the
+     * icon, name, muted hint) instead of digits nobody recognises, and nothing
+     * appears or jumps below the field. Focusing it brings the raw text back.
+     * When room runs short the hint gives way first; the name stays.
+     */
+    selected?: AutocompleteSelection | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (value: string) => any;
     "update:modelValue": (value: string) => any;
@@ -60,6 +76,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     pattern?: RegExp | string;
     /** Allowed-character RegExp; hard-blocks other input (see LpInput). */
     restrict?: RegExp;
+    /**
+     * What the current value stands for, shown in the field itself while it is
+     * not being edited: a picked id reads as a person (avatar in place of the
+     * icon, name, muted hint) instead of digits nobody recognises, and nothing
+     * appears or jumps below the field. Focusing it brings the raw text back.
+     * When room runs short the hint gives way first; the name stays.
+     */
+    selected?: AutocompleteSelection | null;
 }> & Readonly<{
     onSelect?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;

package/dist/components/LpAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAutocomplete-PnL2ntKl.js";
+import { _ as _sfc_main } from "../chunks/LpAutocomplete-D9mY5Tqk.js";
 export {
   _sfc_main as default
 };