@leavepulse/ui 0.72.2 → 0.72.4

package/src/components/LpShift.vue

@@ -57,9 +57,10 @@ const props = withDefaults(
      * Fade the box's own children in and out as they come and go. Without it
      * the box glides but a control still pops into being as the edge uncovers
      * it, and one that leaves is gone in a frame while its space closes up.
-     * Only direct children: what a child does inside itself is its own affair,
-     * so a control that changes its label carries the label as its `key` and
-     * is replaced, the old one fading as the new one arrives.
+     * Anything that takes room counts, at any depth, since controls often
+     * arrive by teleport into a wrapper inside the box; an absolutely placed
+     * overlay (a tab's marker) does not, it moves nothing and animates itself.
+     * Markup put back unchanged by a re-render is not animated either.
      */
     presence?: boolean
   }>(),
@@ -105,6 +106,7 @@ interface Seen {
   height: number
   x: number
   y: number
+  flow: boolean
 }
 
 const seen = new WeakMap<Element, Seen>()
@@ -129,15 +131,48 @@ function remember(box: HTMLElement) {
       height: r.height,
       x: r.left,
       y: r.top,
+      flow: inFlow(node),
     })
   }
 }
 
+// Only what takes room in the box comes and goes visibly. An overlay inside a
+// control (a tab's sliding marker, a badge pinned to a corner) moves nothing
+// around it and is animated by its own component; fading it in on top would
+// override that animation's transform, and the marker would pop instead of
+// sliding.
+function inFlow(node: Element): boolean {
+  const position = getComputedStyle(node).position
+  return position !== "absolute" && position !== "fixed"
+}
+
+// A re-render that puts back the same markup (a page redrawing its header
+// actions, a list re-keyed after a reload) is not a change anyone sees, so the
+// pair is left alone rather than flashing out and in.
+function signature(node: Node): string | undefined {
+  return node instanceof Element ? node.outerHTML : undefined
+}
+
+function unchanged(records: MutationRecord[]): Set<Node> {
+  const removed = new Map<string, Node[]>()
+  for (const record of records) record.removedNodes.forEach((node) => {
+    const key = signature(node)
+    if (key) removed.set(key, [...(removed.get(key) ?? []), node])
+  })
+  const same = new Set<Node>()
+  for (const record of records) record.addedNodes.forEach((node) => {
+    const key = signature(node)
+    const twin = key ? removed.get(key)?.shift() : undefined
+    if (twin) same.add(twin).add(node)
+  })
+  return same
+}
+
 const offset = () => (props.anchor === "end" ? -6 : 6)
 
 function ghost(box: HTMLElement, node: Element) {
   const at = seen.get(node)
-  if (!at || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return
+  if (!at || !at.flow || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return
   const copy = node.cloneNode(true) as HTMLElement
   copy.setAttribute(GHOST, "")
   copy.setAttribute("aria-hidden", "true")
@@ -172,7 +207,7 @@ function ghost(box: HTMLElement, node: Element) {
 }
 
 function arrive(node: Element) {
-  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST)) return
+  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST) || !inFlow(node)) return
   node.animate(
     [
       { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
@@ -208,11 +243,12 @@ watch(
       )
       if (real.length && !prefersReducedMotion()) {
         const added = new Set<Node>()
+        const same = unchanged(real)
         for (const record of real) {
-          record.removedNodes.forEach((node) => node instanceof Element && ghost(box, node))
+          record.removedNodes.forEach((node) => node instanceof Element && !same.has(node) && ghost(box, node))
           record.addedNodes.forEach((node) => {
             added.add(node)
-            if (node instanceof Element) arrive(node)
+            if (node instanceof Element && !same.has(node)) arrive(node)
           })
         }
         // Measured in the next frame, which still comes before the paint: by

package/src/components/LpSidebarNav.vue

@@ -281,6 +281,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
         :pill="false"
         :pill-id="pillId"
         compact
+        group
         :on-path="section.items.some((i) => itemActive(i) || onPath(i))"
         :preview-delay="previewDelay"
         :item-active="itemActive"

package/src/components/LpSidebarRow.vue

@@ -31,6 +31,8 @@ const props = withDefaults(
     pill: boolean
     pillId: string
     compact?: boolean
+    /** A folded group standing in for its pages: a click opens its card. */
+    group?: boolean
     /** A page under another: indented, a size smaller. */
     nested?: boolean
     menu?: ContextMenuItemDef[]
@@ -98,11 +100,25 @@ const initials = computed(() =>
 const hidden = computed(() => (props.compact || !props.expanded) && !!props.item.children?.some(waiting))
 const hasBadge = computed(() => props.item.badge != null || !!props.item.dot || hidden.value)
 const card = computed(() => !props.item.disabled && (props.compact || !!props.item.preview))
+
+// A folded group with no page of its own is reached only through its card, so
+// a click opens the card rather than waiting for the pointer to rest: a click
+// that does nothing on a nav icon reads as broken.
+const cardOpen = ref(false)
+const opensCard = computed(() => props.compact && props.group && !!props.item.children?.length)
+function press(): void {
+  if (opensCard.value) {
+    cardOpen.value = !cardOpen.value
+    return
+  }
+  emit("activate", props.item)
+}
 const delay = computed(() => (props.compact && !props.item.preview ? 250 : props.previewDelay))
 </script>
 
 <template>
   <LpHoverCard
+      v-model:open="cardOpen"
       :disabled="!card"
       side="right"
       align="start"
@@ -136,7 +152,8 @@ const delay = computed(() => (props.compact && !props.item.preview ? 250 : props
                 ? 'text-ink'
                 : 'text-muted hover:text-ink',
           ]"
-          @click="emit('activate', item)"
+          :aria-expanded="opensCard ? cardOpen : undefined"
+          @click="press"
           @pointerenter="emit('hover', item)"
         >
           <span

package/src/components/LpToaster.vue

@@ -204,7 +204,7 @@ async function settle(t: ToastItem, run: () => void | Promise<void>) {
  */
 const copyable = (t: ToastItem) => t.variant === "error" || t.variant === "warning"
 // Read on click rather than bound, so a toast whose text is updated in place copies what it now says.
-const toastText = (t: ToastItem) => () => [t.title, t.message, t.details].filter(Boolean).join("\n")
+const toastText = (t: ToastItem) => () => [t.title, t.message, t.details, t.context].filter(Boolean).join("\n")
 
 function selecting(): boolean {
   return Boolean(window.getSelection()?.toString())

package/src/composables/useToast.ts

@@ -25,6 +25,8 @@ export interface ToastItem {
   onClick?: () => void | Promise<void>
   /** Copied with the message, not shown: what a bug report needs (request, status, ids). */
   details?: string
+  /** Page and moment an error toast came up, copied last: "it broke" rarely says where or when. */
+  context?: string
 }
 
 export interface ToastOptions {
@@ -61,9 +63,26 @@ function detailsOf(source: unknown, depth = 0): string | undefined {
   return detailsOf(cause, depth + 1)
 }
 
+// A code fault (TypeError and the like) has no request behind it, and its
+// message alone ("x is undefined") says nothing about where it happened: the
+// copy gets its type and stack instead. Firefox and Safari leave the message
+// out of `stack`, Chromium starts with it; the head is written once either way.
+function traceOf(source: unknown): string | undefined {
+  if (!(source instanceof Error)) return undefined
+  const head = `${source.name}: ${source.message}`
+  const frames = (source.stack ?? "").split("\n").filter((line) => line.trim() && line.trim() !== head)
+  const own = [head, ...frames].join("\n")
+  const inner = traceOf(source.cause)
+  return inner ? `${own}\nCaused by ${inner}` : own
+}
+
 function split(message: ToastMessage, options: ToastOptions): [string, ToastOptions] {
   const text = typeof message === "string" ? message : message.message
-  const details = options.details ?? (typeof message === "string" ? undefined : detailsOf(message)) ?? detailsOf(options.cause)
+  const details =
+    options.details ??
+    (typeof message === "string" ? undefined : detailsOf(message)) ??
+    detailsOf(options.cause) ??
+    traceOf(typeof message === "string" ? options.cause : message)
   return [text, { ...options, details }]
 }
 
@@ -101,6 +120,7 @@ function push(
     actions: options.actions,
     onClick: options.onClick,
     details: options.details,
+    context: variant === "error" ? [globalThis.location?.href, new Date().toISOString()].filter(Boolean).join(" · ") : undefined,
   }
 
   const same = options.key === undefined ? -1 : queue.findIndex((t) => t.key === options.key)