npm - fancy-ui-svelte - Versions diffs - 0.11.0 → 0.13.0 - Mend

fancy-ui-svelte 0.11.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (553) hide show

package/dist/fancy-ui/_internals/focus-trap.js CHANGED Viewed

@@ -7,6 +7,14 @@
 // (the default) — see `fallbackFocus` below for what happens when that
 // element is gone by the time destroy runs.
 //
+// An overlay that animates its exit does not wait for destroy: `onActivate`
+// hands it a function that runs the same return chain at the dismiss instant,
+// and destroy then stands down. It hands over a second function that re-arms
+// the trap when the surface comes back, because a reopen during the exit
+// reverses the outro instead of remounting and this action is therefore never
+// re-created. See `onActivate` below for why an animated close cannot use the
+// destroy path, and why the eager return needs an undo.
+//
 // Ordering requirement for callers combining this with `portal`: put
 // `use:portal` and `use:focusTrap` on the exact same element, with
 // `use:portal` written first. A child node's `use:` action can run before
@@ -45,7 +53,14 @@ export const focusTrap = (node, opts = {}) => {
     }
     let returnFocus = opts.returnFocus ?? true;
     let fallbackFocus = opts.fallbackFocus;
-    const previouslyFocused = document.activeElement;
+    // Tracked like the other two rather than read off the original `opts`:
+    // a caller that retargets the initial focus between form steps updates
+    // the action, and `rearm()` below has to honour the CURRENT target, not
+    // the one this instance happened to mount with.
+    let initialFocus = opts.initialFocus;
+    // Not `const`: this is the element the trap displaced, and a surface
+    // reopened mid-exit is displacing a different one. `rearm()` recaptures.
+    let previouslyFocused = document.activeElement;
     function focusContainerFallback() {
         // No focusable descendants (empty/loading dialog): contain focus on the
         // node itself so it does not leak to the page behind the trap.
@@ -60,6 +75,85 @@ export const focusTrap = (node, opts = {}) => {
         else
             focusContainerFallback();
     }
+    // The three-step return chain, extracted so it can be run EAGERLY at the
+    // dismiss instant (via `onActivate`'s handle) as well as at destroy. The
+    // latch makes it run exactly once whichever path gets there first.
+    let returned = false;
+    function returnFocus_() {
+        // The latch guards as well as records: the handle may be called more
+        // than once (a reopen mid-exit, a caller being careful), and destroy()
+        // may still follow it. Focus moves exactly once either way.
+        if (returned)
+            return;
+        returned = true;
+        // `previouslyFocused` is a raw reference, captured at mount and
+        // recaptured by `rearm()` on a reopen —
+        // `.focus()` on it is the same silent no-op a detached node always
+        // is if whatever it pointed at has since left the document, so it
+        // is checked rather than trusted. Three-step chain, each step only
+        // reached if the one before it failed:
+        //   1. The original element, if it is still connected — the
+        //      common case, unchanged from before this fallback existed.
+        //   2. `fallbackFocus()`, if the caller supplied one and it points
+        //      at a still-connected element — typically the overlay's own
+        //      trigger: a real, findable place for focus to land even
+        //      though it is not literally "back where it was."
+        //   3. `document.body` — always connected, so unlike the previous
+        //      two steps this one cannot fail by being disconnected. It
+        //      still needs a `tabindex` to be programmatically focusable
+        //      at all (the same reason `focusContainerFallback` above
+        //      gives the trap node one) — real browsers implicitly treat
+        //      `<body>` as tabindex="-1" for this purpose, but that
+        //      default is not universal across environments, so it is
+        //      set explicitly rather than assumed. This is a last
+        //      resort, not a good outcome: it clears focus rather than
+        //      pretending some unrelated element is where the user was,
+        //      but it is never nothing — a user's focus should not
+        //      silently vanish.
+        if (previouslyFocused?.isConnected) {
+            previouslyFocused.focus();
+            return;
+        }
+        const fallback = fallbackFocus?.();
+        if (fallback?.isConnected) {
+            fallback.focus();
+            return;
+        }
+        if (!document.body.hasAttribute("tabindex")) {
+            document.body.setAttribute("tabindex", "-1");
+        }
+        document.body.focus();
+    }
+    // The counterpart to the handle, run when the surface comes BACK — a
+    // reopen mid-exit reverses the outro rather than remounting, so this
+    // action, and the latch above, survive the aborted close (see
+    // `onActivate`). Clearing the latch re-arms both the handle and
+    // `destroy()` for the next dismiss; focus is pulled back only when it has
+    // left the node, which makes the ordinary first intro a no-op (focus is
+    // already where `focusInitial` just put it) and never yanks focus away
+    // from a user who has moved it inside the panel themselves.
+    function rearm() {
+        returned = false;
+        const active = document.activeElement;
+        if (node.contains(active))
+            return;
+        // A reopen mid-exit is a NEW opening, and it can come from a different
+        // control than the one that opened the surface the first time. Without
+        // recapturing, the next dismissal would return focus to the original
+        // opener — or fall through to the fallback, if that opener has since
+        // been removed. `document.body` is excluded because it is exactly what
+        // `activeElement` reports while the exiting panel is still `inert`:
+        // adopting it would throw away a perfectly good return target in
+        // favour of one that clears focus.
+        if (active && active !== document.body && active.isConnected) {
+            previouslyFocused = active;
+        }
+        focusInitial(initialFocus);
+    }
+    // No `active` gate on the Tab handler, deliberately. Once the exit starts
+    // the panel is `inert`, `.focus()` on its descendants is a browser no-op,
+    // and focus has already been returned by `returnFocusNow()` — so the trap
+    // has nothing left to trap and needs no flag nobody reads.
     function handleKeydown(event) {
         if (event.key !== "Tab")
             return;
@@ -83,53 +177,26 @@ export const focusTrap = (node, opts = {}) => {
             first.focus();
         }
     }
-    focusInitial(opts.initialFocus);
+    focusInitial(initialFocus);
+    // Handed over AFTER the initial focus move, so a caller that calls the
+    // handle synchronously inside `onActivate` still restores the element the
+    // trap displaced rather than racing it.
+    opts.onActivate?.(returnFocus_, rearm);
     node.addEventListener("keydown", handleKeydown);
     return {
         update(newOpts = {}) {
             returnFocus = newOpts.returnFocus ?? true;
             fallbackFocus = newOpts.fallbackFocus;
+            initialFocus = newOpts.initialFocus;
         },
         destroy() {
             node.removeEventListener("keydown", handleKeydown);
-            if (!returnFocus)
-                return;
-            // `previouslyFocused` is a raw reference captured once at mount —
-            // `.focus()` on it is the same silent no-op a detached node always
-            // is if whatever it pointed at has since left the document, so it
-            // is checked rather than trusted. Three-step chain, each step only
-            // reached if the one before it failed:
-            //   1. The original element, if it is still connected — the
-            //      common case, unchanged from before this fallback existed.
-            //   2. `fallbackFocus()`, if the caller supplied one and it points
-            //      at a still-connected element — typically the overlay's own
-            //      trigger: a real, findable place for focus to land even
-            //      though it is not literally "back where it was."
-            //   3. `document.body` — always connected, so unlike the previous
-            //      two steps this one cannot fail by being disconnected. It
-            //      still needs a `tabindex` to be programmatically focusable
-            //      at all (the same reason `focusContainerFallback` above
-            //      gives the trap node one) — real browsers implicitly treat
-            //      `<body>` as tabindex="-1" for this purpose, but that
-            //      default is not universal across environments, so it is
-            //      set explicitly rather than assumed. This is a last
-            //      resort, not a good outcome: it clears focus rather than
-            //      pretending some unrelated element is where the user was,
-            //      but it is never nothing — a user's focus should not
-            //      silently vanish.
-            if (previouslyFocused?.isConnected) {
-                previouslyFocused.focus();
+            // `returned` disarms this path once the eager handle has already run
+            // it — an animated exit calls the handle at `outrostart` and only
+            // gets here when the fade finishes, and focus must move exactly once.
+            if (!returnFocus || returned)
                 return;
-            }
-            const fallback = fallbackFocus?.();
-            if (fallback?.isConnected) {
-                fallback.focus();
-                return;
-            }
-            if (!document.body.hasAttribute("tabindex")) {
-                document.body.setAttribute("tabindex", "-1");
-            }
-            document.body.focus();
+            returnFocus_();
         },
     };
 };

