impact-nova 2.5.22 → 2.6.0

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

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

package/dist/components/flows/guidance/renderers/guidance-shortcut-display.d.ts

@@ -0,0 +1,9 @@
+import { GuidanceKeyBinding, GuidanceShortcutReference } from '../../../../lib/guidance';
+import * as React from 'react';
+export declare function GuidanceShortcutReferenceList({ references, }: {
+    references: GuidanceShortcutReference[];
+}): React.ReactElement | null;
+export declare function GuidanceStepKeybinding({ keybinding, className, }: {
+    keybinding: GuidanceKeyBinding;
+    className?: string;
+}): React.ReactElement;

package/dist/components/flows/guidance/renderers/guidance-shortcut-display.js

@@ -0,0 +1,36 @@
+import { jsx as n, jsxs as a } from "react/jsx-runtime";
+import "react";
+import { Kbd as i } from "../../../primitives/kbd/kbd.js";
+function d({
+  references: e
+}) {
+  return e.length ? /* @__PURE__ */ n("ul", { className: "mt-3 space-y-2 border-t border-stroke-hairline pt-3", children: e.map((t) => /* @__PURE__ */ a(
+    "li",
+    {
+      className: "flex items-center justify-between gap-3 text-sm leading-snug text-content-secondary",
+      children: [
+        /* @__PURE__ */ n("span", { className: "min-w-0 text-pretty", children: t.label }),
+        /* @__PURE__ */ n(i, { keybinding: t.keybinding, size: "sm", variant: "default" })
+      ]
+    },
+    t.label
+  )) }) : null;
+}
+function m({
+  keybinding: e,
+  className: t
+}) {
+  return /* @__PURE__ */ n(
+    i,
+    {
+      keybinding: e,
+      size: "sm",
+      variant: "default",
+      className: t
+    }
+  );
+}
+export {
+  d as GuidanceShortcutReferenceList,
+  m as GuidanceStepKeybinding
+};

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.d.ts

@@ -6,6 +6,7 @@ interface GuidanceTourOverlayProps {
     onNext: () => void;
     onSkip: () => void;
     onDismiss: () => void;
+    onBack?: () => void;
 }
-export declare function GuidanceTourOverlay({ instruction, overlayComponent, onNext, onSkip, onDismiss, }: GuidanceTourOverlayProps): React.ReactElement | null;
+export declare function GuidanceTourOverlay({ instruction, overlayComponent, onNext, onSkip, onDismiss, onBack, }: GuidanceTourOverlayProps): React.ReactElement | null;
 export {};