impact-nova 2.6.1 → 2.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/flows/guidance/renderers/announcement-renderer.js +72 -69
  2. package/dist/components/flows/guidance/renderers/guidance-renderer-shared.d.ts +1 -1
  3. package/dist/components/flows/guidance/renderers/guidance-renderer-shared.js +118 -109
  4. package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js +93 -85
  5. package/dist/impact-nova-tokens.scss +2 -2
  6. package/dist/impact-nova.css +1 -1
  7. package/dist/llms/rules/installation.js +1 -1
  8. package/dist/llms/rules/requirements.js +1 -1
  9. package/package.json +1 -1
package/dist/components/flows/guidance/renderers/guidance-tour-overlay.js CHANGED
@@ -1,33 +1,39 @@
1
- import { jsxs as g, jsx as o, Fragment as $ } from "react/jsx-runtime";
2
- import * as h from "react";
1
+ import { jsxs as m, jsx as o, Fragment as $ } from "react/jsx-runtime";
2
+ import * as f from "react";
3
3
  import { createPortal as z } from "react-dom";
4
4
  import { GuidanceStepPanel as A } from "./guidance-card-shared.js";
5
- import { useGuidanceOverlayGeometry as G } from "../hooks/useGuidanceOverlayGeometry.js";
6
- import { useAdvanceOnTargetClick as P, buildHighlightRectForTarget as T, computePopoverPosition as H } from "./guidance-renderer-shared.js";
7
- const _ = 220, i = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${_}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
5
+ import { useGuidanceOverlayGeometry as T } from "../hooks/useGuidanceOverlayGeometry.js";
6
+ import { useAdvanceOnTargetClick as G, buildHighlightRectForTarget as M, computePopoverPosition as P } from "./guidance-renderer-shared.js";
7
+ const H = 220, h = `motion-safe:transition-[top,left,width,height] motion-safe:duration-[${H}ms] motion-safe:ease-[cubic-bezier(0.22,1,0.36,1)]`;
8
8
  function L({
9
9
  highlightRect: e,
10
- blocksPointerEvents: n = !0
10
+ blocksPointerEvents: i = !0
11
11
  }) {
12
- const a = typeof window < "u" ? window.innerWidth : 0, d = typeof window < "u" ? window.innerHeight : 0, l = e.x + e.width, c = e.y + e.height, r = n ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.6)] ${i}`;
13
- return /* @__PURE__ */ g($, { children: [
12
+ const a = typeof window < "u" ? window.innerWidth : 0, l = typeof window < "u" ? window.innerHeight : 0, d = Math.max(0, e.y), u = Math.max(0, e.x), r = Math.min(
13
+ a,
14
+ e.x + e.width
15
+ ), c = Math.min(
16
+ l,
17
+ e.y + e.height
18
+ ), s = Math.max(0, c - d), n = i ? `pointer-events-auto absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.4)] ${h}` : `pointer-events-none absolute bg-[var(--guidance-backdrop-bg)] opacity-[var(--guidance-backdrop-opacity,0.4)] ${h}`;
19
+ return /* @__PURE__ */ m($, { children: [
14
20
  /* @__PURE__ */ o(
15
21
  "div",
16
22
  {
17
- className: r,
18
- style: { top: 0, left: 0, width: a, height: e.y },
23
+ className: n,
24
+ style: { top: 0, left: 0, width: a, height: d },
19
25
  "aria-hidden": "true"
20
26
  }
21
27
  ),
22
28
  /* @__PURE__ */ o(
23
29
  "div",
24
30
  {
25
- className: r,
31
+ className: n,
26
32
  style: {
27
33
  top: c,
28
34
  left: 0,
29
35
  width: a,
30
- height: Math.max(0, d - c)
36
+ height: Math.max(0, l - c)
31
37
  },
32
38
  "aria-hidden": "true"
33
39
  }
@@ -35,12 +41,12 @@ function L({
35
41
  /* @__PURE__ */ o(
36
42
  "div",
37
43
  {
38
- className: r,
44
+ className: n,
39
45
  style: {
40
- top: e.y,
46
+ top: d,
41
47
  left: 0,
42
- width: e.x,
43
- height: e.height
48
+ width: u,
49
+ height: s
44
50
  },
45
51
  "aria-hidden": "true"
46
52
  }
@@ -48,31 +54,30 @@ function L({
48
54
  /* @__PURE__ */ o(
49
55
  "div",
50
56
  {
51
- className: r,
57
+ className: n,
52
58
  style: {
53
- top: e.y,
54
- left: l,
55
- width: Math.max(0, a - l),
56
- height: e.height
59
+ top: d,
60
+ left: r,
61
+ width: Math.max(0, a - r),
62
+ height: s
57
63
  },
58
64
  "aria-hidden": "true"
59
65
  }
60
66
  )
61
67
  ] });
62
68
  }
63
- const C = 12, y = 20;
64
- function M(e) {
65
- const n = C / 2, a = e.placement === "left" || e.placement === "right", d = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, l = a ? e.popoverTop : e.popoverLeft, c = a ? e.popoverHeight : e.popoverWidth, r = d - l - n, m = Math.max(
66
- y,
67
- c - y - C
68
- );
69
- return Math.min(Math.max(r, y), m);
69
+ const w = 12, R = Math.ceil(
70
+ 16 + w * Math.SQRT2 / 2
71
+ );
72
+ function _(e) {
73
+ const i = w / 2, a = e.placement === "left" || e.placement === "right", l = a ? e.highlightRect.y + e.highlightRect.height / 2 : e.highlightRect.x + e.highlightRect.width / 2, d = a ? e.popoverTop : e.popoverLeft, u = a ? e.popoverHeight : e.popoverWidth, r = l - d - i, c = R, s = u - R - w;
74
+ return s < c || r < c || r > s ? null : r;
70
75
  }
71
76
  function B({
72
77
  placement: e,
73
- offset: n
78
+ offset: i
74
79
  }) {
75
- const a = e === "left" || e === "right" ? { top: n } : { left: n }, d = {
80
+ const a = e === "left" || e === "right" ? { top: i } : { left: i }, l = {
76
81
  bottom: "left-0 top-0 -translate-y-1/2 border-l border-t",
77
82
  top: "bottom-0 left-0 translate-y-1/2 border-b border-r",
78
83
  right: "left-0 top-0 -translate-x-1/2 border-b border-l",
@@ -82,72 +87,75 @@ function B({
82
87
  "span",
83
88
  {
84
89
  "aria-hidden": "true",
85
- className: `pointer-events-none absolute z-0 size-3 rotate-45 border border-[var(--color-border-accent-muted)] bg-[var(--color-border-accent-muted)] ${d}`,
90
+ className: `pointer-events-none absolute z-0 size-3 rotate-45 border border-[var(--color-border-accent-muted)] bg-[var(--color-border-accent-muted)] ${l}`,
86
91
  style: a
87
92
  }
88
93
  );
89
94
  }
90
95
  function j({
91
96
  instruction: e,
92
- overlayComponent: n,
97
+ overlayComponent: i,
93
98
  onNext: a,
94
- onSkip: d,
95
- onDismiss: l,
96
- onBack: c
99
+ onSkip: l,
100
+ onDismiss: d,
101
+ onBack: u
97
102
  }) {
98
- const r = e.target?.element, m = G(r, e.stepId), N = e.stepIndex + 1 >= e.totalSteps, f = P(e, a), u = f || e.advanceOn === "auto", w = h.useRef(null), k = h.useRef(null), [v, E] = h.useState({ width: 400, height: 240 }), R = h.useCallback(() => {
103
+ const r = e.target?.element, c = T(r, e.stepId), s = e.stepIndex + 1 >= e.totalSteps, n = G(e, a), y = n || e.advanceOn === "auto", k = f.useRef(null), x = f.useRef(null), [v, E] = f.useState({ width: 400, height: 240 }), S = f.useCallback(() => {
99
104
  r?.click();
100
105
  }, [r]);
101
- if (h.useLayoutEffect(() => {
102
- const p = k.current;
103
- p?.parentElement === document.body && document.body.appendChild(p);
104
- }, [e.stepId, u]), h.useLayoutEffect(() => {
105
- const p = w.current;
106
- if (!p)
106
+ if (f.useLayoutEffect(() => {
107
+ const g = x.current;
108
+ g?.parentElement === document.body && document.body.appendChild(g);
109
+ }, [e.stepId, y]), f.useLayoutEffect(() => {
110
+ const g = k.current;
111
+ if (!g)
107
112
  return;
108
- const I = () => {
109
- const b = p.getBoundingClientRect();
113
+ const C = () => {
114
+ const b = g.getBoundingClientRect();
110
115
  b.width > 0 && b.height > 0 && E({
111
116
  width: b.width,
112
117
  height: b.height
113
118
  });
114
119
  };
115
- I();
116
- const O = new ResizeObserver(I);
117
- return O.observe(p), () => {
118
- O.disconnect();
120
+ C();
121
+ const N = new ResizeObserver(C);
122
+ return N.observe(g), () => {
123
+ N.disconnect();
119
124
  };
120
- }, [e.stepId, e.content.title, e.content.body]), !m || !r || typeof document > "u")
125
+ }, [e.stepId, e.content.title, e.content.body]), !c || !r || typeof document > "u")
126
+ return null;
127
+ const t = M(r);
128
+ if (!t)
121
129
  return null;
122
- const t = T(r), s = H({
130
+ const p = P({
123
131
  targetRect: t,
124
132
  popoverWidth: v.width,
125
133
  popoverHeight: v.height,
126
134
  preferredPlacement: e.placement
127
- }), S = M({
128
- placement: s.placement,
129
- popoverTop: s.top,
130
- popoverLeft: s.left,
135
+ }), O = _({
136
+ placement: p.placement,
137
+ popoverTop: p.top,
138
+ popoverLeft: p.left,
131
139
  highlightRect: t,
132
140
  popoverWidth: v.width,
133
141
  popoverHeight: v.height
134
- }), x = `guidance-mask-${e.stepId}`;
142
+ }), I = `guidance-mask-${e.stepId}`;
135
143
  return z(
136
- /* @__PURE__ */ g(
144
+ /* @__PURE__ */ m(
137
145
  "div",
138
146
  {
139
- ref: k,
140
- "data-component": n,
147
+ ref: x,
148
+ "data-component": i,
141
149
  className: "fixed inset-0 z-[60] pointer-events-none",
142
150
  role: "presentation",
143
151
  children: [
144
- /* @__PURE__ */ g(
152
+ /* @__PURE__ */ m(
145
153
  "svg",
146
154
  {
147
- className: `pointer-events-none absolute inset-0 size-full ${i}`,
155
+ className: `pointer-events-none absolute inset-0 size-full ${h}`,
148
156
  "aria-hidden": "true",
149
157
  children: [
150
- /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ g("mask", { id: x, children: [
158
+ /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ m("mask", { id: I, children: [
151
159
  /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "white" }),
152
160
  /* @__PURE__ */ o(
153
161
  "rect",
@@ -158,7 +166,7 @@ function j({
158
166
  height: t.height,
159
167
  rx: "8",
160
168
  fill: "black",
161
- className: i
169
+ className: h
162
170
  }
163
171
  )
164
172
  ] }) }),
@@ -168,8 +176,8 @@ function j({
168
176
  width: "100%",
169
177
  height: "100%",
170
178
  fill: "var(--guidance-backdrop-bg)",
171
- fillOpacity: "var(--guidance-backdrop-opacity, 0.6)",
172
- mask: `url(#${x})`
179
+ fillOpacity: "var(--guidance-backdrop-opacity, 0.4)",
180
+ mask: `url(#${I})`
173
181
  }
