@leavepulse/ui 0.71.2 → 0.72.1

package/src/components/LpAppShell.vue

@@ -33,6 +33,7 @@ export default { inheritAttrs: false }
  */
 import { computed, ref, useId, watch } from "vue"
 import { useLabels } from "../composables/useLpConfig"
+import LpBottomNav from "./LpBottomNav.vue"
 import LpButton from "./LpButton.vue"
 import LpIcon from "./LpIcon.vue"
 import LpScrollArea from "./LpScrollArea.vue"
@@ -82,11 +83,37 @@ const props = withDefaults(
     loading?: boolean
     /** Text overrides: the burger's name and the skip link. */
     labels?: Partial<{ openMenu: string; skipToContent: string }>
+    /** Icon-only rail (v-model:compact). Forwarded to LpSidebar. */
+    compact?: boolean
+    /** The person sizes the rail and folds it to icons. Forwarded to LpSidebar. */
+    resizable?: boolean
+    /** Rows can be pinned to the top (v-model:pinned). Forwarded to LpSidebar. */
+    pinnable?: boolean
+    pinned?: string[]
+    /** Remember folded groups, width, compact and pins under this key. Forwarded to LpSidebar. */
+    persist?: string
+    /** Rest time before a row's `preview` card opens. Forwarded to LpSidebar. */
+    previewDelay?: number
+    /** The key that folds the rail; false turns it off. Forwarded to LpSidebar. */
+    compactHotkey?: string | false
+    /** Marks a non-production copy along the top of the rail. Forwarded to LpSidebar. */
+    environment?: string | { label: string; tone?: "warning" | "danger" | "action" | "brand" }
+    /** The app's hint system; rows with a `hintPage` show unread news as a dot. Forwarded to LpSidebar. */
+    hints?: { unreadNews: (page?: string) => readonly unknown[] }
+    /**
+     * On phones, the main pages along the bottom instead of the burger, with
+     * "More" for the rest (it opens the drawer). `true` takes the first four
+     * pages, a number that many, a list of ids those pages.
+     */
+    bottomNav?: boolean | number | string[]
   }>(),
   {
     mobileBreakpoint: "lg",
     divider: true,
     contentClass: "mx-auto w-full max-w-6xl",
+    // Unset, not false: an absent boolean would hand the sidebar "expanded"
+    // and override the state it remembers.
+    compact: undefined,
   },
 )
 
@@ -94,11 +121,13 @@ const emit = defineEmits<{
   (e: "update:modelValue", id: string): void
   (e: "update:collapsed", keys: string[]): void
   (e: "select", item: SidebarItem): void
+  (e: "update:compact", value: boolean): void
+  (e: "update:pinned", ids: string[]): void
 }>()
 
 // Normalise items/sections to a flat list for the title computation.
 const flatItems = computed<SidebarItem[]>(() =>
-  props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? []),
+  (props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? [])).flatMap((i) => [i, ...(i.children ?? [])]),
 )
 
 // Default active test: exact match for "/", prefix match (on a segment
@@ -179,7 +208,23 @@ const burgerHidden: Record<NonNullable<typeof props.mobileBreakpoint>, string> =
   lg: "lg:hidden",
   xl: "xl:hidden",
 }
-const burgerClass = computed(() => burgerHidden[props.mobileBreakpoint])
+const burgerClass = computed(() => (props.bottomNav ? "hidden" : burgerHidden[props.mobileBreakpoint]))
+
+const topItems = computed<SidebarItem[]>(() => (props.sections ? props.sections.flatMap((s) => s.items) : (props.items ?? [])))
+const bottomItems = computed<SidebarItem[]>(() => {
+  const want = props.bottomNav
+  if (!want) return []
+  if (Array.isArray(want)) return want.map((id) => topItems.value.find((i) => i.id === id)).filter((i): i is SidebarItem => !!i)
+  return topItems.value.slice(0, want === true ? 4 : want)
+})
+const moreActive = computed(() => {
+  const shown = new Set(bottomItems.value.map((i) => i.id))
+  return flatItems.value.some((i) => !shown.has(i.id) && activeTest.value(i)) && !bottomItems.value.some((i) => activeTest.value(i))
+})
+function onBottom(item: SidebarItem) {
+  onModel(item.id)
+  onSelect(item)
+}
 
 // Expose the burger trigger so a host can omit its own header entirely.
 const _openDrawer = () => (drawerOpen.value = true)
