impact-nova 2.5.22 → 2.6.0

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

@@ -0,0 +1,76 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import * as a from "react";
+function i() {
+  const t = a.useId().replace(/:/g, "");
+  return {
+    dotPatternId: `guidance-announcement-dots-${t}`,
+    washGradientId: `guidance-announcement-wash-${t}`
+  };
+}
+function c() {
+  const { dotPatternId: t, washGradientId: r } = i();
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-2xl bg-canvas",
+      children: /* @__PURE__ */ n("svg", { className: "absolute inset-0 size-full", "aria-hidden": "true", children: [
+        /* @__PURE__ */ n("defs", { children: [
+          /* @__PURE__ */ e(
+            "pattern",
+            {
+              id: t,
+              width: "12",
+              height: "12",
+              patternUnits: "userSpaceOnUse",
+              children: /* @__PURE__ */ e(
+                "circle",
+                {
+                  cx: "6",
+                  cy: "6",
+                  r: "0.75",
+                  fill: "var(--color-border-accent-muted)",
+                  fillOpacity: "0.32"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ n(
+            "radialGradient",
+            {
+              id: r,
+              cx: "50%",
+              cy: "0%",
+              rx: "75%",
+              ry: "60%",
+              gradientUnits: "objectBoundingBox",
+              children: [
+                /* @__PURE__ */ e(
+                  "stop",
+                  {
+                    offset: "0%",
+                    stopColor: "var(--guidance-announcement-hero-bg, var(--color-primary-selection))",
+                    stopOpacity: "1"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "stop",
+                  {
+                    offset: "100%",
+                    stopColor: "var(--guidance-announcement-hero-bg, var(--color-primary-selection))",
+                    stopOpacity: "0"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("rect", { width: "100%", height: "100%", fill: `url(#${t})` }),
+        /* @__PURE__ */ e("rect", { width: "100%", height: "100%", fill: `url(#${r})` })
+      ] })
+    }
+  );
+}
+export {
+  c as GuidanceAnnouncementSurface
+};

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

@@ -1,4 +1,25 @@
+import { GuidanceKeyBinding, GuidanceShortcutReference } from '../../../../lib/guidance';
 import * as React from 'react';
+export declare function GuidanceInteractionStepToolbar({ activeStepIndex, totalSteps, onDismiss, className, }: {
+    activeStepIndex: number;
+    totalSteps: number;
+    onDismiss: () => void;
+    className?: string;
+}): React.ReactElement | null;
+/** Click-next coach-mark steps: step label, progress, and dismiss (no action badge). */
+export declare function GuidanceCoachMarkStepToolbar({ activeStepIndex, totalSteps, onDismiss, className, }: {
+    activeStepIndex: number;
+    totalSteps: number;
+    onDismiss: () => void;
+    className?: string;
+}): React.ReactElement | null;
+export declare function GuidanceTourActionFooter({ hint, keybinding, activeStepIndex, showBack, onBack, }: {
+    hint: string;
+    keybinding?: GuidanceKeyBinding;
+    activeStepIndex: number;
+    showBack?: boolean;
+    onBack?: () => void;
+}): React.ReactElement;
 export declare function GuidanceStepProgressBar({ activeStepIndex, totalSteps, className, }: {
     activeStepIndex: number;
     totalSteps: number;
@@ -7,6 +28,14 @@ export declare function GuidanceStepProgressBar({ activeStepIndex, totalSteps, c
 export declare function GuidanceTourInteractionFooter({ hint, }: {
     hint: string;
 }): React.ReactElement;
+export declare function GuidanceCloseButton({ onClose, placement, }: {
+    onClose: () => void;
+    placement?: 'corner' | 'inline';
+}): React.ReactElement;
+export declare function GuidanceTourProgressAndNav({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, showBack, showSkip, onBack, onEndTour, className, }: GuidanceTourNavFooterProps & {
+    className?: string;
+    onEndTour?: () => void;
+}): React.ReactElement;
 export declare function GuidanceStepCounter({ activeStepIndex, totalSteps, }: {
     activeStepIndex: number;
     totalSteps: number;
@@ -19,8 +48,14 @@ export interface GuidanceTourNavFooterProps {
     onSkip: () => void;
     onPrimaryAction: () => void;
     showPrimaryAction?: boolean;
+    showBack?: boolean;
+    showSkip?: boolean;
+    embedded?: boolean;
+    onBack?: () => void;
+    onEndTour?: () => void;
+    showStepCounter?: boolean;
 }
-export declare function GuidanceTourNavFooter({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, }: GuidanceTourNavFooterProps): React.ReactElement;
+export declare function GuidanceTourNavFooter({ activeStepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, showBack, showSkip, embedded, onBack, onEndTour, showStepCounter, }: GuidanceTourNavFooterProps): React.ReactElement;
 export interface GuidanceStepPanelProps {
     title: string;
     body: string;
@@ -34,7 +69,13 @@ export interface GuidanceStepPanelProps {
     onPrimaryAction: () => void;
     showPrimaryAction: boolean;
     footerHint?: string | null;
+    footerKeybinding?: GuidanceKeyBinding;
+    shortcutReferences?: GuidanceShortcutReference[];
     titleId?: string;
     bodyId?: string;
+    canGoBack?: boolean;
+    advanceOn?: 'click-next' | 'click-target' | 'auto' | 'custom-event';
+    showBack?: boolean;
+    onBack?: () => void;
 }
-export declare function GuidanceStepPanel({ title, body, optionalFooter, stepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onPrimaryAction, showPrimaryAction, footerHint, titleId, bodyId, }: GuidanceStepPanelProps): React.ReactElement;
+export declare function GuidanceStepPanel({ title, body, optionalFooter, stepIndex, totalSteps, skippable, primaryActionLabel, onSkip, onDismiss, onPrimaryAction, showPrimaryAction, footerHint, footerKeybinding, shortcutReferences, titleId, bodyId, canGoBack, advanceOn, showBack, onBack, }: GuidanceStepPanelProps): React.ReactElement;

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

@@ -1,160 +1,383 @@
-import { jsxs as c, jsx as e, Fragment as N } from "react/jsx-runtime";
+import { jsx as e, jsxs as l, Fragment as E } from "react/jsx-runtime";
 import "react";
-import { Button as m } from "../../../primitives/button/button.js";
-import { Progress as b } from "../../../primitives/progress/progress.js";
-import { cn as h } from "../../../../lib/utils.js";
-const v = "End Tour";
-function G({
-  activeStepIndex: t,
+import { Cross as I } from "impact-nova-icons";
+import { Badge as K } from "../../../data-display/badge/badge.js";
+import { GuidanceActionTapIcon as O } from "./guidance-action-tap-icon.js";
+import { GuidanceStepKeybinding as S, GuidanceShortcutReferenceList as M } from "./guidance-shortcut-display.js";
+import { Button as h } from "../../../primitives/button/button.js";
+import { Tooltip as R, TooltipTrigger as U, TooltipContent as $ } from "../../../feedback/tooltip/tooltip.js";
+import { Progress as D } from "../../../primitives/progress/progress.js";
+import { useImpactNovaI18n as g } from "../../../../i18n/use-impact-nova-i18n.js";
+import { cn as m } from "../../../../lib/utils.js";
+const J = "Skip", A = "Back";
+function Q({
+  activeStepIndex: r,
   totalSteps: n,
-  className: a
+  onDismiss: a,
+  className: t
 }) {
+  const { t: o } = g();
   if (n <= 1)
     return null;
-  const r = (t + 1) / n * 100;
-  return /* @__PURE__ */ e(
-    b,
+  const i = o("stepper.stepOfTotal", {
+    current: r + 1,
+    total: n
+  }), s = o("guidance.actionRequiredBadge");
+  return /* @__PURE__ */ l(
+    "div",
     {
-      value: r,
-      label: !1,
-      className: h("bg-brand-subtle", a),
-      "aria-label": `Step ${t + 1} of ${n}`
+      className: m(
+        "mb-3 flex w-full items-center gap-2",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "shrink-0 text-xs font-medium leading-none text-content-tertiary", children: i }),
+        /* @__PURE__ */ e(
+          K,
+          {
+            variant: "subtle",
+            color: "warning",
+            size: "sm",
+            shape: "square",
+            className: "max-w-none shrink-0 uppercase tracking-wide",
+            icon: /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "size-1.5 shrink-0 rounded-full bg-badge-warning-ink"
+              }
+            ),
+            children: s
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ e(G, { onClose: a, placement: "inline" })
+      ]
     }
   );
 }
-function $({
-  hint: t
+function V({
+  activeStepIndex: r,
+  totalSteps: n,
+  onDismiss: a,
+  className: t
 }) {
-  return /* @__PURE__ */ e(
+  const { t: o } = g();
+  if (n <= 1)
+    return null;
+  const i = o("stepper.stepOfTotal", {
+    current: r + 1,
+    total: n
+  });
+  return /* @__PURE__ */ l(
     "div",
     {
-      "data-component": "guidance-tour-interaction-footer",
-      className: "border-t border-stroke-hairline bg-canvas-subtle px-4 py-2.5 text-center text-sm leading-snug text-content-secondary",
-      children: t
+      className: m(
+        "mb-3 flex w-full items-center gap-2",
+        t
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "shrink-0 text-xs font-medium leading-none text-content-tertiary", children: i }),
+        /* @__PURE__ */ e(
+          _,
+          {
+            activeStepIndex: r,
+            totalSteps: n,
+            className: "min-w-0 flex-1 h-1.5"
+          }
+        ),
+        /* @__PURE__ */ e(G, { onClose: a, placement: "inline" })
+      ]
     }
   );
 }
-function y({
-  activeStepIndex: t,
-  totalSteps: n
+function W({
+  hint: r,
+  keybinding: n,
+  activeStepIndex: a,
+  showBack: t,
+  onBack: o
 }) {
-  return /* @__PURE__ */ c(
-    "span",
+  const i = t && a > 0 && !!o, s = /* @__PURE__ */ l(E, { children: [
+    n ? /* @__PURE__ */ e(
+      S,
+      {
+        keybinding: n,
+        className: "shrink-0"
+      }
+    ) : /* @__PURE__ */ e(O, { className: "shrink-0 text-content" }),
+    /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 text-pretty text-sm leading-snug text-content-secondary", children: r })
+  ] });
+  return i ? /* @__PURE__ */ l(
+    "div",
     {
-      className: "text-sm leading-none",
-      "aria-label": `Step ${t + 1} of ${n}`,
+      "data-component": "guidance-tour-action-footer",
+      className: "grid grid-cols-[auto_1fr] items-center gap-x-3 rounded-b-2xl border-t border-stroke-hairline bg-canvas-subtle px-4 py-3",
       children: [
-        /* @__PURE__ */ e("span", { className: "font-bold text-content", children: t + 1 }),
-        /* @__PURE__ */ e("span", { className: "font-normal text-content-tertiary", children: ` / ${n}` })
+        /* @__PURE__ */ e(h, { variant: "tertiary", size: "md", onClick: o, children: A }),
+        /* @__PURE__ */ e("div", { className: "flex min-w-0 items-center gap-2 justify-self-stretch", role: "status", children: s })
       ]
     }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      "data-component": "guidance-tour-action-footer",
+      className: "flex items-center gap-2 rounded-b-2xl border-t border-stroke-hairline bg-canvas-subtle px-4 py-3",
+      role: "status",
+      children: s
+    }
+  );
+}
+function _({
+  activeStepIndex: r,
+  totalSteps: n,
+  className: a
+}) {
+  if (n <= 1)
+    return null;
+  const t = (r + 1) / n * 100;
+  return /* @__PURE__ */ e(
+    D,
+    {
+      value: t,
+      label: !1,
+      className: m("bg-brand-subtle", a),
+      "aria-label": `Step ${r + 1} of ${n}`
+    }
+  );
+}
+function G({
+  onClose: r,
+  placement: n = "corner"
+}) {
+  const { t: a } = g(), t = a("guidance.endTour");
+  return /* @__PURE__ */ l(R, { children: [
+    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e(
+      h,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: m(
+          "z-20 size-6 h-6 min-h-6 w-6 min-w-6 shrink-0 rounded-full border border-stroke-hairline bg-canvas p-0 text-secondary-foreground shadow-elevation-floating transition-colors hover:bg-canvas hover:text-accent-foreground [&_svg]:size-[13.18px]",
+          n === "corner" ? "absolute right-3 top-3" : "relative shrink-0 self-center"
+        ),
+        "aria-label": t,
+        onClick: r,
+        children: /* @__PURE__ */ e(I, {})
+      }
+    ) }),
+    /* @__PURE__ */ e($, { side: "bottom", children: t })
+  ] });
+}
+function le({
+  activeStepIndex: r,
+  totalSteps: n,
+  skippable: a,
+  primaryActionLabel: t,
+  onSkip: o,
+  onPrimaryAction: i,
+  showPrimaryAction: s = !0,
+  showBack: p,
+  showSkip: u,
+  onBack: f,
+  onEndTour: c,
+  className: d
+}) {
+  return /* @__PURE__ */ l("div", { className: m("flex w-full flex-col gap-3", d), children: [
+    /* @__PURE__ */ e(
+      _,
+      {
+        activeStepIndex: r,
+        totalSteps: n
+      }
+    ),
+    /* @__PURE__ */ e(
+      j,
+      {
+        activeStepIndex: r,
+        totalSteps: n,
+        skippable: a,
+        primaryActionLabel: t,
+        onSkip: o,
+        onPrimaryAction: i,
+        showPrimaryAction: s,
+        showBack: p,
+        showSkip: u,
+        onBack: f,
+        onEndTour: c,
+        embedded: !0
+      }
+    )
+  ] });
+}
+function X({
+  activeStepIndex: r,
+  totalSteps: n
+}) {
+  const { t: a } = g(), t = a("stepper.stepOfTotal", {
+    current: r + 1,
+    total: n
+  });
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      className: "text-xs font-medium leading-none text-content-tertiary",
+      "aria-label": t,
+      children: t
+    }
   );
 }
-function x({
-  activeStepIndex: t,
+function j({
+  activeStepIndex: r,
   totalSteps: n,
   skippable: a,
-  primaryActionLabel: r,
-  onSkip: l,
+  primaryActionLabel: t,
+  onSkip: o,
   onPrimaryAction: i,
-  showPrimaryAction: s = !0
+  showPrimaryAction: s = !0,
+  showBack: p,
+  showSkip: u,
+  embedded: f = !1,
+  onBack: c,
+  onEndTour: d,
+  showStepCounter: v = !0
 }) {
-  return /* @__PURE__ */ c(
+  const { t: b } = g(), N = b("guidance.endTour"), k = r + 1 < n, w = p ?? (r > 0 && !!c), C = u ?? (a && k), y = v && n > 1;
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: h(
-        "flex items-center justify-between gap-3 px-4",
-        s ? "pb-4 pt-2" : "pb-2 pt-2"
+      className: m(
+        "flex items-center justify-between gap-3",
+        f ? "pt-0" : m("px-4", s ? "pb-4 pt-2" : "pb-2 pt-2")
       ),
       children: [
-        n > 1 ? /* @__PURE__ */ e(
-          y,
-          {
-            activeStepIndex: t,
-            totalSteps: n
-          }
-        ) : /* @__PURE__ */ e("span", { "aria-hidden": "true" }),
-        /* @__PURE__ */ c("div", { className: "ms-auto flex shrink-0 items-center gap-2", children: [
-          a ? /* @__PURE__ */ e(m, { variant: "secondary", size: "md", onClick: l, children: v }) : null,
-          s ? /* @__PURE__ */ e(m, { size: "md", onClick: i, children: r }) : null
+        /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center justify-start gap-3", children: [
+          w && c ? /* @__PURE__ */ e(h, { variant: "tertiary", size: "md", onClick: c, children: A }) : null,
+          y ? /* @__PURE__ */ e(
+            X,
+            {
+              activeStepIndex: r,
+              totalSteps: n
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ l("div", { className: "flex shrink-0 items-center gap-3", children: [
+          C ? /* @__PURE__ */ e(
+            h,
+            {
+              variant: "ghost",
+              size: "md",
+              className: "text-brand hover:bg-transparent hover:text-brand",
+              onClick: o,
+              children: J
+            }
+          ) : null,
+          d ? /* @__PURE__ */ e(h, { type: "button", variant: "tertiary", size: "md", onClick: d, children: N }) : null,
+          s ? /* @__PURE__ */ e(h, { variant: "default", size: "md", onClick: i, children: t }) : null
         ] })
       ]
     }
   );
 }
-function E({
-  title: t,
+function ce({
+  title: r,
   body: n,
   optionalFooter: a,
-  stepIndex: r,
-  totalSteps: l,
+  stepIndex: t,
+  totalSteps: o,
   skippable: i,
   primaryActionLabel: s,
-  onSkip: d,
-  onPrimaryAction: u,
-  showPrimaryAction: f,
-  footerHint: o,
-  titleId: p,
-  bodyId: g
+  onSkip: p,
+  onDismiss: u,
+  onPrimaryAction: f,
+  showPrimaryAction: c,
+  footerHint: d,
+  footerKeybinding: v,
+  shortcutReferences: b,
+  titleId: N,
+  bodyId: k,
+  canGoBack: w = !1,
+  advanceOn: C = "click-next",
+  showBack: y,
+  onBack: z
 }) {
-  return /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ c("div", { className: "px-4 pt-4", children: [
+  const x = !!d, P = t + 1 < o, L = i && C !== "click-next" && P, B = y ?? w, F = !x && (o > 1 || B || L || c), T = F && o > 1, q = F ? /* @__PURE__ */ e("div", { className: "border-t border-stroke-hairline bg-canvas-subtle px-5 py-3", children: /* @__PURE__ */ e(
+    j,
+    {
+      activeStepIndex: t,
+      totalSteps: o,
+      skippable: i,
+      primaryActionLabel: s,
+      onSkip: p,
+      onPrimaryAction: f,
+      showPrimaryAction: c,
+      showBack: B,
+      showSkip: L,
+      onBack: z,
+      showStepCounter: !T,
+      embedded: !0
+    }
+  ) }) : null;
+  return /* @__PURE__ */ l("div", { className: "relative flex flex-col", children: [
+    !x && !T ? /* @__PURE__ */ e(G, { onClose: u, placement: "corner" }) : null,
+    /* @__PURE__ */ l("div", { className: "px-5 pb-4 pt-5", children: [
+      x ? /* @__PURE__ */ e(
+        Q,
+        {
+          activeStepIndex: t,
+          totalSteps: o,
+          onDismiss: u
+        }
+      ) : null,
+      T ? /* @__PURE__ */ e(
+        V,
+        {
+          activeStepIndex: t,
+          totalSteps: o,
+          onDismiss: u
+        }
+      ) : null,
       /* @__PURE__ */ e(
         "h3",
         {
-          id: p,
+          id: N,
           className: "text-base font-bold leading-5 text-content",
-          children: t
+          children: r
         }
       ),
       n ? /* @__PURE__ */ e(
         "p",
         {
-          id: g,
+          id: k,
           className: "mt-2 text-sm leading-snug text-content-secondary",
           children: n
         }
       ) : null,
-      a && !o ? /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs text-content-tertiary", children: a }) : null
+      a && !d ? /* @__PURE__ */ e("p", { className: "mt-1.5 text-xs text-content-tertiary", children: a }) : null,
+      b?.length ? /* @__PURE__ */ e(M, { references: b }) : null
     ] }),
-    /* @__PURE__ */ e("div", { className: "px-4 pt-3", children: /* @__PURE__ */ e(
-      G,
-      {
-        activeStepIndex: r,
-        totalSteps: l
-      }
-    ) }),
-    !!o ? /* @__PURE__ */ c(N, { children: [
-      i ? /* @__PURE__ */ e(
-        x,
-        {
-          activeStepIndex: r,
-          totalSteps: l,
-          skippable: i,
-          primaryActionLabel: s,
-          onSkip: d,
-          onPrimaryAction: u,
-          showPrimaryAction: !1
-        }
-      ) : null,
-      /* @__PURE__ */ e($, { hint: o })
-    ] }) : f ? /* @__PURE__ */ e(
-      x,
+    q,
+    x ? /* @__PURE__ */ e(
+      W,
       {
-        activeStepIndex: r,
-        totalSteps: l,
-        skippable: i,
-        primaryActionLabel: s,
-        onSkip: d,
-        onPrimaryAction: u
+        hint: d,
+        keybinding: v,
+        activeStepIndex: t,
+        showBack: B,
+        onBack: z
       }
     ) : null
   ] });
 }
 export {
-  y as GuidanceStepCounter,
-  E as GuidanceStepPanel,
-  G as GuidanceStepProgressBar,
-  $ as GuidanceTourInteractionFooter,
-  x as GuidanceTourNavFooter
+  G as GuidanceCloseButton,
+  V as GuidanceCoachMarkStepToolbar,
+  Q as GuidanceInteractionStepToolbar,
+  X as GuidanceStepCounter,
+  ce as GuidanceStepPanel,
+  _ as GuidanceStepProgressBar,
+  W as GuidanceTourActionFooter,
+  j as GuidanceTourNavFooter,
+  le as GuidanceTourProgressAndNav
 };

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

@@ -2,6 +2,8 @@ import { RenderInstruction } from '../../../../lib/guidance';
 import * as React from 'react';
 export declare const GUIDANCE_SPOTLIGHT_PADDING = 16;
 export declare const GUIDANCE_POPOVER_GAP = 12;
+/** Extra clearance so the popover body + caret do not sit on the spotlight hole. */
+export declare const GUIDANCE_POPOVER_CARET_CLEARANCE = 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;
@@ -45,4 +47,5 @@ export declare function computePopoverPosition(options: {
     popoverHeight: number;
     gap?: number;
     viewportPadding?: number;
+    preferredPlacement?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
 }): PopoverPosition;