@marketrix.ai/widget 4.0.114 → 4.0.115

package/dist/src/design-system/component-tokens.d.ts

@@ -8,7 +8,10 @@
  *
  * `LAYER_TOKENS` is the z-index ladder (screen-edge glow < panel < dialog < toast), based just above the
  * 2^31-ish ceiling most host pages use so the widget sits over everything without the values overflowing a
- * 32-bit int.
+ * 32-bit int. `showHighlight`/`showPopup` are a separate, much higher pair near the int32 ceiling: Show
+ * mode's coaching overlay (`ShowModeService`) mounts to the HOST page, outside the shadow root, to point at
+ * the widget's OWN chrome — it must outrank every value in this ladder by a wide margin, not sit one step
+ * above `toast`.
  */
 import type { CSSProperties } from 'react';
 export type RadiusToken = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'pill';
@@ -33,6 +36,8 @@ export declare const LAYER_TOKENS: {
     panel: number;
     dialog: number;
     toast: number;
+    showHighlight: number;
+    showPopup: number;
 };
 export declare const notificationToneStyles: Record<NotificationTone, {
     background: string;

package/dist/src/services/ShowModeService.d.ts

@@ -17,6 +17,9 @@
  * highlight is sized and placed over its element, so the first paint and every reposition run through it;
  * placement takes the first of right/left/above/below that fits then clamps, its 120px height an assumption,
  * and the watchdog tests `document.body.contains` first, covering removal as well as occlusion.
+ * `ACCENT_COLOR`/`TEXT_COLOR` are raw literals rather than design-system tokens: the highlight and popup
+ * mount to `document.body` on the HOST page, outside the shadow root, so `index.css`'s `:host`-scoped
+ * CSS custom properties never reach them.
  */
 interface ShowModeOptions {
     element: HTMLElement;