@@ -215,20 +260,31 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :loading="loading"
       :collapsed="collapsed"
       :auto-collapse-after="autoCollapseAfter"
+      :compact="compact"
+      :resizable="resizable"
+      :pinnable="pinnable"
+      :pinned="pinned"
+      :persist="persist"
+      :preview-delay="previewDelay"
+      :compact-hotkey="compactHotkey"
+      :environment="environment"
+      :hints="hints"
       class="shrink-0"
       @update:model-value="onModel"
+      @update:compact="(v) => emit('update:compact', v)"
+      @update:pinned="(v) => emit('update:pinned', v)"
       @update:open="(v) => (drawerOpen = v)"
       @update:collapsed="(v) => emit('update:collapsed', v)"
       @select="onSelect"
     >
-      <template v-if="$slots.logo" #header>
-        <slot name="logo" />
+      <template v-if="$slots.logo" #header="{ compact: folded }">
+        <slot name="logo" :compact="folded" />
       </template>
       <template v-if="$slots['sidebar-actions']" #actions>
         <slot name="sidebar-actions" />
       </template>
-      <template v-if="$slots['sidebar-footer']" #footer>
-        <slot name="sidebar-footer" />
+      <template v-if="$slots['sidebar-footer']" #footer="{ compact: folded }">
+        <slot name="sidebar-footer" :compact="folded" />
       </template>
       <template v-if="$slots['sidebar-item']" #item="slotProps">
         <slot name="sidebar-item" v-bind="slotProps" />
@@ -261,7 +317,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
              translation that wraps a long title onto a second line, otherwise
              re-lays the whole bar in one frame. Width is left free so the
              truncation still resolves against the space actually available. -->
-        <LpShift axis="height" class="flex min-w-0 flex-1 items-center">
+        <LpShift axis="height" presence class="flex min-w-0 flex-1 items-center">
           <slot name="header-title">
             <h1 class="truncate text-lg font-semibold">{{ pageTitle }}</h1>
           </slot>
@@ -283,6 +339,8 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
              the title keeps a third and every button stays reachable. -->
         <LpShift
           axis="width"
+          anchor="end"
+          presence
           class="ml-auto flex max-w-[66%] shrink items-center gap-2 overflow-x-auto lp-scrollbar-none md:max-w-none md:shrink-0 md:overflow-visible"
         >
           <slot name="header-actions" />
@@ -304,6 +362,16 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
           <slot />
         </LpScrollArea>
       </main>
+      <LpBottomNav
+        v-if="bottomNav"
+        :class="burgerHidden[mobileBreakpoint]"
+        :items="bottomItems"
+        :is-active="activeTest"
+        more
+        :more-active="moreActive"
+        @select="onBottom"
+        @more="drawerOpen = true"
+      />
     </div>
 
     <slot name="overlays" />

