@leavepulse/ui 0.12.0 → 0.14.4

package/src/components/LpLogViewer.vue

@@ -7,7 +7,7 @@
  * viewport element and re-emits the native scroll event — exactly what tailing
  * needs.
  */
-import { computed, nextTick, ref, watch } from "vue"
+import { computed, nextTick, onMounted, ref, TransitionGroup, watch } from "vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -108,14 +108,18 @@ const emit = defineEmits<{
 // Level → gutter rail + text colour. Reads only semantic tokens so re-skinning
 // just works. trace/debug stay muted; success is green; warn amber; error/fatal
 // red (fatal gets a filled chip to stand apart from plain error).
-const levelMeta: Record<LogLevel, { rail: string; text: string; chip: string }> = {
-  trace: { rail: "bg-line-strong", text: "text-muted", chip: "text-muted" },
-  debug: { rail: "bg-line-strong", text: "text-muted-strong", chip: "text-muted-strong" },
-  info: { rail: "bg-brand", text: "text-ink", chip: "text-brand" },
-  success: { rail: "bg-action", text: "text-ink", chip: "text-action" },
-  warn: { rail: "bg-accent", text: "text-ink", chip: "text-accent" },
-  error: { rail: "bg-danger", text: "text-ink", chip: "text-danger" },
-  fatal: { rail: "bg-danger", text: "text-ink", chip: "rounded-xs bg-danger px-1 text-ink-inverse" },
+// `sel` tints ::selection in the row's semantic colour (info→brand, warn→accent,
+// error/fatal→danger) via Tailwind's `selection:` variant — the highlight then
+// matches the level instead of the browser default. Static classes (not built
+// from a var) so Tailwind emits them from the @source scan.
+const levelMeta: Record<LogLevel, { rail: string; text: string; chip: string; sel: string }> = {
+  trace: { rail: "bg-line-strong", text: "text-muted", chip: "text-muted", sel: "selection:bg-muted/40" },
+  debug: { rail: "bg-line-strong", text: "text-muted-strong", chip: "text-muted-strong", sel: "selection:bg-muted-strong/40" },
+  info: { rail: "bg-brand", text: "text-ink", chip: "text-brand", sel: "selection:bg-brand/40" },
+  success: { rail: "bg-action", text: "text-ink", chip: "text-action", sel: "selection:bg-action/40" },
+  warn: { rail: "bg-accent", text: "text-ink", chip: "text-accent", sel: "selection:bg-accent/40" },
+  error: { rail: "bg-danger", text: "text-ink", chip: "text-danger", sel: "selection:bg-danger/40" },
+  fatal: { rail: "bg-danger", text: "text-ink", chip: "rounded-xs bg-danger px-1 text-ink-inverse", sel: "selection:bg-danger/40" },
 }
 
 function metaFor(level?: LogLevel) {
@@ -264,6 +268,34 @@ function lineText(line: LogLine): string {
     .join(" ")
 }
 
+// One LpContextMenu wraps the whole list (not each row) so a mouse drag can
+// select text across rows — a per-row reka trigger would bind pointerdown and
+// pin the selection to one row. On right-click we resolve which row is under the
+// cursor (data-log-row) and rebuild the menu items for it before reka opens.
+const menuRow = ref<{ line: LogLine; n: number } | null>(null)
+const menuItems = computed<ContextMenuItemDef[]>(() =>
+  menuRow.value ? menuFor(menuRow.value.line, menuRow.value.n) : [],
+)
+
+// Resolve the right-clicked row so menuItems reflects it before reka's trigger
+// opens the menu (runs on the same contextmenu event, ahead of the open).
+function onRowContext(e: MouseEvent) {
+  if (!props.rowMenu) return
+  const el = (e.target as HTMLElement | null)?.closest<HTMLElement>("[data-log-row]")
+  const n = el ? Number(el.dataset.logRow) : NaN
+  const row = Number.isNaN(n) ? undefined : visibleLines.value.find((r) => r.n === n)
+  menuRow.value = row ? { line: row.line, n: row.n } : null
+}
+
+// vaul (the drawer lib) treats a left-button pointerdown on a side drawer as the
+// start of a swipe-to-dismiss (`shouldDrag` returns true unconditionally for
+// left/right drawers) and its preventDefault kills text selection. Stop that
+// pointerdown from bubbling to vaul — left button only, so scroll and the
+// right-click context menu still reach it.
+function onRowPointerDown(e: PointerEvent) {
+  if (e.button === 0) e.stopPropagation()
+}
+
 // Built-in copy actions + optional "filter by" + consumer extras. Rebuilt per
 // right-click so it reflects the line under the cursor.
 function menuFor(line: LogLine, index: number): ContextMenuItemDef[] {
@@ -322,6 +354,52 @@ function splitHighlight(message: string): Part[] {
   return parts
 }
 
+// ── virtualisation ───────────────────────────────────────────────────
+// A live log stream can reach tens of thousands of rows; rendering them all
+// (a v-for over the whole list, each row a flex box with a highlight-split and,
+// worse, a TransitionGroup computing FLIP offsets for every node on each push)
+// pins the main thread and the viewer stops responding. So past a threshold we
+// render only the slice inside the viewport plus a small overscan, padding the
+// rest with two spacer rows. This needs a uniform row height, which only holds
+// when lines don't wrap — with `wrap` (or short lists) we fall back to the
+// plain full render that keeps the fold/enter transitions.
+const ROW_HEIGHT = 20 // px; matches leading-5 (1.25rem) monospace rows
+const VIRTUALISE_ABOVE = 200 // rows; below this the full render is cheap enough
+const OVERSCAN = 12 // rows rendered beyond each edge to cover fast scrolls
+
+const virtualise = computed(() => !props.wrap && visibleLines.value.length > VIRTUALISE_ABOVE)
+
+const viewportHeight = ref(0)
+const scrollTop = ref(0)
+
+// Window of rows to actually render when virtualising: [start, end) by index
+// into visibleLines, widened by OVERSCAN on both sides and clamped.
+const virtualRange = computed(() => {
+  const total = visibleLines.value.length
+  if (!virtualise.value) return { start: 0, end: total }
+  const visibleCount = Math.ceil(viewportHeight.value / ROW_HEIGHT) + 1
+  const start = Math.max(0, Math.floor(scrollTop.value / ROW_HEIGHT) - OVERSCAN)
+  const end = Math.min(total, start + visibleCount + OVERSCAN * 2)
+  return { start, end }
+})
+
+const renderedLines = computed(() => {
+  if (!virtualise.value) return visibleLines.value
+  const { start, end } = virtualRange.value
+  return visibleLines.value.slice(start, end)
+})
+
+// Spacer heights that stand in for the un-rendered rows above/below the window,
+// so the scrollbar and scroll position stay honest.
+const padTop = computed(() =>
+  virtualise.value ? virtualRange.value.start * ROW_HEIGHT : 0,
+)
+const padBottom = computed(() =>
+  virtualise.value
+    ? (visibleLines.value.length - virtualRange.value.end) * ROW_HEIGHT
+    : 0,
+)
+
 // ── tail / auto-scroll ───────────────────────────────────────────────
 const scrollRef = ref<{ viewportEl: HTMLElement | null } | null>(null)
 const pinned = ref(true) // currently glued to the bottom
@@ -349,6 +427,10 @@ let topArmed = true
 function onScroll(e: Event) {
   const el = e.target as HTMLElement
   pinned.value = atBottom(el)
+  // Feed the virtual window. Reading clientHeight here keeps it in sync with
+  // runtime resizes (drawer drag, window resize) without a ResizeObserver.
+  scrollTop.value = el.scrollTop
+  if (el.clientHeight !== viewportHeight.value) viewportHeight.value = el.clientHeight
   if (!props.loadOlder) return
   if (el.scrollTop <= TOP_NEAR) {
     if (topArmed && !props.loadingOlder) {
@@ -422,6 +504,28 @@ watch(
 )
 
 const showJump = computed(() => props.tail && !pinned.value && props.lines.length > 0)
+
+// Seed the viewport height before the first scroll so the initial virtual
+// window is correct (otherwise a tall list would render a single overscan slice
+// until the user scrolls).
+onMounted(() => {
+  const el = viewport()
+  if (el) viewportHeight.value = el.clientHeight
+})
+
+// FLIP / enter / leave classes for the full-render TransitionGroup, bound via
+// v-bind so the same list element can fall back to a plain <ol> when virtualised
+// (a component :is can't carry TransitionGroup-only props inertly otherwise).
+const transitionProps = {
+  tag: "ol",
+  "enter-active-class": "transition duration-200 ease-[var(--ease-emphasized)]",
+  "enter-from-class": "-translate-x-1 opacity-0",
+  "leave-active-class":
+    "overflow-hidden transition-all duration-200 ease-[var(--ease-emphasized)]",
+  "leave-from-class": "max-h-8 opacity-100",
+  "leave-to-class": "max-h-0 -translate-y-1 opacity-0",
+  "move-class": "transition-transform duration-200 ease-[var(--ease-emphasized)]",
+}
 </script>
 
 <template>
@@ -455,33 +559,53 @@ const showJump = computed(() => props.tail && !pinned.value && props.lines.lengt
           <span class="text-[11px]">loading older…</span>
         </div>
 
-      <!-- Leave collapses a folded-away duplicate (max-height + opacity + a small
+      <!-- ONE context menu wraps the whole list (not each row): @contextmenu
+           resolves which row was right-clicked so menuItems reflects it before
+           reka opens. @pointerdown stops a left-button drag from reaching vaul
+           (which would start a swipe-dismiss and cancel text selection); the
+           right button still bubbles so the menu opens. reka's own trigger
+           pointerdown is touch/pen-only, so it doesn't interfere with the mouse.
+           Leave collapses a folded-away duplicate (max-height + opacity + a small
            lift) while the survivors FLIP-slide up via move-class — so toggling
-           `compact` reads as the dupes melting into the kept line, not a jump. -->
-      <TransitionGroup
-        tag="ol"
+           `compact` reads as the dupes melting into the kept line. -->
+      <!-- Component switches on `virtualise`: a plain <ol> when we render only a
+           windowed slice (FLIP/enter/leave transitions can't run over a moving
+           virtual window, and computing them for thousands of nodes is exactly
+           the cost we're avoiding), or a TransitionGroup for the full render on
+           small lists, where the fold/enter animations are affordable and nice.
+           Spacer rows stand in for the un-rendered slices above/below. -->
+      <LpContextMenu :items="menuItems" :always="rowMenu">
+      <component
+        :is="virtualise ? 'ol' : TransitionGroup"
+        v-bind="virtualise ? {} : transitionProps"
         class="py-1"
-        enter-active-class="transition duration-200 ease-[var(--ease-emphasized)]"
-        enter-from-class="-translate-x-1 opacity-0"
-        leave-active-class="overflow-hidden transition-all duration-200 ease-[var(--ease-emphasized)]"
-        leave-from-class="max-h-8 opacity-100"
-        leave-to-class="max-h-0 -translate-y-1 opacity-0"
-        move-class="transition-transform duration-200 ease-[var(--ease-emphasized)]"
+        @contextmenu="onRowContext"
+        @pointerdown="onRowPointerDown"
       >
-        <LpContextMenu
-          v-for="{ line, n, count } in visibleLines"
-          :key="n"
-          :items="menuFor(line, n)"
-        >
         <li
-          class="group flex items-start gap-0 px-0 transition-colors hover:bg-surface-soft/60"
+          v-if="virtualise && padTop > 0"
+          key="pad-top"
+          :style="{ height: padTop + 'px' }"
+          aria-hidden="true"
+        />
+        <li
+          v-for="{ line, n, count } in renderedLines"
+          :key="n"
+          :data-log-row="n"
+          class="group relative flex items-start gap-0 px-0 leading-5 transition-colors hover:bg-surface-soft/60"
+          :class="metaFor(line.level).sel"
         >
           <!-- level rail -->
+          <!-- Level rail: absolutely positioned so it spans the FULL row height
+               regardless of content — self-stretch only reached the flex line box
+               (shorter than the relaxed line-height), which left visible gaps
+               between rows. A spacer keeps the text indented past it. -->
           <span
-            class="mr-2 w-0.5 shrink-0 self-stretch"
+            class="absolute inset-y-0 left-0 w-0.5"
             :class="metaFor(line.level).rail"
             aria-hidden="true"
           />
+          <span class="mr-2 w-0.5 shrink-0" aria-hidden="true" />
 
           <!-- line number -->
           <span
@@ -492,20 +616,20 @@ const showJump = computed(() => props.tail && !pinned.value && props.lines.lengt
           <!-- timestamp -->
           <span
             v-if="showTime"
-            class="mr-3 shrink-0 select-none tabular-nums text-muted"
+            class="mr-3 shrink-0 tabular-nums text-muted"
           >{{ fmtTime(line.time) }}</span>
 
           <!-- level chip -->
           <span
             v-if="showLevel"
-            class="mr-3 w-12 shrink-0 select-none text-[10px] font-semibold uppercase tracking-[0.06em]"
+            class="mr-3 w-12 shrink-0 text-[10px] font-semibold uppercase tracking-[0.06em]"
             :class="metaFor(line.level).chip"
           >{{ line.level ?? "info" }}</span>
 
           <!-- source tag -->
           <span
             v-if="line.source"
-            class="mr-2 shrink-0 select-none text-muted-strong"
+            class="mr-2 shrink-0 text-muted-strong"
           >[{{ line.source }}]</span>
 
           <!-- message -->
@@ -536,8 +660,14 @@ const showJump = computed(() => props.tail && !pinned.value && props.lines.lengt
             </Transition>
           </span>
         </li>
-        </LpContextMenu>
-      </TransitionGroup>
+        <li
+          v-if="virtualise && padBottom > 0"
+          key="pad-bottom"
+          :style="{ height: padBottom + 'px' }"
+          aria-hidden="true"
+        />
+      </component>
+      </LpContextMenu>
       </template>
     </LpScrollArea>
 

package/src/components/LpSidebar.vue

@@ -122,10 +122,12 @@ defineOptions({ inheritAttrs: false })
     aria-label="Sidebar"
     v-bind="$attrs"
   >
+    <!-- Edge-to-edge (negative margins cancel the rail p-3) and h-16 to match the
+         app header, so its bottom hairline continues the header's border-b. -->
     <div
       v-if="$slots.header"
-      class="shrink-0"
-      :class="divider ? 'mb-3 border-b border-line pb-3' : 'mb-2'"
+      class="-mx-3 -mt-3 mb-3 flex h-16 shrink-0 items-center px-3"
+      :class="divider ? 'border-b border-line' : ''"
     >
       <slot name="header" />
     </div>
@@ -163,6 +165,7 @@ defineOptions({ inheritAttrs: false })
     direction="left"
     size="sm"
     :edge-open="edgeOpen"
+    :edge-breakpoint="mobileBreakpoint"
     @update:open="(v) => emit('update:open', v)"
   >
     <div class="flex h-full flex-col gap-1">

package/src/components/LpTabs.vue

@@ -20,8 +20,10 @@ withDefaults(
      * "contained" (default) wraps the triggers in a bordered, filled bar.
      * "plain" drops the container chrome — a flat row of tabs with only the
      * sliding pill marking the active one (for nav bars over a custom surface).
+     * "underline" is a flat row over a hairline baseline, marking the active
+     * tab with a sliding bottom bar instead of a pill (page-section nav style).
      */
-    variant?: "contained" | "plain"
+    variant?: "contained" | "plain" | "underline"
     /** Tint the active pill + label with the brand colour (nav-bar style). */
     accent?: boolean
     /** Stretch the bar to full width with equal-share triggers. */
@@ -67,6 +69,7 @@ function pillUnder(value: string, active?: string): boolean {
       :class="[
         block ? 'flex w-full' : 'inline-flex',
         variant === 'contained' ? 'rounded-control border border-line bg-surface-soft p-1' : '',
+        variant === 'underline' ? 'border-b border-line' : '',
       ]"
       @pointerleave="hovered = null"
     >
@@ -74,22 +77,32 @@ function pillUnder(value: string, active?: string): boolean {
         v-for="item in items"
         :key="item.value"
         :value="item.value"
-        class="relative inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+        class="relative inline-flex items-center justify-center gap-1.5 text-sm outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
         :class="[
           block ? 'flex-1' : '',
+          variant === 'underline' ? 'rounded-t-md px-3 pt-1.5 pb-2' : 'rounded-md px-3 py-1.5',
           accent ? 'data-[state=active]:text-brand' : 'data-[state=active]:text-ink',
           hovered === item.value ? 'text-ink' : 'text-muted',
         ]"
         @pointerenter="hovered = item.value"
       >
+        <!-- Active marker: a bottom bar in "underline", a filled pill otherwise.
+             Both slide between tabs via the shared motion layoutId. -->
         <Motion
           v-if="pillUnder(item.value, modelValue)"
           :layout-id="pillId"
           :transition="pillTransition"
-          class="absolute inset-0 z-0 rounded-md shadow-sm"
-          :class="accent
-            ? 'border border-brand/35 bg-brand/12'
-            : 'border border-line bg-surface-raised'"
+          :class="variant === 'underline'
+            ? [
+                'absolute inset-x-0 -bottom-px z-0 h-0.5 rounded-full',
+                accent ? 'bg-brand' : 'bg-ink',
+              ]
+            : [
+                'absolute inset-0 z-0 rounded-md shadow-sm',
+                accent
+                  ? 'border border-brand/35 bg-brand/12'
+                  : 'border border-line bg-surface-raised',
+              ]"
         />
         <LpIcon v-if="item.icon" :name="item.icon" :size="14" class="relative z-10" />
         <span class="relative z-10">{{ item.label }}</span>

package/src/components/LpThemeSwitcher.vue

@@ -90,6 +90,10 @@ const ICON_SIZE = { sm: 15, md: 16, lg: 18 } as const
 
 const wantsLabel = computed(() => props.showLabel || props.variant === "pill")
 
+// Labelless icon variant renders as a plain square icon button (no border/fill),
+// so it sits inline with other toolbar icon buttons. Other variants stay framed.
+const bareIcon = computed(() => props.variant === "icon" && !wantsLabel.value)
+
 // Apply a theme through the kit's self-managed setter (it persists + updates
 // the shared `current`), then notify. The reveal animates from the click point.
 function applyTheme(t: TokenSet, ev?: MouseEvent) {
@@ -138,8 +142,15 @@ const triggerLabel = computed(
       type="button"
       :aria-label="triggerLabel"
       :title="triggerLabel"
-      class="inline-flex items-center gap-2 rounded-control border border-line bg-surface-raised px-1.5 text-ink outline-none transition-colors hover:border-line-strong focus-visible:ring-2 focus-visible:ring-ring"
-      :class="wantsLabel ? 'py-1 pr-2.5' : ''"
+      class="inline-flex items-center justify-center gap-2 rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+      :class="
+        bareIcon
+          ? [SIZES[size], 'text-muted hover:bg-surface-soft hover:text-ink']
+          : [
+              'border border-line bg-surface-raised px-1.5 text-ink hover:border-line-strong',
+              wantsLabel ? 'py-1 pr-2.5' : '',
+            ]
+      "
       @click="cycle"
     >
       <!-- swatch: brand over surface, hinting the theme at a glance -->

package/src/components/LpTilt.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+/*
+ * LpTilt — a tactile 3D-tilt wrapper. Its slot content rotates toward the
+ * pointer and lifts on hover (see useTilt), so any element — a card, a stat
+ * tile, a floating island illustration — gains hand-held depth by wrapping it.
+ *
+ *   <LpTilt :max="12" :lift="14" glare>
+ *     <LpCard>…</LpCard>
+ *   </LpTilt>
+ *
+ * The wrapper owns the `perspective` stage; the inner element is what actually
+ * tilts, so sibling content outside the wrapper is unaffected. Honors reduced
+ * motion (falls back to a flat, still element).
+ */
+import { computed } from "vue"
+import { useTilt } from "../composables/useTilt"
+
+const props = withDefaults(
+  defineProps<{
+    /** Max rotation toward the pointer, in degrees. */
+    max?: number
+    /** Upward lift on hover, in px. */
+    lift?: number
+    /** Scale on hover. */
+    scale?: number
+    /** Render a pointer-tracking glare highlight over the content. */
+    glare?: boolean
+    /** Perspective depth for the 3D stage, in px. Lower = stronger. */
+    perspective?: number
+  }>(),
+  { max: 10, lift: 8, scale: 1.03, glare: false, perspective: 900 },
+)
+
+const tilt = useTilt({
+  max: props.max,
+  lift: props.lift,
+  scale: props.scale,
+  glare: props.glare,
+})
+
+const stageStyle = computed(() => ({ perspective: `${props.perspective}px` }))
+</script>
+
+<template>
+  <div :style="stageStyle" class="lp-tilt-stage">
+    <div
+      class="lp-tilt-inner relative"
+      :style="tilt.style.value"
+      @pointermove="tilt.onPointerMove"
+      @pointerenter="tilt.onPointerEnter"
+      @pointerleave="tilt.onPointerLeave"
+    >
+      <slot />
+      <div
+        v-if="glare"
+        class="pointer-events-none absolute inset-0 rounded-[inherit] mix-blend-overlay"
+        :style="tilt.glareStyle.value"
+      />
+    </div>
+  </div>
+</template>

package/src/components/LpToaster.vue

@@ -178,9 +178,10 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
               v-for="(action, i) in t.actions"
               :key="i"
               type="button"
-              class="rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
+              class="inline-flex items-center gap-1.5 rounded-control border border-line bg-surface-soft px-2.5 py-1 text-xs font-medium text-ink outline-none transition-[border-color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:border-line-strong hover:bg-surface-soft/70 active:scale-95 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring"
               @click="runAction(t, action)"
             >
+              <LpIcon v-if="action.icon" :name="action.icon" :size="14" />
               {{ action.label }}
             </button>
           </div>
@@ -209,8 +210,14 @@ async function runAction(t: ToastItem, action: NonNullable<ToastItem["actions"]>
       />
     </ToastRoot>
 
-    <ToastViewport
-      class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
-    />
+    <!-- Teleported to body so the viewport escapes any stacking context the
+         consumer's app root creates (e.g. an opaque `#app { z-index }` wrapper).
+         Modals portal to body too, so both compare at the same root level and
+         --z-toast (200) > --z-modal (110) wins as intended. -->
+    <Teleport to="body">
+      <ToastViewport
+        class="fixed bottom-0 right-0 z-(--z-toast) flex w-[min(92vw,22rem)] flex-col gap-2 p-4 outline-none"
+      />
+    </Teleport>
   </ToastProvider>
 </template>

package/src/composables/useTilt.ts

@@ -0,0 +1,103 @@
+import { useReducedMotion } from "motion-v"
+import { computed, ref, type ComputedRef, type CSSProperties, type Ref } from "vue"
+
+/*
+ * useTilt — pointer-reactive 3D tilt for a "tactile" surface (a card, a tile, a
+ * floating island). The element rotates toward the cursor and lifts on hover,
+ * giving physical, hand-held depth without any per-component motion wiring.
+ *
+ * Bind the returned handlers to the element and the returned `style` to it (it
+ * needs a shared `perspective` on an ANCESTOR — see LpTilt, which supplies one).
+ * Rotation eases to rest via CSS transition; the handlers only write the target
+ * transform, so there's no rAF loop. SSR-safe (no window access at setup) and
+ * collapses to a flat, no-tilt style when the OS prefers reduced motion.
+ */
+export interface UseTiltOptions {
+  /** Max rotation toward the pointer, in degrees (per axis). Default 10. */
+  max?: number
+  /** Upward lift on hover, in px. Default 8. */
+  lift?: number
+  /** Scale on hover. Default 1.03. */
+  scale?: number
+  /** Glare highlight following the pointer. Default false. */
+  glare?: boolean
+}
+
+export interface UseTilt {
+  /** Bind to the tilting element's style. */
+  style: ComputedRef<CSSProperties>
+  /** Radial-gradient background for an optional glare overlay (0 when idle). */
+  glareStyle: ComputedRef<CSSProperties>
+  onPointerMove: (e: PointerEvent) => void
+  onPointerEnter: () => void
+  onPointerLeave: () => void
+  /** True while the pointer is over the element (drives lift/scale). */
+  active: Ref<boolean>
+}
+
+export function useTilt(options: UseTiltOptions = {}): UseTilt {
+  const max = options.max ?? 10
+  const lift = options.lift ?? 8
+  const scale = options.scale ?? 1.03
+  const reduceMotion = useReducedMotion()
+
+  const active = ref(false)
+  // Pointer position within the element, normalized to [-1, 1] from center.
+  const nx = ref(0)
+  const ny = ref(0)
+
+  function onPointerMove(e: PointerEvent): void {
+    if (reduceMotion.value) return
+    const el = e.currentTarget as HTMLElement | null
+    if (!el) return
+    const r = el.getBoundingClientRect()
+    nx.value = ((e.clientX - r.left) / r.width) * 2 - 1
+    ny.value = ((e.clientY - r.top) / r.height) * 2 - 1
+  }
+
+  function onPointerEnter(): void {
+    active.value = true
+  }
+
+  function onPointerLeave(): void {
+    active.value = false
+    nx.value = 0
+    ny.value = 0
+  }
+
+  const style = computed<CSSProperties>(() => {
+    if (reduceMotion.value) {
+      return { transition: "transform 0.2s ease" }
+    }
+    // rotateX tips away from the pointer's vertical position; rotateY toward its
+    // horizontal one. Only tilt while active so it rests flat when the pointer
+    // leaves (nx/ny are already zeroed on leave).
+    const rx = active.value ? -ny.value * max : 0
+    const ry = active.value ? nx.value * max : 0
+    const z = active.value ? lift : 0
+    const s = active.value ? scale : 1
+    return {
+      transform: `translate3d(0, ${-z}px, 0) rotateX(${rx}deg) rotateY(${ry}deg) scale(${s})`,
+      transformStyle: "preserve-3d",
+      transition: active.value
+        ? "transform 0.12s ease-out"
+        : "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)",
+    }
+  })
+
+  const glareStyle = computed<CSSProperties>(() => {
+    if (!options.glare || reduceMotion.value || !active.value) {
+      return { opacity: 0 }
+    }
+    // Bright spot tracks the pointer; map [-1,1] → [0%,100%].
+    const px = (nx.value + 1) * 50
+    const py = (ny.value + 1) * 50
+    return {
+      opacity: 1,
+      background: `radial-gradient(circle at ${px}% ${py}%, rgba(255,255,255,0.35), transparent 55%)`,
+      transition: "opacity 0.2s ease",
+    }
+  })
+
+  return { style, glareStyle, onPointerMove, onPointerEnter, onPointerLeave, active }
+}

package/src/composables/useToast.ts

@@ -4,6 +4,8 @@ export type ToastVariant = "info" | "success" | "warning" | "error"
 
 export interface ToastAction {
   label: string
+  /** Optional leading icon (any name LpIcon accepts, e.g. "lucide:copy"). */
+  icon?: string
   onClick: () => void | Promise<void>
 }
 

package/src/index.ts

@@ -72,6 +72,7 @@ export { default as LpTabs } from "./components/LpTabs.vue"
 export type { TabItem } from "./components/LpTabs.vue"
 export { default as LpTextarea } from "./components/LpTextarea.vue"
 export { default as LpThemeSwitcher } from "./components/LpThemeSwitcher.vue"
+export { default as LpTilt } from "./components/LpTilt.vue"
 export { default as LpToaster } from "./components/LpToaster.vue"
 export { default as LpTooltip } from "./components/LpTooltip.vue"
 export { default as LpTopologyCanvas } from "./components/LpTopologyCanvas.vue"
@@ -137,6 +138,8 @@ export type { UiConfig } from "./theme/config"
 
 export { useInputFilter } from "./composables/useInputFilter"
 export type { UseInputFilterOptions } from "./composables/useInputFilter"
+export { useTilt } from "./composables/useTilt"
+export type { UseTilt, UseTiltOptions } from "./composables/useTilt"
 export { useToast } from "./composables/useToast"
 export type {
   ToastAction,

package/src/nuxt.ts

@@ -16,7 +16,16 @@ export default defineNuxtModule({
   meta: { name: "@leavepulse/ui", configKey: "leavepulseUi" },
   setup() {
     for (const name of COMPONENT_NAMES) {
-      addComponent({ name, export: name, filePath: "@leavepulse/ui" })
+      // Point each component at its own dist chunk rather than the barrel
+      // ("@leavepulse/ui"). Importing through the barrel makes the bundler pull
+      // the whole kit; a per-component path lets it ship only the components an
+      // app actually uses (plus their real deps — e.g. @vue-flow only when a
+      // canvas component is used).
+      addComponent({
+        name,
+        export: "default",
+        filePath: `@leavepulse/ui/dist/components/${name}.vue.js`,
+      })
     }
   },
 })

package/dist/index.css

@@ -1 +0,0 @@
-.lp-cmd-item[data-v-d845063e]{animation:lp-cmd-in-d845063e .14s ease-out both}@keyframes lp-cmd-in-d845063e{0%{opacity:0;transform:translateY(3px)}}@media(prefers-reduced-motion:reduce){.lp-cmd-item[data-v-d845063e]{animation:none}}