@leavepulse/ui 0.68.0 → 0.70.0

package/src/components/LpRevealOnScroll.vue

@@ -0,0 +1,125 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * LpRevealOnScroll — content that arrives when it is first scrolled into view.
+ *
+ *   <LpRevealOnScroll preset="rise" :stagger="60">
+ *     <LpCard v-for="item in items" :key="item.id">…</LpCard>
+ *   </LpRevealOnScroll>
+ *
+ * useReveal answers "has this been seen yet"; this is the entrance itself for
+ * content that has no animation of its own — a section of a landing page, a
+ * block of cards, a settings group further down a long page. Components that
+ * already animate their own arrival (charts, progress, number flows) gate it
+ * on useReveal themselves and need no wrapper.
+ *
+ * `stagger` animates the direct children one after another instead of the
+ * block as a whole — the wrapper is then just their parent, so put it where a
+ * grid or flex container would be and give it that layout through `class`.
+ *
+ * Plays once: content that scrolls away and back has already arrived. Reduced
+ * motion shows everything at once. Animations run through the Web Animations
+ * API on transform/opacity/filter only, so they never trigger layout.
+ */
+import { computed, onBeforeUnmount, ref, watch } from "vue"
+import { easingToken, prefersReducedMotion } from "../composables/easing"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useReveal } from "../composables/useReveal"
+import { revealFrom, revealTo, staggerDelay, type RevealDirection, type RevealPreset } from "./reveal"
+
+const props = withDefaults(
+  defineProps<{
+    /** How the content appears. `rise` suits most blocks; `fade` is the quietest. */
+    preset?: RevealPreset
+    /** The way the content travels for `rise` and `blur`: `up` comes from below. */
+    direction?: RevealDirection
+    /** Travel distance in px. */
+    distance?: number
+    /** Milliseconds to wait after the block is seen. */
+    delay?: number
+    /** Milliseconds per entrance. */
+    duration?: number
+    /**
+     * Milliseconds between consecutive direct children. 0 animates the block
+     * as one piece. The steps stop growing after ten children, so long lists
+     * still finish quickly.
+     */
+    stagger?: number
+    /** Show at once, without waiting or animating — for content already known to be on screen. */
+    immediate?: boolean
+    /** Fraction of the block that must be visible before it plays. */
+    threshold?: number
+    /** Element to render as. */
+    as?: string
+  }>(),
+  {
+    preset: "rise",
+    direction: "up",
+    distance: 16,
+    delay: 0,
+    duration: 520,
+    stagger: 0,
+    immediate: false,
+    threshold: 0.15,
+    as: "div",
+  },
+)
+
+const { el, revealed } = useReveal({ immediate: () => props.immediate, threshold: props.threshold })
+const host = ref<HTMLElement | null>(null)
+watch(host, (node) => (el.value = node))
+
+const { class: classes, attrs: rest } = useMergedAttrs(() => undefined)
+
+// Hidden only until the observer fires; `played` then keeps it visible for
+// good, even if the props change afterwards.
+const played = ref(false)
+const hidden = computed(() => !played.value && !revealed.value)
+
+const running: Animation[] = []
+
+function play(node: HTMLElement) {
+  if (props.immediate || prefersReducedMotion() || typeof node.animate !== "function") return
+  const from = revealFrom(props.preset, props.direction, props.distance)
+  const frames = [from, revealTo(from)]
+  const easing = easingToken("ease-emphasized")
+  // `backwards` holds each target in its hidden state through its delay, so a
+  // staggered child does not flash in before its turn.
+  const targets = props.stagger > 0 ? Array.from(node.children) : [node]
+  targets.forEach((target, index) => {
+    running.push(
+      target.animate(frames, {
+        duration: props.duration,
+        delay: props.stagger > 0 ? staggerDelay(index, props.delay, props.stagger) : props.delay,
+        easing,
+        fill: "backwards",
+      }),
+    )
+  })
+}
+
+watch(
+  revealed,
+  (seen) => {
+    if (!seen || played.value) return
+    played.value = true
+    // Same tick as removing the hidden state: the animations start from the
+    // hidden frame before the browser paints the unhidden one.
+    if (host.value) play(host.value)
+  },
+  { flush: "post", immediate: true },
+)
+
+onBeforeUnmount(() => {
+  for (const animation of running) animation.cancel()
+})
+</script>
+
+<template>
+  <component :is="as" ref="host" :class="classes" :style="hidden ? { opacity: 0 } : undefined" v-bind="rest">
+    <slot />
+  </component>
+</template>

