@leavepulse/ui 0.34.0 → 0.35.0

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

@@ -18,8 +18,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
-    open: boolean;
     title: string;
+    open: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -90,7 +90,13 @@ type __VLS_Props = {
      */
     autoCollapseAfter?: number;
 };
-declare var __VLS_1: {}, __VLS_18: any, __VLS_20: {}, __VLS_22: {}, __VLS_32: {}, __VLS_49: any, __VLS_51: {}, __VLS_53: {};
+declare var __VLS_1: {}, __VLS_18: {
+    item: SidebarItem;
+    active: boolean;
+}, __VLS_20: {}, __VLS_22: {}, __VLS_32: {}, __VLS_49: {
+    item: SidebarItem;
+    active: boolean;
+}, __VLS_51: {}, __VLS_53: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {

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

@@ -43,8 +43,8 @@ declare const __VLS_export: __VLS_WithSlots<import('vue').DefineComponent<{
     collapsedKeys: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, {
     item?: (props: {
-        item: any;
-        active: any;
+        item: SidebarItem;
+        active: boolean;
     }) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -23,8 +23,8 @@ declare const __VLS_export: import('vue').DefineComponent<{
     onChange?: ((value: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    modelValue: number;
-    min: number;
     max: number;
+    min: number;
     step: number;
+    modelValue: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -39,10 +39,10 @@ type __VLS_Props = {
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     width: number;
     height: number;
-    duration: number;
     animate: boolean;
-    tone: "brand" | "action" | "danger" | "accent" | "muted";
+    duration: number;
     smooth: number;
+    tone: "brand" | "action" | "danger" | "accent" | "muted";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -27,7 +27,7 @@ export interface SortState {
     dir: "asc" | "desc";
 }
 declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<{
         columns: TableColumn<T>[];
         rows: T[];
         /** Stable id per row — required for selection; falls back to index otherwise. */
@@ -55,19 +55,19 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
         filterLabel?: string;
         showAllLabel?: string;
         columnsLabel?: string;
-    } & __VLS_EmitsToProps<__VLS_NormalizeEmits<{
-        (e: "update:selected", value: (string | number)[]): void;
-        (e: "update:sort", value: SortState | null): void;
-        (e: "rowClick", row: T): void;
-    }>>> & import('vue').PublicProps & (typeof globalThis extends {
+    } & {
+        "onUpdate:selected"?: ((value: (string | number)[]) => any) | undefined;
+        "onUpdate:sort"?: ((value: SortState | null) => any) | undefined;
+        onRowClick?: ((row: T) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        [x: string]: ((props: {
-            row: any;
-            value: any;
+        [x: `cell-${string}`]: ((props: {
+            row: T;
+            value: unknown;
         }) => any) | undefined;
     };
     emit: {

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-Ckoi05Am.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+import '../assets/LpTable-DfSwPCJ-.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,
@@ -13,7 +13,10 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = ["aria-sort"];
 const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { key: "lp-table-empty" };
+const _hoisted_6 = {
+  key: "lp-table-empty",
+  class: "lp-row-empty"
+};
 const _hoisted_7 = ["colspan"];
 const _hoisted_8 = ["onContextmenu", "onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -290,7 +293,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createElementVNode("thead", {
                   ref_key: "headEl",
                   ref: headEl,
-                  class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10" : "")
+                  class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
                 }, [
                   createElementVNode("tr", _hoisted_2, [
                     __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
@@ -406,7 +409,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d139c3bb"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1fada8e7"]]);
 export {
   LpTable as default
 };

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

@@ -21,7 +21,7 @@ type __VLS_Props = {
     block?: boolean;
 };
 declare var __VLS_49: {
-    value: any;
+    value: string;
 }, __VLS_51: {};
 type __VLS_Slots = {} & {
     panel?: (props: typeof __VLS_49) => any;

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

@@ -40,8 +40,8 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((name: string) => any) | undefined;
 }>, {
     size: "sm" | "md" | "lg";
-    variant: "swatch" | "icon" | "pill";
     transition: boolean;
+    variant: "swatch" | "icon" | "pill";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -17,9 +17,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     scale: number;
     max: number;
+    perspective: number;
     lift: number;
     glare: boolean;
-    perspective: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -45,8 +45,8 @@ type __VLS_Slots = {} & {
     content?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    side: "top" | "right" | "bottom" | "left";
     delay: number;
+    side: "top" | "right" | "bottom" | "left";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -188,12 +188,12 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {
     }) => any) | undefined;
 }>, {
     legend: boolean;
+    controls: boolean;
     connectable: boolean;
     selectable: boolean;
     legendPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     lanes: TopologyLane[];
     minimap: boolean;
-    controls: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/index.d.ts

@@ -58,6 +58,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, NotificationLabels, } from './components/LpNotificationBell.vue';
 export { default as LpNumberField } from './components/LpNumberField.vue';

package/dist/index.js

@@ -41,45 +41,46 @@ 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 _35 } from "./chunks/LpModalNav-B7W9VAne.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.35.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/LpModalNav.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+/*
+ * A dialog whose sections stay visible while you read one — settings, a profile
+ * with tabs' worth of detail, a wizard that lets you skip a step. The shape
+ * these all reach for is a nav column that persists next to the body, and
+ * without it they fall back to a row of tabs that runs out of width, or to a
+ * back-and-forth between a list screen and a detail screen.
+ *
+ * The nav lives INSIDE the dialog. Standing it outside, as a sibling floating
+ * beside the panel, is the arrangement this component deliberately does not
+ * use: it then sits outside the focus trap, `interact-outside` reads a click on
+ * it as a click on the scrim and closes the dialog under the pointer, and its
+ * height has to be reconciled with a dialog height that changes as content
+ * arrives. Inside, all three come out right for free, and `LpModal` keeps the
+ * centring every other modal in the kit relies on.
+ *
+ * Width is the one cost: the rail comes out of the body's width, which is why
+ * the default `size` is wider than a plain modal's. Below `mobileBreakpoint`
+ * there is no width to spare at all, so the rail becomes a drawer — and since
+ * LpSidebar leaves opening it to the app, the header grows the button for it
+ * rather than leaving the sections 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
+    /**
+     * Defaults wider than `LpModal`'s `md`: the rail comes out of the content's
+     * width, and at `md` what is left is too narrow to be worth splitting.
+     */
+    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
+    /**
+     * Let the body fill the height instead of scrolling itself. On by default,
+     * unlike a plain modal: the rail is only a full-height column if the two
+     * of them agree on a height to fill.
+     */
+    fillBody?: boolean
+  }>(),
+  {
+    size: "2xl",
+    navWidth: "13rem",
+    mobileBreakpoint: "lg",
+    navLabel: "Sections",
+    fillBody: true,
+  },
+)
+
+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),
+)
+
+/*
+ * Spelled out rather than built from the prop: a class assembled at runtime is
+ * not in anyone's Tailwind scan and would never be generated. Mirrors the
+ * rail's own visibility in LpSidebar — the button appears exactly where the
+ * rail disappears.
+ */
+const TRIGGER_VISIBILITY: Record<Breakpoint, string> = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+}
+const triggerClass = computed(() => TRIGGER_VISIBILITY[props.mobileBreakpoint])
+</script>
+
+<template>
+  <LpModal
+    :open="open"
+    :title="title"
+    :description="description"
+    :size="size"
+    :width="width"
+    :fill-body="fillBody"
+    @update:open="emit('update:open', $event)"
+  >
+    <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>
+
+    <div class="flex min-h-0 flex-1 gap-4">
+      <!-- `shrink-0`: a flex item's default is to give up width to a greedy
+           sibling, so a wide table in the body would squeeze the rail down to
+           its longest unbreakable word. -->
+      <LpSidebar
+        v-if="hasNav"
+        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"
+        class="shrink-0"
+      >
+        <template v-if="$slots.navHeader" #header>
+          <slot name="navHeader" />
+        </template>
+        <template v-if="$slots.navItem" #item="slotProps">
+          <slot name="navItem" v-bind="slotProps" />
+        </template>
+        <template v-if="$slots.navFooter" #footer>
+          <slot name="navFooter" />
+        </template>
+      </LpSidebar>
+
+      <!-- `min-w-0` is the same guard in the other direction: without it a wide
+           child sets this column's minimum to its own width, and the dialog
+           grows past its size instead of the content scrolling. -->
+      <div class="flex min-h-0 min-w-0 flex-1 flex-col">
+        <slot />
+      </div>
+    </div>
+
+    <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,