@leavepulse/ui 0.69.0 → 0.70.1

package/src/components/LpCodeDisplay.vue

@@ -0,0 +1,228 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+
+export interface CodeDisplayLabels extends Record<string, string> {
+  show: string
+  hide: string
+  hidden: string
+  expiresIn: string
+  expired: string
+  saved: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * A short code a person reads off the screen, types somewhere else or writes
+ * down: a one-time sign-in code, a pairing code for a device, a recovery key,
+ * a licence key. Not a field (that is LpOtpInput) and not source code (that is
+ * LpCodeBlock): it is shown to be transcribed.
+ *
+ *   <LpCodeDisplay code="482913" :expires-at="expires" />
+ *   <LpCodeDisplay code="K7QF-29XM-PL4D-8WNA" masked ack v-model:saved="saved" />
+ *
+ * What makes a code easy to transcribe: big monospace characters, every one
+ * the same width, broken into groups of 3–4 the eye can hold (`groupCode`).
+ * The separators are drawn, not text — selecting or copying the code gives
+ * the characters alone, which is what the place it is pasted into expects.
+ *
+ * A new code (regenerated, refreshed) turns over character by character
+ * rather than being swapped, so it is plain that it changed; revealing a
+ * masked code turns the dots over the same way.
+ *
+ * `expiresAt` adds a countdown with a draining bar (LpCountdown); at zero the code dims and
+ * can no longer be copied, and `expired` fires so the app can fetch a new one.
+ * `ack` adds "I've saved this", for codes shown once (recovery keys) where the
+ * app should not let the person continue before they have kept it.
+ */
+import { computed, ref, watch } from "vue"
+import { useLabels } from "../composables/useLpConfig"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useNow } from "../composables/useNow"
+import LpCheckbox from "./LpCheckbox.vue"
+import LpCopyButton from "./LpCopyButton.vue"
+import LpCountdown from "./LpCountdown.vue"
+import LpIcon from "./LpIcon.vue"
+import LpRollingText from "./LpRollingText.vue"
+import RevealToggle from "./RevealToggle.vue"
+import { groupCode } from "./fieldText"
+import { ceilToSecond, formatTime, msToNextSecond, toEpoch } from "./timeSpan"
+
+const props = withDefaults(
+  defineProps<{
+    code: string
+    /** One size for every group, or exact sizes in order. Unset picks 3s or 4s by length. */
+    groups?: number | number[]
+    /** Drawn between groups: `""` (a gap, the default), `"-"`, `"·"`, `" "`. */
+    separator?: string
+    /** Copy with separators (`grouped`) or the characters alone (`raw`, default). */
+    copyAs?: "raw" | "grouped"
+    /** Hidden until revealed (v-model:revealed). Copy still works while hidden. */
+    masked?: boolean
+    copyable?: boolean
+    /** When the code stops working; shows a countdown. */
+    expiresAt?: Date | number | string
+    /**
+     * When it was issued, for the countdown bar's full length. Unset, the bar
+     * starts full at the moment it first appears.
+     */
+    issuedAt?: Date | number | string
+    /** Add the "I've saved this" confirmation (v-model:saved). */
+    ack?: boolean
+    size?: "sm" | "md" | "lg"
+    labels?: Partial<CodeDisplayLabels>
+  }>(),
+  { separator: "", copyAs: "raw", copyable: true, size: "md" },
+)
+
+const emit = defineEmits<{
+  (e: "expired"): void
+  (e: "copied", text: string): void
+}>()
+
+const revealed = defineModel<boolean>("revealed", { default: false })
+const saved = defineModel<boolean>("saved", { default: false })
+
+const text = useLabels<CodeDisplayLabels>(
+  "codeDisplay",
+  {
+    show: "Show code",
+    hide: "Hide code",
+    hidden: "Code hidden",
+    expiresIn: "Expires in",
+    expired: "Expired",
+    saved: "I've saved this code",
+  },
+  () => props.labels,
+)
+
+const parts = computed(() => groupCode(props.code, props.groups))
+const hidden = computed(() => props.masked && !revealed.value)
+const copyText = computed(() =>
+  props.copyAs === "grouped" ? parts.value.join(props.separator || " ") : parts.value.join(""),
+)
+// Spelled out with spaces so a screen reader reads characters, not a "word".
+const spoken = computed(() => parts.value.map((g) => Array.from(g).join(" ")).join(", "))
+
+// ── countdown ────────────────────────────────────────────────
+// The default expiry row IS LpCountdown. The clock here only feeds the slot's
+// props and the `expired` event, which must work when the slot is replaced
+// too; useNow wakes on the second boundary and sleeps in a hidden tab.
+const end = computed(() => {
+  const at = toEpoch(props.expiresAt)
+  return Number.isNaN(at) ? undefined : at
+})
+// Without `issuedAt` the bar starts full the moment the code first appears.
+const start = ref(Date.now())
+watch(
+  [end, () => props.issuedAt],
+  () => {
+    const issued = toEpoch(props.issuedAt)
+    start.value = Number.isNaN(issued) ? Date.now() : issued
+  },
+  { immediate: true },
+)
+const now = useNow(() => end.value !== undefined && end.value > Date.now(), {
+  nextIn: (at) => msToNextSecond((end.value ?? at) - at),
+  restartOn: end,
+})
+
+const remaining = computed(() => (end.value === undefined ? undefined : Math.max(0, end.value - now.value)))
+const expired = computed(() => remaining.value === 0)
+const fraction = computed(() => {
+  if (end.value === undefined) return 1
+  const total = end.value - start.value
+  return total > 0 ? Math.min(1, (remaining.value ?? 0) / total) : 0
+})
+// The last fifth of the wait is urgent, as the bar has always turned there.
+const urgentAt = computed(() => (end.value === undefined ? undefined : Math.max(0, end.value - start.value) * 0.2 / 1000))
+watch(expired, (out) => out && emit("expired"))
+
+const SIZE = {
+  sm: { text: "text-lg", gap: "gap-2", icon: 14 },
+  md: { text: "text-2xl", gap: "gap-3", icon: 16 },
+  lg: { text: "text-4xl", gap: "gap-4", icon: 18 },
+} as const
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => "inline-flex max-w-full flex-col gap-3")
+</script>
+
+<template>
+  <div :class="rootClass" v-bind="rest">
+    <div class="flex flex-wrap items-center gap-x-2 gap-y-1">
+      <div
+        class="flex flex-wrap items-center font-mono font-semibold tracking-normal text-ink tabular-nums transition-opacity duration-(--duration-medium)"
+        :class="[SIZE[size].text, SIZE[size].gap, expired ? 'opacity-35' : '']"
+      >
+        <span class="sr-only">{{ hidden ? text.hidden : spoken }}</span>
+        <template v-for="(group, g) in parts" :key="g">
+          <span
+            v-if="g > 0 && separator"
+            aria-hidden="true"
+            class="-mx-1 select-none text-muted/70"
+          >{{ separator }}</span>
+          <span aria-hidden="true" class="inline-flex">
+            <!-- One cell per character, each exactly 1ch, so dots and
+                 characters take the same room and nothing shifts on reveal. -->
+            <LpRollingText
+              v-for="(char, c) in Array.from(group)"
+              :key="c"
+              :value="hidden ? '•' : char"
+              mode="flip"
+              :duration="260 + (g * 4 + c) * 28"
+              class="w-[1ch]"
+            />
+          </span>
+        </template>
+      </div>
+
+      <div class="flex items-center gap-0.5">
+        <RevealToggle
+          v-if="masked"
+          v-model="revealed"
+          :icon-size="SIZE[size].icon"
+          :show-label="text.show"
+          :hide-label="text.hide"
+        />
+        <LpCopyButton
+          v-if="copyable"
+          :value="copyText"
+          size="sm"
+          class="text-muted hover:text-ink"
+          :disabled="expired"
+          @copied="(t: string) => emit('copied', t)"
+        />
+      </div>
+    </div>
+
+    <slot
+      v-if="remaining !== undefined"
+      name="expiry"
+      :remaining="remaining"
+      :formatted="formatTime(ceilToSecond(remaining), 'clock')"
+      :expired="expired"
+      :fraction="fraction"
+    >
+      <!-- LpCountdown lays its digits and its bar out itself; `contents` lets
+           them join this row instead, so the label sits beside the digits and
+           the bar wraps onto a line of its own under all three. -->
+      <div class="flex max-w-64 flex-wrap items-center gap-1.5 text-xs" :class="expired ? 'text-danger' : 'text-muted'">
+        <LpIcon :name="expired ? 'lucide:timer-off' : 'lucide:timer'" :size="12" />
+        <LpRollingText :value="expired ? text.expired : text.expiresIn" align="start" />
+        <LpCountdown
+          :to="end"
+          :from="start"
+          progress="bar"
+          :urgent-at="urgentAt"
+          :labels="{ done: text.expired }"
+          class="contents text-ink"
+        >
+          <!-- Nothing in place of 0:00: the label already says it is over. -->
+          <template #done />
+        </LpCountdown>
+      </div>
+    </slot>
+
+    <LpCheckbox v-if="ack" v-model="saved" :label="text.saved" />
+  </div>
+</template>