package/src/components/LpScramble.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+// The root class is merged with the consumer's (useMergedAttrs).
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+/*
+ * A value that "decrypts" into place: each character churns through random
+ * glyphs and settles, left to right or all at once.
+ *
+ * For values that are produced rather than read: a freshly generated API key,
+ * a hash a job returned, an invite code. Plain text that swaps says nothing
+ * about where it came from; the churn says "this was just made".
+ *
+ *   <LpScramble :value="token" class="font-mono" />
+ *   <LpScramble value="ACCESS GRANTED" trigger="hover" order="together" />
+ *
+ * The width holds still while it churns: every position is sized by the
+ * character it will settle on (an invisible copy), and the random glyph is
+ * drawn over it, so even a proportional font does not jitter. A value that
+ * changes length eases its width (LpShift). Monospace still reads best: the
+ * glyphs then fill their cells exactly.
+ *
+ * Screen readers get the value once, as text; the churning cells are hidden
+ * from them, so nobody hears forty random letters.
+ *
+ * The clock lives in `useScramble`, for a component that wants the effect on
+ * its own markup.
+ */
+import { onMounted, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useMergedAttrs } from "../composables/useMergedClass"
+import { useReveal } from "../composables/useReveal"
+import { useScramble } from "../composables/useScramble"
+import LpShift from "./LpShift.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** The value the text settles on. */
+    value: string
+    /**
+     * What starts a scramble besides a change of `value`:
+     * `reveal` the first time it is on screen (a key below the fold decrypts
+     * when it is scrolled to), `mount` at once, `hover` each time the pointer
+     * comes in (a teaser), `none` only on changes and `play()`.
+     */
+    trigger?: "reveal" | "mount" | "hover" | "none"
+    /** Scramble travel time in ms. */
+    duration?: number
+    /** `sequential` decodes left to right; `together` lands every position at the end. */
+    order?: "sequential" | "together"
+    /** Glyph pool to churn through. Defaults to upper case, digits and a few symbols. */
+    glyphs?: string
+    /** Scramble when `value` changes. Off: a new value lands at once. */
+    animateChanges?: boolean
+    /** Element to render. */
+    as?: string
+  }>(),
+  { trigger: "reveal", duration: 900, order: "sequential", animateChanges: true, as: "span" },
+)
+
+const emit = defineEmits<{
+  /** A scramble landed on the value. */
+  done: []
+}>()
+
+const { class: rootClass, attrs: rest } = useMergedAttrs(() => "lp-scramble inline-block whitespace-pre align-baseline")
+
+// Under reduced motion the value shows as is from the first paint, rather than
+// a mask that is replaced a frame later.
+const masked = (props.trigger === "reveal" || props.trigger === "mount") && !prefersReducedMotion()
+const { cells, running, play } = useScramble(() => props.value, {
+  duration: () => props.duration,
+  order: () => props.order,
+  glyphs: () => props.glyphs,
+  onChange: () => props.animateChanges,
+  start: masked ? "masked" : "settled",
+  onDone: () => emit("done"),
+})
+
+const { el, revealed } = useReveal({ immediate: () => props.trigger !== "reveal" })
+watch(revealed, (seen) => seen && props.trigger === "reveal" && play())
+onMounted(() => {
+  if (props.trigger === "mount" || (props.trigger === "reveal" && revealed.value)) play()
+})
+
+function onEnter() {
+  if (props.trigger === "hover" && !running.value) play()
+}
+
+defineExpose({ play })
+</script>
+
+<template>
+  <component :is="as" ref="el" :class="rootClass" v-bind="rest" @pointerenter="onEnter">
+    <span class="sr-only">{{ value }}</span>
+    <LpShift axis="width" class="inline-block align-baseline" aria-hidden="true">
+      <template v-for="(cell, i) in cells" :key="i">
+        <template v-if="cell.settled">{{ cell.char }}</template>
+        <span v-else class="lp-scramble__cell relative inline-block"
+          ><span class="invisible">{{ cell.sizer }}</span
+          ><span class="absolute inset-0 text-center opacity-60">{{ cell.char }}</span></span
+        >
+      </template>
+    </LpShift>
+  </component>
+</template>

package/src/components/LpSecretField.vue

