@leavepulse/ui 0.34.0 → 0.36.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-FZXfljWV.js";
+import { _ as _2 } from "./chunks/LpAddressInput-D4t8WFD-.js";
 import { _ as _3 } from "./chunks/LpMapPicker-ul4oYno6.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BlvtGB2P.js";
@@ -19,7 +19,7 @@ import { _ as _15 } from "./chunks/LpCodeBlock-Bo0B4TFR.js";
 import { _ as _16 } from "./chunks/LpColorPicker-CFC6iaNK.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
-import { _ as _17 } from "./chunks/LpConfirmDialog-CQBVaLpo.js";
+import { _ as _17 } from "./chunks/LpConfirmDialog-CxbizvSB.js";
 import { _ as _18 } from "./chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _19 } from "./chunks/LpDatePicker-6JFXllj5.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
@@ -40,46 +40,47 @@ import { fileNameOf } from "./components/lightbox.js";
 import { _ as _31 } from "./chunks/LpLink-DCND-zyu.js";
 import { _ as _32 } from "./chunks/LpLogViewer-y53ZqSVq.js";
 import { _ as _33 } from "./chunks/LpMediaGallery-Cid7PGYx.js";
-import { _ as _34 } from "./chunks/LpModal-DAqXzsm-.js";
-import { _ as _35 } from "./chunks/LpNotificationBell-lHePf89W.js";
-import { _ as _36 } from "./chunks/LpNumberField-CWuX08iX.js";
-import { _ as _37 } from "./chunks/LpNumberFlow-amWYaeuA.js";
-import { _ as _38 } from "./chunks/LpOtpInput-y2v-pmiN.js";
-import { _ as _39 } from "./chunks/LpPagination-5FxjmmB5.js";
-import { _ as _40 } from "./chunks/LpPasswordInput--sjYCkLS.js";
-import { _ as _41 } from "./chunks/LpPie-c2-q4DJu.js";
-import { _ as _42 } from "./chunks/LpPhoneInput-BDSKVl_z.js";
+import { _ as _34 } from "./chunks/LpModal-7LvuAA7U.js";
+import { _ as _35 } from "./chunks/LpModalNav-DBMGlq_x.js";
+import { _ as _36 } from "./chunks/LpNotificationBell-lHePf89W.js";
+import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
+import { _ as _38 } from "./chunks/LpNumberFlow-amWYaeuA.js";
+import { _ as _39 } from "./chunks/LpOtpInput-y2v-pmiN.js";
+import { _ as _40 } from "./chunks/LpPagination-5FxjmmB5.js";
+import { _ as _41 } from "./chunks/LpPasswordInput--sjYCkLS.js";
+import { _ as _42 } from "./chunks/LpPie-c2-q4DJu.js";
+import { _ as _43 } from "./chunks/LpPhoneInput-BDSKVl_z.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _43 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _44 } from "./chunks/LpProgress-Btq5W4Ut.js";
-import { _ as _45 } from "./chunks/LpRadio-B5AfqTpZ.js";
-import { _ as _46 } from "./chunks/LpRadioGroup-xPIuVDO_.js";
-import { _ as _47 } from "./chunks/LpRollingText-CM5gkSeF.js";
-import { _ as _48 } from "./chunks/LpScrollArea-D8xyKXcF.js";
-import { _ as _49 } from "./chunks/LpSegmented-fV0Sk92p.js";
-import { _ as _50 } from "./chunks/LpSection-aM6J_u51.js";
-import { _ as _51 } from "./chunks/LpSelect-ANIVtrpM.js";
-import { _ as _52 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _53 } from "./chunks/LpShift-DXNsauQZ.js";
+import { _ as _44 } from "./chunks/LpPopover-8268UmlC.js";
+import { _ as _45 } from "./chunks/LpProgress-Btq5W4Ut.js";
+import { _ as _46 } from "./chunks/LpRadio-B5AfqTpZ.js";
+import { _ as _47 } from "./chunks/LpRadioGroup-xPIuVDO_.js";
+import { _ as _48 } from "./chunks/LpRollingText-CM5gkSeF.js";
+import { _ as _49 } from "./chunks/LpScrollArea-D8xyKXcF.js";
+import { _ as _50 } from "./chunks/LpSegmented-fV0Sk92p.js";
+import { _ as _51 } from "./chunks/LpSection-aM6J_u51.js";
+import { _ as _52 } from "./chunks/LpSelect-ANIVtrpM.js";
+import { _ as _53 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _54 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _54 } from "./chunks/LpSidebar-DcYavim2.js";
-import { _ as _55 } from "./chunks/LpSkeleton-CTI-vBgW.js";
-import { _ as _56 } from "./chunks/LpSlider-BwNIBkAK.js";
-import { _ as _57 } from "./chunks/LpSparkline-C6xQ2dwv.js";
-import { _ as _58 } from "./chunks/LpStat-CQaW8R--.js";
-import { _ as _59 } from "./chunks/LpStepper-Bk-XaQYU.js";
-import { _ as _60 } from "./chunks/LpSwitch-xgnRU2k0.js";
+import { _ as _55 } from "./chunks/LpSidebar-DcYavim2.js";
+import { _ as _56 } from "./chunks/LpSkeleton-CTI-vBgW.js";
+import { _ as _57 } from "./chunks/LpSlider-BwNIBkAK.js";
+import { _ as _58 } from "./chunks/LpSparkline-C6xQ2dwv.js";
+import { _ as _59 } from "./chunks/LpStat-CQaW8R--.js";
+import { _ as _60 } from "./chunks/LpStepper-Bk-XaQYU.js";
+import { _ as _61 } from "./chunks/LpSwitch-xgnRU2k0.js";
 import { default as default7 } from "./components/LpTable.vue.js";
