@leavepulse/ui 0.30.0 → 0.31.0

package/dist/components/LpTable.vue.js

@@ -5,7 +5,7 @@ import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-Bz3uJNa3.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+import '../assets/LpTable-Ckoi05Am.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {
   key: 0,
@@ -15,7 +15,7 @@ const _hoisted_4 = ["aria-sort"];
 const _hoisted_5 = ["onClick"];
 const _hoisted_6 = { key: "lp-table-empty" };
 const _hoisted_7 = ["colspan"];
-const _hoisted_8 = ["onClick"];
+const _hoisted_8 = ["onContextmenu", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTable",
   props: {
@@ -50,9 +50,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (align === "center") return "text-center";
       return "text-left";
     }
-    function menuFor(row) {
-      return props.rowMenu?.(row) ?? [];
+    const menuRow = ref(null);
+    function onRowContextMenu(row) {
+      menuRow.value = row;
     }
+    const contextMenu = computed(() => {
+      const table = tableMenu();
+      const row = menuRow.value ? props.rowMenu?.(menuRow.value) ?? [] : [];
+      if (!row.length) return table;
+      if (!table.length) return row;
+      return [...row, { ...table[0], separatorBefore: true }, ...table.slice(1)];
+    });
     const ownSort = ref(null);
     const activeSort = computed(() => props.sort ?? ownSort.value);
     const hiddenValues = ref({});
@@ -274,7 +282,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(_sfc_main$2, {
-            items: tableMenu()
+            items: contextMenu.value,
+            always: ""
           }, {
             default: withCtx(() => [
               createElementVNode("table", _hoisted_1, [
@@ -350,45 +359,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 8, _hoisted_7)
                     ])) : createCommentVNode("", true),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
-                      return openBlock(), createBlock(_sfc_main$2, {
+                      return openBlock(), createElementBlock("tr", mergeProps({
                         key: keyFor(row, index),
-                        items: menuFor(row)
-                      }, {
-                        default: withCtx(() => [
-                          createElementVNode("tr", mergeProps({
-                            class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
-                          }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
-                            onClick: ($event) => emit("rowClick", row),
-                            onKeydown: onRowKeydown
-                          }), [
-                            __props.selectable ? (openBlock(), createElementBlock("td", {
-                              key: 0,
-                              class: "w-px px-4 py-3",
-                              onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                              }, ["stop"]))
-                            }, [
-                              createVNode(_sfc_main$3, {
-                                "model-value": selectedSet.value.has(keyFor(row, index)),
-                                "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
-                              }, null, 8, ["model-value", "onUpdate:modelValue"])
-                            ])) : createCommentVNode("", true),
-                            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
-                              return openBlock(), createElementBlock("td", {
-                                key: col.key,
-                                class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
-                              }, [
-                                renderSlot(_ctx.$slots, `cell-${col.key}`, {
-                                  row,
-                                  value: row[col.key]
-                                }, () => [
-                                  createTextVNode(toDisplayString(row[col.key]), 1)
-                                ], true)
-                              ], 2);
-                            }), 128))
-                          ], 16, _hoisted_8)
-                        ]),
-                        _: 2
-                      }, 1032, ["items"]);
+                        onContextmenu: ($event) => onRowContextMenu(row),
+                        class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
+                      }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
+                        onClick: ($event) => emit("rowClick", row),
+                        onKeydown: onRowKeydown
+                      }), [
+                        __props.selectable ? (openBlock(), createElementBlock("td", {
+                          key: 0,
+                          class: "w-px px-4 py-3",
+                          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                          }, ["stop"]))
+                        }, [
+                          createVNode(_sfc_main$3, {
+                            "model-value": selectedSet.value.has(keyFor(row, index)),
+                            "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
+                          }, null, 8, ["model-value", "onUpdate:modelValue"])
+                        ])) : createCommentVNode("", true),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                          return openBlock(), createElementBlock("td", {
+                            key: col.key,
+                            class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                          }, [
+                            renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                              row,
+                              value: row[col.key]
+                            }, () => [
+                              createTextVNode(toDisplayString(row[col.key]), 1)
+                            ], true)
+                          ], 2);
+                        }), 128))
+                      ], 16, _hoisted_8);
                     }), 128))
                   ]),
                   _: 3
@@ -403,7 +406,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f9c874a7"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d139c3bb"]]);
 export {
   LpTable as default
 };