@@ -0,0 +1,313 @@
+<script lang="ts">
+export default { inheritAttrs: false }
+
+export interface SecretFieldLabels extends Record<string, string> {
+  show: string
+  hide: string
+  regenerate: string
+  hidden: string
+  empty: string
+  hidesIn: string
+}
+</script>
+
+<script setup lang="ts">
+/*
+ * A value someone must be able to read and copy but should not have on screen
+ * by default: an API key, a bot token, a webhook secret, a recovery code.
+ *
+ *   <LpSecretField label="Bot token" :value="token" :auto-hide="20" :regenerate="rotate" />
+ *   <LpSecretField v-model="secret" input label="Webhook secret" />
+ *
+ * Masked by default, so a screen share or a shoulder sees dots. The mask is a
+ * fixed run of dots rather than one per character: the length of a secret is
+ * itself a hint about what it is. Copy works while masked — copying is the
+ * common reason to open the page, and the value need not appear to do it.
+ *
+ * `autoHide` folds the value away again after N seconds, with a thin bar
+ * running down so the person sees it is about to go; the page going to the
+ * background hides it at once, since nobody is looking at a tab they left.
+ *
+ * Two forms. The default is a read-only display: the value may wrap, can be
+ * selected, and fades between dots and text. `input` makes it an editable
+ * field — that one IS LpPasswordInput (same shell, same eye button), driven
+ * through its `visible` model so the timer and the copy button live here.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
+import { useScramble } from "../composables/useScramble"
+import { useLabels } from "../composables/useLpConfig"
+import { mergeClass } from "../composables/useMergedClass"
+import FieldWrapper from "./FieldWrapper.vue"
+import LpButton from "./LpButton.vue"
+import LpCopyButton from "./LpCopyButton.vue"
+import LpIcon from "./LpIcon.vue"
+import LpPasswordInput from "./LpPasswordInput.vue"
+import LpShift from "./LpShift.vue"
+import LpTooltip from "./LpTooltip.vue"
+import RevealToggle from "./RevealToggle.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** The secret, for the read-only display. */
+    value?: string
+    /** The secret, for the `input` form (v-model). */
+    modelValue?: string
+    /** Editable field instead of a display. */
+    input?: boolean
+    label?: string
+    hint?: string
+    error?: string
+    placeholder?: string
+    size?: "sm" | "md" | "lg"
+    /** Show the copy button. On by default: copying is what a secret is shown for. */
+    copyable?: boolean
+    /** Offer the eye button. Off for a value that should only ever be copied, never shown. */
+    revealable?: boolean
+    /**
+     * Seconds after which a revealed value hides itself again. Unset keeps it
+     * shown until the person hides it.
+     */
+    autoHide?: number
+    /**
+     * Rotates the secret. The button spins while it runs and a failure is
+     * toasted (LpButton's `action`); the new value arrives through `value`.
+     * For a custom action (with a confirm, say) use the `actions` slot.
+     */
+    regenerate?: () => unknown
+    /** Let a long value wrap onto more lines instead of staying on one. Display form only. */
+    wrap?: boolean
+    disabled?: boolean
+    /** How many dots stand for the value while hidden. */
+    maskLength?: number
+    labels?: Partial<SecretFieldLabels>
+  }>(),
+  { size: "md", copyable: true, revealable: true, maskLength: 24 },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void
+  (e: "copied", text: string): void
+}>()
+
+/** Shown or hidden; bind it to drive the reveal from outside. */
+const revealed = defineModel<boolean>("revealed", { default: false })
+
+const text = useLabels<SecretFieldLabels>(
+  "secretField",
+  {
+    show: "Show",
+    hide: "Hide",
+    regenerate: "Regenerate",
+    hidden: "Hidden",
+    empty: "Not set",
+    hidesIn: "Hides automatically",
+  },
+  () => props.labels,
+)
+
+const secret = computed(() => (props.input ? props.modelValue : props.value) ?? "")
+
+// Revealing decrypts the value into place, and a new value (a regenerated key)
+// decrypts over the old one: the change is seen happening, not just swapped.
+// Fed nothing while hidden, so every reveal plays from empty again.
+const decrypt = useScramble(() => (revealed.value ? secret.value : ""), { onChange: true, duration: 650 })
+const mask = computed(() => "•".repeat(props.maskLength))
+
+// ── auto-hide ────────────────────────────────────────────────
+let hideTimer: ReturnType<typeof setTimeout> | undefined
+// Bumped on every reveal so the countdown bar restarts its run.
+const run = ref(0)
+watch(
+  [revealed, () => props.autoHide],
+  ([on, seconds]) => {
+    clearTimeout(hideTimer)
+    if (!on || !seconds) return
+    run.value++
+    hideTimer = setTimeout(() => (revealed.value = false), seconds * 1000)
+  },
+  { immediate: true },
+)
+// A new value (just regenerated) restarts the window rather than hiding it mid-read.
+watch(secret, () => {
+  if (revealed.value && props.autoHide) {
+    clearTimeout(hideTimer)
+    run.value++
+    hideTimer = setTimeout(() => (revealed.value = false), props.autoHide * 1000)
+  }
+})
+
+function onVisibility() {
+  if (document.visibilityState === "hidden") revealed.value = false
+}
+onMounted(() => document.addEventListener("visibilitychange", onVisibility))
+onBeforeUnmount(() => {
+  clearTimeout(hideTimer)
+  document.removeEventListener("visibilitychange", onVisibility)
+})
+
+// ── input form: the field's text is not a node we can fade, so it gets a
+// short blur-in on every switch instead of snapping between dots and text.
+const field = ref<{ $el?: Element } | null>(null)
+watch(revealed, () => {
+  if (!props.input || prefersReducedMotion()) return
+  const el = field.value?.$el
+  const input = el instanceof Element ? el.querySelector("input") : null
+  input?.animate([{ filter: "blur(4px)", opacity: 0.35 }, { filter: "blur(0)", opacity: 1 }], {
+    duration: 260,
+    easing: "cubic-bezier(0.2, 0, 0, 1)",
+  })
+})
+
+const id = useId()
+const iconSize = computed(() => (props.size === "sm" ? 14 : 16))
+const copySize = computed(() => (props.size === "lg" ? "sm" : "xs"))
+
+const shell = computed(() =>
+  mergeClass(
+    "relative flex w-full items-center gap-1 overflow-hidden rounded-control border bg-surface-soft text-ink transition-colors duration-(--duration-fast)",
+    props.error ? "border-danger" : "border-line",
+    props.disabled ? "opacity-55" : "",
+    props.wrap ? "py-1.5" : "",
+    { sm: "min-h-(--size-control-sm) pl-2.5 pr-1 text-xs", md: "min-h-(--size-control-md) pl-3 pr-1.5 text-sm", lg: "min-h-(--size-control-lg) pl-3.5 pr-1.5 text-sm" }[props.size],
+  ),
+)
+</script>
+
+<template>
+  <!-- Input form: LpPasswordInput itself, with the copy button beside its eye. -->
+  <LpPasswordInput
+    v-if="input"
+    ref="field"
+    v-bind="$attrs"
+    v-model:visible="revealed"
+    class="[&_input]:font-mono"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :size="size"
+    :labels="{ show: text.show, hide: text.hide }"
+    @update:model-value="(v: string) => emit('update:modelValue', v)"
+  >
+    <template v-if="$slots.leading" #leading><slot name="leading" /></template>
+    <template #actions>
+      <LpCopyButton
+        v-if="copyable && secret"
+        :value="secret"
+        size="xs"
+        class="size-7"
+        :disabled="disabled"
+        @copied="(t: string) => emit('copied', t)"
+      />
+      <slot name="actions" />
+      <LpButton
+        v-if="regenerate"
+        variant="ghost"
+        size="xs"
+        square
+        class="size-7"
+        :aria-label="text.regenerate"
+        :title="text.regenerate"
+        :action="regenerate"
+        :disabled="disabled"
+      >
+        <LpIcon name="lucide:refresh-cw" :size="iconSize" />
+      </LpButton>
+    </template>
+  </LpPasswordInput>
+
+  <!-- Display form. -->
+  <FieldWrapper
+    v-else
+    :wrapped="!!(label || hint || error)"
+    :id="id"
+    :label="label"
+    :hint="hint"
+    :error="error"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div :class="mergeClass(shell, label || hint || error ? '' : ($attrs.class as string))" data-lp-secret>
+      <LpShift axis="height" class="min-w-0 flex-1">
+        <!-- `aria-labelledby` would need the label's id; the field context
+             gives the control `id`, which LpFormField points its label at. -->
+        <div :id="id" class="relative min-w-0 font-mono" :aria-label="label" role="group">
+          <Transition
+            mode="out-in"
+            enter-active-class="transition-[opacity,filter] duration-(--duration-medium) ease-(--ease-emphasized) motion-reduce:transition-none"
+            leave-active-class="transition-[opacity,filter] duration-(--duration-fast) ease-out motion-reduce:transition-none"
+            enter-from-class="opacity-0 blur-[4px]"
+            leave-to-class="opacity-0 blur-[4px]"
+          >
+            <span
+              v-if="!secret"
+              key="empty"
+              class="block truncate font-sans text-muted"
+            >{{ placeholder ?? text.empty }}</span>
+            <span v-else-if="revealed" key="shown" class="block select-all" :class="wrap ? 'break-all whitespace-pre-wrap' : 'truncate'">
+              <span aria-hidden="true">{{ decrypt.running.value ? decrypt.text.value : secret }}</span>
+              <span class="sr-only">{{ secret }}</span>
+            </span>
+            <span v-else key="hidden" class="block truncate tracking-[0.12em] text-muted select-none" aria-hidden="true">{{ mask }}</span>
+          </Transition>
+          <span v-if="secret && !revealed" class="sr-only">{{ text.hidden }}</span>
+        </div>
+      </LpShift>
+
+      <div class="flex shrink-0 items-center gap-0.5" :class="wrap ? 'self-start' : 'self-center'">
+        <RevealToggle
+          v-if="revealable && secret"
+          v-model="revealed"
+          :icon-size="iconSize"
+          :show-label="text.show"
+          :hide-label="text.hide"
+          :disabled="disabled"
+          :controls="id"
+          class="size-7"
+        />
+        <LpCopyButton
+          v-if="copyable && secret"
+          :value="secret"
+          :size="copySize"
+          class="size-7 text-muted hover:text-ink"
+          :disabled="disabled"
+          @copied="(t: string) => emit('copied', t)"
+        />
+        <slot name="actions" />
+        <LpTooltip v-if="regenerate" :content="text.regenerate" label>
+          <LpButton
+            variant="ghost"
+            size="xs"
+            square
+            class="size-7 text-muted hover:text-ink"
+            :action="regenerate"
+            :disabled="disabled"
+          >
+            <LpIcon name="lucide:refresh-cw" :size="iconSize" />
+          </LpButton>
+        </LpTooltip>
+      </div>
+
+      <!-- The auto-hide window running out, as a hairline along the bottom. -->
+      <Transition
+        enter-active-class="transition-opacity duration-(--duration-fast)"
+        leave-active-class="transition-opacity duration-(--duration-fast)"
+        enter-from-class="opacity-0"
+        leave-to-class="opacity-0"
+      >
+        <span
+          v-if="revealed && autoHide"
+          :key="run"
+          class="lp-drain pointer-events-none absolute inset-x-0 bottom-0 h-0.5 bg-brand/70"
+          :style="{ animationDuration: `${autoHide}s` }"
+          :title="text.hidesIn"
+          aria-hidden="true"
+        />
+      </Transition>
+    </div>
+  </FieldWrapper>
+</template>
+

