@qaiddev/thumbs-embed 1.0.6 → 1.0.8

package/dist/index.d.ts

@@ -47,7 +47,7 @@ declare interface ElementBounds {
 }
 
 /**
- * Configuration options for the FeedbackEmbed
+ * Configuration options for the QaidFeedback
  */
 export declare interface FeedbackConfig {
     /** Required: API endpoint URL for submitting feedback */
@@ -58,6 +58,8 @@ export declare interface FeedbackConfig {
     container?: string;
     /** Custom CSS class to apply to thumb buttons. When provided, default button styles are not applied */
     buttonClass?: string;
+    /** Button layout direction. Default: 'horizontal' */
+    direction?: "horizontal" | "vertical";
     /** Position of the feedback buttons. Default: 'bottom-right'. Ignored if container is provided */
     position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     /** Offset from edge in pixels. Default: { x: 16, y: 16 } */
@@ -84,10 +86,6 @@ export declare interface FeedbackConfig {
     text?: {
         /** Tooltip text for buttons */
         tooltip?: string;
-        /** Banner text during targeting */
-        bannerText?: string;
-        /** Banner hint text */
-        bannerHint?: string;
         /** Modal title */
         modalTitle?: string;
         /** Modal subtitle */
@@ -126,6 +124,8 @@ export declare interface FeedbackConfig {
     negativeIcon?: string;
     /** When true, hide thumbs up/down buttons (only show video button if enabled). Default: false */
     hideThumbs?: boolean;
+    /** Custom CSS to inject into the embed's shadow root for theming */
+    css?: string;
     /** Screenshot capture method. "dom" uses html2canvas (no permission), "permission" uses Screen Capture API. Default: "permission" */
     screenshotMethod?: "dom" | "permission";
     /** Screenshot options */
@@ -150,16 +150,90 @@ export declare interface FeedbackData {
 }
 
 /**
- * FeedbackEmbed - Standalone feedback collection embed
+ * Payload for updating feedback with a message
+ */
+export declare interface FeedbackMessagePayload {
+    message: string | null;
+}
+
+/**
+ * Payload sent to the feedback API
+ */
+export declare interface FeedbackPayload {
+    feedbackType: "up" | "down";
+    pageUrl: string;
+    /** API key for authenticating with the feedback service */
+    apiKey?: string;
+    elementSelector: string | null;
+    elementText: string | null;
+    consoleErrors: ConsoleError[];
+    screenWidth: number;
+    screenHeight: number;
+    clickX: number;
+    clickY: number;
+    scrollX: number;
+    scrollY: number;
+    /** Base64-encoded screenshot image (WebP) */
+    screenshot: string | null;
+    /** Random UUID stored in visitor's localStorage (for anonymous feedback) */
+    visitorId: string;
+    /** Element bounds for server-side screenshot fallback when client screenshot fails */
+    elementBounds?: ElementBounds | null;
+    /** User agent string for server-side rendering consistency */
+    userAgent?: string;
+}
+
+/**
+ * Response from the feedback API
+ */
+export declare interface FeedbackResponse {
+    id: number;
+}
+
+/**
+ * Detect the best supported MIME type for recording
+ */
+export declare function getSupportedMimeType(): string;
+
+/**
+ * Check if DOM screenshot capture is supported
+ * Requires canvas and basic DOM APIs
+ */
+export declare function isDomScreenshotSupported(): boolean;
+
+/**
+ * Check if video recording is supported in this browser
+ */
+export declare function isVideoRecordingSupported(): boolean;
+
+export declare interface NetworkCapture {
+    errors: NetworkError[];
+    restore: () => void;
+}
+
+/**
+ * Network error captured during the session
  */
-export declare class FeedbackEmbed {
+export declare interface NetworkError {
+    url: string;
+    method: string;
+    status: number;
+    statusText: string;
+    requestBody?: string;
+    responseBody?: string;
+    timestamp: number;
+}
+
+/**
+ * QaidFeedback - Standalone feedback collection embed
+ */
+export declare class QaidFeedback {
     private config;
     private state;
     private feedbackData;
     private selectedBounds;
     private feedbackId;
     private mousePos;
-    private lastHighlighted;
     private isMobile;
     private visitorId;
     private consoleCapture;
@@ -170,25 +244,39 @@ export declare class FeedbackEmbed {
     private videoPreview;
     private isRecording;
     private isSendingVideo;
-    private container;
+    private shadowHost;
+    private shadowRoot;
+    private overlayShadowHost;
+    private overlayShadowRoot;
+    private buttonsContainer;
     private isUserProvidedContainer;
     private overlayContainer;
     private captureLayer;
     private crosshairH;
     private crosshairV;
     private scope;
+    private highlightBox;
     private marker;
     private modalContainer;
     private backdrop;
+    private cssVars;
     private boundKeyDown;
     private boundMouseMove;
     private boundClick;
     private boundResize;
     constructor(config: FeedbackConfig);
+    private applyVars;
     private init;
     private checkMobile;
     private handleResize;
     private createEmbed;
+    /**
+     * Lazily create a separate overlay shadow host on document.body.
+     * This host contains all full-page elements (targeting overlay, marker,
+     * backdrop, modal, recording indicator, video preview) so they escape
+     * clip-path / transform containing blocks in user containers.
+     */
+    private ensureOverlayHost;
     private tooltipElement;
     private showTooltip;
     private hideTooltip;
@@ -229,81 +317,6 @@ export declare class FeedbackEmbed {
     destroy(): void;
 }
 
-/**
- * Payload for updating feedback with a message
- */
-export declare interface FeedbackMessagePayload {
-    message: string | null;
-}
-
-/**
- * Payload sent to the feedback API
- */
-export declare interface FeedbackPayload {
-    feedbackType: "up" | "down";
-    pageUrl: string;
-    /** API key for authenticating with the feedback service */
-    apiKey?: string;
-    elementSelector: string | null;
-    elementText: string | null;
-    consoleErrors: ConsoleError[];
-    screenWidth: number;
-    screenHeight: number;
-    clickX: number;
-    clickY: number;
-    scrollX: number;
-    scrollY: number;
-    /** Base64-encoded screenshot image (WebP) */
-    screenshot: string | null;
-    /** Random UUID stored in visitor's localStorage (for anonymous feedback) */
-    visitorId: string;
-    /** Element bounds for server-side screenshot fallback when client screenshot fails */
-    elementBounds?: ElementBounds | null;
-    /** User agent string for server-side rendering consistency */
-    userAgent?: string;
-}
-
-/**
- * Response from the feedback API
- */
-export declare interface FeedbackResponse {
-    id: number;
-}
-
-/**
- * Detect the best supported MIME type for recording
- */
-export declare function getSupportedMimeType(): string;
-
-/**
- * Check if DOM screenshot capture is supported
- * Requires canvas and basic DOM APIs
- */
-export declare function isDomScreenshotSupported(): boolean;
-
-/**
- * Check if video recording is supported in this browser
- */
-export declare function isVideoRecordingSupported(): boolean;
-
-export declare interface NetworkCapture {
-    errors: NetworkError[];
-    restore: () => void;
-}
-
-/**
- * Network error captured during the session
- */
-export declare interface NetworkError {
-    url: string;
-    method: string;
-    status: number;
-    statusText: string;
-    requestBody?: string;
-    responseBody?: string;
-    timestamp: number;
-}
-
 /**
  * Fully resolved configuration with all defaults applied
  * Used internally by the embed after processing user config
@@ -313,6 +326,7 @@ export declare interface ResolvedFeedbackConfig {
     apiKey: string;
     container: string;
     buttonClass: string;
+    direction: "horizontal" | "vertical";
     position: "bottom-right" | "bottom-left" | "top-right" | "top-left";
     offset: {
         x: number;
@@ -328,8 +342,6 @@ export declare interface ResolvedFeedbackConfig {
     buttonSize: "small" | "medium" | "large";
     text: {
         tooltip: string;
-        bannerText: string;
-        bannerHint: string;
         modalTitle: string;
         modalSubtitle: string;
         placeholder: string;
@@ -351,6 +363,7 @@ export declare interface ResolvedFeedbackConfig {
     positiveIcon: string;
     negativeIcon: string;
     hideThumbs: boolean;
+    css: string;
     captureVideo: boolean;
     videoOptions: {
         maxDuration: number;