174
182
  )
175
183
  ]
@@ -179,10 +187,10 @@ function j({
179
187
  L,
180
188
  {
181
189
  highlightRect: t,
182
- blocksPointerEvents: !u
190
+ blocksPointerEvents: !y
183
191
  }
184
192
  ),
185
- u ? null : /* @__PURE__ */ o(
193
+ y ? null : /* @__PURE__ */ o(
186
194
  "div",
187
195
  {
188
196
  className: "pointer-events-auto absolute z-10",
@@ -195,11 +203,11 @@ function j({
195
203
  "aria-hidden": "true"
196
204
  }
197
205
  ),
198
- f ? /* @__PURE__ */ o(
206
+ n ? /* @__PURE__ */ o(
199
207
  "button",
200
208
  {
201
209
  type: "button",
202
- className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${i}`,
210
+ className: `absolute z-10 cursor-pointer border-0 bg-transparent p-0 pointer-events-auto ${h}`,
203
211
  style: {
204
212
  top: t.y,
205
213
  left: t.x,
@@ -207,13 +215,13 @@ function j({
207
215
  height: t.height
208
216
  },
209
217
  "aria-label": `Click ${e.content.title}`,
210
- onClick: R
218
+ onClick: S
211
219
  }
212
220
  ) : null,
213
221
  /* @__PURE__ */ o(
214
222
  "div",
215
223
  {
216
- className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${i}`,
224
+ className: `pointer-events-none absolute rounded-lg ring-2 ring-[var(--guidance-highlight-ring,var(--color-primary))] ${h}`,
217
225
  style: {
218
226
  top: t.y,
219
227
  left: t.x,
@@ -222,26 +230,26 @@ function j({
222
230
  }
223
231
  }
224
232
  ),
225
- /* @__PURE__ */ g(
233
+ /* @__PURE__ */ m(
226
234
  "div",
227
235
  {
228
- ref: w,
229
- className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${i}`,
236
+ ref: k,
237
+ className: `pointer-events-auto absolute z-20 w-[min(400px,calc(100vw-2rem))] ${h}`,
230
238
  style: {
231
- top: s.top,
232
- left: s.left
239
+ top: p.top,
240
+ left: p.left
233
241
  },
234
242
  role: "dialog",
235
243
  "aria-labelledby": `guidance-tour-title-${e.stepId}`,
236
244
  "aria-describedby": `guidance-tour-body-${e.stepId}`,
237
245
  children: [
238
- /* @__PURE__ */ o(
246
+ O !== null ? /* @__PURE__ */ o(
239
247
  B,
240
248
  {
241
- placement: s.placement,
242
- offset: S
249
+ placement: p.placement,
250
+ offset: O
243
251
  }
244
- ),
252
+ ) : null,
245
253
  /* @__PURE__ */ o("div", { className: "relative z-[1] overflow-hidden rounded-2xl border border-stroke bg-canvas shadow-elevation-floating", children: /* @__PURE__ */ o(
246
254
  A,
247
255
  {
@@ -251,15 +259,15 @@ function j({
251
259
  stepIndex: e.stepIndex,
252
260
  totalSteps: e.totalSteps,
253
261
  skippable: e.skippable,
254
- primaryActionLabel: N ? "Done" : "Next",
255
- onSkip: d,
256
- onDismiss: l,
257
- onBack: c,
262
+ primaryActionLabel: s ? "Done" : "Next",
263
+ onSkip: l,
264
+ onDismiss: d,
265
+ onBack: u,
258
266
  canGoBack: e.canGoBack,
259
267
  advanceOn: e.advanceOn,
260
268
  onPrimaryAction: a,
261
- showPrimaryAction: !f && e.advanceOn !== "auto",
262
- footerHint: f ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
269
+ showPrimaryAction: !n && e.advanceOn !== "auto",
270
+ footerHint: n ? e.content.footer ?? "Click the highlighted button to continue." : e.advanceOn === "auto" ? e.content.footer ?? "Complete the action above to continue." : null,
263
271
  footerKeybinding: e.content.keybinding,
264
272
  shortcutReferences: e.content.shortcutReferences,
265
273
  titleId: `guidance-tour-title-${e.stepId}`,
package/dist/impact-nova-tokens.scss CHANGED
@@ -176,7 +176,7 @@
176
176
  /* —— Guidance (tours, coach marks, announcements) —— */
177
177
  --guidance-announcement-hero-bg: #eceefd;
178
178
  --guidance-backdrop-bg: #000000;
179
- --guidance-backdrop-opacity: 0.6;
179
+ --guidance-backdrop-opacity: 0.4;
180
180
  --guidance-coach-mark-bg: #ffffff;
181
181
  --guidance-coach-mark-border: #e8eaed;
182
182
  --guidance-highlight-ring: #5267f4;
@@ -412,7 +412,7 @@
412
412
  /* —— Guidance (tours, coach marks, announcements) —— */
413
413
  --guidance-announcement-hero-bg: #eceefd;
414
414
  --guidance-backdrop-bg: #000000;
415
- --guidance-backdrop-opacity: 0.6;
415
+ --guidance-backdrop-opacity: 0.4;
416
416
  --guidance-coach-mark-bg: #ffffff;
417
417
  --guidance-coach-mark-border: #e8eaed;
418
418
  --guidance-highlight-ring: #5267f4;