impact-nova 2.6.1 → 2.6.2

package/dist/components/flows/guidance/renderers/announcement-renderer.js

@@ -1,18 +1,18 @@
-import { jsx as a, jsxs as n } from "react/jsx-runtime";
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
 import "react";
 import { Badge as m } from "../../../data-display/badge/badge.js";
 import { Dialog as i, DialogContent as x } from "../../../feedback/dialog/dialog.js";
-import { GuidanceStepProgressBar as b, GuidanceTourActionFooter as g, GuidanceTourProgressAndNav as h } from "./guidance-card-shared.js";
-import { GuidanceAnnouncementSurface as v } from "./guidance-announcement-surface.js";
-function k({
+import { GuidanceStepProgressBar as b, GuidanceTourActionFooter as g, GuidanceTourProgressAndNav as h, GuidanceCloseButton as v } from "./guidance-card-shared.js";
+import { GuidanceAnnouncementSurface as f } from "./guidance-announcement-surface.js";
+function N({
   instruction: e,
-  onNext: r,
-  onSkip: c,
-  onDismiss: p,
-  onBack: o
+  onNext: c,
+  onSkip: p,
+  onDismiss: d,
+  onBack: l
 }) {
-  const s = e.stepIndex + 1 >= e.totalSteps, d = e.content.badge?.trim(), l = e.interactionFooter === "keybinding";
-  return /* @__PURE__ */ a(i, { open: !0, children: /* @__PURE__ */ a(
+  const s = e.stepIndex + 1 >= e.totalSteps, r = e.content.badge?.trim(), o = e.interactionFooter === "keybinding";
+  return /* @__PURE__ */ a(i, { open: !0, children: /* @__PURE__ */ t(
     x,
     {
       "data-component": "guidance-announcement",
@@ -21,74 +21,77 @@ function k({
       className: "max-w-[400px] gap-0 overflow-hidden border-0 bg-canvas p-0 sm:rounded-2xl sm:shadow-elevation-floating",
       "aria-labelledby": `guidance-announcement-title-${e.stepId}`,
       "aria-describedby": e.content.body ? `guidance-announcement-body-${e.stepId}` : void 0,
-      onPointerDownOutside: (t) => {
-        t.preventDefault();
+      onPointerDownOutside: (n) => {
+        n.preventDefault();
       },
-      onInteractOutside: (t) => {
-        t.preventDefault();
+      onInteractOutside: (n) => {
+        n.preventDefault();
       },
-      onEscapeKeyDown: (t) => {
-        t.preventDefault();
+      onEscapeKeyDown: (n) => {
+        n.preventDefault();
       },
-      children: /* @__PURE__ */ n("div", { className: "relative overflow-hidden rounded-2xl", children: [
-        /* @__PURE__ */ a(v, {}),
-        /* @__PURE__ */ n("div", { className: "relative z-10 flex flex-col items-center px-8 pb-0 pt-10 text-center", children: [
-          d ? /* @__PURE__ */ a(m, { variant: "subtle", color: "primary", shape: "circle", size: "sm", children: d }) : null,
-          /* @__PURE__ */ a(
-            "h2",
-            {
-              id: `guidance-announcement-title-${e.stepId}`,
-              className: "mt-3 text-2xl font-bold leading-8 text-content",
-              children: e.content.title
-            }
-          ),
-          e.content.body ? /* @__PURE__ */ a(
-            "p",
-            {
-              id: `guidance-announcement-body-${e.stepId}`,
-              className: "mt-2 max-w-[22rem] text-sm leading-snug text-content-secondary",
-              children: e.content.body
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ a("div", { className: "relative z-10 px-8 pb-8 pt-6", children: l ? /* @__PURE__ */ n("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ a(
-            b,
+      children: [
+        /* @__PURE__ */ t("div", { className: "relative overflow-hidden rounded-2xl", children: [
+          /* @__PURE__ */ a(f, {}),
+          /* @__PURE__ */ t("div", { className: "relative z-10 flex flex-col items-center px-8 pb-0 pt-10 text-center", children: [
+            r ? /* @__PURE__ */ a(m, { variant: "subtle", color: "primary", shape: "circle", size: "sm", children: r }) : null,
+            /* @__PURE__ */ a(
+              "h2",
+              {
+                id: `guidance-announcement-title-${e.stepId}`,
+                className: "mt-3 text-2xl font-bold leading-8 text-content",
+                children: e.content.title
+              }
+            ),
+            e.content.body ? /* @__PURE__ */ a(
+              "p",
+              {
+                id: `guidance-announcement-body-${e.stepId}`,
+                className: "mt-2 max-w-[22rem] text-sm leading-snug text-content-secondary",
+                children: e.content.body
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ a("div", { className: "relative z-10 px-8 pb-8 pt-6", children: o ? /* @__PURE__ */ t("div", { className: "flex w-full flex-col gap-3", children: [
+            /* @__PURE__ */ a(
+              b,
+              {
+                activeStepIndex: e.stepIndex,
+                totalSteps: e.totalSteps
+              }
+            ),
+            /* @__PURE__ */ a(
+              g,
+              {
+                hint: e.content.footer ?? "Press the shortcut to continue.",
+                keybinding: e.content.keybinding,
+                activeStepIndex: e.stepIndex,
+                showBack: e.canGoBack,
+                onBack: l
+              }
+            )
+          ] }) : /* @__PURE__ */ a(
+            h,
             {
               activeStepIndex: e.stepIndex,
-              totalSteps: e.totalSteps
-            }
-          ),
-          /* @__PURE__ */ a(
-            g,
-            {
-              hint: e.content.footer ?? "Press the shortcut to continue.",
-              keybinding: e.content.keybinding,
-              activeStepIndex: e.stepIndex,
+              totalSteps: e.totalSteps,
+              skippable: e.skippable,
+              showSkip: !1,
               showBack: e.canGoBack,
-              onBack: o
+              onBack: l,
+              primaryActionLabel: s ? "Done" : "Next",
+              onSkip: p,
+              onPrimaryAction: c,
+              onEndTour: d,
+              showPrimaryAction: !o && e.advanceOn !== "auto"
             }
-          )
-        ] }) : /* @__PURE__ */ a(
-          h,
-          {
-            activeStepIndex: e.stepIndex,
-            totalSteps: e.totalSteps,
-            skippable: e.skippable,
-            showSkip: !1,
-            showBack: e.canGoBack,
-            onBack: o,
-            primaryActionLabel: s ? "Done" : "Next",
-            onSkip: c,
-            onPrimaryAction: r,
-            onEndTour: p,
-            showPrimaryAction: !l && e.advanceOn !== "auto"
-          }
-        ) })
-      ] })
+          ) })
+        ] }),
+        o ? /* @__PURE__ */ a(v, { onClose: d }) : null
+      ]
     }
   ) });
 }
 export {
-  k as AnnouncementRenderer
+  N as AnnouncementRenderer
 };

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.d.ts

@@ -39,7 +39,7 @@ export declare function useStableTargetRect(targetElement: HTMLElement | null |
 export declare function useAdvanceOnTargetClick(instruction: RenderInstruction, onNext: () => void): boolean;
 export declare function useElevateGuidanceTarget(targetElement: HTMLElement | null | undefined, shouldElevate?: boolean): void;
 export declare function buildHighlightRect(targetRect: HighlightRect, padding?: number, clipBounds?: HighlightRect): HighlightRect;
-export declare function buildHighlightRectForTarget(targetElement: HTMLElement, padding?: number): HighlightRect;
+export declare function buildHighlightRectForTarget(targetElement: HTMLElement, padding?: number): HighlightRect | null;
 export declare function buildHighlightStyle(targetRect: HighlightRect, padding?: number): React.CSSProperties;
 export declare function computePopoverPosition(options: {
     targetRect: HighlightRect;

package/dist/components/flows/guidance/renderers/guidance-renderer-shared.js

@@ -1,6 +1,6 @@
-import * as P from "react";
-const y = 16, L = 12, D = 12, G = 16, A = 32;
-function R(n) {
+import * as L from "react";
+const C = 16, R = 12, D = 12, G = 16, A = 32;
+function W(n) {
   const t = window.getComputedStyle(n);
   return t.overflow === "hidden" || t.overflow === "auto" || t.overflow === "scroll" || t.overflow === "clip" || t.overflowY === "hidden" || t.overflowY === "auto" || t.overflowY === "scroll" || t.overflowY === "clip" || t.overflowX === "hidden" || t.overflowX === "auto" || t.overflowX === "scroll" || t.overflowX === "clip";
 }
@@ -8,25 +8,25 @@ function k(n) {
   const t = [];
   let e = n.parentElement;
   for (; e; )
-    R(e) && t.push(e), e = e.parentElement;
+    W(e) && t.push(e), e = e.parentElement;
   return t;
 }
-function x(n, t) {
-  const e = Math.max(n.x, t.x), o = Math.max(n.y, t.y), r = Math.min(
+function b(n, t) {
+  const e = Math.max(n.x, t.x), o = Math.max(n.y, t.y), l = Math.min(
     n.x + n.width,
     t.x + t.width
   ), i = Math.min(
     n.y + n.height,
     t.y + t.height
   );
-  return r <= e || i <= o ? null : {
+  return l <= e || i <= o ? null : {
     x: e,
     y: o,
-    width: r - e,
+    width: l - e,
     height: i - o
   };
 }
-function C(n) {
+function y(n) {
   return {
     x: n.left,
     y: n.top,
@@ -34,14 +34,14 @@ function C(n) {
     height: n.height
   };
 }
-function W(n) {
-  let t = C(
+function P(n) {
+  let t = y(
     n.getBoundingClientRect()
   );
-  for (const r of k(n)) {
-    const i = x(
+  for (const l of k(n)) {
+    const i = b(
       t,
-      C(r.getBoundingClientRect())
+      y(l.getBoundingClientRect())
     );
     if (!i)
       break;
@@ -53,7 +53,7 @@ function W(n) {
     width: window.innerWidth,
     height: window.innerHeight
   };
-  return x(
+  return b(
     t,
     e
   ) ?? t;
@@ -67,47 +67,47 @@ function E(n) {
   }
   return t;
 }
-function _(n) {
+function V(n) {
   return E(n).map((t) => ({
     element: t,
     scrollTop: t.scrollTop,
     scrollLeft: t.scrollLeft
   }));
 }
-function B(n) {
+function _(n) {
   for (const t of n)
     t.element.isConnected && (t.element.scrollTop = t.scrollTop, t.element.scrollLeft = t.scrollLeft);
 }
-let d = null;
-function j(n) {
-  d === null && (d = _(n));
+let u = null;
+function z(n) {
+  u === null && (u = V(n));
 }
-function z() {
-  d !== null && (B(d), d = null);
+function J() {
+  u !== null && (_(u), u = null);
 }
-function N(n, t = A) {
+function B(n, t = A) {
   const e = n.getBoundingClientRect(), o = window.innerHeight;
-  return e.top < t || e.bottom > o - t;
+  return e.top <= t && e.bottom >= o - t && e.height >= o - t * 2 ? !1 : e.top < t || e.bottom > o - t;
 }
-function O(n) {
-  const { targetElement: t, scrollContainer: e, viewportPadding: o } = n, r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), u = e.clientHeight - o * 2;
-  if (i.height >= u) {
-    const h = i.top - r.top - o;
-    Math.abs(h) > 1 && (e.scrollTop += h);
+function N(n) {
+  const { targetElement: t, scrollContainer: e, viewportPadding: o } = n, l = e.getBoundingClientRect(), i = t.getBoundingClientRect(), p = e.clientHeight - o * 2;
+  if (i.height >= p) {
+    const a = i.top - l.top - o;
+    Math.abs(a) > 1 && (e.scrollTop += a);
     return;
   }
-  if (i.top < r.top + o) {
-    e.scrollTop -= r.top + o - i.top;
+  if (i.top < l.top + o) {
+    e.scrollTop -= l.top + o - i.top;
     return;
   }
-  i.bottom > r.bottom - o && (e.scrollTop += i.bottom - (r.bottom - o));
+  i.bottom > l.bottom - o && (e.scrollTop += i.bottom - (l.bottom - o));
 }
-function J(n, t = A) {
-  if (!N(n, t))
+function K(n, t = A) {
+  if (!B(n, t))
     return;
   const o = E(n)[0];
   if (o) {
-    O({
+    N({
       targetElement: n,
       scrollContainer: o,
       viewportPadding: t
@@ -120,23 +120,23 @@ function J(n, t = A) {
     inline: "nearest"
   });
 }
-function K(n, t) {
+function Q(n, t) {
   const e = n.advanceOn === "click-target";
-  return P.useEffect(() => {
+  return L.useEffect(() => {
     if (!e)
       return;
     const o = n.target?.element;
     if (!o)
       return;
-    const r = () => {
+    const l = () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           t();
         });
       });
     };
-    return o.addEventListener("click", r, { once: !0 }), () => {
-      o.removeEventListener("click", r);
+    return o.addEventListener("click", l, { once: !0 }), () => {
+      o.removeEventListener("click", l);
     };
   }, [
     e,
@@ -145,7 +145,7 @@ function K(n, t) {
     t
   ]), e;
 }
-function V(n, t = y, e) {
+function O(n, t = C, e) {
   return {
     x: n.x - t,
     y: n.y - t,
@@ -153,128 +153,137 @@ function V(n, t = y, e) {
     height: n.height + t * 2
   };
 }
-function Q(n, t = y) {
-  const e = W(n);
-  return V(e, t);
+function Y(n) {
+  if (typeof window > "u")
+    return n;
+  const t = {
+    x: 0,
+    y: 0,
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  return b(n, t);
+}
+function Z(n, t = C) {
+  const e = P(n);
+  return Y(
+    O(e, t)
+  );
 }
-function Y(n, t, e = 2) {
+function F(n, t, e = 2) {
   return !(n.x + n.width <= t.x - e || t.x + t.width <= n.x - e || n.y + n.height <= t.y - e || t.y + t.height <= n.y - e);
 }
-function Z(n) {
+function $(n) {
   const {
     targetRect: t,
     popoverWidth: e,
     popoverHeight: o,
-    gap: r = L,
+    gap: l = R,
     viewportPadding: i = G,
-    preferredPlacement: u = "auto"
-  } = n, l = r + D, h = t.x + t.width, v = t.y + t.height, g = t.x, f = window.innerWidth - h, m = t.y, w = window.innerHeight - v, S = (s) => ({
-    x: s.left,
-    y: s.top,
+    preferredPlacement: p = "auto"
+  } = n, r = l + D, a = t.x + t.width, v = t.y + t.height, g = t.x, d = window.innerWidth - a, m = t.y, w = window.innerHeight - v, S = (c) => ({
+    x: c.left,
+    y: c.top,
     width: e,
     height: o
-  }), p = (s) => {
-    for (const a of s) {
-      const c = b(a);
-      if (!Y(S(c), t))
-        return c;
+  }), f = (c) => {
+    for (const h of c) {
+      const s = x(h);
+      if (!F(S(s), t))
+        return s;
     }
-    return b(s[0]);
-  }, b = (s) => {
-    let a, c;
-    switch (s) {
+    return x(c[0]);
+  }, x = (c) => {
+    let h, s;
+    switch (c) {
       case "left":
-        c = Math.max(
+        s = Math.max(
           i,
-          t.x - e - l
-        ), a = Math.max(
+          t.x - e - r
+        ), h = t.y + t.height / 2 - o / 2, h = Math.max(
           i,
-          Math.min(
-            t.y,
-            window.innerHeight - o - i
-          )
+          Math.min(h, window.innerHeight - o - i)
         );
         break;
       case "right":
-        c = Math.min(
-          h + l,
+        s = Math.min(
+          a + r,
           window.innerWidth - e - i
-        ), a = Math.max(
+        ), h = t.y + t.height / 2 - o / 2, h = Math.max(
           i,
-          Math.min(
-            t.y,
-            window.innerHeight - o - i
-          )
+          Math.min(h, window.innerHeight - o - i)
         );
         break;
       case "top":
-        a = Math.max(i, t.y - o - r), c = t.x + t.width / 2 - e / 2, c = Math.max(
+        h = Math.max(i, t.y - o - r), s = t.x + t.width / 2 - e / 2, s = Math.max(
           i,
-          Math.min(c, window.innerWidth - e - i)
+          Math.min(s, window.innerWidth - e - i)
         );
         break;
       default:
-        a = Math.min(
+        h = Math.min(
           v + r,
           window.innerHeight - o - i
-        ), c = t.x + t.width / 2 - e / 2, c = Math.max(
+        ), s = t.x + t.width / 2 - e / 2, s = Math.max(
           i,
-          Math.min(c, window.innerWidth - e - i)
+          Math.min(s, window.innerWidth - e - i)
         );
         break;
     }
-    return { top: a, left: c, placement: s };
+    return { top: h, left: s, placement: c };
   };
-  if (u !== "auto" && {
-    left: g >= e + l,
-    right: f >= e + l,
+  if (p !== "auto" && {
+    left: g >= e + r,
+    right: d >= e + r,
     top: m >= o + r,
     bottom: w >= o + r
-  }[u])
-    return p([u, "left", "right", "top", "bottom"]);
+  }[p])
+    return f([p, "left", "right", "top", "bottom"]);
   const H = t.width <= 320, M = e >= t.width * 1.15;
   if (H && M) {
-    const s = g >= f ? ["left", "right"] : ["right", "left"];
-    if (g >= e + l || f >= e + l)
-      return p([...s, "top", "bottom"]);
+    const c = g >= d ? ["left", "right"] : ["right", "left"];
+    if (g >= e + r || d >= e + r)
+      return f([...c, "top", "bottom"]);
   }
-  if (t.width <= 280 && t.x >= window.innerWidth * 0.35 && g >= e + l)
-    return p(["left", "right", "top", "bottom"]);
-  if (t.width >= 480 && h >= window.innerWidth - i - 80 && g >= e + l)
+  if (t.width <= 280 && t.x >= window.innerWidth * 0.35 && g >= e + r)
+    return f(["left", "right", "top", "bottom"]);
+  if (t.width >= 480 && a >= window.innerWidth - i - 80 && g >= e + r) {
+    const c = t.y + t.height / 2 - o / 2;
     return {
       placement: "left",
-      left: Math.max(i, t.x - e - l),
+      left: Math.max(i, t.x - e - r),
       top: Math.max(
         i,
         Math.min(
-          t.y + 16,
+          c,
           window.innerHeight - o - i
         )
       )
     };
+  }
   if (t.height > t.width * 2.5) {
-    if (f >= e + l)
-      return p(["right", "left", "top", "bottom"]);
-    if (g >= e + l)
-      return p(["left", "right", "top", "bottom"]);
+    if (d >= e + r)
+      return f(["right", "left", "top", "bottom"]);
+    if (g >= e + r)
+      return f(["left", "right", "top", "bottom"]);
   }
   const I = t.y + t.height / 2 > window.innerHeight * 0.55;
   let T;
-  return I && m >= o + r && w < o + r * 2 ? T = "top" : T = w >= o + r || w >= m ? "bottom" : "top", p([T, "left", "right", "top", "bottom"]);
+  return I && m >= o + r && w < o + r * 2 ? T = "top" : T = w >= o + r || w >= m ? "bottom" : "top", f([T, "left", "right", "top", "bottom"]);
 }
 export {
   D as GUIDANCE_POPOVER_CARET_CLEARANCE,
-  L as GUIDANCE_POPOVER_GAP,
-  y as GUIDANCE_SPOTLIGHT_PADDING,
+  R as GUIDANCE_POPOVER_GAP,
+  C as GUIDANCE_SPOTLIGHT_PADDING,
   A as GUIDANCE_TARGET_SCROLL_PADDING,
   G as GUIDANCE_VIEWPORT_PADDING,
-  j as beginTourScrollSnapshot,
-  V as buildHighlightRect,
-  Q as buildHighlightRectForTarget,
-  Z as computePopoverPosition,
-  z as endTourScrollSnapshot,
-  W as getVisibleTargetRect,
-  N as needsGuidanceTargetScroll,
-  J as scrollGuidanceTargetIntoView,
-  K as useAdvanceOnTargetClick
+  z as beginTourScrollSnapshot,
+  O as buildHighlightRect,
+  Z as buildHighlightRectForTarget,
+  $ as computePopoverPosition,
+  J as endTourScrollSnapshot,
+  P as getVisibleTargetRect,
+  B as needsGuidanceTargetScroll,
+  K as scrollGuidanceTargetIntoView,
+  Q as useAdvanceOnTargetClick
 };