impact-nova 2.2.8 → 2.3.0

package/dist/components/flows/guidance/hooks/useGuidanceOverlayGeometry.js

@@ -0,0 +1,30 @@
+import * as c from "react";
+import { beginTourScrollSnapshot as m, needsGuidanceTargetScroll as l, scrollGuidanceTargetIntoView as f, getVisibleTargetRect as v } from "../renderers/guidance-renderer-shared.js";
+import { hasRunningAnimations as p } from "../utils/motion-settle.js";
+function T(e, u) {
+  const [d, s] = c.useState(null);
+  return c.useEffect(() => {
+    if (!e) {
+      s(null);
+      return;
+    }
+    let i = !1, o = 0;
+    const r = () => {
+      i || s(v(e));
+    }, t = () => {
+      r(), !i && p(e) && (o = requestAnimationFrame(t));
+    };
+    m(e), l(e) && f(e), r(), o = requestAnimationFrame(t);
+    const a = new ResizeObserver(r);
+    a.observe(e);
+    const n = () => {
+      r();
+    };
+    return window.addEventListener("resize", n), document.addEventListener("scroll", n, !0), () => {
+      i = !0, cancelAnimationFrame(o), a.disconnect(), window.removeEventListener("resize", n), document.removeEventListener("scroll", n, !0);
+    };
+  }, [u, e]), d;
+}
+export {
+  T as useGuidanceOverlayGeometry
+};

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

@@ -0,0 +1,18 @@
+export { GuidanceProvider } from './guidance-provider';
+export { GuidanceContext, useGuidanceContext, createGuidanceEngine, } from './guidance-context';
+export type { GuidanceProviderProps, GuidanceContextValue } from './guidance-context';
+export { GuidanceTarget } from './guidance-target';
+export { useGuidanceTarget } from './use-guidance-target';
+export type { GuidanceTargetProps } from './guidance-target';
+export { GuidanceLayer } from './guidance-layer';
+export { GuidanceErrorBoundary, GuidanceDebugPanel } from './guidance-error-boundary';
+export { useGuidance, useGuideManifest, useGuidanceEvents } from './hooks/use-guidance';
+export { useHelpCenter, formatHelpCenterCategoryLabel } from './hooks/use-help-center';
+export type { HelpCenterCategory } from './hooks/use-help-center';
+export { HelpCenter, HelpCenterContent, HelpCenterHeader, HelpCenterCategoryTabs, HelpCenterBody, HelpCenterFooter, GuideCatalog, filterHelpCenterGuides, HELP_CENTER_ALL_CATEGORY_VALUE, } from './help-center';
+export type { HelpCenterProps, HelpCenterContentProps, HelpCenterHeaderProps, HelpCenterCategoryTabsProps, HelpCenterBodyProps, HelpCenterFooterProps, GuideCatalogProps, } from './help-center';
+export { createAgGridTargetAdapter, createAgGridReadyTriggerPlugin, emitAgGridReady, } from './adapters/ag-grid-adapter';
+export type { AgGridTargetConfig } from './adapters/ag-grid-adapter';
+export { createDialogOpenedTriggerPlugin, getOverlayScopeRoot, } from './adapters/overlay-adapter';
+export { registerRenderer, getRenderer } from './renderers/renderer-registry';
+export type { GuideManifest, Step, StepContent, TriggerExpression, GuidanceSessionState, GuidancePlugin, GuidanceStorageAdapter, GuidanceAnalyticsAdapter, RendererProps, RenderInstruction, } from '../../../lib/guidance';

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

