@feedvalue/core 0.1.11 → 0.1.15

package/dist/index.d.cts

@@ -1,9 +1,63 @@
+/**
+ * @feedvalue/core - Context Capture
+ *
+ * Captures DOM context from a trigger element for enhanced feedback metadata.
+ * This allows understanding WHERE on a page the user reacted, not just which page.
+ */
+/**
+ * Context capture configuration
+ */
+interface ContextCaptureConfig {
+    /** Enable automatic context capture (default: true) */
+    enabled: boolean;
+    /** Maximum parent traversal depth (default: 5) */
+    maxDepth: number;
+    /** Maximum heading text length (default: 100) */
+    maxHeadingLength: number;
+    /** Data attribute whitelist (default: ['data-section', 'data-feature', 'data-component']) */
+    dataAttributeWhitelist: string[];
+}
+declare const DEFAULT_CONTEXT_CAPTURE_CONFIG: ContextCaptureConfig;
+/**
+ * Captured context data from DOM traversal
+ */
+interface CapturedContext {
+    /** ID of nearest parent element with an id attribute */
+    sectionId?: string;
+    /** Tag name of the section element (e.g., 'section', 'article', 'div') */
+    sectionTag?: string;
+    /** Text content of nearest heading (h1-h6) */
+    nearestHeading?: string;
+    /** Level of the nearest heading (1-6) */
+    headingLevel?: number;
+    /** Captured data-* attributes from element and parents */
+    dataAttributes?: Record<string, string>;
+    /** CSS selector path to the trigger element (for debugging) */
+    cssSelector?: string;
+}
+/**
+ * Capture DOM context from a trigger element
+ *
+ * @param triggerElement - The element that triggered the reaction (e.g., the button)
+ * @param config - Configuration for context capture
+ * @returns Captured context object or null if disabled/unavailable
+ *
+ * @example
+ * ```typescript
+ * // Capture context from a button click
+ * const context = captureContext(event.currentTarget, config);
+ * // Returns: { sectionId: 'installation', nearestHeading: 'Installation', ... }
+ * ```
+ */
+declare function captureContext(triggerElement: Element | null, config?: ContextCaptureConfig): CapturedContext | null;
+
 /**
  * @feedvalue/core - Type Definitions
  *
  * Core types for the FeedValue SDK. These types are shared across
  * all framework packages (React, Vue) and the vanilla API.
  */
+
 /**
  * Widget position on screen
  */
@@ -43,6 +97,8 @@ interface WidgetStyling {
     backgroundColor: string;
     textColor: string;
     buttonTextColor: string;
+    borderColor: string;
+    borderWidth: string;
     borderRadius: string;
     customCSS?: string | undefined;
 }
@@ -91,6 +147,14 @@ interface FeedValueOptions {
      * @default false
      */
     headless?: boolean | undefined;
+    /**
+     * Context capture configuration for reaction widgets.
+     * When enabled, captures DOM context (section ID, nearest heading, data attributes)
+     * from the trigger element when react() is called.
+     *
+     * @default { enabled: true, maxDepth: 5, maxHeadingLength: 100, dataAttributeWhitelist: ['data-section', 'data-feature', 'data-component', 'data-fv-section', 'data-fv-feature'] }
+     */
+    contextCapture?: Partial<ContextCaptureConfig> | undefined;
 }
 /**
  * Runtime configuration (can be changed after init)
@@ -425,10 +489,11 @@ interface FeedValueInstance {
     /**
      * Submit a reaction.
      * @param value - Selected reaction option value
-     * @param options - Optional follow-up text
+     * @param options - Optional follow-up text and trigger element for context capture
      */
     react(value: string, options?: {
         followUp?: string;
+        triggerElement?: Element | null;
     }): Promise<void>;
     /**
      * Check if widget is a reaction type
@@ -450,6 +515,8 @@ interface FeedValueInstance {
     setConfig(config: Partial<FeedValueConfig>): void;
     /** Get current configuration */
     getConfig(): FeedValueConfig;
