@leavepulse/ui 0.77.3 → 0.78.1

package/dist/chunks/{LpSegmented-CeACsMMA.js → LpSegmented-DbEJhbv-.js}

@@ -1,12 +1,14 @@
 import { defineComponent, useId, ref, openBlock, createBlock, unref, mergeProps, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, createVNode, toDisplayString } from "vue";
+import { CONTROL_SIZE } from "../components/controlSize.js";
+import { isHTMLElement } from "../composables/realm.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { Motion } from "motion-v";
 import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, mergeDescribedBy } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$2 } from "./AttentionDot-DCBf4aWg.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 const _hoisted_1 = {
   key: 1,
   class: "relative z-10 inline-flex shrink-0"
@@ -35,11 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onChange(v) {
       if (typeof v === "string" && v) emit("update:modelValue", v);
     }
-    const sizeCls = {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm"
-    };
+    const sizeCls = CONTROL_SIZE;
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
         "inline-flex items-center gap-1 rounded-control border border-line bg-surface-soft p-1",
@@ -61,7 +59,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function releaseFocusAfterPointer(event) {
       const target = event.currentTarget;
-      if (target instanceof HTMLElement) target.blur();
+      if (isHTMLElement(target)) target.blur();
     }
     usePaletteControl({ disabled: () => field.value.disabled });
     return (_ctx, _cache) => {
@@ -70,10 +68,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         type: "single",
         disabled: unref(field).disabled,
         "aria-labelledby": unref(field).labelId,
-        "aria-describedby": unref(field).describedBy,
         rovingFocus: true,
         class: unref(rootClass)
       }, unref(rest), {
+        "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
         "onUpdate:modelValue": onChange,
         onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null)
       }), {
@@ -116,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["model-value", "disabled", "aria-labelledby", "aria-describedby", "class"]);
+      }, 16, ["model-value", "disabled", "aria-labelledby", "class", "aria-describedby"]);
     };
   }
 });

package/dist/chunks/{LpSelect-Cxq4yBGd.js → LpSelect-Y-iuSymW.js}

@@ -1,16 +1,19 @@
 import { defineComponent, computed, ref, useAttrs, useId, reactive, watch, nextTick, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeClass, createElementVNode, toDisplayString, createElementBlock, TransitionGroup, Fragment, renderList, createCommentVNode, withModifiers, createTextVNode, normalizeStyle } from "vue";
+import { _ as _sfc_main$3 } from "./IconCloseButton-COZEsa9u.js";
+import { CONTROL_SIZE } from "../components/controlSize.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
-import { useFieldControl, useFieldBlur } from "../composables/useField.js";
+import { useFieldControl, useFieldBlur, mergeDescribedBy } from "../composables/useField.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$3 } from "./OptionContent-22UT8zLn.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$4 } from "./OptionContent-CGb8QlHA.js";
 import { _ as _sfc_main$2 } from "./LpRollingText-B54Pje7P.js";
-import { fitChips, toggledValues } from "../components/select.js";
+import { evictOldest, fitChips, toggledValues } from "../components/select.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
 import { useResizeObserver } from "../composables/useResizeObserver.js";
