guideai-app 0.3.5 → 0.4.2

package/dist/components/Onboarding.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
 import { PopupPosition } from '../types/GuideAI.types';
 interface OnboardingProps {
     position: PopupPosition;
     isVisible: boolean;
     onComplete: () => void;
     onClose: () => void;
+    React: typeof import('react');
 }
-declare const Onboarding: React.FC<OnboardingProps>;
+declare const Onboarding: ({ position, isVisible, onComplete, onClose, React }: OnboardingProps) => import("react").JSX.Element | null;
 export default Onboarding;

package/dist/components/TranscriptBox.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { StoredMessage } from '../utils/messageStorage';
 interface TranscriptBoxProps {
     messages: StoredMessage[];
@@ -10,8 +9,12 @@ interface TranscriptBoxProps {
     textInput?: string;
     onTextInputChange?: (value: string) => void;
     onTextSubmit?: () => void;
-    onTextKeyPress?: (event: React.KeyboardEvent) => void;
+    onTextKeyPress?: (event: any) => void;
     textPlaceholder?: string;
+    React: typeof import('react');
 }
-declare const TranscriptBox: React.NamedExoticComponent<TranscriptBoxProps>;
+declare const TranscriptBox: {
+    (props: TranscriptBoxProps): import("react").JSX.Element | null;
+    displayName: string;
+};
 export default TranscriptBox;

package/dist/components/WelcomeBubble.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
 import { PopupPosition } from '../types/GuideAI.types';
 interface WelcomeBubbleProps {
     position: PopupPosition;
+    React: typeof import('react');
 }
-declare const WelcomeBubble: React.FC<WelcomeBubbleProps>;
+declare const WelcomeBubble: ({ position, React }: WelcomeBubbleProps) => import("react").JSX.Element;
 export default WelcomeBubble;

package/dist/index.d.ts

@@ -3,3 +3,6 @@ import TranscriptBox from './components/TranscriptBox';
 export default GuideAI;
 export { TranscriptBox };
 export type { GuideAIProps } from './types/GuideAI.types';
+export * from './visualContext';
+export * from './visualContext/types';
+export { getSessionId, clearSessionId, peekSessionId } from './utils/session';

package/dist/metric/index.d.ts

@@ -1,4 +1,2 @@
-export { default as EventTracker } from './event-listner';
-export type { EventData } from './event-listner';
 export { default as UserMetadataTracker } from './metadata-tracker';
 export type { UserMetadata, MetadataConfig, MetadataUpdate } from './metadata-tracker';

package/dist/metric/metadata-tracker.d.ts

@@ -10,11 +10,14 @@ declare class UserMetadataTracker {
     private minSyncInterval;
     private lastMetadataHash;
     private pendingUpdateTypes;
+    private inactivityTimer;
+    private inactivityTimeout;
+    private lastActivityTime;
     constructor(organizationKey: string, config?: MetadataConfig, onError?: (error: Error, context: string) => void);
     init(): void;
     updateUserInfo(userInfo: Partial<UserMetadata>): void;
     trackLogin(additionalInfo?: Partial<UserMetadata>): void;
-    private trackVisitOncePerSession;
+    private trackVisitIfNewSession;
     trackVisit(): void;
     resetSessionVisitTracking(): void;
     trackVisitManually(): void;
@@ -32,12 +35,15 @@ declare class UserMetadataTracker {
     private addPendingUpdate;
     private isDataDuplicate;
     private generateDataHash;
-    private setupEventTrackerIntegration;
     private stopSyncTimer;
     private emitPendingUpdates;
+    private emitPendingUpdatesImmediate;
     private getFromStorage;
     private setToStorage;
     private clearStorage;
+    private setupPageUnloadTracking;
+    private setupInactivityTracking;
+    private cleanupPageTracking;
     destroy(): void;
 }
 export default UserMetadataTracker;

package/dist/styles/GuideAI.styles.d.ts

@@ -1 +1 @@
-export declare const guideAIStyles = "\n.guideai-main-ui {\n  position: relative;\n}\n\n.guideai-main-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n}\n\n.guideai-welcome-bubble {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #0066ff;\n  color: white;\n  padding: 10px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  white-space: normal;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  animation: bubble-pulse 2s infinite;\n  max-width: 280px;\n  min-width: 200px;\n  text-align: center;\n  line-height: 1.3;\n}\n\n.guideai-welcome-bubble.above {\n  bottom: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.below {\n  top: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n@keyframes bubble-pulse {\n  0% { transform: translateX(-50%) scale(1); }\n  50% { transform: translateX(-50%) scale(1.05); }\n  100% { transform: translateX(-50%) scale(1); }\n}\n\n.guideai-icon-wrapper {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 2px solid transparent;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.guideai-icon-wrapper:not(.initializing):hover {\n  transform: scale(1.1);\n}\n\n.guideai-icon-wrapper.initializing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1.5s linear infinite;\n  opacity: 0.7;\n  cursor: default;\n}\n\n.guideai-icon-wrapper.recording {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-pulse 1s infinite alternate;\n}\n\n.guideai-icon-wrapper.processing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1s linear infinite;\n}\n\n.guideai-icon-wrapper.playing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes guideai-pulse {\n  0% { transform: scale(1); }\n  100% { transform: scale(1.05); }\n}\n\n@keyframes guideai-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes click-ripple-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }\n  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }\n}\n\n@keyframes click-dot-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }\n}\n\n@keyframes cursor-jiggle {\n  0% { transform: translate(-50%, 0) scale(1); }\n  25% { transform: translate(-50%, -5px) scale(1.1); }\n  50% { transform: translate(-50%, 0) scale(1); }\n  75% { transform: translate(-50%, 5px) scale(1.1); }\n  100% { transform: translate(-50%, 0) scale(1); filter: drop-shadow(0 0 8px #0066ff); }\n}\n\n.guideai-icon {\n  width: 60%;\n  height: 60%;\n  min-width: 16px;\n  min-height: 16px;\n  max-width: 40px;\n  max-height: 40px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.guideai-icon.initializing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23808080\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.microphone {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%230000FF\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n.guideai-icon.recording {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><circle cx=\"256\" cy=\"256\" r=\"128\" fill=\"%23FF0000\"/><circle cx=\"256\" cy=\"256\" r=\"200\" stroke=\"%23FF0000\" stroke-width=\"20\" fill=\"none\"/></svg>');\n}\n\n.guideai-icon.processing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23FFA500\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.playing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23008000\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/></svg>');\n}\n\n.guideai-icon.text-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%230066ff\" d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 10v2h2v-2H7zm6 2h-2v-2h2v2zm4 0h-2v-2h2v2z\"/></svg>');\n}\n\n.guideai-icon.voice-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%23008000\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n\n/* Onboarding styles */\n.guideai-onboarding {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  width: 300px;\n  max-width: 90vw;\n  z-index: 1002;\n  animation: onboarding-fade-in 0.3s ease-out;\n}\n\n.guideai-onboarding.above {\n  bottom: calc(100% + 15px);\n}\n\n.guideai-onboarding.below {\n  top: calc(100% + 15px);\n}\n\n.guideai-onboarding.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n@keyframes onboarding-fade-in {\n  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }\n  to { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n\n.guideai-onboarding-content {\n  padding: 16px;\n  position: relative;\n}\n\n.guideai-onboarding-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.guideai-onboarding-close:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.guideai-onboarding-step {\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.guideai-onboarding-icon {\n  font-size: 32px;\n  margin-bottom: 8px;\n  display: inline-block;\n}\n\n.guideai-onboarding-step h3 {\n  margin: 0 0 8px;\n  font-size: 16px;\n  color: #333;\n  font-weight: 600;\n}\n\n.guideai-onboarding-step p {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.guideai-onboarding-dots {\n  display: flex;\n  justify-content: center;\n  margin: 12px 0;\n}\n\n.guideai-onboarding-dots .dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ddd;\n  margin: 0 4px;\n  transition: all 0.3s ease;\n}\n\n.guideai-onboarding-dots .dot.active {\n  background: #0066ff;\n  transform: scale(1.2);\n}\n\n.guideai-onboarding-next {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  background: #0066ff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.guideai-onboarding-next:hover {\n  background: #0055cc;\n}\n\n/* Transcript Box Styles */\n.guideai-transcript-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n  padding-bottom: 40px;\n  padding-right: 40px;\n  z-index: 10000;\n  animation: transcript-fade-in 0.3s ease-out;\n  pointer-events: none;\n}\n\n.guideai-transcript-box {\n  background: rgba(40, 44, 52, 0.85);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 16px;\n  box-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n  width: 280px;\n  max-height: 280px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: transcript-slide-up 0.4s ease-out;\n  pointer-events: auto;\n  margin-right: 60px;\n  position: relative;\n}\n\n.guideai-transcript-box::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  border-radius: 16px 16px 0 0;\n}\n\n\n\n.guideai-transcript-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  max-height: 200px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-track {\n  background: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.guideai-transcript-empty {\n  text-align: center;\n  padding: 20px 12px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-empty-icon {\n  font-size: 24px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.guideai-transcript-empty p {\n  margin: 0;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-message {\n  margin-bottom: 8px;\n  animation: message-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-message.human {\n  text-align: right;\n}\n\n.guideai-transcript-message.guideai {\n  text-align: left;\n}\n\n.guideai-transcript-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 6px 10px;\n  border-radius: 12px;\n  position: relative;\n}\n\n.guideai-transcript-message.human .guideai-transcript-message-content {\n  background: rgba(255, 255, 255, 0.15);\n  color: rgba(255, 255, 255, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-bottom-right-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message.guideai .guideai-transcript-message-content {\n  background: rgba(0, 0, 0, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-bottom-left-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message-sender {\n  font-size: 9px;\n  font-weight: 600;\n  margin-bottom: 2px;\n  opacity: 0.8;\n}\n\n.guideai-transcript-message-text {\n  font-size: 11px;\n  line-height: 1.3;\n  word-wrap: break-word;\n}\n\n.guideai-transcript-message-time {\n  font-size: 8px;\n  opacity: 0.6;\n  margin-top: 2px;\n}\n\n\n\n@keyframes transcript-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes transcript-slide-up {\n  from { \n    opacity: 0; \n    transform: translateX(40px) scale(0.95); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(0) scale(1); \n  }\n}\n\n@keyframes message-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n/* Transcript Toggle Button Styles - positioned at top of transcript area */\n.guideai-transcript-toggle-button {\n  position: fixed;\n  bottom: 60px;\n  right: 40px;\n  width: 36px;\n  height: 36px;\n  background: rgba(40, 44, 52, 0.9);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n  transition: all 0.2s ease;\n  z-index: 10001;\n  font-size: 14px;\n  padding: 0;\n  color: rgba(255, 255, 255, 0.9);\n  animation: toggle-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-toggle-button:hover {\n  background: rgba(40, 44, 52, 1);\n  transform: scale(1.1);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n}\n\n.guideai-transcript-toggle-button:active {\n  transform: scale(0.95);\n}\n\n.guideai-transcript-toggle-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: none;\n}\n\n/* Position transcript toggle button based on transcript position */\n.guideai-transcript-overlay {\n  pointer-events: none;\n}\n\n.guideai-transcript-toggle-button {\n  pointer-events: auto;\n}\n\n/* Input Options Container - Two Stage Layout */\n.guideai-input-options {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n  animation: options-slide-in 0.4s ease-out;\n}\n\n@keyframes options-slide-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Individual Input Option Button */\n.guideai-input-option {\n  width: 50px;\n  height: 50px;\n  background: rgba(255, 255, 255, 0.9);\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  font-size: 18px;\n  padding: 0;\n  position: relative;\n}\n\n.guideai-input-option:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 1);\n  transform: scale(1.1);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n.guideai-input-option:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n.guideai-input-option:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Voice Option Specific Styling */\n.guideai-input-option.voice-option {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));\n  border-color: rgba(76, 175, 80, 0.3);\n}\n\n.guideai-input-option.voice-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(139, 195, 74, 0.2));\n  border-color: rgba(76, 175, 80, 0.5);\n}\n\n/* Text Option Specific Styling */\n.guideai-input-option.text-option {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(63, 81, 181, 0.1));\n  border-color: rgba(33, 150, 243, 0.3);\n}\n\n.guideai-input-option.text-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(63, 81, 181, 0.2));\n  border-color: rgba(33, 150, 243, 0.5);\n}\n\n.guideai-input-option-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n/* Text Input integrated into Transcript Box */\n.guideai-transcript-text-input {\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  padding: 12px;\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 0 0 16px 16px;\n  animation: text-input-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-input-field {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  padding: 8px 12px;\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  resize: none;\n  outline: none;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.guideai-transcript-input-field::placeholder {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-input-field:focus {\n  border-color: rgba(255, 255, 255, 0.4);\n  background: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);\n}\n\n.guideai-transcript-send-button {\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 6px;\n  padding: 6px 10px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 32px;\n}\n\n.guideai-transcript-send-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-1px);\n}\n\n.guideai-transcript-send-button:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.guideai-transcript-send-button:disabled {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.4);\n  cursor: not-allowed;\n  transform: none;\n}\n\n.guideai-transcript-send-icon {\n  font-size: 11px;\n}\n\n/* Animation for text input appearance */\n@keyframes text-input-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n@keyframes toggle-fade-in {\n  from { \n    opacity: 0; \n    transform: scale(0.8); \n  }\n  to { \n    opacity: 1; \n    transform: scale(1); \n  }\n}\n\n\n";
+export declare const guideAIStyles = "\n.guideai-main-ui {\n  position: relative;\n}\n\n.guideai-main-controls {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n}\n\n.guideai-welcome-bubble {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #0066ff;\n  color: white;\n  padding: 10px 16px;\n  border-radius: 20px;\n  font-size: 14px;\n  white-space: normal;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  animation: bubble-pulse 2s infinite;\n  max-width: 280px;\n  min-width: 200px;\n  text-align: center;\n  line-height: 1.3;\n}\n\n.guideai-welcome-bubble.above {\n  bottom: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.below {\n  top: calc(100% + 10px);\n}\n\n.guideai-welcome-bubble.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid #0066ff;\n}\n\n.guideai-welcome-bubble.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #0066ff;\n}\n\n@keyframes bubble-pulse {\n  0% { transform: translateX(-50%) scale(1); }\n  50% { transform: translateX(-50%) scale(1.05); }\n  100% { transform: translateX(-50%) scale(1); }\n}\n\n.guideai-icon-wrapper {\n  width: 50px;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(255, 255, 255, 0.9);\n  border: 2px solid transparent;\n  border-radius: 50%;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.guideai-icon-wrapper:not(.initializing):hover {\n  transform: scale(1.1);\n}\n\n.guideai-icon-wrapper.initializing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(128, 128, 128, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1.5s linear infinite;\n  opacity: 0.7;\n  cursor: default;\n}\n\n.guideai-icon-wrapper.recording {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-pulse 1s infinite alternate;\n}\n\n.guideai-icon-wrapper.processing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(255, 165, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n  animation: guideai-spin 1s linear infinite;\n}\n\n.guideai-icon-wrapper.playing {\n  background-color: rgba(255, 255, 255, 0.9);\n  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);\n}\n\n@keyframes guideai-pulse {\n  0% { transform: scale(1); }\n  100% { transform: scale(1.05); }\n}\n\n@keyframes guideai-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes click-ripple-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }\n  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }\n}\n\n@keyframes click-dot-animation {\n  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }\n  60% { transform: translate(-50%, -50%) scale(1); opacity: 1; }\n  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }\n}\n\n@keyframes cursor-jiggle {\n  0% { transform: translate(-50%, 0) scale(1); }\n  25% { transform: translate(-50%, -5px) scale(1.1); }\n  50% { transform: translate(-50%, 0) scale(1); }\n  75% { transform: translate(-50%, 5px) scale(1.1); }\n  100% { transform: translate(-50%, 0) scale(1); filter: drop-shadow(0 0 8px #0066ff); }\n}\n\n.guideai-icon {\n  width: 60%;\n  height: 60%;\n  min-width: 16px;\n  min-height: 16px;\n  max-width: 40px;\n  max-height: 40px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n.guideai-icon.initializing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23808080\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.microphone {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%230000FF\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n.guideai-icon.recording {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><circle cx=\"256\" cy=\"256\" r=\"128\" fill=\"%23FF0000\"/><circle cx=\"256\" cy=\"256\" r=\"200\" stroke=\"%23FF0000\" stroke-width=\"20\" fill=\"none\"/></svg>');\n}\n\n.guideai-icon.processing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path fill=\"%23FFA500\" d=\"M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z\"/></svg>');\n}\n\n.guideai-icon.playing {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23008000\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"/></svg>');\n}\n\n.guideai-icon.text-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"%230066ff\" d=\"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM7 10v2h2v-2H7zm6 2h-2v-2h2v2zm4 0h-2v-2h2v2z\"/></svg>');\n}\n\n.guideai-icon.voice-mode {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 352 512\"><path fill=\"%23008000\" d=\"M176 352c53.02 0 96-42.98 96-96V96c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96zm160-160h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16z\"/></svg>');\n}\n\n\n/* Onboarding styles */\n.guideai-onboarding {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  width: 300px;\n  max-width: 90vw;\n  z-index: 1002;\n  animation: onboarding-fade-in 0.3s ease-out;\n}\n\n.guideai-onboarding.above {\n  bottom: calc(100% + 15px);\n}\n\n.guideai-onboarding.below {\n  top: calc(100% + 15px);\n}\n\n.guideai-onboarding.above::after {\n  content: '';\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-top: 8px solid white;\n  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));\n}\n\n.guideai-onboarding.below::after {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid white;\n  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, 0.1));\n}\n\n@keyframes onboarding-fade-in {\n  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }\n  to { opacity: 1; transform: translateX(-50%) translateY(0); }\n}\n\n.guideai-onboarding-content {\n  padding: 16px;\n  position: relative;\n}\n\n.guideai-onboarding-close {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background: none;\n  border: none;\n  font-size: 20px;\n  cursor: pointer;\n  color: #999;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n}\n\n.guideai-onboarding-close:hover {\n  background: #f5f5f5;\n  color: #333;\n}\n\n.guideai-onboarding-step {\n  text-align: center;\n  margin-bottom: 12px;\n}\n\n.guideai-onboarding-icon {\n  font-size: 32px;\n  margin-bottom: 8px;\n  display: inline-block;\n}\n\n.guideai-onboarding-step h3 {\n  margin: 0 0 8px;\n  font-size: 16px;\n  color: #333;\n  font-weight: 600;\n}\n\n.guideai-onboarding-step p {\n  margin: 0;\n  font-size: 13px;\n  color: #666;\n  line-height: 1.4;\n}\n\n.guideai-onboarding-dots {\n  display: flex;\n  justify-content: center;\n  margin: 12px 0;\n}\n\n.guideai-onboarding-dots .dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #ddd;\n  margin: 0 4px;\n  transition: all 0.3s ease;\n}\n\n.guideai-onboarding-dots .dot.active {\n  background: #0066ff;\n  transform: scale(1.2);\n}\n\n.guideai-onboarding-next {\n  display: block;\n  width: 100%;\n  padding: 10px;\n  background: #0066ff;\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background 0.2s ease;\n}\n\n.guideai-onboarding-next:hover {\n  background: #0055cc;\n}\n\n/* Transcript Box Styles */\n.guideai-transcript-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n  padding-bottom: 40px;\n  padding-right: 40px;\n  z-index: 10000;\n  animation: transcript-fade-in 0.3s ease-out;\n  pointer-events: none;\n}\n\n.guideai-transcript-box {\n  background: rgba(40, 44, 52, 0.85);\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 16px;\n  box-shadow: \n    0 8px 32px rgba(0, 0, 0, 0.3),\n    inset 0 1px 0 rgba(255, 255, 255, 0.2),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.1);\n  width: 280px;\n  max-height: 280px;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  animation: transcript-slide-up 0.4s ease-out;\n  pointer-events: auto;\n  margin-right: 60px;\n  position: relative;\n}\n\n.guideai-transcript-box::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\n  border-radius: 16px 16px 0 0;\n}\n\n\n\n.guideai-transcript-messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 12px;\n  max-height: 200px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar {\n  width: 6px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-track {\n  background: rgba(0, 0, 0, 0.05);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.2);\n  border-radius: 3px;\n}\n\n.guideai-transcript-messages::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.guideai-transcript-empty {\n  text-align: center;\n  padding: 20px 12px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-empty-icon {\n  font-size: 24px;\n  margin-bottom: 8px;\n  opacity: 0.5;\n}\n\n.guideai-transcript-empty p {\n  margin: 0;\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-message {\n  margin-bottom: 8px;\n  animation: message-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-message.human {\n  text-align: right;\n}\n\n.guideai-transcript-message.guideai {\n  text-align: left;\n}\n\n.guideai-transcript-message-content {\n  display: inline-block;\n  max-width: 85%;\n  padding: 6px 10px;\n  border-radius: 12px;\n  position: relative;\n}\n\n.guideai-transcript-message.human .guideai-transcript-message-content {\n  background: rgba(255, 255, 255, 0.15);\n  color: rgba(255, 255, 255, 0.95);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-bottom-right-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message.guideai .guideai-transcript-message-content {\n  background: rgba(0, 0, 0, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-bottom-left-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.guideai-transcript-message-sender {\n  font-size: 9px;\n  font-weight: 600;\n  margin-bottom: 2px;\n  opacity: 0.8;\n}\n\n.guideai-transcript-message-text {\n  font-size: 11px;\n  line-height: 1.3;\n  word-wrap: break-word;\n}\n\n.guideai-transcript-message-time {\n  font-size: 8px;\n  opacity: 0.6;\n  margin-top: 2px;\n}\n\n\n\n@keyframes transcript-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes transcript-slide-up {\n  from { \n    opacity: 0; \n    transform: translateX(40px) scale(0.95); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(0) scale(1); \n  }\n}\n\n@keyframes message-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n/* Transcript Toggle Button Styles - positioned at top of transcript area */\n.guideai-transcript-toggle-button {\n  position: fixed;\n  bottom: 60px;\n  right: 40px;\n  width: 36px;\n  height: 36px;\n  background: rgba(40, 44, 52, 0.9);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n  transition: all 0.2s ease;\n  z-index: 10001;\n  font-size: 14px;\n  padding: 0;\n  color: rgba(255, 255, 255, 0.9);\n  animation: toggle-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-toggle-button:hover {\n  background: rgba(40, 44, 52, 1);\n  transform: scale(1.1);\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n}\n\n.guideai-transcript-toggle-button:active {\n  transform: scale(0.95);\n}\n\n.guideai-transcript-toggle-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: none;\n}\n\n/* Position transcript toggle button based on transcript position */\n.guideai-transcript-overlay {\n  pointer-events: none;\n}\n\n.guideai-transcript-toggle-button {\n  pointer-events: auto;\n}\n\n/* Input Options Container - Two Stage Layout */\n.guideai-input-options {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n  animation: options-slide-in 0.4s ease-out;\n}\n\n@keyframes options-slide-in {\n  0% {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n/* Individual Input Option Button */\n.guideai-input-option {\n  width: 50px;\n  height: 50px;\n  background: rgba(255, 255, 255, 0.9);\n  border: 2px solid rgba(0, 0, 0, 0.1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  transition: all 0.3s ease;\n  font-size: 18px;\n  padding: 0;\n  position: relative;\n}\n\n.guideai-input-option:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 1);\n  transform: scale(1.1);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);\n}\n\n.guideai-input-option:active:not(:disabled) {\n  transform: scale(0.95);\n}\n\n.guideai-input-option:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* Voice Option Specific Styling */\n.guideai-input-option.voice-option {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(139, 195, 74, 0.1));\n  border-color: rgba(76, 175, 80, 0.3);\n}\n\n.guideai-input-option.voice-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(139, 195, 74, 0.2));\n  border-color: rgba(76, 175, 80, 0.5);\n}\n\n/* Text Option Specific Styling */\n.guideai-input-option.text-option {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(63, 81, 181, 0.1));\n  border-color: rgba(33, 150, 243, 0.3);\n}\n\n.guideai-input-option.text-option:hover:not(:disabled) {\n  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(63, 81, 181, 0.2));\n  border-color: rgba(33, 150, 243, 0.5);\n}\n\n.guideai-input-option-icon {\n  display: inline-block;\n  transition: all 0.2s ease;\n  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));\n}\n\n/* Text Input integrated into Transcript Box */\n.guideai-transcript-text-input {\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  padding: 12px;\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n  background: rgba(0, 0, 0, 0.02);\n  border-radius: 0 0 16px 16px;\n  animation: text-input-fade-in 0.3s ease-out;\n}\n\n.guideai-transcript-input-field {\n  flex: 1;\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  padding: 8px 12px;\n  color: rgba(255, 255, 255, 0.95);\n  font-size: 12px;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  resize: none;\n  outline: none;\n  transition: all 0.2s ease;\n  min-height: 32px;\n}\n\n.guideai-transcript-input-field::placeholder {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.guideai-transcript-input-field:focus {\n  border-color: rgba(255, 255, 255, 0.4);\n  background: rgba(255, 255, 255, 0.2);\n  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);\n}\n\n.guideai-transcript-send-button {\n  background: rgba(255, 255, 255, 0.15);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 6px;\n  padding: 6px 10px;\n  color: rgba(255, 255, 255, 0.9);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 36px;\n  height: 32px;\n}\n\n.guideai-transcript-send-button:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.25);\n  border-color: rgba(255, 255, 255, 0.3);\n  transform: translateY(-1px);\n}\n\n.guideai-transcript-send-button:active:not(:disabled) {\n  transform: translateY(0);\n}\n\n.guideai-transcript-send-button:disabled {\n  background: rgba(255, 255, 255, 0.05);\n  border-color: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.4);\n  cursor: not-allowed;\n  transform: none;\n}\n\n.guideai-transcript-send-icon {\n  font-size: 11px;\n}\n\n/* Animation for text input appearance */\n@keyframes text-input-fade-in {\n  from { \n    opacity: 0; \n    transform: translateY(10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateY(0); \n  }\n}\n\n@keyframes toggle-fade-in {\n  from { \n    opacity: 0; \n    transform: scale(0.8); \n  }\n  to { \n    opacity: 1; \n    transform: scale(1); \n  }\n}\n\n/* Hover effect animations */\n@keyframes hover-pulse {\n  0%, 100% {\n    opacity: 0.6;\n    transform: scale(1);\n    box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);\n  }\n  25% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1.05);\n    box-shadow: 0 0 25px rgba(255, 165, 0, 1);\n  }\n  75% {\n    opacity: 0.9;\n    transform: scale(1.03);\n    box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);\n  }\n}\n\n@keyframes hover-indicator-fade {\n  from { \n    opacity: 0; \n    transform: translateX(-50%) translateY(-10px); \n  }\n  to { \n    opacity: 1; \n    transform: translateX(-50%) translateY(0); \n  }\n}\n\n@keyframes cursor-hover-float {\n  0%, 100% {\n    transform: translate(-50%, 0) translateY(0px);\n  }\n  25% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n  50% {\n    transform: translate(-50%, 0) translateY(-6px);\n  }\n  75% {\n    transform: translate(-50%, 0) translateY(-3px);\n  }\n}\n\n\n";

package/dist/types/GuideAI.types.d.ts

@@ -1,12 +1,17 @@
-import React from 'react';
 import { MetadataConfig, UserMetadata } from './metadata.types';
+import { VisualContextConfig } from '../visualContext/types';
 export type RecordingStatus = 'idle' | 'recording' | 'processing' | 'playing';
-export type UseStateHook = typeof React.useState;
-export type UseEffectHook = typeof React.useEffect;
-export type UseRefHook = typeof React.useRef;
-export type UseCallbackHook = typeof React.useCallback;
+export type UseStateHook = <T>(initialState: T | (() => T)) => [T, (value: T | ((prev: T) => T)) => void];
+export type UseEffectHook = (effect: () => void | (() => void), deps?: any[]) => void;
+export type UseRefHook = <T>(initialValue: T) => {
+    current: T;
+};
+export type UseCallbackHook = <T extends (...args: any[]) => any>(callback: T, deps: any[]) => T;
 export interface GuideAIProps {
     organizationKey: string;
+    workflowKey?: string;
+    React: typeof import('react');
+    ReactDOM: any;
     position?: {
         top?: string;
         right?: string;
@@ -35,5 +40,6 @@ export interface GuideAIProps {
         defaultMode?: 'voice' | 'text';
         placeholder?: string;
     };
+    visualContext?: VisualContextConfig;
 }
 export type PopupPosition = 'above' | 'below';

package/dist/types/metadata.types.d.ts

@@ -1,5 +1,6 @@
 export interface UserMetadata {
     userId?: string;
+    email?: string;
     userType?: 'agent' | 'admin' | 'manager' | 'customer' | 'guest' | string;
     customerType?: 'individual' | 'business' | 'enterprise' | string;
     customerLicense?: string;
@@ -31,6 +32,7 @@ export interface MetadataConfig {
     customFields?: string[];
     collectBrowserInfo?: boolean;
     collectUserAgent?: boolean;
+    sessionTimeout?: number;
 }
 export interface MetadataStorageData {
     metadata: UserMetadata;

package/dist/utils/api.d.ts

@@ -1,10 +1,26 @@
 import { MetadataUpdate } from '../types/metadata.types';
+interface Workflow {
+    id: string;
+    name: string;
+    triggers: string[];
+    organizationKey: string;
+    prompt: string;
+    archived: boolean;
+    createdAt: string;
+    updatedAt: string;
+}
 interface ConversationData {
     id: string;
     ephemeralToken: string;
     prompt: string;
+    workflows: Workflow[];
+    userMetadata?: {
+        visitCount: number;
+        loginCount?: number;
+        email?: string;
+    };
 }
-export declare const createNewConversation: (organizationKey: string, onError: (error: Error, context: string) => void) => Promise<ConversationData | null>;
+export declare const createNewConversation: (organizationKey: string, onError: (error: Error, context: string) => void, workflowKey?: string) => Promise<ConversationData | null>;
+export type { Workflow };
 export declare const logMessage: (content: string, sender: "GUIDEAI" | "HUMAN", conversationId: string | null, organizationKey: string, onError: (error: Error, context: string) => void) => Promise<void>;
 export declare const sendMetadataUpdates: (updates: MetadataUpdate[], organizationKey: string, onError: (error: Error, context: string) => void) => Promise<boolean>;
-export {};

package/dist/utils/constants.d.ts

@@ -1,6 +1,7 @@
 export declare const DEFAULT_PROMPT = "you are Guide AI.\n      Your role is to answer any question directly and succinctly that a user has. NEVER DIRECTLY MENTION THE SCREENSHOT, but use its information as much as possible to target your responses.\n      If nothing is asked, then your goal is to generally assist them.\n      IMPORTANT: NEVER answer in more than 10 words. Always be concise and limit answers to 1 sentence maximum. Be simple and as short as possible.\n      Your job is to help them get it done through asking more and more targeted specific questions.";
 export declare const IGNORE_MESSAGE_TYPES: string[];
 export declare const GUIDE_AI_API_BASE = "https://www.getguide.ai/api";
+export declare const METADATA_API_BASE = "http://localhost:3000/api";
 export declare const OPENAI_REALTIME_BASE = "https://api.openai.com/v1/realtime";
 export declare const OPENAI_REALTIME_MODEL = "gpt-realtime-2025-08-28";
 export declare const GEMINI_API_KEY = "AIzaSyBiFyzjYVupLyk8BdmfWzBL1GbzX8OUdPc";

package/dist/utils/elementInteractions.d.ts

@@ -0,0 +1,92 @@
+export declare const HOVER_EFFECT_KEEP_ALIVE_TIME = 3000;
+export declare const createHoverEffect: (element: Element, initialRect: DOMRect, cursorElement?: HTMLElement | null, duration?: number) => Promise<void>;
+export declare const clickElement: (element: Element, rect: DOMRect, withEffects?: boolean) => Promise<void>;
+export declare const parseCustomSelector: (selector: string) => {
+    type: "text" | "css" | "xpath";
+    cssSelector?: string;
+    textContent?: string;
+    originalSelector?: string;
+};
+export declare const findElementBySelectorStrict: (selector: string) => Element | null;
+export declare const findElementBySelector: (selector: string) => Element | null;
+type ElementInteractionType = "HIGHLIGHT" | "HOVERANDCLICK";
+export declare const interactWithElement: (element: Element, cursorElement: HTMLElement | null, state: ElementInteractionType, hoverTime?: number) => Promise<HTMLElement | null>;
+export declare const processSelectorsInteraction: (selectors: string | string[], isInteracting: boolean, setIsInteracting: (interacting: boolean) => void, onEachElement: (element: Element, cursor: HTMLElement | null, index: number) => Promise<HTMLElement | null>, onComplete?: (lastElement: Element | null, cursor: HTMLElement | null) => Promise<void>) => Promise<boolean>;
+export declare const Highlight_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            selector: {
+                oneOf: ({
+                    type: string;
+                    description: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                    };
+                    description: string;
+                })[];
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const Hover_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            selector: {
+                oneOf: ({
+                    type: string;
+                    description: string;
+                    items?: undefined;
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                    };
+                    description: string;
+                })[];
+                description: string;
+            };
+            hoverTime: {
+                type: string;
+                description: string;
+                minimum: number;
+                maximum: number;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const Go_To_A_Elm_Link_Tool: {
+    type: string;
+    name: string;
+    description: string;
+    parameters: {
+        type: string;
+        properties: {
+            linkText: {
+                type: string;
+                description: string;
+            };
+            delay: {
+                type: string;
+                description: string;
+                minimum: number;
+                maximum: number;
+            };
+        };
+        required: string[];
+    };
+};
+export {};

package/dist/utils/gemini.d.ts

@@ -0,0 +1,3 @@
+export declare const parse_args: (prompt: string, argsToUse: any, geminiFlash: Function) => Promise<any>;
+export declare const HIGHLIGHT_TOOL_PROMPT = "Validate the following JSON string and return ONLY a correct JSON object:\nNote: The selector(s) should be either a css selector or an xpath, so modify those if invalid.\nAlso, [url=''] is a valid css selector, so do not modify it if it's present.\nDo not add any other text or newlines to the response.\nIt should be of the following format:\n{ \"selector\": \"string\" }\nor\n{ \"selector\": [\"string\", ...] }\nDO NOT add any other text or newlines to the response, it should begin and end with curly braces.\nDO NOT add '''json to the response.\nThe JSON string is:\n";
+export declare const HOVER_TOOL_PROMPT = "Validate the following JSON string and return ONLY a correct JSON object:\nNote: The selector(s) should be either a css selector or an xpath, so modify those if invalid.\nAlso, [url=''] is a valid css selector, so do not modify it if it's present.\nDo not add any other text or newlines to the response.\nIt should be of the following format:\n{ \"selector\": \"string\" }\nor\n{ \"selector\": [\"string\", ...] }\nor\n{ \"selector\": \"string\", \"hoverTime\": number }\nor\n{ \"selector\": [\"string\", ...], \"hoverTime\": number }\nThe hoverTime parameter is optional and represents time to hover in milliseconds (500-10000).\nIf not provided, default to 3000ms.\nDO NOT add any other text or newlines to the response, it should begin and end with curly braces.\nDO NOT add '''json to the response.\nThe JSON string is:\n";

package/dist/utils/goToAElmLink.d.ts

@@ -0,0 +1 @@
+export declare const goToAElmLink: (linkText: string, delay?: number) => Promise<boolean>;

package/dist/utils/highlightThenClick.d.ts

@@ -0,0 +1 @@
+export declare const highlightThenClick: (selector: string | string[], isHighlighting: boolean, setIsHighlighting: (highlighting: boolean) => void) => Promise<boolean>;

package/dist/utils/hoverThenClick.d.ts

@@ -0,0 +1 @@
+export declare const hoverThenClick: (selector: string | string[], isHovering: boolean, setIsHovering: (hovering: boolean) => void, hoverTime?: number) => Promise<boolean>;

package/dist/utils/logger.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Standardized logging utility for GuideAI package
+ * Provides consistent formatting and development gating across all components
+ */
+type Component = 'GuideAI' | 'UserMetadata' | 'API' | 'TranscriptBox' | 'Onboarding';
+declare class Logger {
+    private static formatMessage;
+    /**
+     * Standard info logging - only in development
+     */
+    static log(component: Component, action: string, data?: any): void;
+    /**
+     * Warning logging - always shown
+     */
+    static warn(component: Component, action: string, data?: any): void;
+    /**
+     * Error logging - always shown
+     */
+    static error(component: Component, action: string, error?: any): void;
+    /**
+     * API call logging with method and endpoint
+     */
+    static apiCall(method: string, endpoint: string, data?: any): void;
+    /**
+     * API response logging
+     */
+    static apiResponse(method: string, endpoint: string, success: boolean, data?: any): void;
+    /**
+     * Conversation flow tracking
+     */
+    static conversation(action: string, data?: any): void;
+    /**
+     * Metadata tracking logging
+     */
+    static metadata(action: string, data?: any): void;
+}
+export default Logger;

package/dist/utils/session.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Gets the current session ID from sessionStorage, or generates a new one if it doesn't exist.
+ * The session ID persists across page navigations within the same browser tab,
+ * but is cleared when the tab is closed.
+ *
+ * @returns {string} The current session ID (UUID v4 format)
+ */
+export declare function getSessionId(): string;
+/**
+ * Clears the current session ID from sessionStorage.
+ * This will force a new session ID to be generated on the next call to getSessionId().
+ *
+ * Note: This is primarily for testing purposes. In normal operation,
+ * the browser automatically clears sessionStorage when the tab is closed.
+ */
+export declare function clearSessionId(): void;
+/**
+ * Gets the current session ID without generating a new one.
+ * Returns null if no session ID exists.
+ *
+ * @returns {string | null} The current session ID or null if none exists
+ */
+export declare function peekSessionId(): string | null;

package/dist/utils/workflow.d.ts

@@ -0,0 +1,62 @@
+import { Workflow } from './api';
+export interface WorkflowTrigger {
+    triggerWords: string[];
+    workflowKey: string;
+    description?: string;
+}
+export interface WorkflowLogEvent {
+    type: 'workflow_init' | 'trigger_detected' | 'workflow_activated';
+    timestamp: string;
+    data: any;
+}
+/**
+ * Format a workflow log message for console output
+ */
+export declare const formatWorkflowLog: (event: WorkflowLogEvent) => string;
+/**
+ * Log workflow event to console with formatting
+ */
+export declare const logWorkflowEvent: (event: WorkflowLogEvent) => void;
+/**
+ * Detect which workflows should be triggered based on a user message
+ * @param message The user's message
+ * @param workflows Array of available workflows
+ * @returns Array of workflows that should be triggered
+ */
+export declare const detectWorkflowTriggers: (message: string, workflows: Workflow[]) => Workflow[];
+/**
+ * Get trigger words from a message that match a specific workflow
+ * @param message The user's message
+ * @param workflow The workflow to check against
+ * @returns Array of detected trigger words for this workflow
+ */
+export declare const getWorkflowTriggerWords: (message: string, workflow: Workflow) => string[];
+/**
+ * Check if a message contains any trigger words for any workflow
+ * @param message The user's message
+ * @param workflows Array of available workflows
+ * @returns True if any workflow triggers are found
+ */
+export declare const hasWorkflowTriggers: (message: string, workflows: Workflow[]) => boolean;
+/**
+ * Get the most relevant workflow for a message
+ * @param message The user's message
+ * @param workflows Array of available workflows
+ * @returns The most relevant workflow or null if none found
+ */
+export declare const getMostRelevantWorkflow: (message: string, workflows: Workflow[]) => Workflow | null;
+/**
+ * Legacy function for backward compatibility
+ * @deprecated Use detectWorkflowTriggers instead
+ */
+export declare const detectTriggerWords: (message: string, triggerWords: string[]) => string[];
+/**
+ * Legacy function for backward compatibility
+ * @deprecated Use hasWorkflowTriggers instead
+ */
+export declare const hasTriggerWords: (message: string, triggerWords: string[]) => boolean;
+/**
+ * Legacy function for backward compatibility
+ * @deprecated Use getMostRelevantWorkflow instead
+ */
+export declare const getMostRelevantTrigger: (message: string, triggerWords: string[]) => string | null;

package/dist/visualContext/VisualContextScheduler.d.ts

@@ -0,0 +1,43 @@
+import { ScreenshotFrame, ScreenshotProvider } from './types';
+export declare class VisualContextScheduler {
+    private getContainer;
+    private screenshotProvider;
+    private isRunning;
+    private isCaptureInFlight;
+    private hasPendingCapture;
+    private pendingReason;
+    private lastHash;
+    private lastCaptureAt;
+    private lastScrollAt;
+    private lastDomBurstAt;
+    private domChangeCounter;
+    private domBurstWindowMs;
+    private domBurstThreshold;
+    private minIntervalMs;
+    private scrollDebounceMs;
+    private scrollTimer;
+    private mode;
+    private buttonObserver;
+    private domObserver;
+    private targetWidth;
+    private rootElement;
+    private quality;
+    private minQuality;
+    private maxBytes;
+    private onFrame;
+    constructor(getContainer: () => HTMLElement | null, screenshotProvider: ScreenshotProvider, onFrame: (frame: ScreenshotFrame) => void, options?: {
+        targetWidth?: number;
+        quality?: number;
+        minQuality?: number;
+        maxBytes?: number;
+    });
+    setRootElement(root: HTMLElement | ShadowRoot | Document): void;
+    start(): void;
+    stop(): void;
+    private observeButtonState;
+    private observeDomChanges;
+    private observeScroll;
+    scheduleCapture(reason: 'preview' | 'final' | 'change'): void;
+    private performCapture;
+    private maybeRunPending;
+}

package/dist/visualContext/VisualContextStore.d.ts

@@ -0,0 +1,11 @@
+import { ScreenshotFrame } from './types';
+export declare class VisualContextStore {
+    private maxItems;
+    private frames;
+    constructor(maxItems?: number);
+    add(frame: ScreenshotFrame): void;
+    latest(): ScreenshotFrame | null;
+    all(): ScreenshotFrame[];
+    clear(): void;
+    setMaxItems(maxItems: number): void;
+}

package/dist/visualContext/debug-overlay.d.ts

@@ -0,0 +1,10 @@
+import { ScreenshotFrame } from './types';
+interface DebugOverlayProps {
+    React: typeof import('react');
+    frames: ScreenshotFrame[];
+    latencyMs: number | null;
+    onToggleGallery?: () => void;
+    showGallery?: boolean;
+}
+export declare const DebugOverlay: ({ React, frames, latencyMs, onToggleGallery, showGallery }: DebugOverlayProps) => import("react").DetailedReactHTMLElement<import("react").HTMLAttributes<HTMLElement>, HTMLElement>;
+export {};

package/dist/visualContext/defaultProvider.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Default screenshot provider using html2canvas
+ * Automatically detects and uses html2canvas if available
+ */
+import type { ScreenshotProvider } from './types';
+/**
+ * Creates a default screenshot provider using html2canvas
+ * Returns null if html2canvas is not available
+ */
+export declare const createDefaultScreenshotProvider: () => ScreenshotProvider | null;
+/**
+ * Get the default screenshot provider
+ * Returns null if unavailable (graceful degradation)
+ */
+export declare const getDefaultScreenshotProvider: () => ScreenshotProvider | null;

package/dist/visualContext/index.d.ts

@@ -0,0 +1,5 @@
+export { VisualContextStore } from './VisualContextStore';
+export { VisualContextScheduler } from './VisualContextScheduler';
+export { DebugOverlay } from './debug-overlay';
+export { createDefaultScreenshotProvider, getDefaultScreenshotProvider } from './defaultProvider';
+export type { ScreenshotResponse, ScreenshotFrame, ScreenshotOptions, ScreenshotProvider, VisualContextConfig } from './types';