@@ -0,0 +1,48 @@
+import { GuidanceProvider as t } from "./guidance-provider.js";
+import { GuidanceContext as a, createGuidanceEngine as n, useGuidanceContext as i } from "./guidance-context.js";
+import { GuidanceTarget as d } from "./guidance-target.js";
+import { useGuidanceTarget as g } from "./use-guidance-target.js";
+import { GuidanceLayer as m } from "./guidance-layer.js";
+import { GuidanceDebugPanel as G, GuidanceErrorBoundary as l } from "./guidance-error-boundary.js";
+import { useGuidance as c, useGuidanceEvents as s, useGuideManifest as H } from "./hooks/use-guidance.js";
+import { formatHelpCenterCategoryLabel as E, useHelpCenter as T } from "./hooks/use-help-center.js";
+import { HelpCenter as R, HelpCenterBody as L, HelpCenterCategoryTabs as P, HelpCenterContent as _, HelpCenterFooter as b } from "./help-center/help-center.js";
+import { filterHelpCenterGuides as O } from "./help-center/filter-help-center-guides.js";
+import { HELP_CENTER_ALL_CATEGORY_VALUE as D } from "./help-center/help-center.constants.js";
+import { createAgGridReadyTriggerPlugin as M, createAgGridTargetAdapter as N, emitAgGridReady as S } from "./adapters/ag-grid-adapter.js";
+import { createDialogOpenedTriggerPlugin as V, getOverlayScopeRoot as Y } from "./adapters/overlay-adapter.js";
+import { getRenderer as j, registerRenderer as k } from "./renderers/renderer-registry.js";
+import { GuideCatalog as w } from "./help-center/guide-catalog.js";
+import { HelpCenterHeader as I } from "./help-center/help-center-header.js";
+export {
+  a as GuidanceContext,
+  G as GuidanceDebugPanel,
+  l as GuidanceErrorBoundary,
+  m as GuidanceLayer,
+  t as GuidanceProvider,
+  d as GuidanceTarget,
+  w as GuideCatalog,
+  D as HELP_CENTER_ALL_CATEGORY_VALUE,
+  R as HelpCenter,
+  L as HelpCenterBody,
+  P as HelpCenterCategoryTabs,
+  _ as HelpCenterContent,
+  b as HelpCenterFooter,
+  I as HelpCenterHeader,
+  M as createAgGridReadyTriggerPlugin,
+  N as createAgGridTargetAdapter,
+  V as createDialogOpenedTriggerPlugin,
+  n as createGuidanceEngine,
+  S as emitAgGridReady,
+  O as filterHelpCenterGuides,
+  E as formatHelpCenterCategoryLabel,
+  Y as getOverlayScopeRoot,
+  j as getRenderer,
+  k as registerRenderer,
+  c as useGuidance,
+  i as useGuidanceContext,
+  s as useGuidanceEvents,
+  g as useGuidanceTarget,
+  H as useGuideManifest,
+  T as useHelpCenter
+};

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

@@ -0,0 +1,3 @@
+import { RendererProps } from '../../../../lib/guidance';
+import * as React from 'react';
+export declare function AnnouncementRenderer({ instruction, onNext, onSkip, onDismiss, }: RendererProps): React.ReactElement;

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

@@ -0,0 +1,40 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { Dialog as d, DialogContent as l } from "../../../feedback/dialog/dialog.js";
+import { GuidanceStepPanel as m } from "./guidance-card-shared.js";
+function b({
+  instruction: e,
+  onNext: n,
+  onSkip: a,
+  onDismiss: t
+}) {
+  const p = e.stepIndex + 1 >= e.totalSteps;
+  return /* @__PURE__ */ o(d, { open: !0, onOpenChange: (r) => !r && t(), children: /* @__PURE__ */ o(
+    l,
+    {
+      "data-component": "guidance-announcement",
+      hideClose: !0,
+      className: "max-w-[400px] gap-0 overflow-hidden p-0 sm:rounded-2xl sm:shadow-elevation-floating",
+      "aria-describedby": void 0,
+      children: /* @__PURE__ */ o(
+        m,
+        {
+          title: e.content.title,
+          body: e.content.body,
+          optionalFooter: e.content.footer,
+          stepIndex: e.stepIndex,
+          totalSteps: e.totalSteps,
+          skippable: e.skippable,
+          primaryActionLabel: p ? "Done" : "Next",
+          onSkip: a,
+          onDismiss: t,
+          onPrimaryAction: n,
+          showPrimaryAction: !0
+        }
+      )
+    }
+  ) });
+}
+export {
+  b as AnnouncementRenderer
+};

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

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

package/dist/components/flows/guidance/renderers/coach-mark-renderer.js

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

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export declare function GuidanceCardCloseButton({ onClose, closeAriaLabel, className, }: {
+    onClose: () => void;
+    closeAriaLabel: string;
+    className?: string;
+}): React.ReactElement;
+export declare function GuidanceStepProgress({ activeStepIndex, totalSteps, }: {
+    activeStepIndex: number;
+    totalSteps: number;
+}): React.ReactElement | null;
+export declare function GuidanceStepProgressDots({ activeStepIndex, totalSteps, }: {
+    activeStepIndex: number;
+    totalSteps: number;
+}): React.ReactElement;
+export interface GuidanceTourNavFooterProps {
+    activeStepIndex: number;
+    totalSteps: number;
+    skippable: boolean;
+    primaryActionLabel: string;
+    onSkip: () => void;
+    onPrimaryAction: () => void;
+    showPrimaryAction: boolean;
+    footerHint?: string | null;
+}
+export declare function GuidanceTourNavFooter({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, footerHint, }: GuidanceTourNavFooterProps): React.ReactElement;
+export interface GuidanceStepPanelProps {
+    title: string;
+    body: string;
+    optionalFooter?: string;
+    stepIndex: number;
+    totalSteps: number;
+    skippable: boolean;
+    primaryActionLabel: string;
+    onSkip: () => void;
+    onDismiss: () => void;
+    onPrimaryAction: () => void;
+    showPrimaryAction: boolean;
+    footerHint?: string | null;
+    titleId?: string;
+    bodyId?: string;
+}
+export declare function GuidanceStepPanel({ title, body, optionalFooter, stepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onDismiss, onPrimaryAction, showPrimaryAction, footerHint, titleId, bodyId, }: GuidanceStepPanelProps): React.ReactElement;

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

