@leavepulse/ui 0.72.3 → 0.72.5

package/src/components/LpAppShell.vue

@@ -31,7 +31,7 @@ export default { inheritAttrs: false }
  * Overlays that aren't part of the frame (command palette, toaster) live in the
  * host next to <LpAppShell>.
  */
-import { computed, ref, useId, watch } from "vue"
+import { computed, onMounted, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
 import LpBottomNav from "./LpBottomNav.vue"
 import LpButton from "./LpButton.vue"
@@ -180,6 +180,10 @@ const text = useLabels(
  * a scrolled page landed mid-way down the next one.
  */
 const scrollArea = ref<{ viewportEl: HTMLElement | null } | null>(null)
+const bleedId = `lp-shell-bleed-${useId()}`
+const mounted = ref(false)
+onMounted(() => (mounted.value = true))
+const bleeding = computed(() => props.fullBleed && mounted.value)
 const mainId = `lp-main-${useId()}`
 
 // Focus instead of following the hash, which a router would treat as a navigation.
@@ -348,18 +352,23 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       </header>
 
       <!-- full-bleed: page owns the whole region (canvas/map); otherwise the
-           single scroll region with padding. -->
+           single scroll region with padding. The page is rendered once and
+           moved between the two by a teleport rather than drawn in two
+           branches: switching branches remounted the whole page, so a section
+           tab going from a full-bleed page to a padded one cut instead of
+           playing its transition, and lost the page's state. Until mount the
+           page stays in the scroll region, which is what a server render has. -->
       <main :id="mainId" tabindex="-1" class="flex min-h-0 flex-1 flex-col outline-none">
-        <div v-if="fullBleed" class="min-h-0 flex-1 overflow-hidden">
-          <slot />
-        </div>
+        <div v-show="bleeding" :id="bleedId" class="min-h-0 flex-1 overflow-hidden" />
         <LpScrollArea
-          v-else
+          v-show="!bleeding"
           ref="scrollArea"
           class="min-h-0 flex-1"
           :content-class="mergeClass('px-4 py-6 md:px-6', contentClass)"
         >
-          <slot />
+          <Teleport :to="`#${bleedId}`" :disabled="!bleeding" defer>
+            <slot />
+          </Teleport>
         </LpScrollArea>
       </main>
       <LpBottomNav

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