package/src/components/LpBottomNav.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/*
+ * A phone app's bottom navigation: the main pages along the bottom edge, each
+ * a real link (or a button that emits `select`), the current one marked by a
+ * bar that slides between them, and "More" last for everything else.
+ *
+ * It looks exactly like LpTabs' bottom variant, sharing its bar and its tab
+ * face, but it is navigation between pages, not tabs within one: links that a
+ * screen reader announces as links, that open in a new tab when asked to, and
+ * that need no router call from the app. LpAppShell shows one on phones with
+ * `bottomNav`; an app with a shell of its own uses it directly.
+ */
+import { Motion } from "motion-v"
+import { useId } from "vue"
+import { usePillTransition } from "../composables/usePillTransition"
+import { useLabels, useLinkComponent } from "../composables/useLpConfig"
+import { resolveLink, type ResolvedLink } from "./link"
+import LpTabFace from "./LpTabFace.vue"
+import type { SidebarItem } from "./sidebar"
+import { BOTTOM_BAR, BOTTOM_ITEM, BOTTOM_MARKER } from "./tabs"
+
+const props = withDefaults(
+  defineProps<{
+    items: SidebarItem[]
+    /** Active page id. Ignored when `isActive` is given. */
+    modelValue?: string
+    isActive?: (item: SidebarItem) => boolean
+    /** A last "More" entry that emits `more` (the shell opens its drawer). */
+    more?: boolean
+    /** Marks "More" current: the page shown is one of those behind it. */
+    moreActive?: boolean
+    label?: string
+    labels?: Partial<{ nav: string; more: string }>
+  }>(),
+  { more: false, moreActive: false },
+)
+
+const emit = defineEmits<{
+  (e: "select", item: SidebarItem): void
+  (e: "more"): void
+}>()
+
+const text = useLabels("bottomNav", { nav: "Main", more: "More" }, () => props.labels)
+const linkComponent = useLinkComponent()
+const pillTransition = usePillTransition()
+const markerId = `lp-bottom-nav-${useId()}`
+
+function active(item: SidebarItem): boolean {
+  return props.isActive ? props.isActive(item) : item.id === props.modelValue
+}
+
+function rowOf(item: SidebarItem): ResolvedLink {
+  const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href })
+  return link ?? { is: "button", props: { type: "button", disabled: item.disabled || undefined } }
+}
+
+const ROW = "relative flex items-center justify-center outline-none transition-[color,opacity] duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring"
+</script>
+
+<template>
+  <nav :aria-label="label ?? text.nav" :class="BOTTOM_BAR">
+    <component
+      :is="rowOf(item).is"
+      v-for="item in items"
+      :key="item.id"
+      v-bind="rowOf(item).props"
+      :aria-current="active(item) ? 'page' : undefined"
+      :class="[ROW, BOTTOM_ITEM, item.disabled ? 'cursor-not-allowed opacity-45' : active(item) ? 'text-brand' : 'text-muted']"
+      @click="emit('select', item)"
+    >
+      <Motion v-if="active(item)" :layout-id="markerId" :transition="pillTransition" :class="[BOTTOM_MARKER, 'bg-brand']" />
+      <LpTabFace :item="item" bottom :active="active(item)" />
+    </component>
+    <button
+      v-if="more"
+      type="button"
+      :class="[ROW, BOTTOM_ITEM, moreActive ? 'text-brand' : 'text-muted']"
+      @click="emit('more')"
+    >
+      <Motion v-if="moreActive" :layout-id="markerId" :transition="pillTransition" :class="[BOTTOM_MARKER, 'bg-brand']" />
+      <LpTabFace :item="{ label: text.more, icon: 'lucide:menu' }" bottom :active="moreActive" />
+    </button>
+  </nav>
+</template>

package/src/components/LpColorPicker.vue

@@ -104,6 +104,17 @@ const props = withDefaults(
     size?: "sm" | "md" | "lg"
     /** Trigger text beside the swatch. Defaults to the colour's own value. */
     label?: string
+    /**
+     * `swatch` makes the trigger a round chip of the colour alone, for a row of
+     * presets that ends in "any colour" or a toolbar with no room for a field.
+     * The panel is the same.
+     */
+    variant?: "field" | "swatch"
+    /**
+     * The swatch is the current choice. False draws it as "any colour" (a
+     * colour wheel), for when the value came from presets beside it.
+     */
+    selected?: boolean
     /** Accessible name for the trigger when it carries no visible text. */
     ariaLabel?: string
     /** Popover side, as LpPopover. */
@@ -156,6 +167,8 @@ const props = withDefaults(
     recent: false,
     recentKey: "lp.color.recent",
     recentLimit: 8,
+    variant: "field",
+    selected: true,
   },
 )
 
