impact-nova 2.6.0-alpha.0 → 2.6.0

package/dist/components/flows/filter-panel/filter-panel.js

@@ -1,22 +1,22 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import g from "react";
-import { Sheet as N, SheetContent as y, SheetDescription as w, SheetTitle as k, SheetClose as C } from "../../feedback/sheet/sheet.js";
-import { createCompoundPart as F } from "../../../lib/primitives/create-compound.js";
+import b from "react";
+import { Sheet as g, SheetContent as N, SheetDescription as y, SheetTitle as w, SheetClose as k } from "../../feedback/sheet/sheet.js";
+import { createCompoundPart as C } from "../../../lib/primitives/create-compound.js";
 import { cn as o } from "../../../lib/utils.js";
-import { MultiColorFilter as P, Cross as D, InfoBadge as x } from "impact-nova-icons";
-import { Button as S } from "../../primitives/button/button.js";
-import { Tooltip as h, TooltipTrigger as p, TooltipContent as m } from "../../feedback/tooltip/tooltip.js";
-import { Kbd as j } from "../../primitives/kbd/kbd.js";
-import { OverflowTooltip as I } from "../../feedback/tooltip/overflow-tooltip.js";
-import { useImpactNovaI18n as b } from "../../../i18n/use-impact-nova-i18n.js";
-import { useOverlayHostDismissNestedLayersOnNavigation as O } from "../../../lib/overlay/overlay-portal-context.js";
-import { preventDismissOnTooltipOutside as v } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
-const T = ({
+import { MultiColorFilter as F, Cross as P, InfoBadge as u } from "impact-nova-icons";
+import { Button as D } from "../../primitives/button/button.js";
+import { Tooltip as c, TooltipTrigger as f, TooltipContent as h } from "../../feedback/tooltip/tooltip.js";
+import { Kbd as S } from "../../primitives/kbd/kbd.js";
+import { OverflowTooltip as j } from "../../feedback/tooltip/overflow-tooltip.js";
+import { useImpactNovaI18n as v } from "../../../i18n/use-impact-nova-i18n.js";
+import { useOverlayHostDismissNestedLayersOnNavigation as I } from "../../../lib/overlay/overlay-portal-context.js";
+import { preventDismissOnTooltipOutside as x } from "../../../lib/overlay/prevent-dismiss-on-tooltip-outside.js";
+const O = ({
   title: i,
   children: n,
   className: l
 }) => {
-  const { t: c } = b();
+  const { t: d } = v();
   return /* @__PURE__ */ a(
     "div",
     {
@@ -32,74 +32,73 @@ const T = ({
             {
               className: "flex size-8 shrink-0 items-center justify-center rounded-md border border-brand-tint bg-canvas-elevated",
               "aria-hidden": !0,
-              children: /* @__PURE__ */ e(P, { className: "size-5 shrink-0" })
+              children: /* @__PURE__ */ e(F, { className: "size-5 shrink-0" })
             }
           ),
-          /* @__PURE__ */ e(k, { className: "text-lg font-bold text-content", children: i })
+          /* @__PURE__ */ e(w, { className: "text-lg font-bold text-content", children: i })
         ] }),
         /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
           n,
-          /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(
-            S,
+          /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e(
+            D,
             {
               variant: "secondary",
               size: "icon",
               tabIndex: -1,
-              "aria-label": c("aria.close"),
+              "aria-label": d("aria.close"),
               "data-component": "filter-panel-close",
-              children: /* @__PURE__ */ e(D, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ e(P, { className: "h-3 w-3" })
             }
           ) })
         ] })
       ]
     }
   );