@@ -0,0 +1,213 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import "react";
+import { Cross as v } from "impact-nova-icons";
+import { Button as x } from "../../../primitives/button/button.js";
+import { cn as h } from "../../../../lib/utils.js";
+const u = 5, f = 2;
+function b(s, e) {
+  if (e <= u)
+    return Array.from({ length: e }, (r, l) => ({
+      kind: "step",
+      stepIndex: l
+    }));
+  const t = Math.max(
+    0,
+    Math.min(
+      s - 2,
+      e - u
+    )
+  ), a = t + u - 1, i = [];
+  if (t > 0)
+    for (let r = 0; r < f; r += 1)
+      i.push({
+        kind: "ellipsis",
+        markerId: `leading-${r}`
+      });
+  for (let r = t; r <= a; r += 1)
+    i.push({ kind: "step", stepIndex: r });
+  if (a < e - 1)
+    for (let r = 0; r < f; r += 1)
+      i.push({
+        kind: "ellipsis",
+        markerId: `trailing-${r}`
+      });
+  return i;
+}
+function y({
+  onClose: s,
+  closeAriaLabel: e,
+  className: t
+}) {
+  return /* @__PURE__ */ n(
+    x,
+    {
+      variant: "ghost",
+      size: "iconSm",
+      className: h(
+        "shrink-0 text-content-tertiary hover:text-content-secondary",
+        t
+      ),
+      "aria-label": e,
+      onClick: s,
+      children: /* @__PURE__ */ n(v, { className: "size-3.5" })
+    }
+  );
+}
+function I({
+  activeStepIndex: s,
+  totalSteps: e
+}) {
+  return e <= 1 ? null : /* @__PURE__ */ n(
+    C,
+    {
+      activeStepIndex: s,
+      totalSteps: e
+    }
+  );
+}
+function C({
+  activeStepIndex: s,
+  totalSteps: e
+}) {
+  const t = b(s, e);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: "flex items-center justify-center gap-1.5",
+      role: "progressbar",
+      "aria-valuemin": 1,
+      "aria-valuenow": s + 1,
+      "aria-valuemax": e,
+      "aria-label": `Step ${s + 1} of ${e}`,
+      children: t.map((a) => {
+        if (a.kind === "ellipsis")
+          return /* @__PURE__ */ n(
+            "span",
+            {
+              className: "size-1 rounded-full bg-stroke",
+              "aria-hidden": "true"
+            },
+            a.markerId
+          );
+        const i = a.stepIndex;
+        return /* @__PURE__ */ n(
+          "span",
+          {
+            className: h(
+              "rounded-full transition-all",
+              i === s ? "size-2.5 bg-[var(--guidance-step-counter-active,var(--color-primary))]" : "size-2 bg-stroke"
+            )
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function w({
+  activeStepIndex: s,
+  totalSteps: e,
+  skippable: t,
+  primaryActionLabel: a,
+  onSkip: i,
+  onPrimaryAction: r,
+  showPrimaryAction: l,
+  footerHint: c
+}) {
+  const d = e > 1;
+  return /* @__PURE__ */ o("div", { className: "mt-4 flex flex-col", children: [
+    d ? /* @__PURE__ */ n("div", { className: "flex justify-center", children: /* @__PURE__ */ n(
+      I,
+      {
+        activeStepIndex: s,
+        totalSteps: e
+      }
+    ) }) : null,
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ n("div", { className: "shrink-0", children: t ? /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: "flex h-6 items-center text-sm leading-4 text-content-tertiary transition-colors hover:text-content-secondary",
+          onClick: i,
+          children: "Skip"
+        }
+      ) : null }),
+      /* @__PURE__ */ n("div", { className: "min-w-0 text-right", children: l ? /* @__PURE__ */ n(
+        x,
+        {
+          size: "sm",
+          className: "rounded-full px-4",
+          onClick: r,
+          children: a
+        }
+      ) : c ? /* @__PURE__ */ n("span", { className: "text-xs font-medium leading-snug text-content-tertiary", children: c }) : null })
+    ] })
+  ] });
+}
+function z({
+  title: s,
+  body: e,
+  optionalFooter: t,
+  stepIndex: a,
+  totalSteps: i,
+  skippable: r,
+  primaryActionLabel: l,
+  onSkip: c,
+  onDismiss: d,
+  onPrimaryAction: p,
+  showPrimaryAction: N,
+  footerHint: m,
+  titleId: g,
+  bodyId: k
+}) {
+  return /* @__PURE__ */ o("div", { className: "p-4", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ n(
+        "h3",
+        {
+          id: g,
+          className: "min-w-0 text-base font-bold leading-5 text-content",
+          children: s
+        }
+      ),
+      /* @__PURE__ */ n(
+        y,
+        {
+          onClose: d,
+          closeAriaLabel: "Close",
+          className: "-me-1 shrink-0"
+        }
+      )
+    ] }),
+    e ? /* @__PURE__ */ n(
+      "p",
+      {
+        id: k,
+        className: "mt-2 text-sm leading-relaxed text-content-secondary",
+        children: e
+      }
+    ) : null,
+    t && !m ? /* @__PURE__ */ n("p", { className: "mt-1.5 text-xs text-content-tertiary", children: t }) : null,
+    /* @__PURE__ */ n(
+      w,
+      {
+        activeStepIndex: a,
+        totalSteps: i,
+        skippable: r,
+        primaryActionLabel: l,
+        onSkip: c,
+        onPrimaryAction: p,
+        showPrimaryAction: N,
+        footerHint: m
+      }
+    )
+  ] });
+}
+export {
+  y as GuidanceCardCloseButton,
+  z as GuidanceStepPanel,
+  I as GuidanceStepProgress,
+  C as GuidanceStepProgressDots,
+  w as GuidanceTourNavFooter
+};

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