@@ -372,6 +385,9 @@ function tickClass(value: string) {
   return rgb && isLight(rgbToHsv(rgb)) ? "text-black" : "text-white"
 }
 
+const SWATCH_SIZE = { sm: "size-6", md: "size-7", lg: "size-8" }
+const ANY_COLOUR = "conic-gradient(from 90deg, #ff5c5c, #ffd23f, #39e58c, #2dd4bf, #00bcff, #7c5cff, #ff5ca8, #ff5c5c)"
+
 const triggerSize = {
   sm: "h-(--size-control-sm) text-xs",
   md: "h-(--size-control-md) text-sm",
@@ -634,10 +650,25 @@ const guardOutside = useOutsideGuard()
          menu's trigger and the popover's trigger both. LpContextMenu renders
          just its slot when `items` is empty, so `menu="none"` with no items of
          your own leaves the native browser menu in place. -->
-    <PopoverAnchor class="block w-full">
+    <PopoverAnchor :class="variant === 'swatch' ? 'inline-block' : 'block w-full'">
       <LpContextMenu :items="menuItems">
       <PopoverTrigger as-child>
         <button
+          v-if="variant === 'swatch'"
+          type="button"
+          :id="field.id"
+          :disabled="field.disabled"
+          :aria-label="ariaLabel ?? current"
+          :title="current"
+          class="relative shrink-0 overflow-hidden rounded-full outline-none ring-2 ring-offset-2 ring-offset-surface-raised transition-[box-shadow,scale] duration-(--duration-fast) hover:scale-110 focus-visible:ring-ring data-[state=open]:ring-brand disabled:cursor-not-allowed disabled:opacity-55"
+          :class="[SWATCH_SIZE[size], selected ? 'ring-ink' : 'ring-line']"
+          :style="{ background: CHECKERBOARD }"
+        >
+          <span class="block size-full" :style="{ background: selected ? previewCss : ANY_COLOUR }" />
+          <LpIcon v-if="!selected" name="lucide:pipette" :size="12" class="absolute inset-0 m-auto text-white drop-shadow" />
+        </button>
+        <button
+          v-else
           type="button"
           :id="field.id"
           :disabled="field.disabled"

package/src/components/LpEmptyState.vue

@@ -45,7 +45,10 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     </div>
     <div class="flex flex-col gap-1">
       <p class="font-semibold text-ink" :class="compact ? 'text-sm' : ''">{{ title }}</p>
-      <p v-if="description" class="max-w-sm text-sm text-muted">{{ description }}</p>
+      <!-- The slot is for a line a string cannot carry: a command, a link. -->
+      <p v-if="description || $slots.description" class="max-w-sm text-sm text-muted">
+        <slot name="description">{{ description }}</slot>
+      </p>
     </div>
     <div v-if="$slots.default" class="mt-1"><slot /></div>
   </div>

package/src/components/LpKeys.vue

@@ -34,7 +34,11 @@ const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : combo
   <span class="lp-keys" :class="`lp-keys--${size}`">
     <template v-for="(step, stepIndex) in steps" :key="stepIndex">
       <span v-if="stepIndex" class="lp-keys__then">{{ text.then }}</span>
-      <kbd v-for="(key, index) in step" :key="`${key}-${index}`">{{ appleModifierLabel(key.trim(), apple) }}</kbd>
+      <!-- A chord never splits: squeezed, the keys wrap between steps, not
+           between Ctrl and K. -->
+      <span class="lp-keys__step">
+        <kbd v-for="(key, index) in step" :key="`${key}-${index}`">{{ appleModifierLabel(key.trim(), apple) }}</kbd>
+      </span>
     </template>
     <span v-if="label || $slots.default" class="lp-keys__label"><slot>{{ label }}</slot></span>
   </span>
@@ -48,6 +52,11 @@ const steps = computed(() => (Array.isArray(props.combo) ? [props.combo] : combo
   gap: 3px;
   color: var(--color-muted);
 }
+.lp-keys__step {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+}
 .lp-keys__then {
   padding: 0 2px;
   font-size: 0.68rem;

package/src/components/LpNumberFlow.vue

@@ -375,7 +375,9 @@ const label = computed(
     class="lp-nf inline-flex items-baseline tabular-nums"
   >
     <span class="sr-only">{{ label }}</span>
-    <span v-if="prefix" aria-hidden="true">{{ prefix }}</span>
+    <!-- `pre`: a flex item drops its leading and trailing spaces, so " ms"
+         as a suffix printed "12.8ms". -->
+    <span v-if="prefix" aria-hidden="true" class="whitespace-pre">{{ prefix }}</span>
 
     <span class="lp-nf__track inline-flex items-baseline" aria-hidden="true">
       <TransitionGroup name="lp-nf-cell">
@@ -402,7 +404,7 @@ const label = computed(
       </TransitionGroup>
     </span>
 
-    <span v-if="suffix" aria-hidden="true">{{ suffix }}</span>
+    <span v-if="suffix" aria-hidden="true" class="whitespace-pre">{{ suffix }}</span>
   </span>
 </template>
 

package/src/components/LpRollingText.vue

@@ -20,7 +20,8 @@
  *   <LpRollingText :value="label" />
  *   <LpRollingText :value="status" mode="flip" />
  */
-import { computed } from "vue"
+import { computed, ref, useSlots, watch } from "vue"
+import { splitChange } from "./rolling"
 
 const props = withDefaults(
   defineProps<{
@@ -45,6 +46,21 @@ const props = withDefaults(
    text patch — without it there is nothing to transition between. */
 const key = computed(() => String(props.value))
 
+/*
+ * Only what changed rolls. "Valid for 2:54" turning into "2:53" rolled every
+ * word of the line once a second (a countdown badge), so the whole badge
+ * flickered; now "Valid for 2:5" stays and the "4" rolls to "3". With a slot
+ * of its own, or wrapping text, the whole value rolls as before.
+ */
+const slots = useSlots()
+const partial = computed(() => !slots.default && !props.wrap)
+const parts = ref({ head: "", mid: String(props.value), tail: "" })
+watch(
+  () => String(props.value),
+  (next, was) => (parts.value = splitChange(was, next)),
+)
+const midKey = computed(() => `${parts.value.head.length}:${parts.value.mid}`)
+
 const name = computed(() =>
   props.mode === "flip" ? "lp-roll-flip" : `lp-roll-${props.direction}`,
 )
@@ -68,7 +84,16 @@ const style = computed(() => ({
     :class="[justify, wrap && 'lp-roll--wrap']"
     :style="style"
   >
-    <Transition :name="name">
+    <template v-if="partial">
+      <span v-if="parts.head" class="whitespace-pre">{{ parts.head }}</span>
+      <span class="relative inline-flex overflow-hidden">
+        <Transition :name="name">
+          <span :key="midKey" class="lp-roll__item whitespace-pre">{{ parts.mid }}</span>
+        </Transition>
+      </span>
+      <span v-if="parts.tail" class="whitespace-pre">{{ parts.tail }}</span>
+    </template>
+    <Transition v-else :name="name">
       <span :key="key" class="lp-roll__item">
         <slot :value="value">{{ value }}</slot>
       </span>

package/src/components/LpSegmented.vue

@@ -79,7 +79,9 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
     "inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1",
     sizeCls[props.size],
-    props.block ? "flex w-full" : "",
+    // `w-fit`, not left to the parent: in a column a flex item stretches, and
+    // the options sat on the left of an empty bar (the theme studio met it).
+    props.block ? "flex w-full" : "w-fit",
   ].join(" "),
 )
 

package/src/components/LpShift.vue

@@ -25,7 +25,8 @@
  * The mechanism — measure the natural size, pin it in pixels, tween — lives in
  * `useShift`, and LpModal drives its panel with the same composable.
  */
-import { computed } from "vue"
+import { computed, onBeforeUnmount, watch } from "vue"
+import { prefersReducedMotion } from "../composables/easing"
 import { useShift, type ShiftAxis } from "../composables/useShift"
 
 const props = withDefaults(
@@ -43,8 +44,26 @@ const props = withDefaults(
      * canvas), where a tween would fight the thing already animating it.
      */
     disabled?: boolean
+    /**
+     * Which edge the content holds to while the box catches up, for a flex
+     * row. A box pinned to the right (`ml-auto`) grows leftwards, and content
+     * laid out from its left edge throws every unchanged control to the right
+     * for the first frame and slides it back: the controls that did not change
+     * are the ones that jump. `"end"` keeps them where they are and lets the
+     * new one come in from the free side.
+     */
+    anchor?: "start" | "end"
+    /**
+     * 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.
+     */
+    presence?: boolean
   }>(),
-  { axis: "height", disabled: false },
+  { axis: "height", disabled: false, anchor: "start", presence: false },
 )
 
 const { el, tweening, resizing } = useShift({
@@ -67,6 +86,168 @@ const TRANSITION_CLASS: Record<ShiftAxis, string> = {
 }
 const transitionClass = computed(() => TRANSITION_CLASS[props.axis])
 
+/*
+ * Presence. A leaving element is already out of the DOM when the observer
+ * hears of it, so where it stood is read from the last time it was seen: its
+ * offset from the anchored edge, which stays true while the box eases towards
+ * that edge. A clone stands there, out of the flow, and fades.
+ *
+ * What stays but is moved by the change (a title centred in a box that just
+ * lost its subtitle) glides from where it was instead of jumping (FLIP).
+ */
+const PRESENCE_MS = 200
+const MOVE_MS = 160
+const EASE = "cubic-bezier(0.2, 0, 0, 1)"
+const GHOST = "data-lp-shift-ghost"
+
+interface Seen {
+  from: number
+  top: number
+  width: number
+  height: number
+  x: number
+  y: number
+}
+
+const seen = new WeakMap<Element, Seen>()
+let presenceObserver: MutationObserver | undefined
+let rememberTimer: ReturnType<typeof setTimeout> | undefined
+let presenceSize: ResizeObserver | undefined
+
+function rememberSoon(box: HTMLElement, wait = PRESENCE_MS + 80) {
+  clearTimeout(rememberTimer)
+  rememberTimer = setTimeout(() => remember(box), wait)
+}
+
+function elementsOf(box: HTMLElement): Element[] {
+  return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node instanceof SVGElement && !(node instanceof SVGSVGElement)))
+}
+
+function remember(box: HTMLElement) {
+  const outer = box.getBoundingClientRect()
+  for (const node of elementsOf(box)) {
+    const r = node.getBoundingClientRect()
+    seen.set(node, {
+      from: props.anchor === "end" ? outer.right - r.right : r.left - outer.left,
+      top: r.top - outer.top,
+      width: r.width,
+      height: r.height,
+      x: r.left,
+      y: r.top,
+    })
+  }
+}
+
+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
+  const copy = node.cloneNode(true) as HTMLElement
+  copy.setAttribute(GHOST, "")
+  copy.setAttribute("aria-hidden", "true")
+  copy.inert = true
+  Object.assign(copy.style, {
+    position: "absolute",
+    top: `${at.top}px`,
+    [props.anchor === "end" ? "right" : "left"]: `${at.from}px`,
+    width: `${at.width}px`,
+    height: `${at.height}px`,
+    margin: "0",
+    pointerEvents: "none",
+  })
+  box.appendChild(copy)
+  copy
+    .animate(
+      [
+        { opacity: 1, transform: "none", filter: "blur(0)" },
+        { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
+      ],
+      { duration: PRESENCE_MS, easing: EASE },
+    )
+    .finished.catch(() => undefined)
+    .finally(() => copy.remove())
+}
+
+function arrive(node: Element) {
+  if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST)) return
+  node.animate(
+    [
+      { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
+      { opacity: 1, transform: "none", filter: "blur(0)" },
+    ],
+    { duration: PRESENCE_MS, delay: 40, easing: EASE, fill: "backwards" },
+  )
+}
+
+function glide(node: Element) {
+  const was = seen.get(node)
+  if (!was || !(node instanceof HTMLElement)) return
+  const now = node.getBoundingClientRect()
+  const dx = was.x - now.left
+  const dy = was.y - now.top
+  if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) return
+  node.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration: MOVE_MS, easing: EASE })
+}
+
+watch(
+  [el, () => props.presence && !props.disabled],
+  ([box, on]) => {
+    presenceObserver?.disconnect()
+    presenceObserver = undefined
+    presenceSize?.disconnect()
+    presenceSize = undefined
+    if (!box || !on) return
+    remember(box)
+    presenceObserver = new MutationObserver((records) => {
+      const real = records.filter(
+        (r) =>
+          ![...r.addedNodes, ...r.removedNodes].every((n) => n instanceof Element && n.hasAttribute(GHOST)),
+      )
+      if (real.length && !prefersReducedMotion()) {
+        const added = new Set<Node>()
+        for (const record of real) {
+          record.removedNodes.forEach((node) => node instanceof Element && ghost(box, node))
+          record.addedNodes.forEach((node) => {
+            added.add(node)
+            if (node instanceof Element) arrive(node)
+          })
+        }
+        // Measured in the next frame, which still comes before the paint: by
+        // then the box has taken the classes the change gave it (held to its
+        // edge), and the place an element lands is the one it will keep.
+        const parents = real.map((r) => r.target).filter((t): t is Element => t instanceof Element && !t.hasAttribute(GHOST))
+        requestAnimationFrame(() => {
+          for (const parent of parents) for (const child of parent.children) if (!added.has(child)) glide(child)
+        })
+      }
+      rememberSoon(box)
+    })
+    presenceObserver.observe(box, { childList: true, subtree: true })
+    presenceSize = new ResizeObserver(() => rememberSoon(box, 60))
+    presenceSize.observe(box)
+    void document.fonts?.ready.then(() => rememberSoon(box, 0))
+  },
+  { flush: "post" },
+)
+
+// A child that changed inside itself (a label rolling to a longer word) moves
+// its neighbours without any child coming or going: when the box starts to
+// resize, every child glides from where it was last seen.
+watch(resizing, (now) => {
+  const box = el.value
+  if (!now || !box || !presenceObserver || prefersReducedMotion()) return
+  requestAnimationFrame(() => {
+    for (const child of box.children) if (!child.hasAttribute(GHOST)) glide(child)
+  })
+})
+
+onBeforeUnmount(() => {
+  presenceObserver?.disconnect()
+  presenceSize?.disconnect()
+  clearTimeout(rememberTimer)
+})
+
 defineExpose({ resizing })
 </script>
 
@@ -83,6 +264,12 @@ defineExpose({ resizing })
         ? `${transitionClass} duration-fast ease-[var(--ease-emphasized)] motion-reduce:transition-none`
         : '',
       resizing ? 'overflow-hidden' : '',
+      // While the box holds a width its content has outgrown, a flex row would
+      // squeeze its children to fit (a button's keys folding into a column)
+      // instead of letting the easing edge clip them.
+      resizing && axis !== 'height' ? '[&>*]:shrink-0' : '',
+      resizing && anchor === 'end' ? 'justify-end' : '',
+      presence ? 'relative' : '',
     ]"
   >
     <slot :resizing="resizing" />