package/src/components/LpCollapse.vue

@@ -0,0 +1,162 @@
+<script lang="ts">
+// Attributes go onto the collapsing box, not onto the Transition around it.
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * Shows and hides content by folding it open and shut: the box grows from
+ * nothing to the content's own height (or width), and back. Anything under it
+ * glides instead of jumping.
+ *
+ *   <LpButton @click="advanced = !advanced">Advanced</LpButton>
+ *   <LpCollapse v-model:open="advanced">
+ *     <AdvancedOptions />
+ *   </LpCollapse>
+ *
+ * It is the bare motion with no trigger or chrome, for where the thing that
+ * opens it is somewhere else: a switch that reveals dependent fields, a
+ * "show details" link, a row that expands in a table, a toolbar section that
+ * slides out sideways (`axis="width"`). LpDisclosure is the ready-made header
+ * plus body; LpShift eases a box whose content CHANGES; this one eases
+ * content that comes and goes.
+ *
+ * Toggling mid-way reverses from where the box is, rather than snapping to an
+ * end first. Padding and margins belong on the content inside, not on the
+ * collapse itself: the box is measured and clipped, and its own padding would
+ * still show when it is folded to zero.
+ */
+import { ref, watch } from "vue"
+import { durationToken, easingToken, prefersReducedMotion } from "../composables/easing"
+
+const props = withDefaults(
+  defineProps<{
+    /** Which dimension folds: `height` for a section, `width` for a side panel or a toolbar group, `both` for a corner pop-out. */
+    axis?: "height" | "width" | "both"
+    /** Fade the content along with the fold, so it does not show sliced while the box is small. */
+    fade?: boolean
+    /**
+     * Keep the content in the DOM while closed (hidden), so its state survives:
+     * a half-filled form, a scroll position, a playing preview. Off, it is
+     * unmounted once folded away, like `v-if`.
+     */
+    keepMounted?: boolean
+    /** With `keepMounted`, do not mount the content until it is first opened: an expensive body costs nothing until asked for. */
+    lazy?: boolean
+    /** Length of the fold in ms. Defaults to the kit's `--duration-medium`. */
+    duration?: number
+  }>(),
+  { axis: "height", fade: true, keepMounted: false, lazy: false },
+)
+
+const emit = defineEmits<{
+  /** The fold has finished opening. */
+  (e: "opened"): void
+  /** The fold has finished closing (and the content is unmounted, unless kept). */
+  (e: "closed"): void
+}>()
+
+const open = defineModel<boolean>("open", { default: false })
+
+/*
+ * Mounted is separate from open: a closing box has to stay in the DOM until
+ * its fold has played, and a kept one stays after that. Rendering it with
+ * v-show under that v-if means a reopen during the close lands on the SAME
+ * element, so the fold reverses from where it is instead of starting a new
+ * box from zero beside the old one.
+ */
+let unmounting = false
+const present = ref(open.value || (props.keepMounted && !props.lazy))
+watch(open, (value) => {
+  if (!value) return
+  unmounting = false
+  present.value = true
+})
+
+const running = new WeakMap<Element, Animation>()
+
+type Size = { height: number; width: number; opacity: number }
+
+function current(el: HTMLElement): Size {
+  const rect = el.getBoundingClientRect()
+  return { height: rect.height, width: rect.width, opacity: Number(getComputedStyle(el).opacity) }
+}
+
+function natural(el: HTMLElement): Size {
+  return { height: el.scrollHeight, width: el.scrollWidth, opacity: 1 }
+}
+
+const ZERO: Size = { height: 0, width: 0, opacity: 0 }
+
+function frame(size: Size): Keyframe {
+  const out: Keyframe = {}
+  if (props.axis !== "width") out.height = `${size.height}px`
+  if (props.axis !== "height") out.width = `${size.width}px`
+  if (props.fade) out.opacity = size.opacity
+  return out
+}
+
+function fold(el: Element, opening: boolean, done: () => void) {
+  const box = el as HTMLElement
+  const previous = running.get(box)
+  if (prefersReducedMotion() || typeof box.animate !== "function") {
+    previous?.cancel()
+    done()
+    return
+  }
+  // Mid-fold, start from where the box is now; at rest, from the closed or open end.
+  const from = previous ? current(box) : opening ? ZERO : natural(box)
+  previous?.cancel()
+  const to = opening ? natural(box) : ZERO
+  box.style.overflow = "hidden"
+  const animation = box.animate([frame(from), frame(to)], {
+    duration: props.duration ?? durationToken("duration-medium"),
+    easing: easingToken("ease-emphasized"),
+    // Closing holds the folded frame until Vue hides the element, so it never flashes back open.
+    fill: opening ? "none" : "forwards",
+  })
+  running.set(box, animation)
+  animation.onfinish = () => {
+    if (running.get(box) !== animation) return
+    running.delete(box)
+    box.style.overflow = ""
+    done()
+    if (!opening) animation.cancel()
+  }
+  animation.oncancel = () => {
+    if (running.get(box) === animation) running.delete(box)
+  }
+}
+
+function onEnter(el: Element, done: () => void) {
+  fold(el, true, done)
+}
+/*
+ * Unmounting after the fold is a second leave for the Transition, of an
+ * element already hidden: it passes straight through, and is not reported as
+ * a second close.
+ */
+function onLeave(el: Element, done: () => void) {
+  if (unmounting) done()
+  else fold(el, false, done)
+}
+function onAfterLeave() {
+  if (unmounting) {
+    unmounting = false
+    return
+  }
+  if (!props.keepMounted && !open.value) {
+    unmounting = true
+    present.value = false
+  }
+  emit("closed")
+}
+</script>
+
+<template>
+  <Transition :css="false" @enter="onEnter" @leave="onLeave" @after-enter="emit('opened')" @after-leave="onAfterLeave">
+    <div v-if="present" v-show="open" v-bind="$attrs">
+      <slot />
+    </div>
+  </Transition>
+</template>

