@leavepulse/ui 0.26.0 → 0.27.0

package/dist/chunks/LpSection-BIvwZyE1.js

@@ -0,0 +1,78 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { tv } from "tailwind-variants";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = { class: "min-w-0" };
+const _hoisted_2 = { class: "flex flex-wrap items-center gap-2" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpSection",
+  props: {
+    title: {},
+    description: {},
+    icon: {},
+    level: { default: "md" },
+    as: { default: "h2" }
+  },
+  setup(__props) {
+    const section = tv({
+      slots: {
+        // items-start, not items-center: once a description is present the actions
+        // must stay level with the TITLE, not drift to the middle of the block.
+        root: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2",
+        title: "font-semibold text-ink",
+        description: "mt-1 text-sm text-muted",
+        actions: "flex shrink-0 flex-wrap items-center gap-2"
+      },
+      variants: {
+        level: {
+          sm: { title: "text-sm" },
+          md: { title: "text-base" },
+          lg: { title: "text-lg tracking-tight" },
+          xl: { title: "text-xl tracking-tight" }
+        }
+      },
+      defaultVariants: { level: "md" }
+    });
+    const props = __props;
+    const classes = computed(() => section({ level: props.level }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(classes.value.root())
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+              key: 0,
+              name: __props.icon,
+              size: 16,
+              class: "shrink-0 text-muted"
+            }, null, 8, ["name"])) : createCommentVNode("", true),
+            (openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+              class: normalizeClass(classes.value.title())
+            }, {
+              default: withCtx(() => [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(toDisplayString(__props.title), 1)
+                ])
+              ]),
+              _: 3
+            }, 8, ["class"])),
+            renderSlot(_ctx.$slots, "meta")
+          ]),
+          __props.description ? (openBlock(), createElementBlock("p", {
+            key: 0,
+            class: normalizeClass(classes.value.description())
+          }, toDisplayString(__props.description), 3)) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(classes.value.actions())
+        }, [
+          renderSlot(_ctx.$slots, "actions")
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpSkeleton-t5mMYl3a.js → LpSkeleton-DpXLDcQm.js}