package/dist/fancy-ui/_internals/focus-trap.test.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { afterEach, describe, it, expect } from "vitest";
+import { afterEach, describe, it, expect, vi } from "vitest";
 import { focusTrap } from "./focus-trap";
 function pressTab(options = {}) {
     const event = new KeyboardEvent("keydown", {
@@ -227,3 +227,358 @@ describe("focusTrap — visibility and empty containers", () => {
         action?.destroy?.();
     });
 });
+// `onActivate` is the answer to a close that ANIMATES. An action's
+// `destroy()` is delayed by the exit transition, so a trap that only returns
+// focus there would leave a keyboard user on `<body>` for the whole fade —
+// Svelte sets `inert` on the panel the instant the exit starts, which drops
+// focus out of it. The handle runs the same chain at the dismiss instant.
+describe("focusTrap — the eager return handle", () => {
+    let container;
+    afterEach(() => {
+        container?.remove();
+        document.body.innerHTML = "";
+        vi.restoreAllMocks();
+    });
+    function setup(innerHtml) {
+        container = document.createElement("div");
+        container.innerHTML = innerHtml;
+        document.body.appendChild(container);
+        return container.querySelector("#trap");
+    }
+    function withOutsideTrigger() {
+        const outside = document.createElement("button");
+        outside.id = "outside";
+        document.body.appendChild(outside);
+        outside.focus();
+        return outside;
+    }
+    it("hands the caller a function exactly once, synchronously, during action creation", () => {
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        const handles = [];
+        const trap = focusTrap(trapNode, { onActivate: (r) => handles.push(r) });
+        expect(handles).toHaveLength(1);
+        expect(typeof handles[0]).toBe("function");
+        trap?.destroy?.();
+    });
+    it("hands it over AFTER the initial focus move, so the handle restores what the trap displaced", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let activeAtHandover = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: () => (activeAtHandover = document.activeElement),
+        });
+        expect(activeAtHandover).toBe(trapNode.querySelector("#a"));
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("returns focus immediately when called, long before destroy()", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        const trap = focusTrap(trapNode, { onActivate: (r) => (returnNow = r) });
+        expect(document.activeElement?.id).toBe("a");
+        returnNow();
+        // The node is still mounted and destroy() has not run — this is the
+        // window an animated exit lives in.
+        expect(trapNode.isConnected).toBe(true);
+        expect(document.activeElement).toBe(outside);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("is idempotent: calling the handle twice moves focus exactly once", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        const trap = focusTrap(trapNode, { onActivate: (r) => (returnNow = r) });
+        const focusSpy = vi.spyOn(outside, "focus");
+        returnNow();
+        returnNow();
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("disarms destroy(): the handle then the unmount still moves focus exactly once", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        const trap = focusTrap(trapNode, { onActivate: (r) => (returnNow = r) });
+        const focusSpy = vi.spyOn(outside, "focus");
+        returnNow();
+        trap?.destroy?.();
+        expect(focusSpy).toHaveBeenCalledTimes(1);
+        expect(document.activeElement).toBe(outside);
+        outside.remove();
+    });
+    // The owner-frozen answer to a caller that contradicts itself: asking for
+    // the handle IS asking for the return, so the handle wins. `returnFocus`
+    // governs the unmount path only.
+    it("returnFocus: false does not disable the handle — it only disables the unmount path", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        const trap = focusTrap(trapNode, {
+            returnFocus: false,
+            onActivate: (r) => (returnNow = r),
+        });
+        expect(document.activeElement?.id).toBe("a");
+        returnNow();
+        expect(document.activeElement).toBe(outside);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("returnFocus: false with no handle still returns nothing on destroy, as before", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        const trap = focusTrap(trapNode, { returnFocus: false });
+        trap?.destroy?.();
+        expect(document.activeElement?.id).toBe("a");
+        outside.remove();
+    });
+    it("runs the same three-step chain as destroy(), falling back when the original is gone", () => {
+        const outside = withOutsideTrigger();
+        const fallback = document.createElement("button");
+        fallback.id = "fallback";
+        document.body.appendChild(fallback);
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        const trap = focusTrap(trapNode, {
+            fallbackFocus: () => fallback,
+            onActivate: (r) => (returnNow = r),
+        });
+        outside.remove();
+        returnNow();
+        expect(document.activeElement).toBe(fallback);
+        trap?.destroy?.();
+        fallback.remove();
+    });
+    it("omitting onActivate leaves the destroy-time return exactly as it was", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        const trap = focusTrap(trapNode, {});
+        expect(document.activeElement?.id).toBe("a");
+        trap?.destroy?.();
+        expect(document.activeElement).toBe(outside);
+        outside.remove();
+    });
+});
+// A reopen DURING the exit is not a new mount: Svelte reverses the outro and
+// resumes the same branch, so the action is never re-created and neither the
+// initial focus move nor `onActivate` runs again. `rearm` — the second
+// function handed to `onActivate` — is what puts focus back inside the panel
+// and un-spends the eager return, so the NEXT dismiss still returns focus.
+// Without it a reopened `aria-modal` panel sits open with focus on the
+// trigger behind it, and every later close of that instance returns focus
+// nowhere at all.
+describe("focusTrap — re-arming after a reopen mid-exit", () => {
+    let container;
+    afterEach(() => {
+        container?.remove();
+        document.body.innerHTML = "";
+        vi.restoreAllMocks();
+    });
+    function setup(innerHtml) {
+        container = document.createElement("div");
+        container.innerHTML = innerHtml;
+        document.body.appendChild(container);
+        return container.querySelector("#trap");
+    }
+    function withOutsideTrigger() {
+        const outside = document.createElement("button");
+        outside.id = "outside";
+        document.body.appendChild(outside);
+        outside.focus();
+        return outside;
+    }
+    it("hands over a re-arm function alongside the return handle, at the same moment", () => {
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        const args = [];
+        const trap = focusTrap(trapNode, { onActivate: (...rest) => args.push(rest) });
+        expect(args).toHaveLength(1);
+        expect(args[0]).toHaveLength(2);
+        expect(typeof args[0][0]).toBe("function");
+        expect(typeof args[0][1]).toBe("function");
+        trap?.destroy?.();
+    });
+    it("puts focus back inside the trap after the eager return moved it out", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        // Dismiss: the eager return puts focus on the trigger while the panel
+        // is still mounted and fading.
+        returnNow();
+        expect(document.activeElement).toBe(outside);
+        // Reopen mid-fade: the same action instance is still mounted.
+        rearm();
+        expect(trapNode.contains(document.activeElement)).toBe(true);
+        expect(document.activeElement?.id).toBe("a");
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("re-arms destroy(): the dismiss after a reopen still returns focus", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        returnNow();
+        rearm();
+        trap?.destroy?.();
+        expect(document.activeElement).toBe(outside);
+        outside.remove();
+    });
+    it("re-arms the handle itself: the next outrostart returns focus again", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        const focusSpy = vi.spyOn(outside, "focus");
+        returnNow(); // first dismiss
+        rearm(); // reopened mid-fade
+        returnNow(); // second, genuine dismiss
+        expect(focusSpy).toHaveBeenCalledTimes(2);
+        expect(document.activeElement).toBe(outside);
+        // And it is still idempotent within that second activation.
+        returnNow();
+        expect(focusSpy).toHaveBeenCalledTimes(2);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("does not move focus when it is already inside the trap", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button><button id="b">B</button></div>`);
+        let rearm = null;
+        const trap = focusTrap(trapNode, { onActivate: (_r, again) => (rearm = again) });
+        // The very first `introstart` fires with focus already where
+        // `focusInitial` just put it, and a user may since have tabbed on.
+        const second = trapNode.querySelector("#b");
+        second.focus();
+        rearm();
+        expect(document.activeElement).toBe(second);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    it("honours initialFocus when it re-arms, not just the first focusable", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button><button id="b">B</button></div>`);
+        const initial = trapNode.querySelector("#b");
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            initialFocus: initial,
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        expect(document.activeElement).toBe(initial);
+        returnNow();
+        rearm();
+        expect(document.activeElement).toBe(initial);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    // `update()` used to store `returnFocus` and `fallbackFocus` but drop
+    // `initialFocus`, so `rearm()` kept honouring whatever target the action
+    // mounted with. A dialog that retargets between form steps would then
+    // reopen onto the previous step's field — or onto nothing, if that field
+    // had been removed with its step.
+    it("re-arms onto the CURRENT initialFocus, not the one it mounted with", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button><button id="b">B</button></div>`);
+        const a = trapNode.querySelector("#a");
+        const b = trapNode.querySelector("#b");
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            initialFocus: a,
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        expect(document.activeElement).toBe(a);
+        // The caller retargets while the surface is still mounted.
+        trap?.update?.({ initialFocus: b });
+        returnNow();
+        rearm();
+        expect(document.activeElement).toBe(b);
+        trap?.destroy?.();
+        outside.remove();
+    });
+    // `previouslyFocused` was captured once at mount, so a surface reopened
+    // from a DIFFERENT control returned focus to the first opener on its next
+    // dismissal — or fell through to the fallback, if that opener was gone.
+    it("returns focus to the control that reopened it, not the original opener", () => {
+        const first = withOutsideTrigger();
+        const second = document.createElement("button");
+        second.id = "second";
+        document.body.appendChild(second);
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        returnNow();
+        expect(document.activeElement).toBe(first);
+        // A different control reopens the surface mid-exit.
+        second.focus();
+        rearm();
+        expect(trapNode.contains(document.activeElement)).toBe(true);
+        trap?.destroy?.();
+        expect(document.activeElement).toBe(second);
+        first.remove();
+        second.remove();
+    });
+    // Svelte marks the exiting panel `inert`, which drops focus to <body>.
+    // Adopting that as the new return target would trade a real opener for
+    // one that clears focus, so the recapture skips it.
+    it("does not adopt document.body as the return target when re-arming", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        let returnNow = null;
+        let rearm = null;
+        const trap = focusTrap(trapNode, {
+            onActivate: (r, again) => {
+                returnNow = r;
+                rearm = again;
+            },
+        });
+        returnNow();
+        document.body.focus();
+        rearm();
+        trap?.destroy?.();
+        expect(document.activeElement).toBe(outside);
+        outside.remove();
+    });
+    it("leaves a trap that never took the handle untouched", () => {
+        const outside = withOutsideTrigger();
+        const trapNode = setup(`<div id="trap"><button id="a">A</button></div>`);
+        const trap = focusTrap(trapNode, {});
+        expect(document.activeElement?.id).toBe("a");
+        trap?.destroy?.();
+        expect(document.activeElement).toBe(outside);
+        outside.remove();
+    });
+});

package/dist/fancy-ui/_internals/motion/AnchoredHarness.test.svelte ADDED Viewed

@@ -0,0 +1,42 @@
+<!--
+  Test-only rig: mounts a `{#if open}` block whose element carries the
+  `anchored` transition and the matching static `style:transform-origin`,
+  i.e. the exact call-site shape the twelve floating panels use. A test can
+  toggle `open` via rerender() and prove the transition drives the node
+  through a real mount/unmount cycle — either through the
+  `Element.prototype.animate` stub in `src/test-setup.ts` (non-zero
+  duration), or through Svelte's own duration-falsy short-circuit (the
+  reduced-motion path: duration 0, synchronous, animate() never called).
+  It uses one bidirectional `transition:` directive so a single toggle
+  exercises both directions; the shipping panels use `in:` only, which is a
+  call-site decision (an entrance-only panel must never delay its own
+  unmount), not a limitation of the transition itself.
+  Not exported from index.ts, and not collected by Vitest directly (the run
+  includes `*.test.ts` only) — imported and rendered from anchored.test.ts.
+-->
+<script lang="ts">
+	import { anchored, originFor, type AnchoredParams } from "./anchored.js";
+	import type { Side, Align } from "../anchor-position.js";
+	interface Props {
+		open: boolean;
+		side?: Side;
+		align?: Align;
+		params?: AnchoredParams;
+	}
+	let { open, side = "bottom", align = "center", params }: Props = $props();
+</script>
+{#if open}
+	<div
+		data-testid="node"
+		transition:anchored={params}
+		data-side={side}
+		style:transform-origin={originFor(side, align)}
+	>
+		content
+	</div>
+{/if}

package/dist/fancy-ui/_internals/motion/AnchoredHarness.test.svelte.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { type AnchoredParams } from "./anchored.js";
+import type { Side, Align } from "../anchor-position.js";
+interface Props {
+    open: boolean;
+    side?: Side;
+    align?: Align;
+    params?: AnchoredParams;
+}
+declare const AnchoredHarness: import("svelte").Component<Props, {}, "">;
+type AnchoredHarness = ReturnType<typeof AnchoredHarness>;
+export default AnchoredHarness;

package/dist/fancy-ui/_internals/motion/TransitionsHarness.test.svelte ADDED Viewed

@@ -0,0 +1,32 @@
+<!--
+  Test-only rig: mounts a `{#if open}` block whose element carries a
+  `preset()` transition, so a test can toggle `open` via rerender() and
+  prove the transition actually drives the node through a real mount/unmount
+  cycle — either through the `Element.prototype.animate` stub in
+  `src/test-setup.ts` (non-zero duration), or through Svelte's own
+  duration-falsy short-circuit (duration: 0, synchronous, animate() never
+  called). Not exported from index.ts, and not collected by Vitest directly
+  (the run includes `*.test.ts` only) — imported and rendered from
+  transitions.test.ts.
+-->
+<script lang="ts">
+	import { preset, type PresetParams } from "./transitions.js";
+	import type { PresetName } from "./presets.js";
+	interface Props {
+		open: boolean;
+		name: PresetName;
+		params?: PresetParams;
+	}
+	let { open, name, params }: Props = $props();
+	// $derived.by, not a plain `const`, because `name` is a reactive prop —
+	// no test currently changes it mid-lifetime, but a bare
+	// `const fn = preset(name)` would silently freeze on whatever `name` was
+	// at first render if one ever did.
+	const fn = $derived.by(() => preset(name));
+</script>
+{#if open}
+	<div data-testid="node" transition:fn={params}>content</div>
+{/if}

package/dist/fancy-ui/_internals/motion/TransitionsHarness.test.svelte.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { type PresetParams } from "./transitions.js";
+import type { PresetName } from "./presets.js";
+interface Props {
+    open: boolean;
+    name: PresetName;
+    params?: PresetParams;
+}
+declare const TransitionsHarness: import("svelte").Component<Props, {}, "">;
+type TransitionsHarness = ReturnType<typeof TransitionsHarness>;
+export default TransitionsHarness;