-}, J = ({
+}, G = ({
   open: i,
   onOpenChange: n,
   title: l = "Filter panel",
-  description: c = "Select filters to apply to the current view.",
   children: d,
-  header: f,
-  sidebar: u,
-  className: t,
-  preventClose: r = !1
-}) => /* @__PURE__ */ e(N, { open: i, onOpenChange: n, children: /* @__PURE__ */ a(
-  y,
+  header: s,
+  sidebar: p,
+  className: m,
+  preventClose: t = !1
+}) => /* @__PURE__ */ e(g, { open: i, onOpenChange: n, children: /* @__PURE__ */ a(
+  N,
   {
     side: "right",
     className: o(
       "w-full !max-w-[840px] p-0 sm:!max-w-[840px] gap-0 border-l shadow-xl transition-all duration-300 ease-in-out bg-canvas-elevated",
-      t
+      m
     ),
-    onInteractOutside: (s) => {
-      v(s), r && s.preventDefault();
+    onInteractOutside: (r) => {
+      x(r), t && r.preventDefault();
     },
-    onPointerDownOutside: (s) => {
-      v(s), r && s.preventDefault();
+    onPointerDownOutside: (r) => {
+      x(r), t && r.preventDefault();
     },
-    onEscapeKeyDown: (s) => {
-      r && s.preventDefault();
+    onEscapeKeyDown: (r) => {
+      t && r.preventDefault();
     },
     children: [
-      /* @__PURE__ */ e(w, { className: "sr-only", children: c }),
+      /* @__PURE__ */ e(y, { className: "sr-only", children: "Select filters to apply to the current view." }),
       /* @__PURE__ */ a("div", { className: "flex h-full flex-col bg-canvas-elevated", "data-component": "filter-panel", children: [
-        f || /* @__PURE__ */ e(T, { title: l }),
+        s || /* @__PURE__ */ e(O, { title: l }),
         /* @__PURE__ */ a("div", { className: "flex flex-1 overflow-hidden", children: [
-          u,
+          p,
           /* @__PURE__ */ e("div", { className: "flex flex-col flex-1 overflow-hidden", children: d })
         ] })
       ] })
     ]
   }
-) }), Q = ({
+) }), J = ({
   items: i,
   activeTab: n,
   onTabChange: l,
-  className: c
+  className: d
 }) => {
-  const { t: d } = b(), f = O(), u = (t) => {
-    t !== n && f(), l(t);
+  const { t: s } = v(), p = I(), m = (t) => {
+    t !== n && p(), l(t);
   };
   return /* @__PURE__ */ e(
     "div",
@@ -107,7 +106,7 @@ const T = ({
       "data-component": "filter-panel-sidebar",
       className: o(
         "flex w-[200px] shrink-0 flex-col border-r bg-navigation-canvas",
-        c
+        d
       ),
       children: /* @__PURE__ */ e(
         "div",
@@ -116,14 +115,14 @@ const T = ({
           className: "flex max-h-full min-h-0 flex-col gap-1 overflow-y-auto py-2",
           children: i.map((t) => {
             const r = n === t.id;
-            return /* @__PURE__ */ a(g.Fragment, { children: [
+            return /* @__PURE__ */ a(b.Fragment, { children: [
               t.separator && /* @__PURE__ */ e("div", { className: "my-2 h-px bg-stroke-hairline" }),
               /* @__PURE__ */ a(
                 "button",
                 {
                   type: "button",
                   autoFocus: r,
-                  onClick: () => u(t.id),
+                  onClick: () => m(t.id),
                   "data-component": "filter-panel-sidebar-item",
                   "data-active": r ? "true" : "false",
                   "data-tab": t.id,
@@ -146,14 +145,14 @@ const T = ({
                       ),
                       /* @__PURE__ */ a("div", { className: "flex items-center gap-1 min-w-0", children: [
                         /* @__PURE__ */ e(
-                          I,
+                          j,
                           {
                             triggerClassName: "truncate font-['Manrope'] block min-w-0",
                             content: t.tooltipKeybinding ? /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
                               t.label,
                               " ",
                               /* @__PURE__ */ e(
-                                j,
+                                S,
                                 {
                                   keybinding: t.tooltipKeybinding,
                                   size: "sm"
@@ -169,8 +168,8 @@ const T = ({
                       ] })
                     ] }),
                     /* @__PURE__ */ a("div", { className: "flex items-center gap-1 shrink-0 ml-1", children: [
-                      t.count !== void 0 && t.count > 0 && /* @__PURE__ */ a(h, { children: [
-                        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(
+                      t.count !== void 0 && t.count > 0 && /* @__PURE__ */ a(c, { children: [
+                        /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(
                           "span",
                           {
                             className: o(
@@ -180,22 +179,22 @@ const T = ({
                             children: t.count
                           }
                         ) }),
-                        /* @__PURE__ */ e(m, { variant: "tertiary", side: "top", children: d(
+                        /* @__PURE__ */ e(h, { variant: "tertiary", side: "top", children: s(
                           t.countBadgeContext === "savedFiltersTotal" ? "filterPanel.savedFiltersAvailableCount" : "filterPanel.filtersAppliedCount",
                           { count: t.count }
                         ) })
                       ] }),
-                      t.hasError && /* @__PURE__ */ a(h, { children: [
-                        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(x, { className: "h-5 w-5 shrink-0 text-danger" }) }),
-                        /* @__PURE__ */ e(m, { variant: "tertiary", children: d("filterPanel.tabContainsErrors") })
+                      t.hasError && /* @__PURE__ */ a(c, { children: [
+                        /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-danger" }) }),
+                        /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.tabContainsErrors") })
                       ] }),
-                      t.hasWarning && /* @__PURE__ */ a(h, { children: [
-                        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(x, { className: "h-5 w-5 shrink-0 text-warning" }) }),
-                        /* @__PURE__ */ e(m, { variant: "tertiary", children: d("filterPanel.tabHasWarnings") })
+                      t.hasWarning && /* @__PURE__ */ a(c, { children: [
+                        /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-warning" }) }),
+                        /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.tabHasWarnings") })
                       ] }),
-                      t.hasInfo && /* @__PURE__ */ a(h, { children: [
-                        /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e(x, { className: "h-5 w-5 shrink-0 text-content-icon" }) }),
-                        /* @__PURE__ */ e(m, { variant: "tertiary", children: d("filterPanel.additionalInfoAvailable") })
+                      t.hasInfo && /* @__PURE__ */ a(c, { children: [
+                        /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "h-5 w-5 shrink-0 text-content-icon" }) }),
+                        /* @__PURE__ */ e(h, { variant: "tertiary", children: s("filterPanel.additionalInfoAvailable") })
                       ] })
                     ] })
                   ]
@@ -207,12 +206,12 @@ const T = ({
       )
     }
   );
-}, U = F("filter-panel", {
+}, Q = C("filter-panel", {
   part: "body",
   displayName: "FilterPanelBody",
   className: "flex flex-1 flex-col overflow-auto bg-canvas-elevated p-4",
   scrollSurface: !0
-}), V = ({
+}), U = ({
   children: i,
   className: n,
   leftAction: l
@@ -231,9 +230,9 @@ const T = ({
   }
 );
 export {
-  J as FilterPanel,
-  U as FilterPanelBody,
-  V as FilterPanelFooter,
-  T as FilterPanelHeader,
-  Q as FilterPanelSidebar
+  G as FilterPanel,
+  Q as FilterPanelBody,
+  U as FilterPanelFooter,
+  O as FilterPanelHeader,
+  J as FilterPanelSidebar
 };

package/dist/components/flows/filter-panel/filter-panel.types.d.ts

@@ -8,7 +8,6 @@ export interface FilterPanelProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: React.ReactNode;
-    description?: string;
     children: React.ReactNode;
     header?: React.ReactNode;
     sidebar?: React.ReactNode;

package/dist/components/flows/guidance/guidance-layer.js

@@ -1,71 +1,74 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import * as t from "react";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import * as r from "react";
 import { useSyncExternalStore as c } from "react";
-import { useGuidanceContext as p } from "./guidance-context.js";
-import { SpotlightRenderer as f } from "./renderers/spotlight-renderer.js";
+import { useGuidanceContext as f } from "./guidance-context.js";
+import { SpotlightRenderer as k } from "./renderers/spotlight-renderer.js";
 import { CoachMarkRenderer as b } from "./renderers/coach-mark-renderer.js";
 import { AnnouncementRenderer as h } from "./renderers/announcement-renderer.js";
-import { endTourScrollSnapshot as k } from "./renderers/guidance-renderer-shared.js";
+import { endTourScrollSnapshot as x } from "./renderers/guidance-renderer-shared.js";
 import { Button as d } from "../../primitives/button/button.js";
-function x(e, s) {
-  const r = {
+function S(e, o) {
+  const t = {
     instruction: e,
-    ...s
+    ...o
   };
   switch (e.renderer) {
     case "spotlight":
-      return /* @__PURE__ */ n(f, { ...r });
+      return /* @__PURE__ */ n(k, { ...t });
     case "coach-mark":
-      return /* @__PURE__ */ n(b, { ...r });
+      return /* @__PURE__ */ n(b, { ...t });
     case "announcement":
-      return /* @__PURE__ */ n(h, { ...r });
+      return /* @__PURE__ */ n(h, { ...t });
     default:
       return null;
   }
 }
 function z() {
-  const { engine: e } = p();
-  t.useEffect(() => e.on("guideEnd", () => {
-    k();
+  const { engine: e } = f();
+  r.useEffect(() => e.on("guideEnd", () => {
+    x();
   }), [e]);
-  const s = c(
-    (o) => e.subscribe(o),
+  const o = c(
+    (s) => e.subscribe(s),
     () => e.state,
     () => ({ status: "idle" })
-  ), r = c(
-    (o) => e.subscribe(o),
+  ), t = c(
+    (s) => e.subscribe(s),
     () => e.getRenderInstruction(),
     () => null
-  ), l = t.useCallback(() => {
+  ), l = r.useCallback(() => {
     e.advanceStep();
-  }, [e]), u = t.useCallback(() => {
+  }, [e]), u = r.useCallback(() => {
+    e.skipStep();
+  }, [e]), i = r.useCallback(() => {
     e.dismiss("session");
-  }, [e]), a = t.useCallback(() => {
-    e.dismiss("session");
-  }, [e]), m = t.useCallback(() => {
+  }, [e]), m = r.useCallback(() => {
+    e.goToPreviousStep();
+  }, [e]), p = r.useCallback(() => {
     e.retryCurrentStep();
   }, [e]);
-  return s.status === "blocked" ? /* @__PURE__ */ i(
+  return o.status === "blocked" ? /* @__PURE__ */ a(
     "div",
     {
       "data-component": "guidance-blocked",
       className: "fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border-default bg-surface-elevated px-4 py-3 shadow-lg",
       role: "status",
       children: [
-        /* @__PURE__ */ i("p", { className: "text-sm text-content-secondary", children: [
+        /* @__PURE__ */ a("p", { className: "text-sm text-content-secondary", children: [
           "Guide step is blocked: ",
-          s.reason
+          o.reason
         ] }),
-        /* @__PURE__ */ i("div", { className: "mt-2 flex gap-2", children: [
-          /* @__PURE__ */ n(d, { size: "sm", onClick: m, children: "Retry" }),
-          /* @__PURE__ */ n(d, { variant: "secondary", size: "sm", onClick: a, children: "Dismiss" })
+        /* @__PURE__ */ a("div", { className: "mt-2 flex gap-2", children: [
+          /* @__PURE__ */ n(d, { size: "sm", onClick: p, children: "Retry" }),
+          /* @__PURE__ */ n(d, { variant: "secondary", size: "sm", onClick: i, children: "Dismiss" })
         ] })
       ]
     }
-  ) : r ? x(r, {
+  ) : t ? S(t, {
     onNext: l,
     onSkip: u,
-    onDismiss: a
+    onDismiss: i,
+    onBack: m
   }) : null;
 }
 export {

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

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

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

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

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

@@ -1,20 +1,26 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as a, jsxs as n } from "react/jsx-runtime";
 import "react";
-import { Dialog as r, DialogContent as l } from "../../../feedback/dialog/dialog.js";
-import { GuidanceStepPanel as d } from "./guidance-card-shared.js";
-function f({
+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({
   instruction: e,
-  onNext: a,
-  onSkip: n
+  onNext: r,
+  onSkip: c,
+  onDismiss: p,
+  onBack: o
 }) {
-  const p = e.stepIndex + 1 >= e.totalSteps;
-  return /* @__PURE__ */ o(r, { open: !0, children: /* @__PURE__ */ o(
-    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(
+    x,
     {
       "data-component": "guidance-announcement",
+      "data-guidance-modal-behavior": e.modalBehavior,
       hideClose: !0,
-      className: "max-w-[400px] gap-0 overflow-hidden p-0 sm:rounded-2xl sm:shadow-elevation-floating",
-      "aria-describedby": void 0,
+      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();
       },
@@ -24,25 +30,65 @@ function f({
       onEscapeKeyDown: (t) => {
         t.preventDefault();
       },
-      children: /* @__PURE__ */ o(
-        d,
-        {
-          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: n,
-          onDismiss: n,
-          onPrimaryAction: a,
-          showPrimaryAction: !0
-        }
-      )
+      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,
+            {
+              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: o
+            }
+          )
+        ] }) : /* @__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"
+          }
+        ) })
+      ] })
     }
   ) });
 }
 export {
-  f as AnnouncementRenderer
+  k as AnnouncementRenderer
 };

package/dist/components/flows/guidance/renderers/guidance-action-tap-icon.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/** Hand-tap glyph for click-target tour steps (Figma action affordance). */
+export declare function GuidanceActionTapIcon({ className, }: {
+    className?: string;
+}): React.ReactElement;

package/dist/components/flows/guidance/renderers/guidance-action-tap-icon.js

@@ -0,0 +1,68 @@
+import { jsx as c, jsxs as h } from "react/jsx-runtime";
+import "react";
+import { cn as r } from "../../../../lib/utils.js";
+function s({
+  className: l
+}) {
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 256 256",
+      className: r(
+        "size-4 min-h-4 min-w-4 max-h-4 max-w-4 shrink-0",
+        l
+      ),
+      children: /* @__PURE__ */ h(
+        "g",
+        {
+          fill: "currentColor",
+          fillRule: "nonzero",
+          transform: "translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)",
+          children: [
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 69.416 43.298 H 68.97 c -0.983 0 -1.917 0.216 -2.756 0.603 c -0.644 -2.975 -3.295 -5.21 -6.459 -5.21 h -0.447 c -1.128 0 -2.19 0.284 -3.12 0.784 c -1 -2.379 -3.355 -4.054 -6.094 -4.054 h -0.447 c -0.925 0 -1.807 0.191 -2.606 0.536 v -9.458 c 0 -3.644 -2.964 -6.607 -6.608 -6.607 h -0.447 c -3.643 0 -6.607 2.964 -6.607 6.607 v 24.261 l -3.005 2.281 c -2.394 1.817 -3.911 4.461 -4.273 7.444 c -0.362 2.984 0.479 5.914 2.37 8.251 l 9.378 11.594 v 4.608 c 0 2.791 2.271 5.063 5.062 5.063 h 23.411 c 2.791 0 5.063 -2.271 5.063 -5.063 l 0.001 -4.375 c 2.996 -3.766 4.639 -8.438 4.639 -13.242 V 49.905 C 76.023 46.262 73.06 43.298 69.416 43.298 z M 72.023 67.32 c 0 4.102 -1.478 8.088 -4.159 11.224 c -0.311 0.362 -0.48 0.823 -0.48 1.3 v 5.094 c 0 0.586 -0.477 1.063 -1.063 1.063 H 42.911 c -0.585 0 -1.062 -0.477 -1.062 -1.063 v -5.316 c 0 -0.458 -0.157 -0.902 -0.445 -1.258 L 31.581 66.22 c -1.204 -1.488 -1.74 -3.354 -1.509 -5.254 c 0.23 -1.899 1.197 -3.583 2.721 -4.74 l 0.586 -0.444 v 5.495 c 0 1.104 0.896 2 2 2 s 2 -0.896 2 -2 v -9.506 c 0 -0.014 0 -0.026 0 -0.04 V 26.498 c 0 -1.438 1.169 -2.607 2.607 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 15.53 c 0 0 0 0 0 0.001 s 0 0 0 0.001 l 0.01 12.917 c 0.001 1.104 0.896 1.998 2 1.998 c 0 0 0.001 0 0.001 0 c 1.104 -0.001 1.999 -0.896 1.998 -2.002 L 47.04 42.028 c 0 -1.438 1.169 -2.607 2.606 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 3.27 c 0 0 0 0.001 0 0.001 c 0 0 0 0.001 0 0.001 l 0.009 9.647 c 0.001 1.104 0.896 1.998 2 1.998 c 0.001 0 0.001 0 0.002 0 c 1.104 -0.001 1.999 -0.897 1.998 -2.002 l -0.009 -9.646 c 0 -1.438 1.169 -2.607 2.606 -2.607 h 0.447 c 1.438 0 2.607 1.17 2.607 2.607 v 4.088 c -0.006 0.066 -0.02 0.13 -0.02 0.197 l 0.01 5.366 c 0.002 1.104 0.897 1.996 2 1.996 c 0.001 0 0.002 0 0.004 0 c 1.104 -0.002 1.998 -0.899 1.996 -2.004 l -0.009 -4.852 c 0.006 -0.062 0.019 -0.121 0.019 -0.184 c 0 -1.438 1.17 -2.607 2.607 -2.607 h 0.446 c 1.438 0 2.607 1.17 2.607 2.607 V 67.32 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 63.994 25.511 H 51.79 c -1.104 0 -2 -0.896 -2 -2 s 0.896 -2 2 -2 h 12.204 c 1.104 0 2 0.896 2 2 S 65.099 25.511 63.994 25.511 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 39.985 16.204 c -1.104 0 -2 -0.896 -2 -2 V 2 c 0 -1.104 0.896 -2 2 -2 s 2 0.896 2 2 v 12.204 C 41.985 15.309 41.09 16.204 39.985 16.204 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 48.558 18.441 c -0.512 0 -1.023 -0.195 -1.414 -0.586 c -0.781 -0.781 -0.781 -2.047 0 -2.828 l 8.63 -8.629 c 0.781 -0.781 2.047 -0.781 2.828 0 c 0.781 0.781 0.781 2.047 0 2.828 l -8.63 8.629 C 49.581 18.246 49.069 18.441 48.558 18.441 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 28.181 25.511 H 15.977 c -1.104 0 -2 -0.896 -2 -2 s 0.896 -2 2 -2 h 12.204 c 1.104 0 2 0.896 2 2 S 29.285 25.511 28.181 25.511 z"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "path",
+              {
+                d: "M 31.413 18.441 c -0.512 0 -1.024 -0.195 -1.414 -0.586 L 21.37 9.226 c -0.781 -0.781 -0.781 -2.047 0 -2.828 c 0.78 -0.781 2.048 -0.781 2.828 0 l 8.629 8.629 c 0.781 0.781 0.781 2.047 0 2.828 C 32.437 18.246 31.925 18.441 31.413 18.441 z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  s as GuidanceActionTapIcon
+};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * Figma-aligned announcement backdrop: 12px dot grid + soft hero wash (no hero image).
+ */
+export declare function GuidanceAnnouncementSurface(): React.ReactElement;