impact-nova 2.2.8 → 2.3.0

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

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

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

@@ -0,0 +1,11 @@
+import { RenderInstruction } from '../../../../lib/guidance';
+import * as React from 'react';
+interface GuidanceTourOverlayProps {
+    instruction: RenderInstruction;
+    overlayComponent: 'guidance-spotlight' | 'guidance-coach-mark';
+    onNext: () => void;
+    onSkip: () => void;
+    onDismiss: () => void;
+}
+export declare function GuidanceTourOverlay({ instruction, overlayComponent, onNext, onSkip, onDismiss, }: GuidanceTourOverlayProps): React.ReactElement | null;
+export {};

package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js

@@ -0,0 +1,217 @@
+import { jsxs as h, jsx as o, Fragment as C } from "react/jsx-runtime";
+import * as l from "react";
+import { createPortal as $ } from "react-dom";
+import { GuidanceStepPanel as S } from "./guidance-card-shared.js";
+import { useGuidanceOverlayGeometry as z } from "../hooks/useGuidanceOverlayGeometry.js";
+import { useAdvanceOnTargetClick as E, buildHighlightRectForTarget as P, computePopoverPosition as A } from "./guidance-renderer-shared.js";
+const G = 220, n = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${G}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
+function H({
+  highlightRect: e,
+  blocksPointerEvents: u = !0
+}) {
+  const d = typeof window < "u" ? window.innerWidth : 0, g = typeof window < "u" ? window.innerHeight : 0, s = e.x + e.width, a = e.y + e.height, i = u ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${n}`;
+  return /* @__PURE__ */ h(C, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: { top: 0, left: 0, width: d, height: e.y },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: a,
+          left: 0,
+          width: d,
+          height: Math.max(0, g - a)
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: e.y,
+          left: 0,
+          width: e.x,
+          height: e.height
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: i,
+        style: {
+          top: e.y,
+          left: s,
+          width: Math.max(0, d - s),
+          height: e.height
+        },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}
+function B({
+  instruction: e,
+  overlayComponent: u,
+  onNext: d,
+  onSkip: g,
+  onDismiss: s
+}) {
+  const a = e.target?.element, i = z(a, e.stepId), I = e.stepIndex + 1 >= e.totalSteps, c = E(e, d), m = c || e.advanceOn === "auto", v = l.useRef(null), f = l.useRef(null), [b, O] = l.useState({ width: 400, height: 240 }), N = l.useCallback(() => {
+    a?.click();
+  }, [a]);
+  if (l.useLayoutEffect(() => {
+    const r = f.current;
+    r?.parentElement === document.body && document.body.appendChild(r);
+  }, [e.stepId, m]), l.useLayoutEffect(() => {
+    const r = v.current;
+    if (!r)
+      return;
+    const k = () => {
+      const p = r.getBoundingClientRect();
+      p.width > 0 && p.height > 0 && O({
+        width: p.width,
+        height: p.height
+      });
+    };
+    k();
+    const x = new ResizeObserver(k);
+    return x.observe(r), () => {
+      x.disconnect();
+    };
+  }, [e.stepId, e.content.title, e.content.body]), !i || !a || typeof document > "u")
+    return null;
+  const t = P(a), y = A({
+    targetRect: i,
+    popoverWidth: b.width,
+    popoverHeight: b.height
+  }), w = `guidance-mask-${e.stepId}`;
+  return $(
+    /* @__PURE__ */ h(
+      "div",
+      {
+        ref: f,
+        "data-component": u,
+        className: "fixed inset-0 z-50 pointer-events-none",
+        role: "presentation",
+        children: [
+          /* @__PURE__ */ h(
+            "svg",
+            {
+              className: `pointer-events-none absolute inset-0 size-full ${n}`,
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ h("mask", { id: w, children: [
+                  /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
+                  /* @__PURE__ */ o(
+                    "rect",
+                    {
+                      x: t.x,
+                      y: t.y,
+                      width: t.width,
+                      height: t.height,
+                      rx: "8",
+                      fill: "black",
+                      className: n
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ o(
+                  "rect",
+                  {
+                    width: "100%",
+                    height: "100%",
+                    fill: "var(--guidance-backdrop-bg)",
+                    fillOpacity: "var(--guidance-backdrop-opacity, 0.6)",
+                    mask: `url(#${w})`
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            H,
+            {
+              highlightRect: t,
+              blocksPointerEvents: !m
+            }
+          ),
+          c ? /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${n}`,
+              style: {
+                top: t.y,
+                left: t.x,
+                width: t.width,
+                height: t.height
+              },
+              "aria-label": `Click ${e.content.title}`,
+              onClick: N
+            }
+          ) : null,
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${n}`,
+              style: {
+                top: t.y,
+                left: t.x,
+                width: t.width,
+                height: t.height
+              }
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              ref: v,
+              className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating ${n}`,
+              style: {
+                top: y.top,
+                left: y.left
+              },
+              role: "dialog",
+              "aria-labelledby": `guidance-tour-title-${e.stepId}`,
+              "aria-describedby": `guidance-tour-body-${e.stepId}`,
+              children: /* @__PURE__ */ o(
+                S,
+                {
+                  title: e.content.title,
+                  body: e.content.body,
+                  optionalFooter: e.advanceOn !== "auto" ? e.content.footer : void 0,
+                  stepIndex: e.stepIndex,
+                  totalSteps: e.totalSteps,
+                  skippable: e.skippable,
+                  primaryActionLabel: I ? "Done" : "Next",
+                  onSkip: g,
+                  onDismiss: s,
+                  onPrimaryAction: d,
+                  showPrimaryAction: !c && e.advanceOn !== "auto",
+                  footerHint: c ? "Click highlighted area" : e.advanceOn === "auto" ? e.content.footer ?? "Complete this step to continue" : null,
+                  titleId: `guidance-tour-title-${e.stepId}`,
+                  bodyId: `guidance-tour-body-${e.stepId}`
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  B as GuidanceTourOverlay
+};

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

@@ -0,0 +1,6 @@
+import { RendererProps } from '../../../../lib/guidance';
+import type * as React from 'react';
+export type GuidanceRendererComponent = (props: RendererProps) => React.ReactNode;
+export declare function registerRendererPlugins(): void;
+export declare function getRenderer(rendererKey: string): GuidanceRendererComponent | undefined;
+export declare function registerRenderer(rendererKey: string, component: GuidanceRendererComponent): void;

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

@@ -0,0 +1,19 @@
+import { SpotlightRenderer as o } from "./spotlight-renderer.js";
+import { CoachMarkRenderer as i } from "./coach-mark-renderer.js";
+import { AnnouncementRenderer as s } from "./announcement-renderer.js";
+const e = /* @__PURE__ */ new Map();
+let t = !1;
+function m() {
+  t || (e.set("spotlight", o), e.set("coach-mark", i), e.set("announcement", s), t = !0);
+}
+function d(r) {
+  return e.get(r);
+}
+function f(r, n) {
+  e.set(r, n);
+}
+export {
+  d as getRenderer,
+  f as registerRenderer,
+  m as registerRendererPlugins
+};

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

@@ -0,0 +1,2 @@
+import { RendererProps } from '../../../../lib/guidance';
+export declare function SpotlightRenderer(props: RendererProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as r } from "react/jsx-runtime";
+import { GuidanceTourOverlay as e } from "./guidance-tour-overlay.js";
+function i(o) {
+  return /* @__PURE__ */ r(
+    e,
+    {
+      ...o,
+      overlayComponent: "guidance-spotlight"
+    }
+  );
+}
+export {
+  i as SpotlightRenderer
+};

package/dist/components/flows/guidance/renderers.d.ts

@@ -0,0 +1,4 @@
+export { SpotlightRenderer } from './renderers/spotlight-renderer';
+export { CoachMarkRenderer } from './renderers/coach-mark-renderer';
+export { AnnouncementRenderer } from './renderers/announcement-renderer';
+export { registerRenderer, getRenderer } from './renderers/renderer-registry';

package/dist/components/flows/guidance/renderers.js

@@ -0,0 +1,11 @@
+import { SpotlightRenderer as o } from "./renderers/spotlight-renderer.js";
+import { CoachMarkRenderer as t } from "./renderers/coach-mark-renderer.js";
+import { AnnouncementRenderer as m } from "./renderers/announcement-renderer.js";
+import { getRenderer as R, registerRenderer as f } from "./renderers/renderer-registry.js";
+export {
+  m as AnnouncementRenderer,
+  t as CoachMarkRenderer,
+  o as SpotlightRenderer,
+  R as getRenderer,
+  f as registerRenderer
+};

package/dist/components/flows/guidance/target.d.ts

@@ -0,0 +1,3 @@
+export { GuidanceTarget } from './guidance-target';
+export { useGuidanceTarget } from './use-guidance-target';
+export type { GuidanceTargetProps } from './guidance-target';

package/dist/components/flows/guidance/target.js

@@ -0,0 +1,6 @@
+import { GuidanceTarget as a } from "./guidance-target.js";
+import { useGuidanceTarget as t } from "./use-guidance-target.js";
+export {
+  a as GuidanceTarget,
+  t as useGuidanceTarget
+};

package/dist/components/flows/guidance/triggers.d.ts

@@ -0,0 +1,2 @@
+export { registerBuiltInTriggerPlugins, createRouteEnteredTriggerPlugin, createRouteExitedTriggerPlugin, createFirstVisitTriggerPlugin, createNthVisitTriggerPlugin, createAppVersionTriggerPlugin, createFeatureFlagTriggerPlugin, createPermissionTriggerPlugin, createUserSegmentTriggerPlugin, createCustomEventTriggerPlugin, createManualTriggerPlugin, } from '../../../lib/guidance/triggers/built-in-triggers';
+export { TriggerPluginRegistry } from '../../../lib/guidance/triggers/trigger-registry';

package/dist/components/flows/guidance/triggers.js

@@ -0,0 +1,16 @@
+import { createAppVersionTriggerPlugin as g, createCustomEventTriggerPlugin as i, createFeatureFlagTriggerPlugin as t, createFirstVisitTriggerPlugin as n, createManualTriggerPlugin as u, createNthVisitTriggerPlugin as l, createPermissionTriggerPlugin as a, createRouteEnteredTriggerPlugin as P, createRouteExitedTriggerPlugin as T, createUserSegmentTriggerPlugin as s, registerBuiltInTriggerPlugins as c } from "../../../lib/guidance/triggers/built-in-triggers.js";
+import { TriggerPluginRegistry as m } from "../../../lib/guidance/triggers/trigger-registry.js";
+export {
+  m as TriggerPluginRegistry,
+  g as createAppVersionTriggerPlugin,
+  i as createCustomEventTriggerPlugin,
+  t as createFeatureFlagTriggerPlugin,
+  n as createFirstVisitTriggerPlugin,
+  u as createManualTriggerPlugin,
+  l as createNthVisitTriggerPlugin,
+  a as createPermissionTriggerPlugin,
+  P as createRouteEnteredTriggerPlugin,
+  T as createRouteExitedTriggerPlugin,
+  s as createUserSegmentTriggerPlugin,
+  c as registerBuiltInTriggerPlugins
+};

package/dist/components/flows/guidance/use-guidance-target.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export declare function useGuidanceTarget(targetId: string, scope?: string): {
+    readonly ref: React.RefObject<HTMLElement | null>;
+    readonly 'data-guidance-target': string;
+};

package/dist/components/flows/guidance/use-guidance-target.js

@@ -0,0 +1,16 @@
+import * as i from "react";
+import { useGuidanceContext as o } from "./guidance-context.js";
+function f(e, t) {
+  const { engine: n } = o(), r = i.useRef(null);
+  return i.useEffect(() => {
+    const u = r.current;
+    if (u)
+      return n.targets.register(e, u, t);
+  }, [n, e, t]), {
+    ref: r,
+    "data-guidance-target": e
+  };
+}
+export {
+  f as useGuidanceTarget
+};

package/dist/components/flows/guidance/utils/motion-settle.d.ts

@@ -0,0 +1,2 @@
+export declare function hasRunningAnimations(element: HTMLElement): boolean;
+export declare function waitForTargetMotionSettled(targetElement: HTMLElement, maxWaitMs: number): Promise<void>;

package/dist/components/flows/guidance/utils/motion-settle.js

@@ -0,0 +1,17 @@
+function o(n) {
+  if (typeof n.getAnimations != "function")
+    return [];
+  const i = [];
+  let t = n;
+  for (; t; )
+    i.push(...t.getAnimations()), t = t.parentElement;
+  return i.filter(
+    (e) => e.playState === "running"
+  );
+}
+function r(n) {
+  return o(n).length > 0;
+}
+export {
+  r as hasRunningAnimations
+};