@leavepulse/ui 0.61.0 → 0.62.0

package/dist/chunks/{LpAlert--KLL4NLk.js → LpAlert-BAOujnXy.js}

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createVNode, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
 import { tv } from "tailwind-variants";
 import { _ as _sfc_main$1 } from "./LpIcon-CTuDVTYv.js";
-const _hoisted_1 = ["role"];
+const _hoisted_1 = ["role", "aria-busy"];
 const _hoisted_2 = { class: "min-w-0" };
 const _hoisted_3 = {
   key: 0,
@@ -13,7 +13,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     variant: { default: "info" },
     title: {},
     icon: {},
-    live: { type: [String, Boolean], default: void 0 }
+    live: { type: [String, Boolean], default: void 0 },
+    busy: { type: Boolean, default: false }
   },
   setup(__props) {
     const alert = tv({
@@ -42,21 +43,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const props = __props;
     const role = computed(() => {
-      const live = props.live ?? (props.variant === "danger" ? "assertive" : false);
+      const live = props.live ?? (props.variant === "danger" ? "assertive" : props.busy ? "polite" : false);
       return live === "assertive" ? "alert" : live === "polite" ? "status" : void 0;
     });
     const classes = computed(() => alert({ variant: props.variant }));
-    const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"]);
+    const resolvedIcon = computed(() => props.icon ?? (props.busy ? "lucide:loader-circle" : ICONS[props.variant ?? "info"]));
     const iconTone = computed(() => ICON_TONE[props.variant ?? "info"]);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value),
-        role: role.value
+        role: role.value,
+        "aria-busy": __props.busy || void 0
       }, [
         createVNode(_sfc_main$1, {
           name: resolvedIcon.value,
           size: 18,
-          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value]),
+          class: normalizeClass(["mt-0.5 shrink-0", iconTone.value, __props.busy ? "animate-spin motion-reduce:animate-none" : ""]),
           "aria-hidden": "true"
         }, null, 8, ["name", "class"]),
         createElementVNode("div", _hoisted_2, [

package/dist/chunks/{LpHints-BTpvisgP.js → LpHints-B_85eSmm.js}

@@ -3,7 +3,7 @@ import { provideHintSystem } from "../composables/useHintSystem.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { _ as _sfc_main$3 } from "./LpActionBar-BsSp66S_.js";
 import { _ as _sfc_main$2 } from "./LpHintLayer-DsclGYcD.js";
-import { _ as _sfc_main$1 } from "./LpTour-C29-1wha.js";
+import { _ as _sfc_main$1 } from "./LpTour-ByaL36fN.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpHints",
   props: {

package/dist/chunks/{LpTour-C29-1wha.js → LpTour-ByaL36fN.js}

@@ -1,4 +1,4 @@
-import { defineComponent, useModel, computed, shallowRef, ref, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createElementBlock, withModifiers, Fragment, renderList, normalizeStyle, normalizeClass, createCommentVNode, unref, withCtx, createVNode, renderSlot, mergeModels, nextTick } from "vue";
+import { defineComponent, useModel, computed, shallowRef, ref, watch, onBeforeUnmount, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, withModifiers, createElementVNode, normalizeStyle, Fragment, renderList, normalizeClass, createCommentVNode, unref, renderSlot, mergeModels, nextTick } from "vue";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { hints } from "../composables/useHints.js";
@@ -8,7 +8,7 @@ import { useMediaQuery } from "../composables/useMediaQuery.js";
 import { scrollToElement } from "../composables/scroll.js";
 import { PANEL_SURFACE } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./TourCard-AjN0uhs1.js";
-import { holeOf, panelsAround } from "../components/tour.js";
+import { holeOf, panelsAround, holeClip } from "../components/tour.js";
 const _hoisted_1 = ["aria-label"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpTour",
@@ -55,6 +55,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const panels = computed(
       () => hole.value ? panelsAround(hole.value, viewport.value) : [{ x: 0, y: 0, width: viewport.value.width, height: viewport.value.height }]
     );
+    const radius = ref(8);
+    const clip = computed(() => holeClip(hole.value, viewport.value, radius.value));
     const reference = {
       getBoundingClientRect: () => {
         const h = hole.value;
@@ -173,7 +175,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       cancelAnimationFrame(frame);
       frame = 0;
       target.value = null;
-      box.value = null;
       runAll(cleanups);
     }
     function finish() {
@@ -194,6 +195,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       (value) => {
         if (value) {
           direction = 1;
+          box.value = null;
+          radius.value = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--radius-control")) || 8;
           document.addEventListener("click", onTargetClick, true);
           document.addEventListener("contextmenu", onTargetClick, true);
           frame ||= requestAnimationFrame(track);
@@ -226,28 +229,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 text-sm text-ink outline-none`;
     return (_ctx, _cache) => {
       return openBlock(), createBlock(Teleport, { to: "body" }, [
-        open.value ? (openBlock(), createElementBlock("div", {
+        createVNode(Transition, {
+          "enter-active-class": "transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+          "leave-active-class": "transition-opacity duration-[var(--duration-medium)] ease-out motion-reduce:transition-none",
+          "enter-from-class": "opacity-0",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: withCtx(() => [
+            open.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "lp-tour pointer-events-none fixed inset-0 z-(--z-tour)",
+              onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              createElementVNode("div", {
+                class: "lp-scrim absolute inset-0 transition-[clip-path] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
+                style: normalizeStyle({ clipPath: clip.value })
+              }, null, 4),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(panels.value, (panel, i) => {
+                return openBlock(), createElementBlock("div", {
+                  key: i,
+                  class: "pointer-events-auto absolute left-0 top-0",
+                  style: normalizeStyle({ transform: `translate(${panel.x}px, ${panel.y}px)`, width: `${panel.width}px`, height: `${panel.height}px` })
+                }, null, 4);
+              }), 128)),
+              hole.value ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(["absolute left-0 top-0 rounded-control ring-2 ring-brand transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", step.value?.try ? "pointer-events-none animate-pulse" : "pointer-events-auto"]),
+                style: normalizeStyle({ transform: `translate(${hole.value.x}px, ${hole.value.y}px)`, width: `${hole.value.width}px`, height: `${hole.value.height}px` })
+              }, null, 6)) : createCommentVNode("", true)
+            ], 32)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        unref(wide) ? (openBlock(), createBlock(unref(PopoverRoot), {
           key: 0,
-          class: "lp-tour pointer-events-none fixed inset-0 z-(--z-tour)",
-          onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
-          }, ["stop"]))
-        }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(panels.value, (panel, i) => {
-            return openBlock(), createElementBlock("div", {
-              key: i,
-              class: "lp-scrim pointer-events-auto absolute left-0 top-0 transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none",
-              style: normalizeStyle({ transform: `translate(${panel.x}px, ${panel.y}px)`, width: `${panel.width}px`, height: `${panel.height}px` })
-            }, null, 4);
-          }), 128)),
-          hole.value ? (openBlock(), createElementBlock("div", {
-            key: 0,
-            class: normalizeClass(["absolute left-0 top-0 rounded-control ring-2 ring-brand transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none", step.value?.try ? "pointer-events-none animate-pulse" : "pointer-events-auto"]),
-            style: normalizeStyle({ transform: `translate(${hole.value.x}px, ${hole.value.y}px)`, width: `${hole.value.width}px`, height: `${hole.value.height}px` })
-          }, null, 6)) : createCommentVNode("", true)
-        ], 32)) : createCommentVNode("", true),
-        open.value && unref(wide) ? (openBlock(), createBlock(unref(PopoverRoot), {
-          key: 1,
-          open: ready.value
+          open: open.value && ready.value
         }, {
           default: withCtx(() => [
             createVNode(unref(PopoverAnchor), { reference }),
@@ -259,7 +276,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "collision-padding": 12,
                   "update-position-strategy": "always",
                   "trap-focus": false,
-                  class: normalizeClass([CARD, "z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"]),
+                  class: normalizeClass([CARD, "z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_var(--duration-fast)_ease-out] motion-reduce:animate-none"]),
                   role: "dialog",
                   "aria-label": step.value?.title,
                   onPointerdown: _cache[1] || (_cache[1] = withModifiers(() => {
@@ -300,34 +317,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["open"])) : createCommentVNode("", true),
-        open.value && !unref(wide) && ready.value ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass([CARD, "pointer-events-auto fixed inset-x-3 bottom-3 z-[calc(var(--z-tour)+1)] w-auto animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"]),
-          role: "dialog",
-          "aria-label": step.value?.title,
-          onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {
-          }, ["stop"]))
-        }, [
-          renderSlot(_ctx.$slots, "card", {
-            step: step.value,
-            index: index.value,
-            next,
-            back,
-            dismiss
-          }, () => [
-            createVNode(_sfc_main$1, {
-              step: step.value,
-              index: index.value,
-              last: last.value,
-              progress: progress.value,
-              labels: unref(labels),
-              onNext: next,
-              onBack: back,
-              onPerform: perform,
-              onDismiss: dismiss
-            }, null, 8, ["step", "index", "last", "progress", "labels"])
-          ])
-        ], 42, _hoisted_1)) : createCommentVNode("", true)
+        createVNode(Transition, { "leave-active-class": "animate-[rise-out_var(--duration-fast)_ease-out] motion-reduce:animate-none" }, {
+          default: withCtx(() => [
+            open.value && !unref(wide) && ready.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass([CARD, "pointer-events-auto fixed inset-x-3 bottom-3 z-[calc(var(--z-tour)+1)] w-auto animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none"]),
+              role: "dialog",
+              "aria-label": step.value?.title,
+              onPointerdown: _cache[5] || (_cache[5] = withModifiers(() => {
+              }, ["stop"]))
+            }, [
+              renderSlot(_ctx.$slots, "card", {
+                step: step.value,
+                index: index.value,
+                next,
+                back,
+                dismiss
+              }, () => [
+                createVNode(_sfc_main$1, {
+                  step: step.value,
+                  index: index.value,
+                  last: last.value,
+                  progress: progress.value,
+                  labels: unref(labels),
+                  onNext: next,
+                  onBack: back,
+                  onPerform: perform,
+                  onDismiss: dismiss
+                }, null, 8, ["step", "index", "last", "progress", "labels"])
+              ])
+            ], 42, _hoisted_1)) : createCommentVNode("", true)
+          ]),
+          _: 3
+        })
       ]);
     };
   }

package/dist/components/LpAlert.vue.d.ts

@@ -34,6 +34,12 @@ type __VLS_Props = {
      * of the page from the start should not be shouted on load.
      */
     live?: "assertive" | "polite" | false;
+    /**
+     * Work is under way: the icon becomes a spinning loader (unless `icon` is
+     * given, which then spins instead) and the alert is announced politely.
+     * A loader drawn as a still icon read as a frozen page.
+     */
+    busy?: boolean;
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {
@@ -42,6 +48,7 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     variant: "info" | "danger" | "success" | "warning";
     live: "assertive" | "polite" | false;
+    busy: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/LpAlert.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAlert--KLL4NLk.js";
+import { _ as _sfc_main } from "../chunks/LpAlert-BAOujnXy.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpHints.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpHints-BTpvisgP.js";
+import { _ as _sfc_main } from "../chunks/LpHints-B_85eSmm.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTour.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTour-C29-1wha.js";
+import { _ as _sfc_main } from "../chunks/LpTour-ByaL36fN.js";
 export {
   _sfc_main as default
 };

package/dist/components/tour.d.ts

@@ -8,6 +8,15 @@ type Size = {
 export declare function holeOf(target: Box, padding: number, viewport: Size): Box;
 /** The four dim panels around a hole: top, bottom, left, right. */
 export declare function panelsAround(hole: Box, viewport: Size): Box[];
+/**
+ * The dimmed, blurred layer as one clip: the whole viewport with the hole cut
+ * out (evenodd), corners rounded like the ring drawn around it. One layer
+ * instead of the four panels, because each panel blurred the page on its own
+ * and the blur's edges showed as seams where they met. The point count never
+ * changes, so the clip eases between steps on every engine; with no target
+ * the hole shrinks to a dot in the middle.
+ */
+export declare function holeClip(hole: Box | null, viewport: Size, radius: number): string;
 /**
  * Open the context menu of an element as a right-click would, at its centre.
  * Lets a tour step show a row's menu without the user hunting for it; the menu

package/dist/components/tour.js

@@ -14,6 +14,27 @@ function panelsAround(hole, viewport) {
     { x: hole.x + hole.width, y: hole.y, width: Math.max(0, viewport.width - hole.x - hole.width), height: hole.height }
   ];
 }
+const CORNER_STEPS = 6;
+function holeClip(hole, viewport, radius) {
+  const h = hole ?? { x: viewport.width / 2, y: viewport.height / 2, width: 0, height: 0 };
+  const r = Math.max(0, Math.min(radius, h.width / 2, h.height / 2));
+  const px = (n) => `${Math.round(n * 100) / 100}px`;
+  const corners = [
+    [h.x + h.width - r, h.y + r, -90],
+    [h.x + h.width - r, h.y + h.height - r, 0],
+    [h.x + r, h.y + h.height - r, 90],
+    [h.x + r, h.y + r, 180]
+  ];
+  const points = [];
+  for (const [cx, cy, start] of corners) {
+    for (let i = 0; i <= CORNER_STEPS; i++) {
+      const angle = (start + 90 * i / CORNER_STEPS) * Math.PI / 180;
+      points.push(`${px(cx + r * Math.cos(angle))} ${px(cy + r * Math.sin(angle))}`);
+    }
+  }
+  const outer = [`0px 0px`, `${px(viewport.width)} 0px`, `${px(viewport.width)} ${px(viewport.height)}`, `0px ${px(viewport.height)}`, `0px 0px`];
+  return `polygon(evenodd, ${[...outer, ...points, points[0]].join(", ")})`;
+}
 function openContextMenu(el) {
   const box = el.getBoundingClientRect();
   el.dispatchEvent(
@@ -32,6 +53,7 @@ function openContextMenu(el) {
   };
 }
 export {
+  holeClip,
   holeOf,
   openContextMenu,
   panelsAround

package/dist/index.js

@@ -3,7 +3,7 @@ import { _ as _2 } from "./chunks/LpAddressInput-CzdZguBo.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DybIlWnF.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-BsSp66S_.js";
-import { _ as _5 } from "./chunks/LpAlert--KLL4NLk.js";
+import { _ as _5 } from "./chunks/LpAlert-BAOujnXy.js";
 import { _ as _6 } from "./chunks/LpAppShell-BXMNDEpF.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-D9mY5Tqk.js";
 import { _ as _8 } from "./chunks/LpAvatar-K6MOMfgn.js";
@@ -105,10 +105,10 @@ import { _ as _75 } from "./chunks/LpThemeSwitcher-ZFFftBQn.js";
 import { _ as _76 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _77 } from "./chunks/LpToaster-D3OisETH.js";
 import { _ as _78 } from "./chunks/LpTooltip-suFCM34F.js";
-import { _ as _79 } from "./chunks/LpTour-C29-1wha.js";
+import { _ as _79 } from "./chunks/LpTour-ByaL36fN.js";
 import { holeOf, openContextMenu, panelsAround } from "./components/tour.js";
 import { _ as _80 } from "./chunks/LpHintLayer-DsclGYcD.js";
-import { _ as _81 } from "./chunks/LpHints-BTpvisgP.js";
+import { _ as _81 } from "./chunks/LpHints-B_85eSmm.js";
 import { HINT_SIGNALS, contextMenuTip, createHintSystem, hintKey, hintSummary, localHintStorage, paletteTip, provideHintSystem, runningHintSystem, useHintSystem } from "./composables/useHintSystem.js";
 import { _ as _82 } from "./chunks/LpTooltipProvider-CftjV7Xc.js";
 import { _ as _83 } from "./chunks/LpTopologyCanvas-6ozNrQKh.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpAlert.vue

@@ -45,23 +45,34 @@ const props = withDefaults(
      * of the page from the start should not be shouted on load.
      */
     live?: "assertive" | "polite" | false
+    /**
+     * Work is under way: the icon becomes a spinning loader (unless `icon` is
+     * given, which then spins instead) and the alert is announced politely.
+     * A loader drawn as a still icon read as a frozen page.
+     */
+    busy?: boolean
   }>(),
-  { variant: "info", live: undefined },
+  { variant: "info", live: undefined, busy: false },
 )
 
 const role = computed(() => {
-  const live = props.live ?? (props.variant === "danger" ? "assertive" : false)
+  const live = props.live ?? (props.variant === "danger" ? "assertive" : props.busy ? "polite" : false)
   return live === "assertive" ? "alert" : live === "polite" ? "status" : undefined
 })
 
 const classes = computed(() => alert({ variant: props.variant }))
-const resolvedIcon = computed(() => props.icon ?? ICONS[props.variant ?? "info"])
+const resolvedIcon = computed(() => props.icon ?? (props.busy ? "lucide:loader-circle" : ICONS[props.variant ?? "info"]))
 const iconTone = computed(() => ICON_TONE[props.variant ?? "info"])
 </script>
 
 <template>
-  <div :class="classes" :role="role">
-    <LpIcon :name="resolvedIcon" :size="18" :class="['mt-0.5 shrink-0', iconTone]" aria-hidden="true" />
+  <div :class="classes" :role="role" :aria-busy="busy || undefined">
+    <LpIcon
+      :name="resolvedIcon"
+      :size="18"
+      :class="['mt-0.5 shrink-0', iconTone, busy ? 'animate-spin motion-reduce:animate-none' : '']"
+      aria-hidden="true"
+    />
     <div class="min-w-0">
       <p v-if="title" class="font-semibold text-ink">{{ title }}</p>
       <div :class="['text-muted-strong', title ? 'mt-0.5' : '']">

package/src/components/LpTour.vue

@@ -37,9 +37,11 @@ export interface TourStep {
  * scrim, a card beside it says what it is, and the user steps through with the
  * buttons or the arrow keys.
  *
- * The scrim is four panels around a hole rather than a mask, so the target
- * stays clickable (a `try` step waits for exactly that click) and the hole can
- * glide between targets on any engine, WebKitGTK included. The card is a reka
+ * The dim is one blurred layer clipped around the hole (`holeClip`), so the
+ * blur has no seams; four transparent panels around the hole take the clicks,
+ * so the target stays clickable (a `try` step waits for exactly that click).
+ * Both glide between targets on any engine, WebKitGTK included. Closing fades
+ * the whole layer out instead of dropping it. The card is a reka
  * popover anchored to the hole, so flipping and sliding to stay on screen is
  * floating-ui's job; on a phone it becomes a sheet at the bottom instead.
  *
@@ -59,7 +61,7 @@ import { scrollToElement } from "../composables/scroll"
 import { PANEL_SURFACE } from "./dropdown"
 import TourCard from "./TourCard.vue"
 import type { Box } from "../composables/spatialNav"
-import { holeOf, panelsAround } from "./tour"
+import { holeClip, holeOf, panelsAround } from "./tour"
 
 const props = withDefaults(
   defineProps<{
@@ -113,6 +115,8 @@ const panels = computed(() =>
     ? panelsAround(hole.value, viewport.value)
     : [{ x: 0, y: 0, width: viewport.value.width, height: viewport.value.height }],
 )
+const radius = ref(8)
+const clip = computed(() => holeClip(hole.value, viewport.value, radius.value))
 const reference = {
   getBoundingClientRect: () => {
     const h = hole.value
@@ -244,7 +248,6 @@ function end() {
   cancelAnimationFrame(frame)
   frame = 0
   target.value = null
-  box.value = null
   runAll(cleanups)
 }
 
@@ -269,6 +272,8 @@ watch(
   (value) => {
     if (value) {
       direction = 1
+      box.value = null
+      radius.value = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--radius-control")) || 8
       document.addEventListener("click", onTargetClick, true)
       document.addEventListener("contextmenu", onTargetClick, true)
       frame ||= requestAnimationFrame(track)
@@ -307,11 +312,21 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
 
 <template>
   <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-[var(--duration-medium)] ease-out motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
     <div v-if="open" class="lp-tour pointer-events-none fixed inset-0 z-(--z-tour)" @pointerdown.stop>
+      <div
+        class="lp-scrim absolute inset-0 transition-[clip-path] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        :style="{ clipPath: clip }"
+      />
       <div
         v-for="(panel, i) in panels"
         :key="i"
-        class="lp-scrim pointer-events-auto absolute left-0 top-0 transition-[transform,width,height] duration-[var(--duration-medium)] ease-[var(--ease-emphasized)] motion-reduce:transition-none"
+        class="pointer-events-auto absolute left-0 top-0"
         :style="{ transform: `translate(${panel.x}px, ${panel.y}px)`, width: `${panel.width}px`, height: `${panel.height}px` }"
       />
       <div
@@ -321,8 +336,9 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
         :style="{ transform: `translate(${hole.x}px, ${hole.y}px)`, width: `${hole.width}px`, height: `${hole.height}px` }"
       />
     </div>
+    </Transition>
 
-    <PopoverRoot v-if="open && wide" :open="ready">
+    <PopoverRoot v-if="wide" :open="open && ready">
       <PopoverAnchor :reference="reference" />
       <PopoverPortal>
         <PopoverContent
@@ -331,7 +347,7 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
           :collision-padding="12"
           update-position-strategy="always"
           :trap-focus="false"
-          :class="[CARD, 'z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none']"
+          :class="[CARD, 'z-[calc(var(--z-tour)+1)] data-[state=open]:animate-[popover-in_var(--duration-medium)_var(--ease-emphasized)] data-[state=closed]:animate-[popover-out_var(--duration-fast)_ease-out] motion-reduce:animate-none']"
           role="dialog"
           :aria-label="step?.title"
           @pointerdown.stop
@@ -346,6 +362,7 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
       </PopoverPortal>
     </PopoverRoot>
 
+    <Transition leave-active-class="animate-[rise-out_var(--duration-fast)_ease-out] motion-reduce:animate-none">
     <div
       v-if="open && !wide && ready"
       :class="[CARD, 'pointer-events-auto fixed inset-x-3 bottom-3 z-[calc(var(--z-tour)+1)] w-auto animate-[rise-in_var(--duration-medium)_var(--ease-emphasized)] motion-reduce:animate-none']"
@@ -357,5 +374,6 @@ const CARD = `${PANEL_SURFACE} rounded-card w-80 max-w-[calc(100vw-24px)] p-4 te
             <TourCard :step="step" :index="index" :last="last" :progress="progress" :labels="labels" @next="next" @back="back" @perform="perform" @dismiss="dismiss" />
           </slot>
     </div>
+    </Transition>
   </Teleport>
 </template>

package/src/components/tour.ts

@@ -29,6 +29,37 @@ export function panelsAround(hole: Box, viewport: Size): Box[] {
   ]
 }
 
+const CORNER_STEPS = 6
+
+/**
+ * The dimmed, blurred layer as one clip: the whole viewport with the hole cut
+ * out (evenodd), corners rounded like the ring drawn around it. One layer
+ * instead of the four panels, because each panel blurred the page on its own
+ * and the blur's edges showed as seams where they met. The point count never
+ * changes, so the clip eases between steps on every engine; with no target
+ * the hole shrinks to a dot in the middle.
+ */
+export function holeClip(hole: Box | null, viewport: Size, radius: number): string {
+  const h = hole ?? { x: viewport.width / 2, y: viewport.height / 2, width: 0, height: 0 }
+  const r = Math.max(0, Math.min(radius, h.width / 2, h.height / 2))
+  const px = (n: number) => `${Math.round(n * 100) / 100}px`
+  const corners: [number, number, number][] = [
+    [h.x + h.width - r, h.y + r, -90],
+    [h.x + h.width - r, h.y + h.height - r, 0],
+    [h.x + r, h.y + h.height - r, 90],
+    [h.x + r, h.y + r, 180],
+  ]
+  const points: string[] = []
+  for (const [cx, cy, start] of corners) {
+    for (let i = 0; i <= CORNER_STEPS; i++) {
+      const angle = ((start + (90 * i) / CORNER_STEPS) * Math.PI) / 180
+      points.push(`${px(cx + r * Math.cos(angle))} ${px(cy + r * Math.sin(angle))}`)
+    }
+  }
+  const outer = [`0px 0px`, `${px(viewport.width)} 0px`, `${px(viewport.width)} ${px(viewport.height)}`, `0px ${px(viewport.height)}`, `0px 0px`]
+  return `polygon(evenodd, ${[...outer, ...points, points[0]].join(", ")})`
+}
+
 /**
  * Open the context menu of an element as a right-click would, at its centre.
  * Lets a tour step show a row's menu without the user hunting for it; the menu