+import { nodeWindow } from "../composables/realm.js";
 const _hoisted_1 = { class: "sr-only" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = { class: "truncate" };
@@ -35,12 +38,11 @@ const _hoisted_11 = {
   key: 2,
   class: "min-w-0 truncate text-muted"
 };
-const _hoisted_12 = ["aria-label"];
-const _hoisted_13 = {
+const _hoisted_12 = {
   key: 0,
   class: "border-b border-line p-2"
 };
-const _hoisted_14 = {
+const _hoisted_13 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
@@ -70,11 +72,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue", "change", "update:searchTerm", "blur"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const SIZE_HEIGHT = {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm"
-    };
+    const SIZE_HEIGHT = CONTROL_SIZE;
     const anchorHeight = computed(() => SIZE_HEIGHT[props.size]);
     const field = useFieldControl(() => ({
       wrapped: false,
@@ -126,7 +124,29 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const items = panel?.querySelectorAll('[role="option"]:not([data-disabled])');
       const selected = panel?.querySelector('[role="option"][aria-selected="true"]:not([data-disabled])');
       const target = search ?? selected ?? (event.key === "ArrowUp" ? items?.[items.length - 1] : items?.[0]);
-      target?.focus();
+      if (isOpen.value) target?.focus();
+    }
+    const LIST_KEYS = ["ArrowDown", "ArrowUp", "Home", "End", "Enter"];
+    function moveInList(event) {
+      if (props.searchable || serverSide.value || !LIST_KEYS.includes(event.key)) return;
+      const list = event.currentTarget;
+      const items = Array.from(list.querySelectorAll('[role="option"]:not([data-disabled])'));
+      if (!items.length) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const at = items.indexOf(list.ownerDocument.activeElement);
+      if (event.key === "Enter") {
+        items[at]?.click();
+        return;
+      }
+      const last = items.length - 1;
+      const next = {
+        ArrowDown: at === last ? 0 : at + 1,
+        ArrowUp: at <= 0 ? last : at - 1,
+        Home: 0,
+        End: last
+      }[event.key];
+      items[next ?? 0]?.focus();
     }
     const { partId, onFocusOut } = useFieldBlur((event) => emit("blur", event));
     const triggerRef = ref(null);
@@ -142,7 +162,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const valueId = `lp-select-${useId()}-value`;
     const valueText = computed(() => chips.value.length ? chipNames.value : displayLabel.value || placeholderText.value);
     const triggerName = computed(
-      () => field.value.labelId ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": void 0 } : { "aria-label": attrs["aria-label"] ?? valueText.value }
+      () => field.value.labelId ? { "aria-labelledby": `${field.value.labelId} ${valueId}`, "aria-label": void 0 } : { "aria-label": [attrs["aria-label"], valueText.value].filter(Boolean).join(", ") }
     );
     const EMPTY_SENTINEL = "\0__lp_empty__";
     function encode(v) {
@@ -169,6 +189,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
     });
     const remembered = reactive(/* @__PURE__ */ new Map());
+    const REMEMBERED_LIMIT = 500;
     function fromOption(o) {
       return { label: o.label, hint: o.description, image: o.image, icon: o.icon };
     }
@@ -177,6 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const o = props.options.find((x) => x.value === v);
         if (o) remembered.set(v, fromOption(o));
       }
+      evictOldest(remembered, new Set(values), REMEMBERED_LIMIT);
     }
     const modelList = computed(() => {
       const v = props.modelValue;
@@ -222,7 +244,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!row || !probe) return;
       const kids = Array.from(probe.children);
       const more = kids.pop();
-      const gap = Number.parseFloat(getComputedStyle(probe).columnGap) || 0;
+      const gap = Number.parseFloat(nodeWindow(probe).getComputedStyle(probe).columnGap) || 0;
       fit.value = fitChips(
         kids.map((k) => k.offsetWidth),
         row.clientWidth,
@@ -231,6 +253,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
     }
     useResizeObserver(chipRow, () => measure());
+    useResizeObserver(probeRow, () => measure());
     watch(chips, () => void nextTick(measure), { flush: "post", deep: true });
     const shownChips = computed(() => chips.value.slice(0, fit.value));
     const hiddenCount = computed(() => modelList.value.length - shownChips.value.length);
@@ -297,7 +320,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 onKeydown: openFromKeyboard
               }, triggerName.value, {
                 "aria-invalid": unref(field).invalid || void 0,
-                "aria-describedby": unref(field).describedBy,
+                "aria-describedby": unref(mergeDescribedBy)(unref(rootAttrs)["aria-describedby"], unref(field).describedBy),
                 class: "flex min-w-0 flex-1 items-center gap-2 outline-none"
               }), {
                 default: withCtx(() => [
@@ -388,21 +411,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }, 16, ["id", "tabindex", "aria-invalid", "aria-describedby"]),
-              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createElementBlock("button", {
+              __props.clearable && hasValue.value && !unref(field).disabled ? (openBlock(), createBlock(_sfc_main$3, {
                 key: 0,
-                type: "button",
-                class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
-                "aria-label": unref(labels).clear,
+                inline: "",
+                label: unref(labels).clear,
                 onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
                 }, ["prevent"])),
                 onClick: clear
-              }, [
-                createVNode(_sfc_main$1, {
-                  name: "lucide:x",
-                  size: 16,
-                  class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
-                })
-              ], 40, _hoisted_12)) : createCommentVNode("", true),
+              }, null, 8, ["label"])) : createCommentVNode("", true),
               createVNode(unref(ComboboxTrigger), {
                 tabindex: "-1",
                 "aria-hidden": "true",
@@ -425,6 +441,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               createVNode(unref(ComboboxContent), {
                 "data-lp-field-part": unref(partId),
                 onFocusout: onListFocusOut,
+                onKeydownCapture: moveInList,
                 onInteractOutside: unref(guardOutside),
                 onEscapeKeyDown: unref(guardOutside),
                 position: "popper",
@@ -432,7 +449,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"])
               }, {
                 default: withCtx(() => [
-                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
                     createVNode(unref(ComboboxInput), {
                       modelValue: query.value,
                       "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
@@ -443,7 +460,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])) : createCommentVNode("", true),
                   createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_14, toDisplayString(loadingLabel.value), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_13, toDisplayString(loadingLabel.value), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -461,7 +478,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           class: normalizeClass([unref(OPTION_ITEM), "justify-between data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"])
                         }, {
                           default: withCtx(() => [
-                            createVNode(_sfc_main$3, { option: opt }, null, 8, ["option"]),
+                            createVNode(_sfc_main$4, { option: opt }, null, 8, ["option"]),
                             createVNode(unref(ComboboxItemIndicator), { class: "flex shrink-0 items-center text-brand" }, {
                               default: withCtx(() => [
                                 createVNode(_sfc_main$1, {

package/dist/chunks/{LpServiceNode-D8uJ8sGk.js → LpServiceNode-Cln2ntdw.js}

@@ -10,7 +10,24 @@ const _hoisted_4 = {
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpServiceNode",
   props: {
+    id: {},
+    type: {},
+    connectable: { type: [Boolean, Number, String, Function] },
+    position: {},
+    dimensions: {},
+    label: {},
+    isValidTargetPos: { type: Function },
+    isValidSourcePos: { type: Function },
+    parent: {},
+    parentNodeId: {},
+    dragging: { type: Boolean },
+    resizing: { type: Boolean },
+    zIndex: {},
+    targetPosition: {},
+    sourcePosition: {},
+    dragHandle: {},
     data: {},
+    events: {},
     selected: { type: Boolean }
   },
   setup(__props) {

package/dist/chunks/{LpShaderBackdrop-Bote0iuy.js → LpShaderBackdrop-wQygYb5h.js}

@@ -1,7 +1,9 @@
 import { defineComponent, ref, computed, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, mergeProps, unref, createVNode, Transition, withCtx, createElementVNode, normalizeStyle, normalizeClass } from "vue";
+import { clamp } from "../composables/clamp.js";
+import { nodeWindow } from "../composables/realm.js";
 import { parseColor } from "../components/color.js";
 import { PRESETS, FRAGMENT_HEADER, frameDue, approach, tooSlow, VERTEX_SHADER } from "../components/shaderBackdrop.js";
-import { i as isBrokenBackdropEngine } from "./backdrop-Dkf2vM81.js";
+import { isBrokenBackdropEngine } from "../theme/backdrop.js";
 import { durationToken } from "../composables/easing.js";
 import { useInView } from "../composables/useInView.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
@@ -35,7 +37,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const weakEngine = typeof navigator !== "undefined" && isBrokenBackdropEngine();
     const fallbackStyle = computed(() => ({ background: PRESETS[props.preset].fallback, opacity: Math.min(1, clamp01(props.intensity) * 1.15) }));
     function clamp01(n) {
-      return Math.max(0, Math.min(1, n));
+      return clamp(n, 0, 1);
     }
     const TOKENS = ["surface", "brand", "accent", "action", "ink"];
     let probe = null;
@@ -43,10 +45,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function tokenColor(name) {
       if (!probe || !root.value) return [0, 0, 0];
       probe.style.color = `var(--color-${name})`;
-      const css = getComputedStyle(probe).color;
+      const css = nodeWindow(probe).getComputedStyle(probe).color;
       const rgb = parseColor(css);
       if (rgb) return [rgb.r / 255, rgb.g / 255, rgb.b / 255];
-      paint ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      paint ??= probe.ownerDocument.createElement("canvas").getContext("2d", { willReadFrequently: true });
       if (!paint) return [0, 0, 0];
       paint.clearRect(0, 0, 1, 1);
       paint.fillStyle = "#000";
@@ -120,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function sizeCanvas() {
       const el = canvas.value;
       if (!el) return;
-      const dpr = Math.min(weakEngine ? 1 : 2, window.devicePixelRatio || 1);
+      const dpr = Math.min(weakEngine ? 1 : 2, nodeWindow(el).devicePixelRatio || 1);
       pixelRatio = dpr * PRESETS[props.preset].scale;
       const w = Math.max(1, Math.round(el.clientWidth * pixelRatio));
       const h = Math.max(1, Math.round(el.clientHeight * pixelRatio));
@@ -241,14 +243,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       drawFrame();
     });
     onMounted(() => {
-      probe = document.createElement("span");
+      const page = root.value?.ownerDocument ?? document;
+      probe = page.createElement("span");
       probe.style.display = "none";
       root.value?.appendChild(probe);
-      themeObserver = new MutationObserver(() => {
+      themeObserver = new (nodeWindow(page)).MutationObserver(() => {
         if (gl) refreshPalette();
       });
-      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] });
-      schemeQuery = window.matchMedia?.("(prefers-color-scheme: dark)");
+      themeObserver.observe(page.documentElement, { attributes: true, attributeFilter: ["style", "class", "data-theme", "data-theme-mode"] });
+      schemeQuery = nodeWindow(page).matchMedia?.("(prefers-color-scheme: dark)");
       schemeQuery?.addEventListener("change", refreshPalette);
       if (wantGl.value) start();
     });
@@ -272,7 +275,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
           drawFrame();
           shown.value = true;
-        }, durationToken("duration-medium"));
+        }, durationToken("duration-medium", void 0, root.value ?? void 0));
       }
     );
     watch(

package/dist/chunks/{LpShift-CCq7dofl.js → LpShift-DAgS_d2x.js}

@@ -1,9 +1,11 @@
 import { defineComponent, computed, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
+import { nodeWindow, isElement, isHTMLElement } from "../composables/realm.js";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { useShift } from "../composables/useShift.js";
 const PRESENCE_MS = 200;
 const MOVE_MS = 160;
 const EASE = "cubic-bezier(0.2, 0, 0, 1)";
+const SVG_NS = "http://www.w3.org/2000/svg";
 const GHOST = "data-lp-shift-ghost";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpShift",
@@ -36,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       rememberTimer = setTimeout(() => remember(box), wait);
     }
     function elementsOf(box) {
-      return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node instanceof SVGElement && !(node instanceof SVGSVGElement)));
+      return [...box.querySelectorAll("*")].filter((node) => !node.closest(`[${GHOST}]`) && !(node.namespaceURI === SVG_NS && node.localName !== "svg"));
     }
     function remember(box) {
       for (const node of elementsOf(box)) {
@@ -51,11 +53,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function inFlow(node) {
-      const position = getComputedStyle(node).position;
+      const position = nodeWindow(node).getComputedStyle(node).position;
       return position !== "absolute" && position !== "fixed";
     }
     function signature(node) {
-      return node instanceof Element ? node.outerHTML : void 0;
+      return isElement(node) ? node.outerHTML : void 0;
     }
     function unchanged(records) {
       const removed = /* @__PURE__ */ new Map();
@@ -74,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const offset = () => props.anchor === "end" ? -6 : 6;
     function ghost(box, node) {
       const at = seen.get(node);
-      if (!at || !at.flow || !(node instanceof HTMLElement) || node.hasAttribute(GHOST) || at.width === 0) return;
+      if (!at || !at.flow || !isHTMLElement(node) || node.hasAttribute(GHOST) || at.width === 0) return;
       const copy = node.cloneNode(true);
       copy.setAttribute(GHOST, "");
       copy.setAttribute("aria-hidden", "true");
@@ -101,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ).finished.catch(() => void 0).finally(() => copy.remove());
     }
     function arrive(node) {
-      if (!(node instanceof HTMLElement) || node.hasAttribute(GHOST) || !inFlow(node)) return;
+      if (!isHTMLElement(node) || node.hasAttribute(GHOST) || !inFlow(node)) return;
       node.animate(
         [
           { opacity: 0, transform: `translateX(${offset()}px) scale(0.96)`, filter: "blur(2px)" },
@@ -112,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function glide(node) {
       const was = seen.get(node);
-      if (!was || !(node instanceof HTMLElement)) return;
+      if (!was || !isHTMLElement(node)) return;
       const now = node.getBoundingClientRect();
       const dx = was.x - now.left;
       const dy = was.y - now.top;
@@ -128,21 +130,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         presenceSize = void 0;
         if (!box || !on) return;
         remember(box);
-        presenceObserver = new MutationObserver((records) => {
+        const win = nodeWindow(box);
+        presenceObserver = new win.MutationObserver((records) => {
           const real = records.filter(
-            (r) => ![...r.addedNodes, ...r.removedNodes].every((n) => n instanceof Element && n.hasAttribute(GHOST))
+            (r) => ![...r.addedNodes, ...r.removedNodes].every((n) => isElement(n) && n.hasAttribute(GHOST))
           );
-          if (real.length && !prefersReducedMotion()) {
+          if (real.length && !prefersReducedMotion(win)) {
             const added = /* @__PURE__ */ new Set();
             const same = unchanged(real);
             for (const record of real) {
-              record.removedNodes.forEach((node) => node instanceof Element && !same.has(node) && ghost(box, node));
+              record.removedNodes.forEach((node) => isElement(node) && !same.has(node) && ghost(box, node));
               record.addedNodes.forEach((node) => {
                 added.add(node);
-                if (node instanceof Element && !same.has(node)) arrive(node);
+                if (isElement(node) && !same.has(node)) arrive(node);
               });
             }
-            const parents = real.map((r) => r.target).filter((t) => t instanceof Element && !t.hasAttribute(GHOST));
+            const parents = real.map((r) => r.target).filter((t) => isElement(t) && !t.hasAttribute(GHOST));
             requestAnimationFrame(() => {
               for (const parent of parents) for (const child of parent.children) if (!added.has(child)) glide(child);
             });
@@ -150,15 +153,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           rememberSoon(box);
         });
         presenceObserver.observe(box, { childList: true, subtree: true });
-        presenceSize = new ResizeObserver(() => rememberSoon(box, 60));
+        presenceSize = new win.ResizeObserver(() => rememberSoon(box, 60));
         presenceSize.observe(box);
-        void document.fonts?.ready.then(() => rememberSoon(box, 0));
+        void box.ownerDocument.fonts?.ready.then(() => rememberSoon(box, 0));
       },
       { flush: "post" }
     );
     watch(resizing, (now) => {
       const box = el.value;
-      if (!now || !box || !presenceObserver || prefersReducedMotion()) return;
+      if (!now || !box || !presenceObserver || prefersReducedMotion(nodeWindow(box))) return;
       requestAnimationFrame(() => {
         for (const child of box.children) if (!child.hasAttribute(GHOST)) glide(child);
       });