@@ -11,12 +11,17 @@ import '../assets/LpSkeleton-D7xU8IPV.css';const _sfc_main = /* @__PURE__ */ def
       return openBlock(), createElementBlock("div", {
         "aria-hidden": "true",
         class: normalizeClass(["lp-skeleton", [
-          isBlock.value ? "lp-skeleton-item bg-surface-soft" : "",
-          {
-            "rounded-control": isBlock.value && (__props.rounded === "control" || !__props.rounded),
-            "rounded-card": __props.rounded === "card",
-            "rounded-pill": __props.rounded === "pill"
-          }
+          // `rounded` describes the PLACEHOLDER's own shape, so it only applies to
+          // the bare form. A wrapper is invisible — rounding it would clip the
+          // layout inside without anything being drawn to justify the corner.
+          isBlock.value ? [
+            "lp-skeleton-item bg-surface-soft",
+            {
+              "rounded-control": __props.rounded === "control" || !__props.rounded,
+              "rounded-card": __props.rounded === "card",
+              "rounded-pill": __props.rounded === "pill"
+            }
+          ] : ""
         ]])
       }, [
         renderSlot(_ctx.$slots, "default")

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpModal", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

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

@@ -0,0 +1,94 @@
+import { VariantProps } from 'tailwind-variants';
+declare const section: import('tailwind-variants').TVReturnType<{
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, {
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<{
+    level: {
+        sm: {
+            title: string;
+        };
+        md: {
+            title: string;
+        };
+        lg: {
+            title: string;
+        };
+        xl: {
+            title: string;
+        };
+    };
+}, {
+    root: string;
+    title: string;
+    description: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+type SectionVariants = VariantProps<typeof section>;
+type __VLS_Props = {
+    title?: string;
+    /** One line under the title. */
+    description?: string;
+    /** Iconify name shown before the title, e.g. "lucide:server". */
+    icon?: string;
+    /** Visual size. Independent of `as` — see the note above. */
+    level?: SectionVariants["level"];
+    /** The heading element to render. Pick it for the document outline. */
+    as?: "h1" | "h2" | "h3" | "h4" | "p";
+};
+type __VLS_Slots = {
+    /** Title markup, when a plain string is not enough. */
+    title?: () => unknown;
+    /** Right-aligned controls: buttons, filters, a count. */
+    actions?: () => unknown;
+    /** Extra content beside the title — a badge, a count, a status dot. */
+    meta?: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: "h1" | "h2" | "h3" | "h4" | "p";
+    level: "sm" | "md" | "lg" | "xl";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/LpSection.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpSection-BIvwZyE1.js";
+export {
+  _sfc_main as default
+};

package/dist/components/LpSkeleton.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSkeleton-t5mMYl3a.js";
+import { _ as _sfc_main } from "../chunks/LpSkeleton-DpXLDcQm.js";
 export {
   _sfc_main as default
 };

package/dist/index.d.ts

@@ -73,6 +73,7 @@ export { default as LpRollingText } from './components/LpRollingText.vue';
 export { default as LpScrollArea } from './components/LpScrollArea.vue';
 export { default as LpSegmented } from './components/LpSegmented.vue';
 export type { SegmentedOption } from './components/LpSegmented.vue';
+export { default as LpSection } from './components/LpSection.vue';
 export { default as LpSelect } from './components/LpSelect.vue';
 export type { SelectOption, SelectValue } from './components/LpSelect.vue';
 export { default as LpServiceNode } from './components/LpServiceNode.vue';

package/dist/index.js

@@ -51,28 +51,29 @@ import { _ as _44 } from "./chunks/LpRadioGroup-B4yDTmi6.js";
 import { _ as _45 } from "./chunks/LpRollingText-CM5gkSeF.js";
 import { _ as _46 } from "./chunks/LpScrollArea-D8xyKXcF.js";
 import { _ as _47 } from "./chunks/LpSegmented-BmpanyAo.js";
-import { _ as _48 } from "./chunks/LpSelect-Cw8-gL5F.js";
-import { _ as _49 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _50 } from "./chunks/LpShift-DXNsauQZ.js";
+import { _ as _48 } from "./chunks/LpSection-BIvwZyE1.js";
+import { _ as _49 } from "./chunks/LpSelect-Cw8-gL5F.js";
+import { _ as _50 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _51 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default3 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _51 } from "./chunks/LpSidebar-7Vpy2IJc.js";
-import { _ as _52 } from "./chunks/LpSkeleton-t5mMYl3a.js";
-import { _ as _53 } from "./chunks/LpSlider-B1SF3pRV.js";
-import { _ as _54 } from "./chunks/LpSparkline-C6xQ2dwv.js";
-import { _ as _55 } from "./chunks/LpStat-CDanpzU0.js";
-import { _ as _56 } from "./chunks/LpStepper-Wtl-6nUh.js";
-import { _ as _57 } from "./chunks/LpSwitch-v6fnccSM.js";
-import { _ as _58 } from "./chunks/LpTable-DTj52qlg.js";
-import { _ as _59 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _60 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _61 } from "./chunks/LpTextarea-1ENb3ZAO.js";
+import { _ as _52 } from "./chunks/LpSidebar-7Vpy2IJc.js";
+import { _ as _53 } from "./chunks/LpSkeleton-DpXLDcQm.js";
+import { _ as _54 } from "./chunks/LpSlider-B1SF3pRV.js";
+import { _ as _55 } from "./chunks/LpSparkline-C6xQ2dwv.js";
+import { _ as _56 } from "./chunks/LpStat-CDanpzU0.js";
+import { _ as _57 } from "./chunks/LpStepper-Wtl-6nUh.js";
+import { _ as _58 } from "./chunks/LpSwitch-v6fnccSM.js";
+import { _ as _59 } from "./chunks/LpTable-DTj52qlg.js";
+import { _ as _60 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _61 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _62 } from "./chunks/LpTextarea-1ENb3ZAO.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { D, _ as _62, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
-import { _ as _63 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _64 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _65 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _66 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
-import { _ as _67 } from "./chunks/LpUptimeBar-DcQ8HikG.js";
+import { D, _ as _63, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-7mAK6bI7.js";
+import { _ as _64 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _65 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _66 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _67 } from "./chunks/LpTopologyCanvas-ebP67CLx.js";
+import { _ as _68 } from "./chunks/LpUptimeBar-DcQ8HikG.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";
@@ -167,28 +168,29 @@ export {
   _44 as LpRadioGroup,
   _45 as LpRollingText,
   _46 as LpScrollArea,
+  _48 as LpSection,
   _47 as LpSegmented,
-  _48 as LpSelect,
-  _49 as LpServiceNode,
-  _50 as LpShift,
+  _49 as LpSelect,
+  _50 as LpServiceNode,
+  _51 as LpShift,
   default3 as LpShortcutsDialog,
-  _51 as LpSidebar,
-  _52 as LpSkeleton,
-  _53 as LpSlider,
-  _54 as LpSparkline,
-  _55 as LpStat,
-  _56 as LpStepper,
-  _57 as LpSwitch,
-  _58 as LpTable,
-  _59 as LpTableOfContents,
-  _60 as LpTabs,
-  _61 as LpTextarea,
-  _62 as LpThemeSwitcher,
-  _63 as LpTilt,
-  _64 as LpToaster,
-  _65 as LpTooltip,
-  _66 as LpTopologyCanvas,
-  _67 as LpUptimeBar,
+  _52 as LpSidebar,
+  _53 as LpSkeleton,
+  _54 as LpSlider,
+  _55 as LpSparkline,
+  _56 as LpStat,
+  _57 as LpStepper,
+  _58 as LpSwitch,
+  _59 as LpTable,
+  _60 as LpTableOfContents,
+  _61 as LpTabs,
+  _62 as LpTextarea,
+  _63 as LpThemeSwitcher,
+  _64 as LpTilt,
+  _65 as LpToaster,
+  _66 as LpTooltip,
+  _67 as LpTopologyCanvas,
+  _68 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.26.0",
+  "version": "0.27.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -52,6 +52,7 @@ export const COMPONENT_NAMES = [
   "LpRadioGroup",
   "LpRollingText",
   "LpScrollArea",
+  "LpSection",
   "LpSegmented",
   "LpSelect",
   "LpServiceNode",

package/src/components/LpSection.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/*
+ * A section heading: a title, an optional line under it, and actions on the
+ * right.
+ *
+ *   <LpSection title="Recent invoices">
+ *     <template #actions><LpButton size="sm">Export</LpButton></template>
+ *   </LpSection>
+ *
+ * This is the block every app rebuilt: ~140 hand-written headings across the
+ * three of them, each picking its own size, its own gap, its own alignment.
+ * LeaveHosting had already extracted its own `PageHeader.vue` — same title,
+ * same description, same actions slot — which is the clearest evidence the
+ * shape is shared rather than one app's habit.
+ *
+ * What it deliberately does NOT do:
+ *
+ * - It draws no container. In the panel these headings sit inside LpCard; in
+ *   the cabinet they sit inside `glass rounded-3xl` blocks and, more often,
+ *   directly on the page. Owning a border here would fight two of the three.
+ * - It has no icon slot of its own beyond `icon`. The panel coloured each
+ *   heading's icon from the raw palette — amber beside rose beside sky — in
+ *   pages where none of those states were amber, rose or blue. One muted
+ *   colour, or none.
+ *
+ * `level` is the visual size and is independent of `as`, the heading element:
+ * a page's main heading may need to be an h1 rendered small, and a card's
+ * heading an h3 rendered large. Tying them together is what made consumers
+ * reach past the component for a raw <h2> again.
+ */
+import { computed } from "vue"
+import { tv, type VariantProps } from "tailwind-variants"
+import LpIcon from "./LpIcon.vue"
+
+const section = tv({
+  slots: {
+    // items-start, not items-center: once a description is present the actions
+    // must stay level with the TITLE, not drift to the middle of the block.
+    root: "flex flex-wrap items-start justify-between gap-x-4 gap-y-2",
+    title: "font-semibold text-ink",
+    description: "mt-1 text-sm text-muted",
+    actions: "flex shrink-0 flex-wrap items-center gap-2",
+  },
+  variants: {
+    level: {
+      sm: { title: "text-sm" },
+      md: { title: "text-base" },
+      lg: { title: "text-lg tracking-tight" },
+      xl: { title: "text-xl tracking-tight" },
+    },
+  },
+  defaultVariants: { level: "md" },
+})
+
+type SectionVariants = VariantProps<typeof section>
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    /** One line under the title. */
+    description?: string
+    /** Iconify name shown before the title, e.g. "lucide:server". */
+    icon?: string
+    /** Visual size. Independent of `as` — see the note above. */
+    level?: SectionVariants["level"]
+    /** The heading element to render. Pick it for the document outline. */
+    as?: "h1" | "h2" | "h3" | "h4" | "p"
+  }>(),
+  { level: "md", as: "h2" },
+)
+
+defineSlots<{
+  /** Title markup, when a plain string is not enough. */
+  title?: () => unknown
+  /** Right-aligned controls: buttons, filters, a count. */
+  actions?: () => unknown
+  /** Extra content beside the title — a badge, a count, a status dot. */
+  meta?: () => unknown
+}>()
+
+const classes = computed(() => section({ level: props.level }))
+</script>
+
+<template>
+  <div :class="classes.root()">
+    <div class="min-w-0">
+      <div class="flex flex-wrap items-center gap-2">
+        <LpIcon v-if="icon" :name="icon" :size="16" class="shrink-0 text-muted" />
+        <component :is="as" :class="classes.title()">
+          <slot name="title">{{ title }}</slot>
+        </component>
+        <slot name="meta" />
+      </div>
+      <p v-if="description" :class="classes.description()">{{ description }}</p>
+    </div>
+
+    <div v-if="$slots.actions" :class="classes.actions()">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/src/components/LpSkeleton.vue

@@ -43,12 +43,19 @@ const isBlock = computed(() => !slots.default)
     aria-hidden="true"
     class="lp-skeleton"
     :class="[
-      isBlock ? 'lp-skeleton-item bg-surface-soft' : '',
-      {
-        'rounded-control': isBlock && (rounded === 'control' || !rounded),
-        'rounded-card': rounded === 'card',
-        'rounded-pill': rounded === 'pill',
-      },
+      // `rounded` describes the PLACEHOLDER's own shape, so it only applies to
+      // the bare form. A wrapper is invisible — rounding it would clip the
+      // layout inside without anything being drawn to justify the corner.
+      isBlock
+        ? [
+            'lp-skeleton-item bg-surface-soft',
+            {
+              'rounded-control': rounded === 'control' || !rounded,
+              'rounded-card': rounded === 'card',
+              'rounded-pill': rounded === 'pill',
+            },
+          ]
+        : '',
     ]"
   >
     <slot />

package/src/index.ts

@@ -110,6 +110,7 @@ export { default as LpRollingText } from "./components/LpRollingText.vue"
 export { default as LpScrollArea } from "./components/LpScrollArea.vue"
 export { default as LpSegmented } from "./components/LpSegmented.vue"
 export type { SegmentedOption } from "./components/LpSegmented.vue"
+export { default as LpSection } from "./components/LpSection.vue"
 export { default as LpSelect } from "./components/LpSelect.vue"
 export type { SelectOption, SelectValue } from "./components/LpSelect.vue"
 export { default as LpServiceNode } from "./components/LpServiceNode.vue"