@retoo/borda 0.1.0 → 0.1.1

package/dist/borda.min.umd.js

@@ -3655,9 +3655,8 @@
 			return e = n(), po.has(e) ? e : so.BOTTOM_START;
 			var e;
 		}), m = Ce(o), _ = Ce(i), b = Ce(r), y = Ce(s), T = Ce(a);
-		return Lt(() => {
+		function w() {
 			if (!En(h) || !En(v)) return;
-			p.x, p.y;
 			const e = Si({
 				target: En(h),
 				tooltip: En(v),
@@ -3673,6 +3672,13 @@
 				}
 			});
 			ot(l, e.position.top, !0), ot(u, e.position.left, !0), ot(c, e.placement, !0), ot(f, e.arrowOffset, !0);
+		}
+		return Lt(() => {
+			if (!En(v)) return;
+			const e = new ResizeObserver(w);
+			return e.observe(En(v)), () => e.disconnect();
+		}), Lt(() => {
+			p.x, p.y, w();
 		}), {
 			get top() {
 				return En(l);
@@ -4275,13 +4281,20 @@
 			getDuration: () => t.animation.overlay.transitionDuration
 		});
 		to({ getContainer: () => En(n)?.getElements()?.root ?? null });
-		const a = Ce(() => t.config.size), l = Ce(() => t.config.shape), u = Ce(() => ["rb"]), c = Ce(() => ({
+		const a = Ce(() => ["rb"]), l = Ce(() => ({
 			...t.config.container,
 			customClasses: {
 				...t.config.container?.customClasses,
 				root: [t.config.container?.customClasses?.root, i.classes]
 			}
-		})), f = Ce(() => t.config.tourOverlay), d = Ce(() => t.config.tourTooltip), p = Ce(() => t.config.tourImage), h = Ce(() => t.config.tourButtons), v = Ce(() => t.config.tourProgress), g = Ce(() => t.config.tourSkip), m = Ce(() => t.config.closeButton), _ = Ce(() => !!t.animation.isEnabled && t.animation.tooltip), b = Ce(() => t.animation.isEnabled), y = Ce(() => t.animation.tooltip.transition === Oo.GLIDE), T = Ce(() => t.animation.tooltip.appearance === So.DURING_SCROLL), w = Ce(() => t.scroll.isScrolling || s.isActive), E = Ce(() => !En(y) && En(b) && En(w) && !En(T)), S = Ce(() => t.controller.step), O = Ce(() => {
+		})), u = Ce(() => !!t.animation.isEnabled && t.animation.tooltip), c = Ce(() => t.animation.isEnabled), f = Ce(() => t.animation.tooltip.transition === Oo.GLIDE), d = Ce(() => t.animation.tooltip.appearance === So.DURING_SCROLL), p = Ce(() => t.scroll.isScrolling || s.isActive), h = Ce(() => !En(f) && En(c) && En(p) && !En(d));
+		let v = nt(ut({
+			step: Cn(() => t.controller.step),
+			target: Cn(() => t.controller.currentTarget),
+			currentStep: Cn(() => t.controller.currentStep),
+			config: Cn(() => t.config)
+		}));
+		const g = Ce(() => En(v).config.size), m = Ce(() => En(v).config.shape), _ = Ce(() => En(v).config.tourOverlay), b = Ce(() => En(v).config.tourTooltip), y = Ce(() => En(v).config.tourImage), T = Ce(() => En(v).config.tourButtons), w = Ce(() => En(v).config.tourProgress), E = Ce(() => En(v).config.tourSkip), S = Ce(() => En(v).config.closeButton), O = Ce(() => {
 			const e = En(o)?.getComponents();
 			return {
 				tourTooltip: e?.tourTooltip ?? null,
@@ -4308,6 +4321,22 @@
 		var N;
 		Lt(() => {
 			t.config.visibility?.isHidden || t.scroll.scrollTo(t.controller.currentTarget);
+		}), Lt(() => {
+			if (!En(h)) return void ot(v, {
+				step: t.controller.step,
+				target: t.controller.currentTarget,
+				currentStep: t.controller.currentStep,
+				config: t.config
+			}, !0);
+			const e = setTimeout(() => {
+				ot(v, {
+					step: t.controller.step,
+					target: t.controller.currentTarget,
+					currentStep: t.controller.currentStep,
+					config: t.config
+				}, !0);
+			}, t.animation.tooltip.exitDuration);
+			return () => clearTimeout(e);
 		}), sr(() => {
 			t.mount();
 		}), N = () => {
@@ -4329,9 +4358,9 @@
 			}), X(s), zr(s, (e) => ot(n, e), () => En(n)), Bt(() => {
 				Ir(s, "id", t.id), Tr(s, 1, mr(En(r))), Er(s, En(o));
 			}), zn(e, s), oe(i);
-		}(yt(A), qr(() => En(c), {
+		}(yt(A), qr(() => En(l), {
 			children: (e, n) => {
-				var i = Fn(), s = Tt(i), u = (e) => {
+				var i = Fn(), s = Tt(i), a = (e) => {
 					var n = xi(), i = Tt(n), s = (e) => {
 						zr(function(e, t) {
 							re(t, !0);
@@ -4373,26 +4402,26 @@
 							}), zn(e, y), oe(b);
 						}(e, qr({
 							get targetElement() {
-								return t.controller.currentTarget;
+								return En(v).target;
 							},
 							get isAnimated() {
-								return En(b);
+								return En(c);
 							}
-						}, () => En(f))), (e) => ot(r, e, !0), () => En(r));
+						}, () => En(_))), (e) => ot(r, e, !0), () => En(r));
 					};
 					ar(i, (e) => {
-						!1 !== En(f) && e(s);
+						!1 !== En(_) && e(s);
 					});
-					var u = wt(i, 2), c = (e) => {
+					var a = wt(i, 2), l = (e) => {
 						zr(Pi(e, {
 							get step() {
-								return En(S);
+								return En(v).step;
 							},
 							get currentTarget() {
-								return t.controller.currentTarget;
+								return En(v).target;
 							},
 							get currentStep() {
-								return t.controller.currentStep;
+								return En(v).currentStep;
 							},
 							get totalSteps() {
 								return t.controller.totalSteps;
@@ -4401,37 +4430,37 @@
 								return t.skip.isSkipped;
 							},
 							get isHidden() {
-								return En(E);
+								return En(h);
 							},
 							get hasGlide() {
-								return En(y);
+								return En(f);
 							},
 							get tourTooltipAnimation() {
-								return En(_);
+								return En(u);
 							},
 							get size() {
-								return En(a);
+								return En(g);
 							},
 							get shape() {
-								return En(l);
+								return En(m);
 							},
 							get tourTooltipProps() {
-								return En(d);
+								return En(b);
 							},
 							get tourImageProps() {
-								return En(p);
+								return En(y);
 							},
 							get tourButtonsProps() {
-								return En(h);
+								return En(T);
 							},
 							get tourProgressProps() {
-								return En(v);
+								return En(w);
 							},
 							get closeButtonProps() {
-								return En(m);
+								return En(S);
 							},
 							get tourSkipProps() {
-								return En(g);
+								return En(E);
 							},
 							get onNext() {
 								return t.controller.next;
@@ -4450,16 +4479,16 @@
 							}
 						}), (e) => ot(o, e, !0), () => En(o));
 					};
-					ar(u, (e) => {
-						!1 !== En(d) && e(c);
+					ar(a, (e) => {
+						!1 !== En(b) && e(l);
 					}), zn(e, n);
 				};
 				ar(s, (e) => {
-					t.controller.currentTarget && En(S) && e(u);
+					t.controller.currentTarget && t.controller.step && e(a);
 				}), zn(e, i);
 			},
 			$$slots: { default: !0 }
-		})), (e) => ot(n, e, !0), () => En(n)), X(A), Bt(() => Tr(A, 1, mr(En(u)))), zn(e, A), oe(k);
+		})), (e) => ot(n, e, !0), () => En(n)), X(A), Bt(() => Tr(A, 1, mr(En(a)))), zn(e, A), oe(k);
 	}
 	function Ri() {
 		const e = /* @__PURE__ */ new WeakMap(), t = /* @__PURE__ */ new WeakSet();
@@ -4552,7 +4581,7 @@
 		}
 		return {
 			NAME: "@retoo/borda",
-			VERSION: "0.1.0",
+			VERSION: "0.1.1",
 			mount: n,
 			unmount: r,
 			highlight: Do(n).highlight

package/dist/borda.umd.js

@@ -8445,11 +8445,9 @@ createHTML: (html) => {
 		const padding = /* @__PURE__ */ user_derived(getPadding);
 		const autoPlacement = /* @__PURE__ */ user_derived(getAutoPlacement);
 		const arrowSide = /* @__PURE__ */ user_derived(getArrowSide);
-		user_effect(() => {
+		/** Reads the live target/tooltip rects and writes the resolved position into state. */
+		function recompute() {
 			if (!get(target) || !get(tooltip)) return;
-			/** Re-run on scroll so auto-flip/shift recompute against the live viewport. */
-			scroll.x;
-			scroll.y;
 			const layout = useTooltipLayout({
 				target: get(target),
 				tooltip: get(tooltip),
@@ -8468,6 +8466,19 @@ createHTML: (html) => {
 			set(left, layout.position.left, true);
 			set(effectivePlacement, layout.placement, true);
 			set(arrowOffset, layout.arrowOffset, true);
+		}
+		user_effect(() => {
+			if (!get(tooltip)) return;
+			/** Re-run when the tooltip's own size changes (e.g. an image finishes loading). */
+			const observer = new ResizeObserver(recompute);
+			observer.observe(get(tooltip));
+			return () => observer.disconnect();
+		});
+		user_effect(() => {
+			/** Re-run on scroll so auto-flip/shift recompute against the live viewport. */
+			scroll.x;
+			scroll.y;
+			recompute();
 		});
 		return {
 			get top() {
@@ -8952,9 +8963,8 @@ createHTML: (html) => {
 			getDuration: () => $$props.animation.overlay.transitionDuration
 		});
 		useFocusTrap({ getContainer: () => get(bordaContainer)?.getElements()?.root ?? null });
-		const size = /* @__PURE__ */ user_derived(() => $$props.config.size);
-		const shape = /* @__PURE__ */ user_derived(() => $$props.config.shape);
 		const rootClasses = /* @__PURE__ */ user_derived(() => ["rb"]);
+		/** Container chrome isn't per-step content, so it always tracks the live config. */
 		const containerProps = /* @__PURE__ */ user_derived(() => ({
 			...$$props.config.container,
 			customClasses: {
@@ -8962,13 +8972,6 @@ createHTML: (html) => {
 				root: [$$props.config.container?.customClasses?.root, containerAnimator.classes]
 			}
 		}));
-		const tourOverlayProps = /* @__PURE__ */ user_derived(() => $$props.config.tourOverlay);
-		const tourTooltipProps = /* @__PURE__ */ user_derived(() => $$props.config.tourTooltip);
-		const tourImageProps = /* @__PURE__ */ user_derived(() => $$props.config.tourImage);
-		const tourButtonsProps = /* @__PURE__ */ user_derived(() => $$props.config.tourButtons);
-		const tourProgressProps = /* @__PURE__ */ user_derived(() => $$props.config.tourProgress);
-		const tourSkipProps = /* @__PURE__ */ user_derived(() => $$props.config.tourSkip);
-		const closeButtonProps = /* @__PURE__ */ user_derived(() => $$props.config.closeButton);
 		const tourTooltipAnimation = /* @__PURE__ */ user_derived(() => $$props.animation.isEnabled ? $$props.animation.tooltip : false);
 		const isAnimated = /* @__PURE__ */ user_derived(() => $$props.animation.isEnabled);
 		const hasGlide = /* @__PURE__ */ user_derived(() => $$props.animation.tooltip.transition === BordaTooltipTransition.GLIDE);
@@ -8976,7 +8979,22 @@ createHTML: (html) => {
 		const isStepSettling = /* @__PURE__ */ user_derived(() => $$props.scroll.isScrolling || overlayTransition.isActive);
 		/** In fade mode, hide the tooltip while the step settles, then fade it in at the new position. */
 		const isHidden = /* @__PURE__ */ user_derived(() => !get(hasGlide) && get(isAnimated) && get(isStepSettling) && !get(isShownOnScroll));
-		const step = /* @__PURE__ */ user_derived(() => $$props.controller.step);
+		/** Seeded once from the initial step so the first render has content; kept in sync by the effect below. */
+		let displayed = /* @__PURE__ */ state(proxy({
+			step: untrack(() => $$props.controller.step),
+			target: untrack(() => $$props.controller.currentTarget),
+			currentStep: untrack(() => $$props.controller.currentStep),
+			config: untrack(() => $$props.config)
+		}));
+		const size = /* @__PURE__ */ user_derived(() => get(displayed).config.size);
+		const shape = /* @__PURE__ */ user_derived(() => get(displayed).config.shape);
+		const tourOverlayProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourOverlay);
+		const tourTooltipProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourTooltip);
+		const tourImageProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourImage);
+		const tourButtonsProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourButtons);
+		const tourProgressProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourProgress);
+		const tourSkipProps = /* @__PURE__ */ user_derived(() => get(displayed).config.tourSkip);
+		const closeButtonProps = /* @__PURE__ */ user_derived(() => get(displayed).config.closeButton);
 		const tourComponents = /* @__PURE__ */ user_derived(() => {
 			const components = get(bordaTour)?.getComponents();
 			return {
@@ -9008,6 +9026,34 @@ createHTML: (html) => {
 			if ($$props.config.visibility?.isHidden) return;
 			$$props.scroll.scrollTo($$props.controller.currentTarget);
 		});
+		user_effect(() => {
+			if (!get(isHidden)) {
+				set(displayed, {
+					step: $$props.controller.step,
+					target: $$props.controller.currentTarget,
+					currentStep: $$props.controller.currentStep,
+					config: $$props.config
+				}, true);
+				return;
+			}
+			/**
+			* `step`/`currentTarget`/`currentStep`/`config` (incl. per-step overrides
+			* like `tourProgress`) are live and swap the instant the step index
+			* changes, so binding the tooltip/overlay to them directly would render
+			* the new step's content immediately — visible for a frame before the
+			* fade-out even starts. Keep showing the outgoing step's snapshot while
+			* it fades out, and only swap once it's actually invisible.
+			*/
+			const timeoutId = setTimeout(() => {
+				set(displayed, {
+					step: $$props.controller.step,
+					target: $$props.controller.currentTarget,
+					currentStep: $$props.controller.currentStep,
+					config: $$props.config
+				}, true);
+			}, $$props.animation.tooltip.exitDuration);
+			return () => clearTimeout(timeoutId);
+		});
 		onMount(() => {
 			$$props.mount();
 		});
@@ -9027,7 +9073,7 @@ createHTML: (html) => {
 					var consequent = ($$anchor) => {
 						bind_this(BordaTourOverlay($$anchor, spread_props({
 							get targetElement() {
-								return $$props.controller.currentTarget;
+								return get(displayed).target;
 							},
 							get isAnimated() {
 								return get(isAnimated);
@@ -9041,13 +9087,13 @@ createHTML: (html) => {
 					var consequent_1 = ($$anchor) => {
 						bind_this(BordaTour($$anchor, {
 							get step() {
-								return get(step);
+								return get(displayed).step;
 							},
 							get currentTarget() {
-								return $$props.controller.currentTarget;
+								return get(displayed).target;
 							},
 							get currentStep() {
-								return $$props.controller.currentStep;
+								return get(displayed).currentStep;
 							},
 							get totalSteps() {
 								return $$props.controller.totalSteps;
@@ -9111,7 +9157,7 @@ createHTML: (html) => {
 					append($$anchor, fragment_1);
 				};
 				if_block(node_1, ($$render) => {
-					if ($$props.controller.currentTarget && get(step)) $$render(consequent_2);
+					if ($$props.controller.currentTarget && $$props.controller.step) $$render(consequent_2);
 				});
 				append($$anchor, fragment);
 			},
@@ -9289,7 +9335,7 @@ createHTML: (html) => {
 		}
 		return {
 			NAME: "@retoo/borda",
-			VERSION: "0.1.0",
+			VERSION: "0.1.1",
 			mount: mount$1,
 			unmount: unmount$1,
 			highlight: useBordaHighlight(mount$1).highlight

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@retoo/borda",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Embeddable onboarding widget for any website. Framework-agnostic, SSR-safe.",
 	"keywords": [
 		"embeddable",