package/src/components/LpColorPicker.vue

@@ -57,6 +57,7 @@ import { POPOVER_PANEL } from "./dropdown"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
 import LpIcon from "./LpIcon.vue"
 import LpRollingText from "./LpRollingText.vue"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 /**
  * Every user-facing string the picker renders on its own — the menu items, the
@@ -614,6 +615,12 @@ const field = useFieldControl(() => ({
 }))
 
 defineExpose({ open })
+
+// 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>
@@ -669,8 +676,10 @@ defineExpose({ open })
       </LpContextMenu>
     </PopoverAnchor>
 
-    <PopoverPortal>
+    <PopoverPortal :to="portalTo">
       <PopoverContent
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         :collision-padding="8"
         :side="side"
         :align="align"

package/src/components/LpCommandPalette.vue

@@ -39,8 +39,10 @@ import {
 import { computed, nextTick, onBeforeUnmount, ref, shallowRef, useId, watch } from "vue"
 import LpAvatar from "./LpAvatar.vue"
 import LpIcon from "./LpIcon.vue"
+import LpLoader from "./LpLoader.vue"
 import LpScrollArea from "./LpScrollArea.vue"
 import MenuShortcut from "./MenuShortcut.vue"
+import { staggerDelay } from "./reveal"
 import { usePersisted } from "../composables/usePersisted"
 import { useAsyncTask } from "../composables/useAsyncTask"
 import { useGlass } from "../composables/useGlass"
@@ -72,6 +74,7 @@ import {
   type RecentEntry,
   type RecentItem,
 } from "./commandPalette"
+import { useOutsideGuard, usePortalTarget } from "../composables/useView"
 
 /**
  * A picture in a row's icon slot: an avatar, a project logo, a world's
@@ -910,11 +913,17 @@ function paneHighlight(text: string): HighlightPart[] {
 const paneQuery = computed(() => parsePaletteQuery(query.value.trim()))
 
 // What the pane draws: the last row it showed, kept while the pane slides out
-// so it leaves with its content instead of emptying first.
+// so it leaves with its content instead of emptying first. Immediate: the
+// first row is already highlighted when the palette opens, and the pane
+// opened beside it empty until the highlight moved.
 const paneBody = shallowRef<Command | undefined>()
-watch(paneCommand, (command) => {
-  if (command) paneBody.value = command
-})
+watch(
+  paneCommand,
+  (command) => {
+    if (command) paneBody.value = command
+  },
+  { immediate: true },
+)
 
 /*
  * The text in paragraphs, so they can arrive one after another. A blank line
@@ -939,9 +948,8 @@ const paneDescription = computed(() => {
   return body.startsWith(description) ? undefined : description
 })
 
-/** Stagger between paragraphs, capped so a long section does not trickle in. */
-const STAGGER_MS = 45
-const STAGGER_MAX = 10
+/** Stagger between paragraphs (after the description), capped so a long section does not trickle in. */
+const paraDelay = (index: number) => `${staggerDelay(index + 1, 0, 45, 10)}ms`
 
 /*
  * A preview is opened for the match, so the pane lands on it: the first
@@ -1216,17 +1224,25 @@ useHotkeys(() =>
       ]
     : [],
 )
+
+// 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>
   <DialogRoot :open="open" @update:open="(v) => emit('update:open', v)">
-    <DialogPortal>
+    <DialogPortal :to="portalTo">
       <DialogOverlay
         :class="{ 'lp-scrim--light': frosted, 'lp-scrim--nested': layer.nested, 'lp-scrim--covered': layer.covered }"
         class="lp-scrim fixed inset-0 data-[state=open]:animate-[fade-in_150ms_ease] data-[state=closed]:animate-[fade-out_130ms_ease]"
         :style="{ zIndex: layer.scrim }"
       />
       <DialogContent
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         ref="contentRef"
         class="lp-cmd-dialog fixed left-1/2 top-[12vh] flex max-h-[76vh] -translate-x-1/2 flex-col overflow-hidden rounded-card border border-line shadow-panel outline-none data-[state=open]:animate-[pop-in_160ms_var(--ease-emphasized)] data-[state=closed]:animate-[pop-out_130ms_ease]"
         :class="[frosted ? (layer.nested ? 'lp-glass-overlay lp-glass-overlay--nested' : 'lp-glass-overlay') : 'bg-surface-raised', previewPane && 'lp-cmd-split']"
@@ -1248,7 +1264,15 @@ useHotkeys(() =>
             :size="18"
             class="shrink-0 text-muted"
           />
-          <LpIcon v-else name="lucide:loader-circle" :size="18" class="shrink-0 animate-spin text-muted" />
+          <!-- At once, since it takes the search icon's place. It is the only
+               thing that tells a screen reader a search went out, so it speaks. -->
+          <LpLoader
+            v-else
+            size="inline"
+            :delay="0"
+            :labels="{ loading: text.searching }"
+            class="shrink-0 text-[18px] text-muted"
+          />
 
           <button
             v-for="(step, i) in trail"
@@ -1446,7 +1470,7 @@ useHotkeys(() =>
                       v-for="(para, i) in paragraphs"
                       :key="i"
                       class="lp-cmd-para mt-3 whitespace-pre-line text-sm leading-relaxed text-ink/90"
-                      :style="{ animationDelay: `${Math.min(i + 1, STAGGER_MAX) * STAGGER_MS}ms` }"
+                      :style="{ animationDelay: paraDelay(i) }"
                     >
                       <template v-for="(p, pi) in highlight(para, paneBody.highlight)" :key="`p${pi}`">
                         <mark v-if="p.hit" class="rounded-xs bg-brand/25 text-ink">{{ p.text }}</mark>
@@ -1548,13 +1572,8 @@ useHotkeys(() =>
   transform: translateX(40%);
 }
 .lp-cmd-para {
-  animation: lp-cmd-para-in 260ms ease-out both;
-}
-@keyframes lp-cmd-para-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
+  --rise: 4px;
+  animation: rise-in 260ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
   .lp-cmd-split,
@@ -1573,13 +1592,8 @@ useHotkeys(() =>
 }
 /* Each result eases in; honours reduced motion. */
 .lp-cmd-item {
-  animation: lp-cmd-in 140ms ease-out both;
-}
-@keyframes lp-cmd-in {
-  from {
-    opacity: 0;
-    transform: translateY(3px);
-  }
+  --rise: 3px;
+  animation: rise-in 140ms ease-out both;
 }
 @media (prefers-reduced-motion: reduce) {
   .lp-cmd-item {

package/src/components/LpContextMenu.vue

@@ -14,6 +14,7 @@ import { HINT_SIGNALS, noteContextTarget } from "../composables/useHintSystem"
 import ContextMenuItems from "./ContextMenuItems.vue"
 import MenuTitle from "./MenuTitle.vue"
 import { POPOVER_PANEL } from "./dropdown"
+import { useOutsideGuard, usePortalTarget, useView, viewDocument } from "../composables/useView"
 
 export interface ContextMenuItemDef {
   label: string
@@ -80,12 +81,13 @@ const PANEL = `${POPOVER_PANEL} z-(--z-popover) min-w-48 p-1 outline-none`
 // selection if the menu action left the text as it was.
 type TextField = HTMLInputElement | HTMLTextAreaElement
 const SELECTABLE = new Set(["text", "search", "url", "tel", "password"])
+const view = useView()
 let field: { el: TextField; value: string; start: number; end: number } | null = null
 
 function rememberField() {
-  const el = document.activeElement
+  const el = viewDocument(view.value).activeElement
   const text =
-    el instanceof HTMLTextAreaElement || (el instanceof HTMLInputElement && SELECTABLE.has(el.type))
+    el?.tagName === "TEXTAREA" || (el?.tagName === "INPUT" && SELECTABLE.has((el as HTMLInputElement).type))
   field = text
     ? { el: el as TextField, value: (el as TextField).value, start: (el as TextField).selectionStart ?? 0, end: (el as TextField).selectionEnd ?? 0 }
     : null
@@ -138,6 +140,12 @@ function returnFocus(event: Event) {
   saved.el.focus()
   if (saved.el.value === saved.value) saved.el.setSelectionRange(saved.start, saved.end)
 }
+
+// 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>
@@ -156,8 +164,10 @@ function returnFocus(event: Event) {
     >
       <slot />
     </ContextMenuTrigger>
-    <ContextMenuPortal v-if="items.length">
+    <ContextMenuPortal :to="portalTo" v-if="items.length">
       <ContextMenuContent
+        @interact-outside="guardOutside"
+        @escape-key-down="guardOutside"
         :collision-padding="8"
         :class="PANEL"
         :aria-label="title"