@@ -0,0 +1,48 @@
+import { RenderInstruction } from '../../../../lib/guidance';
+import * as React from 'react';
+export declare const GUIDANCE_SPOTLIGHT_PADDING = 8;
+export declare const GUIDANCE_POPOVER_GAP = 12;
+export declare const GUIDANCE_VIEWPORT_PADDING = 16;
+export declare const GUIDANCE_TARGET_ANIMATION_POLL_MS = 32;
+export declare const GUIDANCE_TARGET_ANIMATION_POLL_DURATION_MS = 320;
+export declare const GUIDANCE_TARGET_STABLE_FRAME_COUNT = 2;
+export declare const GUIDANCE_TARGET_SCROLL_SETTLE_MS = 400;
+export declare const GUIDANCE_TARGET_SCROLL_PADDING = 32;
+export declare const GUIDANCE_OVERLAY_TRANSITION_MS = 120;
+export declare const GUIDANCE_CLICK_TARGET_ADVANCE_MS = 150;
+export interface HighlightRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface PopoverPosition {
+    top: number;
+    left: number;
+    placement: 'top' | 'bottom' | 'left' | 'right';
+}
+export declare function getVisibleTargetRect(targetElement: HTMLElement): HighlightRect;
+export interface ScrollContainerSnapshot {
+    element: HTMLElement;
+    scrollTop: number;
+    scrollLeft: number;
+}
+export declare function beginTourScrollSnapshot(targetElement: HTMLElement): void;
+export declare function endTourScrollSnapshot(): void;
+export declare function needsGuidanceTargetScroll(targetElement: HTMLElement, viewportPadding?: number): boolean;
+export declare function scrollGuidanceTargetIntoView(targetElement: HTMLElement, viewportPadding?: number): void;
+export declare function useScrollGuidanceTargetIntoView(targetElement: HTMLElement | null | undefined, stepId: string): boolean;
+export declare function useTargetRect(targetElement: HTMLElement | null | undefined): HighlightRect | null;
+export declare function useStableTargetRect(targetElement: HTMLElement | null | undefined, stepId?: string): HighlightRect | 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 buildHighlightStyle(targetRect: HighlightRect, padding?: number): React.CSSProperties;
+export declare function computePopoverPosition(options: {
+    targetRect: HighlightRect;
+    popoverWidth: number;
+    popoverHeight: number;
+    gap?: number;
+    viewportPadding?: number;
+}): PopoverPosition;