package/src/components/LpSegmented.vue

@@ -19,6 +19,7 @@ import { ref, useId } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
 import { usePillTransition } from "../composables/usePillTransition"
+import AttentionDot from "./AttentionDot.vue"
 import LpIcon from "./LpIcon.vue"
 import type { LpOptionBase } from "./options"
 
@@ -140,18 +141,10 @@ function releaseFocusAfterPointer(event: PointerEvent) {
       />
       <span v-if="opt.icon" class="relative z-10 inline-flex shrink-0">
         <LpIcon :name="opt.icon" :size="size === 'lg' ? 16 : 14" />
-        <span
-          v-if="opt.dot && !opt.label"
-          aria-hidden="true"
-          class="absolute -right-1 -top-0.5 size-2 rounded-full bg-accent"
-        />
+        <AttentionDot v-if="opt.dot && !opt.label" corner />
       </span>
       <span v-if="opt.label" class="relative z-10">{{ opt.label }}</span>
-      <span
-        v-if="opt.dot && opt.label"
-        aria-hidden="true"
-        class="relative z-10 size-1.5 self-start mt-1.5 rounded-full bg-accent"
-      />
+      <AttentionDot v-if="opt.dot && opt.label" class="mt-1.5" />
     </ToggleGroupItem>
   </ToggleGroupRoot>
 </template>