package/dist/components/sidebar.d.ts

@@ -10,6 +10,12 @@ export interface SidebarItem {
     disabled?: boolean;
     /** Right-click menu for this item (e.g. "Open in new tab", "Pin"). */
     menu?: ContextMenuItemDef[];
+    /**
+     * Extra terms the sidebar's filter should match, beyond the label. For the
+     * item people look for under a name it does not carry — "Billing" found by
+     * "invoice", a page found by the feature it used to be called.
+     */
+    keywords?: string[];
 }
 export interface SidebarSection {
     /** Optional heading above the group. */

package/dist/composables/useMergedClass.d.ts

@@ -0,0 +1,22 @@
+import { ComputedRef, MaybeRefOrGetter } from 'vue';
+/**
+ * Merges the component's own classes with the `class` attribute the consumer
+ * passed, resolving Tailwind conflicts in the consumer's favour.
+ *
+ * ```ts
+ * const rootClass = useMergedClass(() => shell({ size: props.size }))
+ * ```
+ * ```vue
+ * <div :class="rootClass">
+ * ```
+ *
+ * Pair it with `inheritAttrs: false` (and bind the rest of `$attrs` yourself)
+ * so the raw `class` does not land on the element a second time, unmerged.
+ */
+export declare function useMergedClass(own: MaybeRefOrGetter<string | undefined>): ComputedRef<string>;
+/**
+ * The same merge as a plain function, for the places that already have both
+ * strings in hand and do not need the attrs lookup — a render helper, or a
+ * component merging a class onto a child rather than its own root.
+ */
+export declare function mergeClass(...classes: (string | undefined | null | false)[]): string;

package/dist/composables/useMergedClass.js

@@ -0,0 +1,13 @@
+import { useAttrs, computed, toValue } from "vue";
+import { cn } from "tailwind-variants";
+function useMergedClass(own) {
+  const attrs = useAttrs();
+  return computed(() => cn(toValue(own), attrs.class) ?? "");
+}
+function mergeClass(...classes) {
+  return cn(...classes) ?? "";
+}
+export {
+  mergeClass,
+  useMergedClass
+};

package/dist/index.js

@@ -1,13 +1,13 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-Bk6D8Bcy.js";
+import { _ as _2 } from "./chunks/LpAddressInput-BDkp3-Bp.js";
 import { _ as _3 } from "./chunks/LpMapPicker-CXvoTrAe.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
-import { _ as _4 } from "./chunks/LpActionBar-CxmBZpGu.js";
+import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
 import { _ as _5 } from "./chunks/LpAlert-BAYHDSS1.js";
-import { _ as _6 } from "./chunks/LpAppShell-DnocEJAu.js";
+import { _ as _6 } from "./chunks/LpAppShell-Chz8Vbtu.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _8 } from "./chunks/LpAvatar-D3l4nabg.js";
-import { _ as _9 } from "./chunks/LpBadge-BPodVcJa.js";
+import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-5uvViCXi.js";
 import { _ as _11 } from "./chunks/LpButton-5VXXCjwF.js";
 import { _ as _12 } from "./chunks/LpCalendar-B7ZL0ty3.js";
@@ -22,7 +22,7 @@ import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { _ as _17 } from "./chunks/LpConfirmDialog-CjOGcj1e.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-dY2q4dr4.js";
-import { _ as _20 } from "./chunks/LpDisclosure-C1_YkMrd.js";
+import { _ as _20 } from "./chunks/LpDisclosure-B4kVAWfg.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _22 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _23 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
@@ -34,18 +34,18 @@ import { _ as _26 } from "./chunks/LpFormField-fV_2ZdCk.js";
 import { _ as _27 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { default as default5 } from "./components/LpImageEditor.vue.js";
 import { _ as _28 } from "./chunks/LpInfraNode-Ds_8SZgN.js";
-import { _ as _29 } from "./chunks/LpInput-CYcTL9gj.js";
+import { _ as _29 } from "./chunks/LpInput-Bt4J71xn.js";
 import { _ as _30 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-BHZ1CLlF.js";
 import { _ as _32 } from "./chunks/LpLogViewer-TSRyt3t9.js";
 import { _ as _33 } from "./chunks/LpModal-D_o-56To.js";
-import { _ as _34 } from "./chunks/LpNotificationBell-CTsIcPqX.js";
+import { _ as _34 } from "./chunks/LpNotificationBell-gdvQY89m.js";
 import { _ as _35 } from "./chunks/LpNumberField-NPE8Bumx.js";
 import { _ as _36 } from "./chunks/LpNumberFlow-amWYaeuA.js";
 import { _ as _37 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _38 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _39 } from "./chunks/LpPasswordInput-DrYE4J5d.js";
+import { _ as _39 } from "./chunks/LpPasswordInput-BqMAc5HA.js";
 import { _ as _40 } from "./chunks/LpPie-BL1vTDSM.js";
 import { _ as _41 } from "./chunks/LpPhoneInput-NXXjciJJ.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
@@ -61,7 +61,7 @@ import { _ as _50 } from "./chunks/LpSelect-ANIVtrpM.js";
 import { _ as _51 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _52 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _53 } from "./chunks/LpSidebar-CWSbczWi.js";
+import { _ as _53 } from "./chunks/LpSidebar-BiWM_lDB.js";
 import { _ as _54 } from "./chunks/LpSkeleton-CTI-vBgW.js";
 import { _ as _55 } from "./chunks/LpSlider-B1SF3pRV.js";
 import { _ as _56 } from "./chunks/LpSparkline-C6xQ2dwv.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpActionBar.vue

@@ -177,9 +177,17 @@ watch(
        blur). Declaring it next to the form it belongs to should not decide
        where on screen it lands. -->
   <Teleport to="body">
+    <!-- `forwards` on the way out, because the leave animation finishing is not
+         the same moment as the element leaving. `rise-out` is a bare `to {}`, so
+         once it ends the element snaps back to opacity 1 at its resting
+         position, and Vue then takes a frame to unmount it — a bar that had
+         faded to nothing flashed back at full strength and vanished. Holding the
+         final frame means the last thing painted is the last frame of the fade.
+         Reduced motion skips it entirely rather than holding a frame it never
+         animated to. -->
     <Transition
       enter-active-class="animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)]"
-      leave-active-class="animate-[rise-out_var(--duration-fast)_ease]"
+      leave-active-class="animate-[rise-out_var(--duration-fast)_ease_forwards] motion-reduce:animate-none"
     >
       <div
         v-if="open"

package/src/components/LpBadge.vue

@@ -1,10 +1,31 @@
+<script lang="ts">
+// The root class is merged with the consumer's (useMergedClass), so the raw
+// `class` must not also land on the span unmerged.
+export default { inheritAttrs: false }
+</script>
+
 <script setup lang="ts">
 import { tv, type VariantProps } from "tailwind-variants"
-import { computed } from "vue"
+import { useMergedClass } from "../composables/useMergedClass"
 
 const badge = tv({
-  base: "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5 text-xs font-medium",
+  /*
+   * `align-middle` and a line-height pinned to the box, because the default
+   * `inline-flex` baseline is the one thing a badge must not bring with it: a
+   * badge dropped next to a text-sm heading sat a pixel or two off the text's
+   * baseline and pushed the whole row taller, so a section title grew a step
+   * the moment it gained a status. The badge now occupies the height it says it
+   * does and leaves the line it sits on alone.
+   */
+  base: "inline-flex shrink-0 items-center gap-1.5 rounded-pill align-middle font-medium leading-[1.2]",
   variants: {
+    size: {
+      // Fits inside a text-sm line without growing it — for a badge beside a
+      // heading, in a table cell, or anywhere a row's height is already set.
+      sm: "h-[18px] px-1.5 text-[11px]",
+      md: "px-2.5 py-0.5 text-xs",
+      lg: "px-3 py-1 text-sm",
+    },
     tone: {
       neutral: "bg-surface-soft text-muted-strong",
       brand: "bg-brand-soft text-brand",
@@ -17,18 +38,23 @@ const badge = tv({
       outline: "border border-line text-ink",
     },
   },
-  defaultVariants: { tone: "neutral" },
+  defaultVariants: { tone: "neutral", size: "md" },
 })
 
 type BadgeVariants = VariantProps<typeof badge>
 
-const props = defineProps<{ tone?: BadgeVariants["tone"]; dot?: boolean }>()
+const props = defineProps<{
+  tone?: BadgeVariants["tone"]
+  /** `sm` is the one that does not disturb a text-sm line it sits on. */
+  size?: BadgeVariants["size"]
+  dot?: boolean
+}>()
 
-const classes = computed(() => badge({ tone: props.tone }))
+const classes = useMergedClass(() => badge({ tone: props.tone, size: props.size }))
 </script>
 
 <template>
-  <span :class="classes">
+  <span v-bind="$attrs" :class="classes">
     <span v-if="dot" class="size-1.5 rounded-full bg-current" />
     <slot />
   </span>

package/src/components/LpDisclosure.vue

@@ -96,9 +96,15 @@ function onToggle(value: boolean) {
         The height animation lives on the wrapper; the inner panel fades + drifts
         up so the content eases in rather than snapping at full opacity. The slide
         is short (4px) and runs slightly behind the expand for a settled feel.
+
+        The bottom padding matches the sides rather than exceeding them: a taller
+        gap under the content reads as the block having been cut off short, and
+        with a control in there (a field, a row of buttons) the extra space below
+        it looked like a mistake next to the 12px at either side. The top stays
+        smaller because the trigger's own padding already separates the two.
       -->
       <div
-        class="grid gap-2.5 px-3 pt-1 pb-3.5 group-data-[state=open]/content:animate-[disclosure-body-in_300ms_var(--ease-emphasized)] motion-reduce:animate-none"
+        class="grid gap-2.5 px-3 pt-1 pb-3 group-data-[state=open]/content:animate-[disclosure-body-in_300ms_var(--ease-emphasized)] motion-reduce:animate-none"
       >
         <slot />
       </div>

package/src/components/LpInput.vue

@@ -6,6 +6,7 @@ export default { inheritAttrs: false }
 import { tv, type VariantProps } from "tailwind-variants"
 import { computed, ref, useAttrs, useSlots } from "vue"
 import { useInputFilter } from "../composables/useInputFilter"
+import { mergeClass } from "../composables/useMergedClass"
 import LpFormField from "./LpFormField.vue"
 import LpIcon from "./LpIcon.vue"
 
@@ -130,7 +131,7 @@ defineExpose({
   >
     <div
       data-lp-ring-owner
-      :class="[shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : rootClass]"
+      :class="mergeClass(shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : (rootClass as string))"
       :style="hasField ? undefined : rootStyle"
     >
       <span v-if="hasLeading" class="flex shrink-0 items-center text-muted">

package/src/components/LpSidebar.vue

@@ -15,6 +15,7 @@
  */
 import { computed, ref, useId } from "vue"
 import LpDrawer from "./LpDrawer.vue"
+import LpInput from "./LpInput.vue"
 import LpSidebarNav from "./LpSidebarNav.vue"
 import type { SidebarItem, SidebarSection } from "./sidebar"
 
@@ -33,6 +34,21 @@ const props = withDefaults(
      * given it overrides the modelValue check. The consumer owns the routing.
      */
     isActive?: (item: SidebarItem) => boolean
+    /**
+     * Put a filter field above the nav. A hundred-item sidebar is not read, it
+     * is searched: past a screenful, scanning costs more than typing, and every
+     * app that has one had built the same LpInput into the #header slot.
+     *
+     * Filtering is on `label` (and any `keywords` on the item), case- and
+     * accent-insensitive. Sections whose items all fail drop out rather than
+     * leaving a run of empty headings, and a collapsed section opens while a
+     * query is active — a hidden match is the same as no match.
+     */
+    searchable?: boolean
+    /** Placeholder for that field. */
+    searchPlaceholder?: string
+    /** The query, when the app wants to own it (v-model:search). */
+    search?: string
     /** Show a skeleton placeholder instead of the items. */
     loading?: boolean
     /** Skeleton row count while loading. */
@@ -97,6 +113,7 @@ const props = withDefaults(
     autoCollapseAfter?: number
   }>(),
   {
+    searchPlaceholder: "Search",
     skeletonRows: 6,
     skeletonHeader: true,
     responsive: false,
@@ -112,13 +129,52 @@ const emit = defineEmits<{
   (e: "update:open", value: boolean): void
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
+  (e: "update:search", value: string): void
 }>()
 
 // Normalise both inputs to a single section list.
-const groups = computed<SidebarSection[]>(() =>
+const allGroups = computed<SidebarSection[]>(() =>
   props.sections ?? (props.items ? [{ items: props.items }] : []),
 )
 
+/*
+ * The filter query. Controlled through v-model:search when the app wants it —
+ * a nav whose query is part of the URL, say — and kept here otherwise, so
+ * `searchable` alone is enough to get a working field.
+ */
+const ownSearch = ref("")
+const query = computed({
+  get: () => props.search ?? ownSearch.value,
+  set: (v) => {
+    ownSearch.value = v
+    emit("update:search", v)
+  },
+})
+
+/** Case- and accent-insensitive, so "reglas" finds "Reglas" and "Règles". */
+function normalise(s: string): string {
+  return s.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase()
+}
+
+function matches(item: SidebarItem, needle: string): boolean {
+  if (normalise(item.label).includes(needle)) return true
+  return (item.keywords ?? []).some((k) => normalise(k).includes(needle))
+}
+
+const groups = computed<SidebarSection[]>(() => {
+  const needle = normalise(query.value.trim())
+  if (!needle) return allGroups.value
+  // A section with no surviving items is dropped whole: a heading with nothing
+  // under it reads as a section that failed to load rather than one that
+  // matched nothing.
+  return allGroups.value
+    .map((section) => ({ ...section, items: section.items.filter((i) => matches(i, needle)) }))
+    .filter((section) => section.items.length > 0)
+})
+
+/** True while a query is narrowing the list — used to force groups open. */
+const filtering = computed(() => query.value.trim().length > 0)
+
 function itemActive(item: SidebarItem): boolean {
   return props.isActive ? props.isActive(item) : item.id === props.modelValue
 }
@@ -152,8 +208,11 @@ const autoCollapsed = computed<string[]>(() => {
     .filter(Boolean)
 })
 
-const collapsedKeys = computed<string[]>(
-  () => props.collapsed ?? ownCollapsed.value ?? autoCollapsed.value,
+const collapsedKeys = computed<string[]>(() =>
+  // Nothing stays folded while a query is on: a section that matched but is
+  // closed looks exactly like a section that did not match, and the person is
+  // typing precisely because they cannot find the thing by eye.
+  filtering.value ? [] : (props.collapsed ?? ownCollapsed.value ?? autoCollapsed.value),
 )
 
 function toggleSection(key: string, collapsed: boolean) {
@@ -230,6 +289,18 @@ defineOptions({ inheritAttrs: false })
       <slot name="header" />
     </div>
 
+    <!-- The filter sits between the brand and the nav: it belongs to the list,
+         not to the header, and a person reaching for it is already looking at
+         the items. -->
+    <LpInput
+      v-if="searchable"
+      v-model="query"
+      size="sm"
+      icon="lucide:search"
+      class="mb-2 shrink-0"
+      :placeholder="searchPlaceholder"
+      :aria-label="searchPlaceholder"
+    />
     <LpSidebarNav
       :groups="groups"
       :pill-id="railPillId"
@@ -277,6 +348,18 @@ defineOptions({ inheritAttrs: false })
         <slot name="header" />
       </div>
 
+      <!-- The filter sits between the brand and the nav: it belongs to the list,
+           not to the header, and a person reaching for it is already looking at
+           the items. -->
+      <LpInput
+        v-if="searchable"
+        v-model="query"
+        size="sm"
+        icon="lucide:search"
+        class="mb-2 shrink-0"
+        :placeholder="searchPlaceholder"
+        :aria-label="searchPlaceholder"
+      />
       <LpSidebarNav
         :groups="groups"
         :pill-id="drawerPillId"

package/src/components/LpTable.vue

@@ -100,12 +100,40 @@ function alignClass(align?: "left" | "right" | "center"): string {
   return "text-left"
 }
 
-// Resolved right-click menu for a row, or [] when none — keeps the template
-// branch simple and avoids calling rowMenu twice per row.
-function menuFor(row: T): ContextMenuItemDef[] {
-  return props.rowMenu?.(row) ?? []
+/*
+ * The row a right-click landed on, and the menu the table shows because of it.
+ *
+ * Rows used to be wrapped one LpContextMenu each. Two things were wrong with
+ * that. LpContextMenu's root is a v-if/v-else pair and reka's ContextMenuRoot
+ * is a context provider with no element of its own, so every row handed
+ * <TransitionGroup> a fragment where it needs an element: Vue warned once per
+ * row ("renders non-element root node that cannot be animated") and the row
+ * enter/leave/move animations silently did nothing. It also stood up a full
+ * reka menu instance per row — fifty rows, fifty poppers, all closed.
+ *
+ * So the <tr> is now a plain child of the TransitionGroup, and the ONE menu
+ * already wrapping the whole table serves the rows too: the right-click is
+ * caught on the way up, the row it came from is remembered, and the menu is
+ * built for that row. `always` keeps that menu mounted even while it would
+ * otherwise be empty, so the first right-click is not swallowed while it
+ * populates.
+ */
+const menuRow = ref<T | null>(null)
+
+function onRowContextMenu(row: T) {
+  menuRow.value = row
 }
 
+// Row items first — they are what the pointer is actually on — then the
+// table-wide ones under a rule, when the row has any of its own.
+const contextMenu = computed<ContextMenuItemDef[]>(() => {
+  const table = tableMenu()
+  const row = menuRow.value ? (props.rowMenu?.(menuRow.value) ?? []) : []
+  if (!row.length) return table
+  if (!table.length) return row
+  return [...row, { ...table[0], separatorBefore: true }, ...table.slice(1)]
+})
+
 // ── sorting ──────────────────────────────────────────────────
 //
 // The parent may drive `sort` through v-model, which is how a server-side sort
@@ -421,7 +449,7 @@ const barInsetTop = computed(() =>
     <!-- The table-wide menu, which is what a right-click on empty header space
          reaches: rows and headers carry their own and take the event first, so
          this is the fallback rather than a competitor. -->
-    <LpContextMenu :items="tableMenu()">
+    <LpContextMenu :items="contextMenu" always>
     <table class="w-full border-collapse text-sm">
       <thead ref="headEl" :class="stickyHeader ? 'sticky top-0 z-10' : ''">
         <tr class="border-b border-line bg-surface-soft">
@@ -500,44 +528,36 @@ const barInsetTop = computed(() =>
             <div>{{ emptyLabel }}</div>
           </td>
         </tr>
-        <!-- Each row is wrapped in a right-click menu; with no rowMenu (or an
-             empty result) LpContextMenu is a passthrough and the row keeps the
-             browser's native menu. It renders via as-child, so the DOM stays a
-             bare <tr> either way. -->
-        <LpContextMenu
+        <!-- A plain <tr>, because TransitionGroup animates element children and
+             nothing else. The right-click menu is the table's one menu, told
+             which row the event came from — see `contextMenu`. -->
+        <tr
           v-for="(row, index) in displayRows"
           :key="keyFor(row, index)"
-          :items="menuFor(row)"
+          @contextmenu="onRowContextMenu(row)"
+          class="group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40"
+          :class="selectedSet.has(keyFor(row, index)) ? 'bg-brand-soft/40' : ''"
+          v-bind="roving.itemProps(String(keyFor(row, index)))"
+          @click="emit('rowClick', row)"
+          @keydown="onRowKeydown"
         >
-          <!-- `group` so a cell's own content can answer the row's hover: a
-               link inside a row wants its underline to sweep in when the row
-               lights up, not when the pointer crosses the text exactly. The
-               class paints nothing by itself. -->
-          <tr
-            class="group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40"
-            :class="selectedSet.has(keyFor(row, index)) ? 'bg-brand-soft/40' : ''"
-            v-bind="roving.itemProps(String(keyFor(row, index)))"
-            @click="emit('rowClick', row)"
-            @keydown="onRowKeydown"
+          <td v-if="selectable" class="w-px px-4 py-3" @click.stop>
+            <LpCheckbox
+              :model-value="selectedSet.has(keyFor(row, index))"
+              @update:model-value="(v) => toggleRow(keyFor(row, index), v)"
+            />
+          </td>
+          <td
+            v-for="col in visibleColumns"
+            :key="col.key"
+            class="px-4 py-3 text-ink"
+            :class="alignClass(col.align)"
           >
-            <td v-if="selectable" class="w-px px-4 py-3" @click.stop>
-              <LpCheckbox
-                :model-value="selectedSet.has(keyFor(row, index))"
-                @update:model-value="(v) => toggleRow(keyFor(row, index), v)"
-              />
-            </td>
-            <td
-              v-for="col in visibleColumns"
-              :key="col.key"
-              class="px-4 py-3 text-ink"
-              :class="alignClass(col.align)"
-            >
-              <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
-                {{ row[col.key] }}
-              </slot>
-            </td>
-          </tr>
-        </LpContextMenu>
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+              {{ row[col.key] }}
+            </slot>
+          </td>
+        </tr>
       </TransitionGroup>
     </table>
     </LpContextMenu>