-import { _ as _61 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _62 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _63 } from "./chunks/LpTextarea-t7F6gv8E.js";
+import { _ as _62 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _63 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _64 } from "./chunks/LpTextarea-t7F6gv8E.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
-import { D, _ as _64, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
-import { _ as _65 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _66 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _67 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _68 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
-import { _ as _69 } from "./chunks/LpUptimeBar-DvAMno0S.js";
+import { D, _ as _65, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-r1te9nB2.js";
+import { _ as _66 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _67 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _68 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _69 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
+import { _ as _70 } from "./chunks/LpUptimeBar-DvAMno0S.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -169,43 +170,44 @@ export {
   _3 as LpMapPicker,
   _33 as LpMediaGallery,
   _34 as LpModal,
-  _35 as LpNotificationBell,
-  _36 as LpNumberField,
-  _37 as LpNumberFlow,
-  _38 as LpOtpInput,
-  _39 as LpPagination,
-  _40 as LpPasswordInput,
-  _42 as LpPhoneInput,
-  _41 as LpPie,
-  _43 as LpPopover,
-  _44 as LpProgress,
-  _45 as LpRadio,
-  _46 as LpRadioGroup,
-  _47 as LpRollingText,
-  _48 as LpScrollArea,
-  _50 as LpSection,
-  _49 as LpSegmented,
-  _51 as LpSelect,
-  _52 as LpServiceNode,
-  _53 as LpShift,
+  _35 as LpModalNav,
+  _36 as LpNotificationBell,
+  _37 as LpNumberField,
+  _38 as LpNumberFlow,
+  _39 as LpOtpInput,
+  _40 as LpPagination,
+  _41 as LpPasswordInput,
+  _43 as LpPhoneInput,
+  _42 as LpPie,
+  _44 as LpPopover,
+  _45 as LpProgress,
+  _46 as LpRadio,
+  _47 as LpRadioGroup,
+  _48 as LpRollingText,
+  _49 as LpScrollArea,
+  _51 as LpSection,
+  _50 as LpSegmented,
+  _52 as LpSelect,
+  _53 as LpServiceNode,
+  _54 as LpShift,
   default6 as LpShortcutsDialog,
-  _54 as LpSidebar,
-  _55 as LpSkeleton,
-  _56 as LpSlider,
-  _57 as LpSparkline,
-  _58 as LpStat,
-  _59 as LpStepper,
-  _60 as LpSwitch,
+  _55 as LpSidebar,
+  _56 as LpSkeleton,
+  _57 as LpSlider,
+  _58 as LpSparkline,
+  _59 as LpStat,
+  _60 as LpStepper,
+  _61 as LpSwitch,
   default7 as LpTable,
-  _61 as LpTableOfContents,
-  _62 as LpTabs,
-  _63 as LpTextarea,
-  _64 as LpThemeSwitcher,
-  _65 as LpTilt,
-  _66 as LpToaster,
-  _67 as LpTooltip,
-  _68 as LpTopologyCanvas,
-  _69 as LpUptimeBar,
+  _62 as LpTableOfContents,
+  _63 as LpTabs,
+  _64 as LpTextarea,
+  _65 as LpThemeSwitcher,
+  _66 as LpTilt,
+  _67 as LpToaster,
+  _68 as LpTooltip,
+  _69 as LpTopologyCanvas,
+  _70 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,

package/package.json

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

package/src/component-names.ts

@@ -43,6 +43,7 @@ export const COMPONENT_NAMES = [
   "LpMapPicker",
   "LpMediaGallery",
   "LpModal",
+  "LpModalNav",
   "LpNotificationBell",
   "LpNumberField",
   "LpNumberFlow",

package/src/components/LpModal.vue

@@ -72,6 +72,20 @@ defineEmits<{ (e: "update:open", value: boolean): void }>()
 // Spread rather than a plain `:aria-describedby` binding: with a description
 // the key must be absent entirely so reka-ui's own generated id survives, and
 // only the description-less case overrides it away.
+/*
+ * A click on the aside lands outside DialogContent, and reka reads anything
+ * outside it as a click on the scrim — the dialog closed under the pointer the
+ * moment you picked a section. The aside marks itself, and a click that starts
+ * inside one keeps the dialog open. Without an aside nothing carries the
+ * attribute and every click behaves exactly as before.
+ */
+const onInteractOutside = (event: Event) => {
+  const target = event.target
+  if (target instanceof Element && target.closest("[data-lp-modal-aside]")) {
+    event.preventDefault()
+  }
+}
+
 const describedByAttrs = computed(() =>
   props.description ? {} : { "aria-describedby": undefined },
 )
@@ -93,6 +107,9 @@ const widthClass = computed(() => {
 // inset horizontally; top only when there's no header, bottom only when there's
 // no footer (header/footer own those edges).
 const slots = useSlots()
+
+// Dialog and aside only form a pair when something fills the slot.
+const hasAside = computed(() => Boolean(slots.aside || slots.asideEnd))
 // The body clips overflow and focus rings are drawn outside their control, so a
 // field flush against the top edge lost its ring; pt-1 clears the ring's width.
 /*
@@ -225,10 +242,50 @@ watch(
            this wrapper: `max-h-full` on a centred flex child resolves against a
            box it is free to overflow, so a tall body stopped handing its
            overflow to the scroll area below and simply ran off-screen. -->
+      <!-- A companion panel standing OUTSIDE the dialog, in the same centring
+           row: a section list, a preview, a picker. Inside, it would take the
+           width the body already wants; measured against the viewport it would
+           have to be re-measured on every resize.
+
+           The row keeps `items-center` until something fills the slot, so a
+           dialog without one centres exactly as it always has. With an aside
+           the two align to the top of the row instead, and because the row
+           collapses to its content the taller of the pair sets that top edge —
+           so the aside may be shorter than the dialog, and the dialog is never
+           shorter than the aside. Neither is stretched: `stretch` here would
+           pull every dialog to the full height of its own ceiling.
+
+           Height, width, the gap to the dialog and whether it appears at all
+           are the caller's, and deliberately so: a utility class written in
+           this file is not in the consuming app's Tailwind scan and would never
+           be generated. The gap in particular has to go with the aside — kept
+           here, it survives an aside hidden at a breakpoint this file knows
+           nothing about, and pushes the dialog off centre by its own width. -->
       <div
         class="fixed inset-0 flex items-center justify-center pointer-events-none"
         :style="{ zIndex: layer.panel }"
       >
+      <!-- The dialog and its aside stand in a row of their own, and that row is
+           what the wrapper centres. Aligning them on the full-screen wrapper
+           instead would pin them to the top of the WINDOW, and the dialog would
+           be free to end up shorter than the aside beside it.
+           `items-start` inside the row: the row collapses to the taller of the
+           two, both hang from its top edge, and neither is stretched. -->
+      <div
+        class="flex items-start"
+        :style="hasAside ? { maxHeight: 'min(90vh, calc(100dvh - 2rem))' } : undefined"
+      >
+      <!-- `pointer-events-auto` because the wrapper lets clicks through to the
+           overlay, and the aside is not the overlay. `data-lp-modal-aside` is
+           what tells `interact-outside` a click here is not a click on the
+           scrim — without it the dialog closes under the pointer. -->
+      <aside
+        v-if="$slots.aside"
+        data-lp-modal-aside
+        class="pointer-events-auto flex min-h-0 flex-col"
+      >
+        <slot name="aside" />
+      </aside>
       <!-- Without a description reka-ui warns on every open, and the opt-out it
            checks for is an ABSENT `aria-describedby` — despite the message
            naming the string "undefined" (a leftover from Radix, where
@@ -240,9 +297,11 @@ watch(
         ref="panelRef"
         class="pointer-events-auto flex max-h-[min(90vh,calc(100dvh-2rem))] min-h-0 flex-col overflow-hidden rounded-card border border-line bg-surface-raised shadow-panel outline-none data-[state=open]:animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[rise-out_120ms_cubic-bezier(0.4,0,1,1)]"
         :class="[widthClass, tweening ? 'transition-[height] duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none' : '']"
-        :style="width ? { width } : undefined"
+        :style="{ ...(width ? { width } : {}), ...(hasAside ? { alignSelf: 'stretch' } : {}) }"
         v-bind="describedByAttrs"
         @open-auto-focus="onOpenAutoFocus"
+        @interact-outside="onInteractOutside"
+        @pointer-down-outside="onInteractOutside"
       >
         <header v-if="title || $slots.title" class="flex shrink-0 items-start justify-between gap-4 p-5 pb-3">
           <div class="flex flex-col gap-1">
@@ -294,6 +353,15 @@ watch(
           <slot name="footer" />
         </footer>
       </DialogContent>
+
+      <aside
+        v-if="$slots.asideEnd"
+        data-lp-modal-aside
+        class="pointer-events-auto flex min-h-0 flex-col"
+      >
+        <slot name="asideEnd" />
+      </aside>
+      </div>
       </div>
     </DialogPortal>
   </DialogRoot>

package/src/components/LpModalNav.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+/*
+ * A dialog whose sections stand BESIDE it rather than inside it — settings, a
+ * profile with tabs' worth of detail, a wizard you can skip around in. Put the
+ * list inside the panel and it takes the width the content already wants; a row
+ * of tabs across the top runs out of room at about five.
+ *
+ * This is LpModal's `aside` slot plus LpSidebar, wired together: the pair
+ * shares one centring row, so the list lines up with the dialog at any window
+ * width and neither has to measure the other. What is added on top is the part
+ * that only matters here — below `mobileBreakpoint` there is no room beside the
+ * dialog at all, so the rail folds into a drawer and the header grows the
+ * button that opens it. LpSidebar leaves that button to the app, and without
+ * one the sections are simply unreachable on a phone.
+ */
+import { computed, ref } from "vue"
+import LpButton from "./LpButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpModal from "./LpModal.vue"
+import LpSidebar from "./LpSidebar.vue"
+import type { SidebarItem, SidebarSection } from "./sidebar"
+
+export type { SidebarItem, SidebarSection } from "./sidebar"
+
+type Breakpoint = "sm" | "md" | "lg" | "xl"
+
+const props = withDefaults(
+  defineProps<{
+    open?: boolean
+    /** Active section id (v-model). */
+    modelValue?: string
+    /** Flat sections, or grouped ones — the shapes LpSidebar already takes. */
+    items?: SidebarItem[]
+    sections?: SidebarSection[]
+    title?: string
+    description?: string
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"
+    width?: string
+    /** Width of the nav rail (any CSS length). */
+    navWidth?: string
+    /** Put a filter above the nav — see LpSidebar's `searchable`. */
+    searchable?: boolean
+    searchPlaceholder?: string
+    /** Skeleton rows in place of the nav while the sections load. */
+    loading?: boolean
+    /** Breakpoint below which the rail becomes a drawer. */
+    mobileBreakpoint?: Breakpoint
+    /** Label for the button that opens that drawer. */
+    navLabel?: string
+    /** Stand the rail to the right of the dialog instead of the left. */
+    navSide?: "start" | "end"
+    /**
+     * Let the body fill the height instead of scrolling itself. Off by default,
+     * as in a plain modal: it existed here to make the rail a full-height
+     * column inside the body, and the rail is no longer in the body.
+     */
+    fillBody?: boolean
+  }>(),
+  {
+    size: "2xl",
+    navWidth: "13rem",
+    mobileBreakpoint: "lg",
+    navLabel: "Sections",
+    navSide: "start",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void
+  (e: "update:modelValue", value: string): void
+}>()
+
+const navOpen = ref(false)
+
+const active = computed({
+  get: () => props.modelValue ?? "",
+  set: (v: string) => emit("update:modelValue", v),
+})
+
+const hasNav = computed(() => Boolean(props.items?.length || props.sections?.length))
+
+/*
+ * Both halves of the responsive switch are spelled out rather than built from
+ * the prop: a class assembled at runtime is in nobody's Tailwind scan and would
+ * never be generated. The rail hides exactly where the button appears.
+ *
+ * `responsive` on LpSidebar hides its own rail below the breakpoint and draws
+ * the drawer as a SIBLING of it, so wrapping the whole thing in a `hidden`
+ * element takes the drawer with it — and the sections are then unreachable at
+ * exactly the width where the drawer is the only way to them. What is left here
+ * is the gap, which has to disappear along with the rail: an aside that is
+ * empty but still spaced pushes the dialog off centre.
+ */
+const RAIL_GAP: Record<Breakpoint, string> = {
+  sm: "sm:mr-3",
+  md: "md:mr-3",
+  lg: "lg:mr-3",
+  xl: "xl:mr-3",
+}
+const RAIL_GAP_END: Record<Breakpoint, string> = {
+  sm: "sm:ml-3",
+  md: "md:ml-3",
+  lg: "lg:ml-3",
+  xl: "xl:ml-3",
+}
+const TRIGGER_VISIBILITY: Record<Breakpoint, string> = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+}
+const railClass = computed(() =>
+  (props.navSide === "end" ? RAIL_GAP_END : RAIL_GAP)[props.mobileBreakpoint],
+)
+const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
+
+/*
+ * The rail carries the dialog's own ceiling, so a long list scrolls with the
+ * dialog instead of running past the bottom of the window. Inline because it
+ * mirrors LpModal's max-height, which is not a class this file can put in the
+ * consuming app's scan.
+ */
+const railStyle = { maxHeight: "min(90vh, calc(100dvh - 2rem))" }
+</script>
+
+<template>
+  <LpModal
+    :open="open"
+    :title="title"
+    :description="description"
+    :size="size"
+    :width="width"
+    :fill-body="fillBody"
+    @update:open="emit('update:open', $event)"
+  >
+    <!-- The gap sits on a wrapper rather than on LpSidebar itself: LpSidebar
+         splits its `class` between its root and the inner `nav`, so a margin
+         given to it lands on both. -->
+    <template v-if="hasNav && navSide === 'start'" #aside>
+      <div :class="railClass">
+        <LpSidebar
+          v-model="active"
+          v-model:open="navOpen"
+          variant="panel"
+          :items="items"
+          :sections="sections"
+          :width="navWidth"
+          :searchable="searchable"
+          :search-placeholder="searchPlaceholder"
+          :loading="loading"
+          responsive
+          :mobile-breakpoint="mobileBreakpoint"
+          :style="railStyle"
+          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+        />
+      </div>
+    </template>
+
+    <template v-if="hasNav && navSide === 'end'" #asideEnd>
+      <div :class="railClass">
+        <LpSidebar
+          v-model="active"
+          v-model:open="navOpen"
+          variant="panel"
+          :items="items"
+          :sections="sections"
+          :width="navWidth"
+          :searchable="searchable"
+          :search-placeholder="searchPlaceholder"
+          :loading="loading"
+          responsive
+          :mobile-breakpoint="mobileBreakpoint"
+          :style="railStyle"
+          class="rounded-card border border-line bg-surface-raised p-2 shadow-panel"
+        />
+      </div>
+    </template>
+
+    <template #title>
+      <div class="flex items-center gap-2">
+        <LpButton
+          v-if="hasNav"
+          variant="ghost"
+          size="sm"
+          square
+          :aria-label="navLabel"
+          :class="triggerClass"
+          @click="navOpen = true"
+        >
+          <LpIcon name="lucide:menu" :size="18" />
+        </LpButton>
+        <slot name="title">{{ title }}</slot>
+      </div>
+    </template>
+
+    <slot />
+
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </LpModal>
+</template>

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

@@ -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,