+    /** Get widget configuration (from API) */
+    getWidgetConfig(): WidgetConfig | null;
     /** Subscribe to state changes */
     subscribe(callback: () => void): () => void;
     /** Get current state snapshot */
@@ -493,6 +560,7 @@ declare class FeedValue implements FeedValueInstance {
     private readonly apiClient;
     private readonly emitter;
     private readonly headless;
+    private readonly contextCaptureConfig;
     private config;
     private widgetConfig;
     private state;
@@ -505,6 +573,7 @@ declare class FeedValue implements FeedValueInstance {
     private modal;
     private overlay;
     private stylesInjected;
+    private viewportResizeCleanup;
     private autoCloseTimeout;
     private isDestroyed;
     /**
@@ -567,10 +636,11 @@ declare class FeedValue implements FeedValueInstance {
     /**
      * Submit a reaction.
      * @param value - Selected reaction option value
-     * @param options - Optional follow-up text
+     * @param options - Optional follow-up text and trigger element for context capture
      */
     react(value: string, options?: {
         followUp?: string;
+        triggerElement?: Element | null;
     }): Promise<void>;
     /**
      * Check if widget is a reaction type
@@ -645,8 +715,15 @@ declare class FeedValue implements FeedValueInstance {
      */
     private getModalPositionStyles;
     /**
-     * SVG icons for trigger button (matching widget-bundle exactly)
+     * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+     *
+     * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+     * resizes and position:fixed elements jump. This detects toolbar-sized height
+     * changes and applies an inverse CSS translate to cancel the jump, then animates
+     * back to the natural position. Uses the `translate` CSS property (separate from
+     * `transform`) to avoid conflicting with the hover transform on the trigger.
      */
+    private setupViewportCompensation;
     /**
      * SVG icons for trigger button - must match Lucide icons used in frontend-web
      * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,
@@ -848,4 +925,4 @@ declare function generateFingerprint(): string;
  */
 declare function clearFingerprint(): void;
 
-export { ApiClient, type ButtonSize, type ConfigResponse, type CustomField, type CustomFieldType, DEFAULT_API_BASE_URL, type EmojiSentiment, type EventHandler, FeedValue, type FeedValueConfig, type FeedValueEvents, type FeedValueInstance, type FeedValueOptions, type FeedValueState, type FeedbackData, type FeedbackMetadata, type FeedbackResponse, type FollowUpTrigger, NEGATIVE_OPTIONS_MAP, type ReactionBorderRadius, type ReactionBorderWidth, type ReactionConfig, type ReactionData, type ReactionMetadata, type ReactionOption, type ReactionResponse, type ReactionState, type ReactionStyling, type ReactionTemplate, type SubmissionUserData, type TriggerIconType, TypedEventEmitter, type UserData, type UserTraits, type WidgetConfig, type WidgetPosition, type WidgetStyling, type WidgetTheme, type WidgetType, type WidgetUIConfig, clearFingerprint, generateFingerprint };
+export { ApiClient, type ButtonSize, type CapturedContext, type ConfigResponse, type ContextCaptureConfig, type CustomField, type CustomFieldType, DEFAULT_API_BASE_URL, DEFAULT_CONTEXT_CAPTURE_CONFIG, type EmojiSentiment, type EventHandler, FeedValue, type FeedValueConfig, type FeedValueEvents, type FeedValueInstance, type FeedValueOptions, type FeedValueState, type FeedbackData, type FeedbackMetadata, type FeedbackResponse, type FollowUpTrigger, NEGATIVE_OPTIONS_MAP, type ReactionBorderRadius, type ReactionBorderWidth, type ReactionConfig, type ReactionData, type ReactionMetadata, type ReactionOption, type ReactionResponse, type ReactionState, type ReactionStyling, type ReactionTemplate, type SubmissionUserData, type TriggerIconType, TypedEventEmitter, type UserData, type UserTraits, type WidgetConfig, type WidgetPosition, type WidgetStyling, type WidgetTheme, type WidgetType, type WidgetUIConfig, captureContext, clearFingerprint, generateFingerprint };

package/dist/index.d.ts

@@ -1,9 +1,63 @@
+/**
+ * @feedvalue/core - Context Capture
+ *
+ * Captures DOM context from a trigger element for enhanced feedback metadata.
+ * This allows understanding WHERE on a page the user reacted, not just which page.
+ */
+/**
+ * Context capture configuration
+ */
+interface ContextCaptureConfig {
+    /** Enable automatic context capture (default: true) */
+    enabled: boolean;
+    /** Maximum parent traversal depth (default: 5) */
+    maxDepth: number;
+    /** Maximum heading text length (default: 100) */
+    maxHeadingLength: number;
+    /** Data attribute whitelist (default: ['data-section', 'data-feature', 'data-component']) */
+    dataAttributeWhitelist: string[];
+}
+declare const DEFAULT_CONTEXT_CAPTURE_CONFIG: ContextCaptureConfig;
+/**
+ * Captured context data from DOM traversal
+ */
+interface CapturedContext {
+    /** ID of nearest parent element with an id attribute */
+    sectionId?: string;
+    /** Tag name of the section element (e.g., 'section', 'article', 'div') */
+    sectionTag?: string;
+    /** Text content of nearest heading (h1-h6) */
+    nearestHeading?: string;
+    /** Level of the nearest heading (1-6) */
+    headingLevel?: number;
+    /** Captured data-* attributes from element and parents */
+    dataAttributes?: Record<string, string>;
+    /** CSS selector path to the trigger element (for debugging) */
+    cssSelector?: string;
+}
+/**
+ * Capture DOM context from a trigger element
+ *
+ * @param triggerElement - The element that triggered the reaction (e.g., the button)
+ * @param config - Configuration for context capture
+ * @returns Captured context object or null if disabled/unavailable
+ *
+ * @example
+ * ```typescript
+ * // Capture context from a button click
+ * const context = captureContext(event.currentTarget, config);
+ * // Returns: { sectionId: 'installation', nearestHeading: 'Installation', ... }
+ * ```
+ */
+declare function captureContext(triggerElement: Element | null, config?: ContextCaptureConfig): CapturedContext | null;
+
 /**
  * @feedvalue/core - Type Definitions
  *
  * Core types for the FeedValue SDK. These types are shared across
  * all framework packages (React, Vue) and the vanilla API.
  */
+
 /**
  * Widget position on screen
  */
@@ -43,6 +97,8 @@ interface WidgetStyling {
     backgroundColor: string;
     textColor: string;
     buttonTextColor: string;
+    borderColor: string;
+    borderWidth: string;
     borderRadius: string;
     customCSS?: string | undefined;
 }
@@ -91,6 +147,14 @@ interface FeedValueOptions {
      * @default false
      */
     headless?: boolean | undefined;
+    /**
+     * Context capture configuration for reaction widgets.
+     * When enabled, captures DOM context (section ID, nearest heading, data attributes)
+     * from the trigger element when react() is called.
+     *
+     * @default { enabled: true, maxDepth: 5, maxHeadingLength: 100, dataAttributeWhitelist: ['data-section', 'data-feature', 'data-component', 'data-fv-section', 'data-fv-feature'] }
+     */
+    contextCapture?: Partial<ContextCaptureConfig> | undefined;
 }
 /**
  * Runtime configuration (can be changed after init)
@@ -425,10 +489,11 @@ interface FeedValueInstance {
     /**
      * Submit a reaction.
      * @param value - Selected reaction option value
-     * @param options - Optional follow-up text
+     * @param options - Optional follow-up text and trigger element for context capture
      */
     react(value: string, options?: {
         followUp?: string;
+        triggerElement?: Element | null;
     }): Promise<void>;
     /**
      * Check if widget is a reaction type
@@ -450,6 +515,8 @@ interface FeedValueInstance {
     setConfig(config: Partial<FeedValueConfig>): void;
     /** Get current configuration */
     getConfig(): FeedValueConfig;
+    /** Get widget configuration (from API) */
+    getWidgetConfig(): WidgetConfig | null;
     /** Subscribe to state changes */
     subscribe(callback: () => void): () => void;
     /** Get current state snapshot */
@@ -493,6 +560,7 @@ declare class FeedValue implements FeedValueInstance {
     private readonly apiClient;
     private readonly emitter;
     private readonly headless;
+    private readonly contextCaptureConfig;
     private config;
     private widgetConfig;
     private state;
@@ -505,6 +573,7 @@ declare class FeedValue implements FeedValueInstance {
     private modal;
     private overlay;
     private stylesInjected;
+    private viewportResizeCleanup;
     private autoCloseTimeout;
     private isDestroyed;
     /**
@@ -567,10 +636,11 @@ declare class FeedValue implements FeedValueInstance {
     /**
      * Submit a reaction.
      * @param value - Selected reaction option value
-     * @param options - Optional follow-up text
+     * @param options - Optional follow-up text and trigger element for context capture
      */
     react(value: string, options?: {
         followUp?: string;
+        triggerElement?: Element | null;
     }): Promise<void>;
     /**
      * Check if widget is a reaction type
@@ -645,8 +715,15 @@ declare class FeedValue implements FeedValueInstance {
      */
     private getModalPositionStyles;
     /**
-     * SVG icons for trigger button (matching widget-bundle exactly)
+     * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+     *
+     * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+     * resizes and position:fixed elements jump. This detects toolbar-sized height
+     * changes and applies an inverse CSS translate to cancel the jump, then animates
+     * back to the natural position. Uses the `translate` CSS property (separate from
+     * `transform`) to avoid conflicting with the hover transform on the trigger.
      */
+    private setupViewportCompensation;
     /**
      * SVG icons for trigger button - must match Lucide icons used in frontend-web
      * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,
@@ -848,4 +925,4 @@ declare function generateFingerprint(): string;
  */
 declare function clearFingerprint(): void;
 
-export { ApiClient, type ButtonSize, type ConfigResponse, type CustomField, type CustomFieldType, DEFAULT_API_BASE_URL, type EmojiSentiment, type EventHandler, FeedValue, type FeedValueConfig, type FeedValueEvents, type FeedValueInstance, type FeedValueOptions, type FeedValueState, type FeedbackData, type FeedbackMetadata, type FeedbackResponse, type FollowUpTrigger, NEGATIVE_OPTIONS_MAP, type ReactionBorderRadius, type ReactionBorderWidth, type ReactionConfig, type ReactionData, type ReactionMetadata, type ReactionOption, type ReactionResponse, type ReactionState, type ReactionStyling, type ReactionTemplate, type SubmissionUserData, type TriggerIconType, TypedEventEmitter, type UserData, type UserTraits, type WidgetConfig, type WidgetPosition, type WidgetStyling, type WidgetTheme, type WidgetType, type WidgetUIConfig, clearFingerprint, generateFingerprint };
+export { ApiClient, type ButtonSize, type CapturedContext, type ConfigResponse, type ContextCaptureConfig, type CustomField, type CustomFieldType, DEFAULT_API_BASE_URL, DEFAULT_CONTEXT_CAPTURE_CONFIG, type EmojiSentiment, type EventHandler, FeedValue, type FeedValueConfig, type FeedValueEvents, type FeedValueInstance, type FeedValueOptions, type FeedValueState, type FeedbackData, type FeedbackMetadata, type FeedbackResponse, type FollowUpTrigger, NEGATIVE_OPTIONS_MAP, type ReactionBorderRadius, type ReactionBorderWidth, type ReactionConfig, type ReactionData, type ReactionMetadata, type ReactionOption, type ReactionResponse, type ReactionState, type ReactionStyling, type ReactionTemplate, type SubmissionUserData, type TriggerIconType, TypedEventEmitter, type UserData, type UserTraits, type WidgetConfig, type WidgetPosition, type WidgetStyling, type WidgetTheme, type WidgetType, type WidgetUIConfig, captureContext, clearFingerprint, generateFingerprint };

package/dist/index.js

@@ -453,6 +453,123 @@ function clearFingerprint() {
   }
 }
 
+// src/context-capture.ts
+var DEFAULT_CONTEXT_CAPTURE_CONFIG = {
+  enabled: true,
+  maxDepth: 5,
+  maxHeadingLength: 100,
+  dataAttributeWhitelist: [
+    "data-section",
+    "data-feature",
+    "data-component",
+    "data-fv-section",
+    "data-fv-feature"
+  ]
+};
+function findNearestWithId(element, maxDepth) {
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    if (current.id) {
+      return current;
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return null;
+}
+function findNearestHeading(element, section, maxDepth) {
+  if (section) {
+    const heading = section.querySelector("h1, h2, h3, h4, h5, h6");
+    if (heading) return heading;
+  }
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    let sibling = current.previousElementSibling;
+    while (sibling) {
+      if (/^H[1-6]$/.test(sibling.tagName)) {
+        return sibling;
+      }
+      sibling = sibling.previousElementSibling;
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return null;
+}
+function captureDataAttributes(element, whitelist, maxDepth) {
+  const result = {};
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth) {
+    for (const attr of Array.from(current.attributes)) {
+      if (whitelist.includes(attr.name) && !result[attr.name]) {
+        result[attr.name] = attr.value;
+      }
+    }
+    current = current.parentElement;
+    depth++;
+  }
+  return result;
+}
+function generateSelector(element, maxDepth) {
+  const parts = [];
+  let current = element;
+  let depth = 0;
+  while (current && depth < maxDepth && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+    if (current.id) {
+      selector = `#${current.id}`;
+      parts.unshift(selector);
+      break;
+    }
+    if (current.className && typeof current.className === "string") {
+      const classes = current.className.split(" ").filter((c) => c.trim()).slice(0, 2);
+      if (classes.length) {
+        selector += "." + classes.join(".");
+      }
+    }
+    parts.unshift(selector);
+    current = current.parentElement;
+    depth++;
+  }
+  return parts.join(" > ");
+}
+function truncate(str, maxLength) {
+  if (str.length <= maxLength) return str;
+  return str.substring(0, maxLength - 3) + "...";
+}
+function captureContext(triggerElement, config = DEFAULT_CONTEXT_CAPTURE_CONFIG) {
+  if (!config.enabled || !triggerElement || typeof document === "undefined") {
+    return null;
+  }
+  const context = {};
+  const sectionWithId = findNearestWithId(triggerElement, config.maxDepth);
+  if (sectionWithId) {
+    context.sectionId = sectionWithId.id;
+    context.sectionTag = sectionWithId.tagName.toLowerCase();
+  }
+  const heading = findNearestHeading(triggerElement, sectionWithId, config.maxDepth);
+  if (heading) {
+    context.nearestHeading = truncate(heading.textContent?.trim() || "", config.maxHeadingLength);
+    const level = heading.tagName[1];
+    if (level) {
+      context.headingLevel = parseInt(level, 10);
+    }
+  }
+  const dataAttrs = captureDataAttributes(
+    triggerElement,
+    config.dataAttributeWhitelist,
+    config.maxDepth
+  );
+  if (Object.keys(dataAttrs).length > 0) {
+    context.dataAttributes = dataAttrs;
+  }
+  context.cssSelector = generateSelector(triggerElement, 3);
+  return Object.keys(context).length > 0 ? context : null;
+}
+
 // src/feedvalue.ts
 var SUCCESS_AUTO_CLOSE_DELAY_MS = 3e3;
 var VALID_SENTIMENTS = ["angry", "disappointed", "satisfied", "excited"];
@@ -475,6 +592,7 @@ var _FeedValue = class _FeedValue {
     __publicField(this, "apiClient");
     __publicField(this, "emitter");
     __publicField(this, "headless");
+    __publicField(this, "contextCaptureConfig");
     __publicField(this, "config");
     __publicField(this, "widgetConfig", null);
     // State
@@ -497,6 +615,8 @@ var _FeedValue = class _FeedValue {
     __publicField(this, "modal", null);
     __publicField(this, "overlay", null);
     __publicField(this, "stylesInjected", false);
+    // Viewport resize compensation cleanup
+    __publicField(this, "viewportResizeCleanup", null);
     // Auto-close timeout reference (for cleanup on destroy)
     __publicField(this, "autoCloseTimeout", null);
     // Destroyed flag - guards async continuations (fixes React StrictMode race condition)
@@ -504,6 +624,10 @@ var _FeedValue = class _FeedValue {
     this.widgetId = options.widgetId;
     this.headless = options.headless ?? false;
     this.config = { ...DEFAULT_CONFIG, ...options.config };
+    this.contextCaptureConfig = {
+      ...DEFAULT_CONTEXT_CAPTURE_CONFIG,
+      ...options.contextCapture
+    };
     this.apiClient = new ApiClient(
       options.apiBaseUrl ?? DEFAULT_API_BASE_URL,
       this.config.debug
@@ -567,12 +691,28 @@ var _FeedValue = class _FeedValue {
         thankYouMessage: configResponse.config.thankYouMessage ?? "Thank you for your feedback!",
         showBranding: configResponse.config.showBranding ?? true,
         customFields: configResponse.config.customFields,
-        // Reaction config (for reaction widgets) - only include if defined
+        // Reaction config (for reaction widgets) - pass through all fields
         ...configResponse.config.template && { template: configResponse.config.template },
         ...configResponse.config.options && { options: configResponse.config.options },
         followUpLabel: configResponse.config.followUpLabel ?? "Tell us more (optional)",
-        submitText: configResponse.config.submitText ?? "Send"
+        submitText: configResponse.config.submitText ?? "Send",
+        // Reaction widget display options (support both camelCase and snake_case from API)
+        ...(configResponse.config.showLabels !== void 0 || configResponse.config.show_labels !== void 0) && {
+          showLabels: configResponse.config.showLabels ?? configResponse.config.show_labels
+        },
+        ...(configResponse.config.buttonSize || configResponse.config.button_size) && {
+          buttonSize: configResponse.config.buttonSize ?? configResponse.config.button_size
+        },
+        ...(configResponse.config.followUpTrigger || configResponse.config.follow_up_trigger) && {
+          followUpTrigger: configResponse.config.followUpTrigger ?? configResponse.config.follow_up_trigger
+        }
       };
+      this.log("Built baseConfig:", {
+        buttonSize: baseConfig.buttonSize,
+        showLabels: baseConfig.showLabels,
+        followUpTrigger: baseConfig.followUpTrigger,
+        template: baseConfig.template
+      });
       this.widgetConfig = {
         widgetId: configResponse.widget_id,
         widgetKey: configResponse.widget_key,
@@ -580,12 +720,16 @@ var _FeedValue = class _FeedValue {
         type: configResponse.type ?? "feedback",
         config: baseConfig,
         styling: {
-          primaryColor: configResponse.styling.primaryColor ?? "#3b82f6",
-          backgroundColor: configResponse.styling.backgroundColor ?? "#ffffff",
-          textColor: configResponse.styling.textColor ?? "#1f2937",
-          buttonTextColor: configResponse.styling.buttonTextColor ?? "#ffffff",
-          borderRadius: configResponse.styling.borderRadius ?? "8px",
-          customCSS: configResponse.styling.customCSS
+          // Pass through all styling properties from API
+          ...configResponse.styling,
+          // Apply defaults for required fields (support both camelCase and snake_case from API)
+          primaryColor: configResponse.styling.primaryColor ?? configResponse.styling.primary_color ?? "#3b82f6",
+          backgroundColor: configResponse.styling.backgroundColor ?? configResponse.styling.background_color ?? "#ffffff",
+          textColor: configResponse.styling.textColor ?? configResponse.styling.text_color ?? "#1f2937",
+          buttonTextColor: configResponse.styling.buttonTextColor ?? configResponse.styling.button_text_color ?? "#ffffff",
+          borderColor: configResponse.styling.borderColor ?? configResponse.styling.border_color ?? "#e5e7eb",
+          borderWidth: configResponse.styling.borderWidth ?? configResponse.styling.border_width ?? "1",
+          borderRadius: configResponse.styling.borderRadius ?? configResponse.styling.border_radius ?? "8px"
         }
       };
       if (!this.headless && typeof window !== "undefined" && typeof document !== "undefined") {
@@ -611,6 +755,8 @@ var _FeedValue = class _FeedValue {
       clearTimeout(this.autoCloseTimeout);
       this.autoCloseTimeout = null;
     }
+    this.viewportResizeCleanup?.();
+    this.viewportResizeCleanup = null;
     this.triggerButton?.remove();
     this.modal?.remove();
     this.overlay?.remove();
@@ -819,12 +965,12 @@ var _FeedValue = class _FeedValue {
   getTemplateOptions(template) {
     const templates = {
       thumbs: [
-        { label: "Helpful", value: "helpful", icon: "thumbs-up", showFollowUp: false },
-        { label: "Not Helpful", value: "not_helpful", icon: "thumbs-down", showFollowUp: true }
+        { label: "Helpful", value: "helpful", icon: "\u{1F44D}", showFollowUp: false },
+        { label: "Not Helpful", value: "not_helpful", icon: "\u{1F44E}", showFollowUp: true }
       ],
       helpful: [
-        { label: "Yes", value: "yes", icon: "check", showFollowUp: false },
-        { label: "No", value: "no", icon: "x", showFollowUp: true }
+        { label: "Yes", value: "yes", icon: "\u2713", showFollowUp: false },
+        { label: "No", value: "no", icon: "\u2717", showFollowUp: true }
       ],
       emoji: [
         { label: "Angry", value: "angry", icon: "\u{1F620}", showFollowUp: true },
@@ -846,7 +992,7 @@ var _FeedValue = class _FeedValue {
   /**
    * Submit a reaction.
    * @param value - Selected reaction option value
-   * @param options - Optional follow-up text
+   * @param options - Optional follow-up text and trigger element for context capture
    */
   async react(value, options) {
     if (!this.state.isReady) {
@@ -864,13 +1010,25 @@ var _FeedValue = class _FeedValue {
       const validValues = reactionOptions.map((opt) => opt.value).join(", ");
       throw new Error(`Invalid reaction value. Must be one of: ${validValues}`);
     }
+    let capturedContext = null;
+    if (options?.triggerElement) {
+      capturedContext = captureContext(options.triggerElement, this.contextCaptureConfig);
+      this.log("Captured context", capturedContext);
+    }
     this.emitter.emit("react", { value, hasFollowUp: selectedOption.showFollowUp });
     this.updateState({ isSubmitting: true });
     try {
       const reactionData = {
         value,
         metadata: {
-          page_url: typeof window !== "undefined" ? window.location.href : ""
+          page_url: typeof window !== "undefined" ? window.location.href : "",
+          // Spread captured context into metadata
+          ...capturedContext?.sectionId && { section_id: capturedContext.sectionId },
+          ...capturedContext?.sectionTag && { section_tag: capturedContext.sectionTag },
+          ...capturedContext?.nearestHeading && { nearest_heading: capturedContext.nearestHeading },
+          ...capturedContext?.headingLevel && { heading_level: capturedContext.headingLevel },
+          ...capturedContext?.dataAttributes && { data_attributes: capturedContext.dataAttributes },
+          ...capturedContext?.cssSelector && { css_selector: capturedContext.cssSelector }
         },
         ...options?.followUp && { followUp: options.followUp }
       };
@@ -1022,6 +1180,7 @@ var _FeedValue = class _FeedValue {
     }
     this.renderTrigger();
     this.renderModal();
+    this.setupViewportCompensation();
   }
   /**
    * Sanitize CSS to block potentially dangerous patterns
@@ -1234,7 +1393,7 @@ var _FeedValue = class _FeedValue {
   getPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1243,7 +1402,7 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
       case "bottom-right":
       default:
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
     }
   }
   /**
@@ -1252,9 +1411,9 @@ var _FeedValue = class _FeedValue {
   getModalPositionStyles(position) {
     switch (position) {
       case "bottom-left":
-        return "bottom: 20px; left: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 20px;";
       case "bottom-right":
-        return "bottom: 20px; right: 20px;";
+        return "bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 20px;";
       case "top-right":
         return "top: 20px; right: 20px;";
       case "top-left":
@@ -1264,6 +1423,37 @@ var _FeedValue = class _FeedValue {
         return "top: 50%; left: 50%; transform: translate(-50%, -50%);";
     }
   }
+  /**
+   * Smooth viewport resize compensation for mobile browser toolbar show/hide.
+   *
+   * When Chrome/Safari's bottom toolbar appears or disappears, the layout viewport
+   * resizes and position:fixed elements jump. This detects toolbar-sized height
+   * changes and applies an inverse CSS translate to cancel the jump, then animates
+   * back to the natural position. Uses the `translate` CSS property (separate from
+   * `transform`) to avoid conflicting with the hover transform on the trigger.
+   */
+  setupViewportCompensation() {
+    if (typeof window === "undefined") return;
+    let lastHeight = window.innerHeight;
+    const handleResize = () => {
+      const newHeight = window.innerHeight;
+      const delta = newHeight - lastHeight;
+      lastHeight = newHeight;
+      if (Math.abs(delta) <= 5 || Math.abs(delta) >= 120) return;
+      const elements = [this.triggerButton, this.modal].filter(Boolean);
+      for (const el of elements) {
+        el.style.transition = "none";
+        el.style.translate = `0 ${delta}px`;
+        void el.offsetHeight;
+        el.style.transition = "translate 0.3s ease-out";
+        el.style.translate = "0 0";
+      }
+    };
+    window.addEventListener("resize", handleResize, { passive: true });
+    this.viewportResizeCleanup = () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }
   /**
    * Parse SVG string to DOM element safely using DOMParser
    */
@@ -1464,9 +1654,6 @@ var _FeedValue = class _FeedValue {
     }
   }
 };
-/**
- * SVG icons for trigger button (matching widget-bundle exactly)
- */
 /**
  * SVG icons for trigger button - must match Lucide icons used in frontend-web
  * chat = MessageCircle, message = MessageSquare, feedback = MessagesSquare,
@@ -1490,6 +1677,6 @@ var NEGATIVE_OPTIONS_MAP = {
   rating: ["1", "2"]
 };
 
-export { ApiClient, DEFAULT_API_BASE_URL, FeedValue, NEGATIVE_OPTIONS_MAP, TypedEventEmitter, clearFingerprint, generateFingerprint };
+export { ApiClient, DEFAULT_API_BASE_URL, DEFAULT_CONTEXT_CAPTURE_CONFIG, FeedValue, NEGATIVE_OPTIONS_MAP, TypedEventEmitter, captureContext, clearFingerprint, generateFingerprint };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map