@leavepulse/ui 0.33.1 → 0.35.0

package/src/components/LpTable.vue

@@ -451,7 +451,14 @@ const barInsetTop = computed(() =>
          this is the fallback rather than a competitor. -->
     <LpContextMenu :items="contextMenu" always>
     <table class="w-full border-collapse text-sm">
-      <thead ref="headEl" :class="stickyHeader ? 'sticky top-0 z-10' : ''">
+      <!-- The background belongs on `thead` itself, not only on its row:
+           `border-collapse` collapses the borders, and with a sticky header the
+           rows show through that seam — a band of body text rides across the
+           header on every scroll. -->
+      <thead
+        ref="headEl"
+        :class="stickyHeader ? 'sticky top-0 z-10 bg-surface-soft' : ''"
+      >
         <tr class="border-b border-line bg-surface-soft">
           <th v-if="selectable" class="w-px px-4 py-3">
             <LpCheckbox
@@ -522,7 +529,7 @@ const barInsetTop = computed(() =>
         name="lp-row"
         :ref="(el: unknown) => roving.setContainer((el as { $el?: HTMLElement })?.$el ?? null)"
       >
-        <tr v-if="displayRows.length === 0" key="lp-table-empty">
+        <tr v-if="displayRows.length === 0" key="lp-table-empty" class="lp-row-empty">
           <td :colspan="colSpan" class="px-4 py-10 text-center text-muted">
             <LpIcon :name="emptyIcon" :size="22" class="mx-auto mb-2 opacity-60" />
             <div>{{ emptyLabel }}</div>
@@ -594,6 +601,19 @@ const barInsetTop = computed(() =>
   transform: translateX(-0.5rem);
 }
 
+/*
+ * The empty-state row leaves at once, without the fade. It and the first real
+ * rows would otherwise share the table for the length of the animation, and a
+ * row of blank height sits above them — the table jumps once on every load.
+ *
+ * `position: absolute` is what a list would use here, but a positioned `<tr>`
+ * 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 {
+  display: none;
+}
+
 /*
  * The leaving row stays in the flow. Taking it out with `position: absolute` is
  * the usual trick for a list, but a `<tr>` positioned that way loses the table's

package/src/index.ts

@@ -64,7 +64,7 @@ export {
 } from "./components/color"
 export type { ColorFormat, Hsv, Rgb } from "./components/color"
 export { default as LpCommandPalette } from "./components/LpCommandPalette.vue"
-export type { Command } from "./components/LpCommandPalette.vue"
+export type { Command, PaletteLabels } from "./components/LpCommandPalette.vue"
 export { default as LpConfirmDialog } from "./components/LpConfirmDialog.vue"
 export { default as LpContextMenu } from "./components/LpContextMenu.vue"
 export type { ContextMenuItemDef } from "./components/LpContextMenu.vue"
@@ -105,6 +105,7 @@ export { default as LpLogViewer } from "./components/LpLogViewer.vue"
 export type { LogLevel, LogLine } from "./components/LpLogViewer.vue"
 export { default as LpMediaGallery } from "./components/LpMediaGallery.vue"
 export { default as LpModal } from "./components/LpModal.vue"
+export { default as LpModalNav } from "./components/LpModalNav.vue"
 export { default as LpNotificationBell } from "./components/LpNotificationBell.vue"
 export type {
   NotificationItem,