@leavepulse/ui 0.12.0 → 0.14.6

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, onBeforeUnmount, 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,47 @@ watch(
 )
 
 const showJump = computed(() => props.tail && !pinned.value && props.lines.length > 0)
+
+// Track the viewport height for the whole lifetime, not just at mount. Reading
+// it once was a deadlock when the viewer mounted inside a container that had no
+// height yet (a drawer mid open-animation, a hidden tab): the virtual window
+// collapsed to a single row, so there was nothing to scroll, and `onScroll` —
+// the only other place that refreshed the height — could never fire to correct
+// it. The list looked stuck and wouldn't scroll at all.
+let viewportResize: ResizeObserver | null = null
+
+function measureViewport() {
+  const el = viewport()
+  if (el) viewportHeight.value = el.clientHeight
+}
+
+onMounted(() => {
+  measureViewport()
+  const el = viewport()
+  if (el && typeof ResizeObserver !== "undefined") {
+    viewportResize = new ResizeObserver(measureViewport)
+    viewportResize.observe(el)
+  }
+})
+
+onBeforeUnmount(() => {
+  viewportResize?.disconnect()
+  viewportResize = null
+})
+
+// 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 +578,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 +635,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 +679,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/LpScrollArea.vue

@@ -47,36 +47,41 @@ const barFade =
 
 <template>
   <ScrollAreaRoot class="relative overflow-hidden" type="hover" :scroll-hide-delay="500">
-    <ScrollAreaViewport
-      ref="viewportRef"
-      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
-      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
-      @scroll.passive="$emit('scroll', $event)"
-    >
-      <div :class="contentClass">
-        <slot />
-      </div>
-    </ScrollAreaViewport>
-
+    <!-- The bar itself is a pointer target far wider than it looks: the visible
+         rail is the thumb, sized below, while the track pads it out to a
+         grabbable strip. A 4px-wide hit area is near-impossible to catch with a
+         mouse. Padding (not width) carries the extra room so the thumb stays
+         flush against the wall. -->
     <ScrollAreaScrollbar
       orientation="vertical"
-      class="group flex w-1 touch-none select-none p-px transition-[width] duration-[var(--duration-fast)] hover:w-1.5"
+      class="group flex w-3.5 touch-none select-none justify-end py-px pl-2.5 pr-px"
       :class="barFade"
       :style="barInsetTop ? { marginTop: barInsetTop } : undefined"
     >
       <ScrollAreaThumb
-        class="flex-1 rounded-l-pill bg-brand/40 transition-colors group-hover:bg-brand"
+        class="w-1 rounded-l-pill bg-brand/40 transition-[width,background-color] duration-[var(--duration-fast)] group-hover:w-1.5 group-hover:bg-brand"
       />
     </ScrollAreaScrollbar>
 
     <ScrollAreaScrollbar
       orientation="horizontal"
-      class="group flex h-1 flex-col touch-none select-none p-px transition-[height] duration-[var(--duration-fast)] hover:h-1.5"
+      class="group flex h-3.5 flex-col touch-none select-none justify-end px-px pb-px pt-2.5"
       :class="barFade"
     >
       <ScrollAreaThumb
-        class="flex-1 rounded-t-pill bg-brand/40 transition-colors group-hover:bg-brand"
+        class="h-1 rounded-t-pill bg-brand/40 transition-[height,background-color] duration-[var(--duration-fast)] group-hover:h-1.5 group-hover:bg-brand"
       />
     </ScrollAreaScrollbar>
+
+    <ScrollAreaViewport
+      ref="viewportRef"
+      class="size-full min-w-0 [&>div]:!block [&>div]:!min-w-0"
+      :class="fade ? '[mask-image:linear-gradient(to_bottom,transparent_0,black_14px,black_calc(100%-14px),transparent_100%)]' : ''"
+      @scroll.passive="$emit('scroll', $event)"
+    >
+      <div :class="contentClass">
+        <slot />
+      </div>
+    </ScrollAreaViewport>
   </ScrollAreaRoot>
 </template>

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>