@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpPie.vue

@@ -23,7 +23,9 @@ export default { inheritAttrs: false }
 import { computed, onBeforeUnmount, ref, watch } from "vue"
 import { easeTravel, prefersReducedMotion } from "../composables/easing"
 import { useReveal } from "../composables/useReveal"
+import { lerp, mixColor, useTween } from "../composables/useTween"
 import { arcPath, calloutLabels, resolveSlices, formatTick, type PieSlice } from "./chart"
+import LegendSwatch from "./LegendSwatch.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpEmptyState from "./LpEmptyState.vue"
 import LpNumberFlow from "./LpNumberFlow.vue"
@@ -278,9 +280,25 @@ const inner = computed(() =>
  * from. The pad is taken off each slice's own sweep and only when there is more
  * than one slice — a lone slice with a gap would be a circle with a nick in it.
  */
+/*
+ * A slice is the same slice across data changes when it keeps its label. The
+ * index is no identity: a category inserted at the front would hand every
+ * other slice its neighbour's place, and the arcs would trade colours as they
+ * moved. The occurrence count only separates two slices that share a label.
+ */
+const sliceKeys = computed(() => {
+  const seen = new Map<string, number>()
+  return resolved.value.slices.map((s) => {
+    const n = seen.get(s.label) ?? 0
+    seen.set(s.label, n + 1)
+    return `${s.isOther ? "other" : "slice"}:${s.label}#${n}`
+  })
+})
+
 const arcs = computed(() =>
-  arcAngles.value.map(({ slice, start, end, mid }) => ({
+  arcAngles.value.map(({ slice, start, end, mid, index }) => ({
     ...slice,
+    key: sliceKeys.value[index],
     d: arcPath(cx.value, cy.value, outer.value, inner.value, start, end, props.cornerRadius),
     /*
      * Push along the slice's own bisector, so it moves straight out of the
@@ -367,6 +385,143 @@ const sweepPath = computed(() => {
   return arcPath(cx.value, cy.value, radius, 0, start, start + Math.PI * 2 * sweep.value)
 })
 
+/*
+ * What is DRAWN, as opposed to what is: each slice's span as fractions of the
+ * circle, travelling from the last data to the new.
+ *
+ * Interpolated as cumulative edges, not as sizes. Two neighbours share an edge
+ * at both ends of the move, so they share it at every frame between — a slice
+ * that grows pushes the next one round rather than overlapping it, and the
+ * circle stays closed throughout. A new slice opens from a zero-width sliver at
+ * the edge where it will sit; a removed one closes onto the edge its
+ * neighbours meet at, and is dropped once it has.
+ *
+ * Only the drawing moves. Hit areas, callouts, the legend and every event keep
+ * reading `arcs`, the data as it now is: a click mid-move lands on the slice
+ * the reader is aiming at, which is where it is going, and callouts laid out
+ * per frame would reshuffle their stacked labels as the slices slid.
+ */
+interface Wedge {
+  key: string
+  from: number
+  to: number
+  color: string
+}
+
+const wedges = computed<Wedge[]>(() => {
+  let at = 0
+  return resolved.value.slices.map((s, i) => {
+    const w = { key: sliceKeys.value[i], from: at, to: at + s.fraction, color: s.color }
+    at = w.to
+    return w
+  })
+})
+
+const mixWedges = (from: Wedge[], to: Wedge[], t: number): Wedge[] => {
+  const before = new Map(from.map((w) => [w.key, w]))
+  const after = new Map(to.map((w) => [w.key, w]))
+  const out: Wedge[] = []
+
+  // Entering slices open at the far edge of the nearest earlier slice that was
+  // already drawn — exactly where the slice after them used to start.
+  let edge = 0
+  for (const w of to) {
+    const was = before.get(w.key)
+    const a = was ?? { from: edge, to: edge, color: w.color }
+    if (was) edge = was.to
+    out.push({
+      key: w.key,
+      from: lerp(a.from, w.from, t),
+      to: lerp(a.to, w.to, t),
+      color: mixColor(a.color, w.color, t),
+    })
+  }
+
+  // Leaving slices close onto the edge their surviving predecessor will end
+  // at, and keep their place in the order so the drawing stays in sequence.
+  edge = 0
+  let slot = 0
+  for (const w of from) {
+    const next = after.get(w.key)
+    if (next) {
+      edge = next.to
+      slot = out.findIndex((o) => o.key === w.key) + 1
+      continue
+    }
+    out.splice(slot++, 0, {
+      key: w.key,
+      from: lerp(w.from, edge, t),
+      to: lerp(w.to, edge, t),
+      color: w.color,
+    })
+  }
+  return out
+}
+
+/*
+ * The sweep and the tween never overlap: while the circle is still to open
+ * (not yet scrolled to, or closed again for a load) a change simply lands, and
+ * the data that follows sweeps in like the first.
+ */
+const shownWedges = useTween(() => wedges.value, mixWedges, {
+  enabled: () => props.animate && sweep.value >= 1,
+})
+
+/*
+ * The legend's figures count to their new values, and a figure's text changes
+ * width as it goes ("8.13k" is wider than "12k"): the legend column, and the
+ * circle and everything beside it, shook on every frame. Each figure keeps the
+ * width of the widest text it passes through between the old value and the new
+ * one, measured in characters of its monospace font.
+ */
+const figureChars = ref(0)
+watch(
+  () => arcs.value.map((a) => [a.key, props.showPercent ? a.fraction : a.value] as const),
+  (next, prev) => {
+    const text = props.showPercent ? pct : fmt
+    const before = new Map(prev ?? [])
+    let widest = 0
+    for (const [key, to] of next) {
+      const from = before.get(key) ?? to
+      for (let k = 0; k <= 8; k++) widest = Math.max(widest, text(lerp(from, to, k / 8)).length)
+    }
+    figureChars.value = widest
+  },
+  { immediate: true },
+)
+
+const drawn = computed(() => {
+  const indexOf = new Map(arcs.value.map((a, i) => [a.key, i]))
+  const pad = arcs.value.length > 1 ? (props.padAngle * Math.PI) / 180 : 0
+  const TURN = Math.PI * 2
+  return shownWedges.value
+    .filter((w) => w.to - w.from > 1e-5)
+    .map((w) => {
+      const sweepAngle = (w.to - w.from) * TURN
+      const start = -Math.PI / 2 + w.from * TURN
+      const gap = Math.min(pad, sweepAngle * 0.5)
+      const mid = start + sweepAngle / 2
+      return {
+        key: w.key,
+        /* -1 for a slice on its way out: no longer data, so never lifted. */
+        index: indexOf.get(w.key) ?? -1,
+        color: w.color,
+        d: arcPath(
+          cx.value,
+          cy.value,
+          outer.value,
+          inner.value,
+          start + gap / 2,
+          start + sweepAngle - gap / 2,
+          props.cornerRadius,
+        ),
+        lift: `translate(${(Math.cos(mid) * props.hoverOffset).toFixed(2)} ${(
+          Math.sin(mid) * props.hoverOffset
+        ).toFixed(2)})`,
+      }
+    })
+})
+
 const callouts = computed(() =>
   props.labels
     ? calloutLabels(
@@ -808,20 +963,20 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
                    nothing. -->
               <g :clip-path="animate ? `url(#${sweepId}-sweep)` : undefined">
                 <path
-                  v-for="(a, i) in arcs"
-                  :key="`${i}-${a.label}`"
-                  :d="a.d"
-                  :fill="a.color"
+                  v-for="w in drawn"
+                  :key="w.key"
+                  :d="w.d"
+                  :fill="w.color"
                   class="pointer-events-none transition-[transform,opacity] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none"
-                  :transform="active === i ? a.lift : undefined"
-                  :opacity="dimmed(i) ? 0.28 : 1"
+                  :transform="w.index >= 0 && active === w.index ? w.lift : undefined"
+                  :opacity="dimmed(w.index) ? 0.28 : 1"
                 />
               </g>
 
               <!-- Invisible, unmoving, and on top: the actual hit area. -->
               <path
                 v-for="(a, i) in arcs"
-                :key="`hit-${i}-${a.label}`"
+                :key="`hit-${a.key}`"
                 :d="a.d"
                 fill="transparent"
                 class="cursor-pointer"
@@ -899,34 +1054,40 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
 
         <!-- The legend is the same control surface as the circle: identical
              modifiers, and slivers too small to hit are reachable here. -->
-        <div v-if="legendShown" class="flex min-w-0 flex-col gap-1.5" @pointerup="endDrag">
-          <button
-            v-for="(a, i) in arcs"
-            :key="`${i}-${a.label}`"
-            type="button"
-            class="group flex cursor-pointer items-center gap-2 rounded-inner px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring"
-            :class="[dimmed(i) ? 'opacity-45' : '', isSelected(i) ? 'bg-surface-soft' : '']"
-            :aria-pressed="isSelected(i)"
-            @pointerenter="onSlicePointerEnter(i)"
-            @pointerleave="onSlicePointerLeave(i)"
-            @pointerdown="onSlicePointerDown(i, $event)"
-            @click="onLegendClick(i, $event)"
-            @focus="active = i"
-            @blur="active === i && (active = -1)"
-            @contextmenu="onSliceContextMenu(i)"
-          >
-            <span
-              class="size-2 shrink-0 rounded-full transition-transform duration-fast group-hover:scale-125"
-              :style="{ backgroundColor: a.color }"
-            />
-            <span class="truncate text-muted-strong group-hover:text-ink">{{ a.label }}</span>
-            <!-- What the bucket stands for, so a fold is never a silent loss. -->
-            <span v-if="a.isOther" class="shrink-0 text-muted">({{ a.count }})</span>
-            <span class="ml-auto shrink-0 pl-2 font-mono tabular-nums text-muted">
-              {{ showPercent ? pct(a.fraction) : fmt(a.value) }}
-            </span>
-          </button>
-        </div>
+        <!-- Eases when the figures need more room or less. -->
+        <LpShift v-if="legendShown" axis="width" class="min-w-0">
+          <div class="flex min-w-0 flex-col gap-1.5" @pointerup="endDrag">
+            <button
+              v-for="(a, i) in arcs"
+              :key="a.key"
+              type="button"
+              class="group flex cursor-pointer items-center gap-2 rounded-inner px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring"
+              :class="[dimmed(i) ? 'opacity-45' : '', isSelected(i) ? 'bg-surface-soft' : '']"
+              :aria-pressed="isSelected(i)"
+              @pointerenter="onSlicePointerEnter(i)"
+              @pointerleave="onSlicePointerLeave(i)"
+              @pointerdown="onSlicePointerDown(i, $event)"
+              @click="onLegendClick(i, $event)"
+              @focus="active = i"
+              @blur="active === i && (active = -1)"
+              @contextmenu="onSliceContextMenu(i)"
+            >
+              <LegendSwatch :color="a.color" />
+              <span class="truncate text-muted-strong group-hover:text-ink">{{ a.label }}</span>
+              <!-- What the bucket stands for, so a fold is never a silent loss. -->
+              <span v-if="a.isOther" class="shrink-0 text-muted">({{ a.count }})</span>
+              <!-- Counts to the new figure, on the same beat as its slice resizing. -->
+              <LpNumberFlow
+                class="ml-auto shrink-0 pl-2 text-right font-mono tabular-nums text-muted"
+                :style="{ minWidth: `calc(${figureChars}ch + 0.5rem)` }"
+                :value="showPercent ? a.fraction : a.value"
+                :duration="360"
+                :format="showPercent ? pct : fmt"
+                :animate-on-mount="false"
+              />
+            </button>
+          </div>
+        </LpShift>
       </div>
     </LpContextMenu>
     </LpSwap>

package/src/components/LpPipeline.vue

@@ -0,0 +1,366 @@
+<script lang="ts">
+// The consumer's `class` is merged into the root's own (below) rather than
+// appended to it, so opt out of the automatic pass-through that would add it
+// a second time, unmerged.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A run of jobs and the state each one is in: a deploy, a CI workflow, a
+ * server being provisioned.
+ *
+ * Not a wizard. LpStepper answers "where am I in a form", with one current
+ * step and everything before it done; here every step has its own state —
+ * three can pass, one fail and the rest never run — and the viewer is
+ * watching rather than driving. So the pieces are the ones a process monitor
+ * needs: a glyph per state (LpStepMark), how long each job took (ticking
+ * while it runs, from `startedAt`, without the app re-sending it), the line
+ * between steps filled up to where the run got and broken where it stopped,
+ * and a step's inside (its sub-jobs, its log) folded under it.
+ *
+ *   <LpPipeline :steps="run.jobs" follow />
+ *   <LpPipeline :steps="stages" orientation="horizontal" compact />
+ *
+ * Each change of state is announced politely ("Deploy: failed"), so a screen
+ * reader user learns about the run the way a sighted one glances at it.
+ */
+import { computed, nextTick, ref, useId, useSlots, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useNow } from "../composables/useNow"
+import LpCollapse from "./LpCollapse.vue"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import LpShift from "./LpShift.vue"
+import LpStepMark from "./LpStepMark.vue"
+import LpTooltip from "./LpTooltip.vue"
+import StepConnector from "./StepConnector.vue"
+import {
+  childProgress,
+  connectorFilled,
+  currentStepIndex,
+  stepElapsed,
+  stepKey,
+  type PipelineStep,
+  type StepStatus,
+} from "./pipeline"
+import { DEFAULT_UNIT_LABELS, formatElapsed, toEpoch, type TimeUnitLabels } from "./timeSpan"
+import { TONES } from "./tone"
+
+export type PipelineLabels = Record<StepStatus, string> & {
+  showDetails: string
+  hideDetails: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    steps: PipelineStep[]
+    /**
+     * `vertical` (default) is the job list: room for descriptions, durations
+     * and folded sub-steps. `horizontal` is the strip across a card or a
+     * header, where the run is read at a glance.
+     */
+    orientation?: "horizontal" | "vertical"
+    /**
+     * Smaller marks, no descriptions. Horizontal and compact is marks and
+     * lines only, each step named in a tooltip — a run in a table cell.
+     */
+    compact?: boolean
+    /** Number the pending marks, for a run whose order is part of its meaning. */
+    numbered?: boolean
+    /**
+     * Keep the current step (see `currentStepIndex`) scrolled into view as the
+     * run advances: a long job list, or a horizontal strip wider than its box.
+     */
+    follow?: boolean
+    /**
+     * Open a step on its own when it starts running or fails, if it has
+     * something inside, and fold it again when it passes. That is the step the
+     * viewer would open next anyway; a step the viewer opened stays open.
+     */
+    autoExpand?: boolean
+    /** Announce status changes to screen readers. A nested pipeline turns it off so its parent speaks once. */
+    announce?: boolean
+    labels?: Partial<PipelineLabels>
+  }>(),
+  { orientation: "vertical", autoExpand: true, announce: true },
+)
+
+/** Keys of the open steps. Works uncontrolled; bind it to keep it in the app. */
+const expanded = defineModel<string[]>("expanded", { default: () => [] })
+
+defineSlots<{
+  /** Inside an expanded step, under its sub-steps: a log tail, a link to the run, an error. */
+  detail?: (props: { step: PipelineStep; index: number }) => unknown
+}>()
+
+const text = useLabels<PipelineLabels>(
+  "pipeline",
+  {
+    pending: "Pending",
+    running: "Running",
+    success: "Passed",
+    failed: "Failed",
+    skipped: "Skipped",
+    cancelled: "Cancelled",
+    showDetails: "Show details",
+    hideDetails: "Hide details",
+  },
+  () => props.labels,
+)
+const units = useLabels<TimeUnitLabels>("time", DEFAULT_UNIT_LABELS)
+
+const slots = useSlots()
+const vertical = computed(() => props.orientation === "vertical")
+const markSize = computed(() => (props.compact ? "sm" : "md"))
+
+/* The clock only runs while a step is running on its own timestamps. */
+const ticking = computed(() =>
+  props.steps.some((s) => s.status === "running" && s.duration === undefined && !Number.isNaN(toEpoch(s.startedAt))),
+)
+const now = useNow(ticking)
+
+const elapsed = (step: PipelineStep) => {
+  const ms = stepElapsed(step, now.value)
+  return ms === null ? "" : formatElapsed(ms, units.value)
+}
+
+const progressText = (step: PipelineStep) => {
+  const p = childProgress(step)
+  return p ? `${p.done}/${p.total}` : ""
+}
+
+/* A job that has not started has no log yet; its sub-steps are still worth a look. */
+const expandable = (step: PipelineStep) =>
+  vertical.value && (!!step.steps?.length || (!!slots.detail && step.status !== "pending"))
+const isOpen = (step: PipelineStep, i: number) => expanded.value.includes(stepKey(step, i))
+
+function toggle(step: PipelineStep, i: number) {
+  const key = stepKey(step, i)
+  // Touched by the viewer: theirs now, not the pipeline's to fold away.
+  autoOpened.delete(key)
+  expanded.value = isOpen(step, i) ? expanded.value.filter((k) => k !== key) : [...expanded.value, key]
+}
+
+/*
+ * The fill of the line leaving a step: travelled in the colour of what
+ * happened (passed, skipped), flowing while the step runs, empty where the
+ * run stopped or has not reached.
+ */
+const FILL: Partial<Record<StepStatus, string>> = {
+  success: TONES.success.bg,
+  skipped: "bg-line-strong",
+}
+
+const statusText = (step: PipelineStep) => {
+  const time = elapsed(step)
+  return time ? `${text.value[step.status]}, ${time}` : text.value[step.status]
+}
+
+/* ── Announcements and auto-expansion: both react to a step CHANGING state. */
+const announcement = ref("")
+let seen = new Map<string, StepStatus>()
+/* Steps the pipeline opened itself — the only ones it may close again. */
+const autoOpened = new Set<string>()
+
+watch(
+  () => props.steps.map((s, i) => [stepKey(s, i), s.status] as const),
+  (pairs, old) => {
+    const next = new Map(pairs)
+    if (old) {
+      const opened: string[] = []
+      const closed: string[] = []
+      const said: string[] = []
+      props.steps.forEach((step, i) => {
+        const key = stepKey(step, i)
+        const before = seen.get(key)
+        if (before === undefined || before === step.status) return
+        said.push(`${step.label}: ${text.value[step.status]}`)
+        if (!props.autoExpand) return
+        if ((step.status === "running" || step.status === "failed") && expandable(step)) opened.push(key)
+        else if (connectorFilled(step.status) && autoOpened.has(key)) closed.push(key)
+      })
+      if (said.length && props.announce) announcement.value = said.join(". ")
+      const fresh = opened.filter((k) => !expanded.value.includes(k))
+      fresh.forEach((k) => autoOpened.add(k))
+      closed.forEach((k) => autoOpened.delete(k))
+      if (fresh.length || closed.length) {
+        expanded.value = [...expanded.value.filter((k) => !closed.includes(k)), ...fresh]
+      }
+    }
+    seen = next
+  },
+  { immediate: true },
+)
+
+/* ── Following the current step. */
+const uid = useId()
+const items: Array<Element | null> = []
+const bindItem = (i: number) => (el: unknown) => { items[i] = el instanceof Element ? el : null }
+const current = computed(() => currentStepIndex(props.steps))
+
+watch(current, async (i) => {
+  if (!props.follow || i < 0) return
+  await nextTick()
+  items[i]?.scrollIntoView({
+    block: "nearest",
+    inline: "center",
+    behavior: prefersReducedMotion() ? "auto" : "smooth",
+  })
+})
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
+  vertical.value
+    ? "flex w-full min-w-0 flex-col"
+    : `flex w-full min-w-0 items-start overflow-x-auto ${props.compact ? "gap-1.5 py-1" : "gap-3 pb-1"}`,
+)
+</script>
+
+<template>
+  <div class="contents">
+    <ol :class="rootClass" v-bind="rest">
+      <li
+        v-for="(step, i) in steps"
+        :key="stepKey(step, i)"
+        :ref="bindItem(i)"
+        :aria-current="i === current ? 'step' : undefined"
+        :class="vertical
+          ? 'grid grid-cols-[auto_minmax(0,1fr)] gap-x-3'
+          : 'flex min-w-0 flex-1 items-start last:flex-none ' + (compact ? 'min-w-6 gap-1.5' : 'min-w-28 gap-3')"
+      >
+        <!-- ── Vertical: mark and line in a rail, the job beside it. -->
+        <template v-if="vertical">
+          <div class="flex flex-col items-center">
+            <LpStepMark
+              :status="step.status"
+              :size="markSize"
+              :number="numbered ? i + 1 : undefined"
+              :icon="step.icon"
+              :class="compact ? 'mt-0.5' : 'mt-px'"
+            />
+            <StepConnector
+              v-if="i < steps.length - 1"
+              orientation="vertical"
+              :filled="connectorFilled(step.status)"
+              :fill="FILL[step.status] ?? TONES.success.bg"
+              :flowing="step.status === 'running'"
+              class="my-1 min-h-3"
+            />
+          </div>
+
+          <div class="min-w-0" :class="i < steps.length - 1 ? (compact ? 'pb-2' : 'pb-4') : ''">
+            <component
+              :is="expandable(step) ? 'button' : 'div'"
+              :type="expandable(step) ? 'button' : undefined"
+              :aria-expanded="expandable(step) ? isOpen(step, i) : undefined"
+              :aria-controls="expandable(step) ? `${uid}-${i}` : undefined"
+              class="group/row flex w-full min-w-0 items-start gap-2 rounded-control text-left"
+              :class="expandable(step) && '-mx-1.5 -my-0.5 w-[calc(100%+0.75rem)] px-1.5 py-0.5 transition-colors duration-(--duration-fast) hover:bg-surface-soft focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'"
+              @click="expandable(step) && toggle(step, i)"
+            >
+              <span class="flex min-w-0 flex-1 flex-col">
+                <span
+                  class="truncate transition-colors duration-(--duration-medium)"
+                  :class="[compact ? 'text-xs' : 'text-sm', step.status === 'pending' || step.status === 'skipped' ? 'text-muted' : 'text-ink', step.status === 'running' && 'font-medium']"
+                >
+                  {{ step.label }}
+                  <span class="sr-only">({{ statusText(step) }})</span>
+                </span>
+                <span v-if="step.description && !compact" class="truncate text-xs text-muted">{{ step.description }}</span>
+              </span>
+              <span
+                class="flex shrink-0 items-center gap-2 font-mono text-xs tabular-nums"
+                :class="step.status === 'failed' ? TONES.danger.text : 'text-muted'"
+                aria-hidden="true"
+              >
+                <span v-if="progressText(step)" class="text-muted">{{ progressText(step) }}</span>
+                <LpShift axis="width">
+                  <LpRollingText v-if="elapsed(step)" :value="elapsed(step)" align="end" :duration="200" />
+                </LpShift>
+                <LpIcon
+                  v-if="expandable(step)"
+                  name="lucide:chevron-down"
+                  :size="14"
+                  class="text-muted transition-transform duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+                  :class="isOpen(step, i) && 'rotate-180'"
+                />
+              </span>
+            </component>
+
+            <LpCollapse :open="expandable(step) && isOpen(step, i)">
+              <div :id="`${uid}-${i}`" class="flex flex-col gap-2 pt-2">
+                <LpPipeline
+                  v-if="step.steps?.length"
+                  :steps="step.steps"
+                  compact
+                  :announce="false"
+                  :auto-expand="false"
+                  :labels="labels"
+                  class="rounded-card border border-line bg-surface-soft/40 px-3 py-2"
+                />
+                <slot name="detail" :step="step" :index="i" />
+              </div>
+            </LpCollapse>
+          </div>
+        </template>
+
+        <!-- ── Horizontal: mark, words, then the line to the next step. -->
+        <template v-else>
+          <LpTooltip v-if="compact" :content="`${step.label}: ${statusText(step)}`">
+            <span
+              tabindex="0"
+              class="inline-flex rounded-pill focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+            >
+              <LpStepMark
+                :status="step.status"
+                size="sm"
+                :number="numbered ? i + 1 : undefined"
+                :icon="step.icon"
+              />
+              <span class="sr-only">{{ step.label }} ({{ statusText(step) }})</span>
+            </span>
+          </LpTooltip>
+          <template v-else>
+            <LpStepMark
+              :status="step.status"
+              :size="markSize"
+              :number="numbered ? i + 1 : undefined"
+              :icon="step.icon"
+            />
+            <span class="flex min-w-0 shrink flex-col">
+              <span
+                class="truncate text-sm transition-colors duration-(--duration-medium)"
+                :class="[step.status === 'pending' || step.status === 'skipped' ? 'text-muted' : 'text-ink', step.status === 'running' && 'font-medium']"
+              >
+                {{ step.label }}
+                <span class="sr-only">({{ statusText(step) }})</span>
+              </span>
+              <span
+                class="flex h-4 items-center gap-1.5 font-mono text-[11px] tabular-nums"
+                :class="step.status === 'failed' ? TONES.danger.text : 'text-muted'"
+                aria-hidden="true"
+              >
+                <LpShift axis="width">
+                  <LpRollingText :value="elapsed(step) || text[step.status]" align="start" :duration="200" />
+                </LpShift>
+                <span v-if="progressText(step)">· {{ progressText(step) }}</span>
+              </span>
+            </span>
+          </template>
+          <StepConnector
+            v-if="i < steps.length - 1"
+            :filled="connectorFilled(step.status)"
+            :fill="FILL[step.status] ?? TONES.success.bg"
+            :flowing="step.status === 'running'"
+            class="min-w-4 self-start"
+            :class="compact ? 'mt-[7px]' : 'mt-[11px]'"
+          />
+        </template>
+      </li>
+    </ol>
+    <span v-if="announce" class="sr-only" aria-live="polite" aria-atomic="true">{{ announcement }}</span>
+  </div>
+</template>
+

package/src/components/LpPopover.vue

@@ -8,6 +8,7 @@ import {
 import { computed } from "vue"
 import { mergeClass } from "../composables/useMergedClass"
 import { POPOVER_PANEL } from "./dropdown"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 const props = withDefaults(
   defineProps<{
@@ -31,6 +32,12 @@ const open = defineModel<boolean>("open")
 const panel = computed(() =>
   mergeClass(POPOVER_PANEL, "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", props.panelClass),
 )
+
+// Overlays open in the window this component renders in (an LpFrame's, inside one).
+const portalTo = usePortalTarget()
+// What happens in another document (the page around a frame, or a frame in
+// the page) is not "outside" for this layer.
+const guardOutside = useOutsideGuard()
 </script>
 
 <template>
@@ -38,8 +45,10 @@ const panel = computed(() =>
     <PopoverTrigger as-child>
       <slot name="trigger" />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal :to="portalTo">
       <PopoverContent
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         :collision-padding="8"
         :side="side"
         :align="align"