@customviews-js/customviews 1.4.1-beta.1 → 1.4.1-beta.2

package/dist/types/styles/widget-styles.d.ts

@@ -1,13 +0,0 @@
-/**
- * Widget styles for CustomViews
- * Extracted from widget.ts for better maintainability
- *
- * Note: Styles are kept as a TypeScript string for compatibility with the build system.
- * This approach ensures the styles are properly bundled and don't require separate CSS file handling.
- */
-export declare const WIDGET_STYLES = "\n/* Rounded rectangle widget icon styles */\n.cv-widget-icon {\n  position: fixed;\n  /* Slightly transparent by default so the widget is subtle at the page edge */\n  background: rgba(255, 255, 255, 0.92);\n  color: rgba(0, 0, 0, 0.9);\n  opacity: 0.6;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  font-weight: bold;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  z-index: 9998;\n  transition: all 0.3s ease;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.cv-widget-icon:hover {\n  /* Become fully opaque on hover to improve readability */\n  background: rgba(255, 255, 255, 1);\n  color: rgba(0, 0, 0, 1);\n  opacity: 1;\n}\n\n/* Top-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-top-right {\n  top: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Top-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-top-left {\n  top: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Bottom-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-bottom-right {\n  bottom: 20px;\n  right: 0;\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n/* Bottom-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-bottom-left {\n  bottom: 20px;\n  left: 0;\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-left: rounded end on right, sticks out rightward on hover */\n.cv-widget-middle-left {\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  border-radius: 0 18px 18px 0;\n  padding-right: 8px;\n  justify-content: flex-end;\n}\n\n/* Middle-right: rounded end on left, sticks out leftward on hover */\n.cv-widget-middle-right {\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  border-radius: 18px 0 0 18px;\n  padding-left: 8px;\n  justify-content: flex-start;\n}\n\n.cv-widget-top-right,\n.cv-widget-middle-right,\n.cv-widget-bottom-right,\n.cv-widget-top-left,\n.cv-widget-middle-left,\n.cv-widget-bottom-left {\n  height: 36px;\n  width: 36px;\n}\n\n.cv-widget-middle-right:hover,\n.cv-widget-top-right:hover,\n.cv-widget-bottom-right:hover,\n.cv-widget-top-left:hover,\n.cv-widget-middle-left:hover,\n.cv-widget-bottom-left:hover {\n  width: 55px;\n}\n\n/* Modal content styles */\n.cv-widget-section {\n  margin-bottom: 16px;\n}\n\n.cv-widget-section:last-child {\n  margin-bottom: 0;\n}\n\n.cv-widget-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-widget-profile-select,\n.cv-widget-state-select {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-widget-profile-select:focus,\n.cv-widget-state-select:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n.cv-widget-profile-select:disabled,\n.cv-widget-state-select:disabled {\n  background: #f8f9fa;\n  color: #6c757d;\n  cursor: not-allowed;\n}\n\n.cv-widget-current {\n  margin: 16px 0;\n  padding: 12px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  border-left: 4px solid #007bff;\n}\n\n.cv-widget-current label {\n  font-size: 12px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: #666;\n  margin-bottom: 4px;\n}\n\n.cv-widget-current-view {\n  font-weight: 500;\n  color: #333;\n}\n\n.cv-widget-reset {\n  width: 100%;\n  padding: 8px 16px;\n  background: #dc3545;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-reset:hover {\n  background: #c82333;\n}\n\n.cv-widget-reset:active {\n  background: #bd2130;\n}\n\n/* Responsive design for mobile */\n@media (max-width: 768px) {\n  .cv-widget-top-right,\n  .cv-widget-top-left {\n    top: 10px;\n  }\n\n  .cv-widget-bottom-right,\n  .cv-widget-bottom-left {\n    bottom: 10px;\n  }\n\n  /* All widgets stay flush with screen edges */\n  .cv-widget-top-right,\n  .cv-widget-bottom-right,\n  .cv-widget-middle-right {\n    right: 0;\n  }\n\n  .cv-widget-top-left,\n  .cv-widget-bottom-left,\n  .cv-widget-middle-left {\n    left: 0;\n  }\n\n  /* Slightly smaller on mobile */\n  .cv-widget-icon {\n    width: 60px;\n    height: 32px;\n  }\n\n  .cv-widget-icon:hover {\n    width: 75px;\n  }\n}\n\n/* Modal styles */\n.cv-widget-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10002;\n  animation: fadeIn 0.2s ease;\n}\n\n.cv-widget-modal-overlay.cv-hidden {\n  display: none;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.cv-widget-modal {\n  background: white;\n  border-radius: 0.75rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  max-width: 32rem;\n  width: 90vw;\n  max-height: 80vh;\n  animation: slideIn 0.2s ease;\n  display: flex;\n  flex-direction: column;\n}\n\n@keyframes slideIn {\n  from { \n    opacity: 0;\n    transform: scale(0.9) translateY(-20px);\n  }\n  to { \n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n.cv-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.5rem 1rem;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-modal-header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.cv-modal-icon {\n  position: relative;\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n}\n\n.cv-modal-icon-svg {\n  width: 100%;\n  height: 100%;\n  opacity: 1;\n}\n\n.cv-modal-title {\n  font-size: 1.125rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-modal-close {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background: transparent;\n  border: none;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.1);\n  color: #3e84f4;\n}\n\n.cv-modal-close-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.cv-modal-main {\n  padding: 1rem;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  overflow-y: auto;\n  max-height: calc(80vh - 8rem);\n}\n\n.cv-modal-description {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n}\n\n.cv-content-section,\n.cv-tab-groups-section {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.cv-section-heading {\n  font-size: 1rem;\n  font-weight: bold;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0;\n}\n\n.cv-widget-modal-actions {\n  margin-top: 20px;\n  padding-top: 16px;\n  border-top: 1px solid #e9ecef;\n}\n\n.cv-widget-restore {\n  width: 100%;\n  padding: 10px 16px;\n  background: #28a745;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.cv-widget-restore:hover {\n  background: #218838;\n}\n\n.cv-widget-create-state {\n  width: 100%;\n  padding: 10px 16px;\n  background: #007bff;\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 10px;\n}\n\n.cv-widget-create-state:hover {\n  background: #0056b3;\n}\n\n.cv-widget-theme-dark .cv-widget-modal {\n  background: #101722;\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-header {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-close {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-close:hover {\n  background: rgba(62, 132, 244, 0.2);\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-modal-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-section-heading {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggles-container\n.cv-widget-theme-dark .cv-tabgroups-container {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-card,\n.cv-widget-theme-dark .cv-tabgroup-card {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-title,\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-description,\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tab-group-description {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.2);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-modal-footer {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: #101722;\n}\n\n.cv-widget-theme-dark .cv-reset-btn {\n  color: #e2e8f0;\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-reset-btn:hover {\n  background: rgba(255, 255, 255, 0.2);\n}\n\n/* Custom state creator styles */\n.cv-custom-state-modal {\n  max-width: 500px;\n}\n\n.cv-custom-state-form .cv-section-header {\n  font-size: 16px;\n  font-weight: 600;\n  color: #333;\n  border-bottom: 1px solid #e9ecef;\n  padding-bottom: 5px;\n}\n\n.cv-custom-state-form p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #555;\n  margin-bottom: 24px;\n  text-align: justify;\n}\n\n.cv-custom-state-section {\n  margin-bottom: 16px;\n}\n\n.cv-custom-state-section label {\n  display: block;\n  margin-bottom: 4px;\n  font-weight: 500;\n  color: #555;\n}\n\n.cv-custom-state-input {\n  width: 100%;\n  padding: 8px 12px;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  background: white;\n  font-size: 14px;\n}\n\n.cv-custom-state-input:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);\n}\n\n/* Toggles Container */\n.cv-toggles-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border-radius: 0.5rem;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.cv-toggle-card,\n.cv-tabgroup-card {\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n}\n\n.cv-toggle-card:last-child {\n  border-bottom: none;\n}\n\n.cv-toggle-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n}\n\n.cv-toggle-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0.125rem 0;\n}\n\n.cv-toggle-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n}\n\n.cv-toggle-label{\n  position: relative;\n  display: inline-block;\n  width: 2.75rem;\n  height: 1.5rem;\n  cursor: pointer;\n}\n\n.cv-toggle-input {\n  /* Only hide if it is part of a custom slider toggle */\n}\n.cv-toggle-label .cv-toggle-input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.cv-toggle-radios {\n  display: flex;\n  gap: 8px;\n}\n\n.cv-radio-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 0.85rem;\n  cursor: pointer;\n}\n\n.cv-radio-label input {\n  margin: 0;\n  opacity: 1;\n  width: auto;\n  height: auto;\n}\n\n/* Dark theme toggle switch styles */\n.cv-widget-theme-dark .cv-toggle-switch {\n  background: #4a5568;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch:hover {\n  background: #5a6578;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active {\n  background: #63b3ed;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch.cv-toggle-active:hover {\n  background: #4299e1;\n}\n\n/* Tab Groups Container */\n.cv-tab-groups-list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 0.5rem;\n  overflow: hidden;\n}\n\n/* Tab Group Card - Header (Navigation Headers toggle) */\n.cv-tabgroup-card.cv-tabgroup-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.75rem;\n  border-bottom: 0px;\n}\n\n.cv-tabgroup-card.cv-tabgroup-header .cv-tabgroup-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 1rem;\n}\n\n/* Navigation toggle icon container */\n.cv-nav-toggle-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cv-nav-icon {\n  width: 2rem;\n  height: 2rem;\n  color: rgba(0, 0, 0, 0.8);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: color 0.2s ease;\n}\n\n/* Logo box - centered grey box on its own row */\n.cv-tabgroup-logo-box {\n  width: 3.5rem;\n  height: 3.5rem;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-bottom: 0.5rem;\n}\n\n/* Title container for title alignment (without icon) */\n.cv-tabgroup-title-container {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Hover state for icon - apply to the entire tabgroup-row */\n.cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-nav-icon {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header:hover .cv-nav-icon {\n  color: #60a5fa;\n}\n\n/* Tab Group Card - Items */\n.cv-tabgroup-card.cv-tabgroup-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem;\n  background: white;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.cv-tabgroup-card.cv-tabgroup-item:last-child {\n  border-bottom: none;\n}\n\n/* Tab Group Info */\n.cv-tabgroup-info {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.cv-tabgroup-title {\n  font-weight: 500;\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.9);\n  margin: 0 0 0 0;\n}\n\n.cv-tabgroup-description {\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.6);\n  margin: 0;\n  line-height: 1.3;\n}\n\n/* Tab Group Label (for select dropdowns) */\n.cv-tabgroup-label {\n  font-size: 0.875rem;\n  color: rgba(0, 0, 0, 0.8);\n  margin: 0;\n  line-height: 1.4;\n  font-weight: 500;\n  display: block;\n  cursor: pointer;\n}\n\n/* Tab Group Select */\n.cv-tabgroup-select {\n  width: 100%;\n  border-radius: 0.5rem;\n  background: white;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  color: rgba(0, 0, 0, 0.9);\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  font-family: inherit;\n}\n\n.cv-tabgroup-select:hover {\n  border-color: rgba(0, 0, 0, 0.25);\n}\n\n.cv-tabgroup-select:focus {\n  outline: none;\n  border-color: #3e84f4;\n  box-shadow: 0 0 0 2px rgba(62, 132, 244, 0.2);\n}\n\n/* Modern Toggle Switch */\n.cv-toggle-switch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: 44px;\n  height: 24px;\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 9999px;\n  padding: 2px;\n  box-sizing: border-box;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  border: none;\n}\n\n.cv-toggle-switch input {\n  display: none;\n}\n\n.cv-toggle-switch .cv-switch-bg {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  background: rgba(0, 0, 0, 0.1);\n  transition: background-color 0.2s ease;\n  pointer-events: none;\n}\n\n.cv-toggle-switch .cv-switch-knob {\n  position: relative;\n  width: 20px;\n  height: 20px;\n  background: white;\n  border-radius: 50%;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n  transition: transform 0.2s ease;\n  z-index: 1;\n}\n\n.cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #3e84f4;\n}\n\n.cv-toggle-switch input:checked ~ .cv-switch-knob {\n  transform: translateX(20px);\n}\n\n/* Dark Theme - Tab Groups */\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-header {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-card.cv-tabgroup-item {\n  background: #101722;\n  border-bottom-color: rgba(255, 255, 255, 0.05);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-title {\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-description {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-label {\n  color: rgba(255, 255, 255, 0.8);\n}\n\n.cv-widget-theme-dark .cv-tab-groups-list {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select {\n  background: #101722;\n  border-color: rgba(255, 255, 255, 0.15);\n  color: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:hover {\n  border-color: rgba(255, 255, 255, 0.25);\n}\n\n.cv-widget-theme-dark .cv-tabgroup-select:focus {\n  border-color: #60a5fa;\n  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);\n}\n\n/* Dark Theme - Toggle Switch */\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-bg {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-toggle-switch .cv-switch-knob {\n  background: #e2e8f0;\n}\n\n.cv-widget-theme-dark .cv-toggle-switch input:checked + .cv-switch-bg {\n  background: #63b3ed;\n}\n\n.cv-modal-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0.75rem;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n}\n  \n.cv-footer-link {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  font-size: 0.75rem;\n  color: rgba(0, 0, 0, 0.5);\n  text-decoration: none;\n  transition: color 0.2s ease;\n}\n\n.cv-footer-link:hover {\n  color: #3e84f4;\n}\n\n.cv-footer-link svg {\n  opacity: 0.8;\n}\n\n.cv-widget-theme-dark .cv-footer-link {\n  color: rgba(255, 255, 255, 0.4);\n}\n\n.cv-widget-theme-dark .cv-footer-link:hover {\n  color: #60a5fa;\n}\n\n.cv-reset-btn,\n.cv-share-btn {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.375rem 0.75rem;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  border: none;\n}\n\n.cv-reset-btn {\n  color: rgba(0, 0, 0, 0.9);\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.cv-reset-btn:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n\n.cv-share-btn {\n  color: white;\n  background: #3e84f4;\n}\n\n.cv-share-btn:hover {\n  background: rgba(62, 132, 244, 0.9);\n}\n\n.cv-btn-icon {\n  width: 1rem;\n  height: 1rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 0.2s ease;\n}\n\n/* Dark theme custom state styles */\n\n\n/* Animations */\n@keyframes cv-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n\n\n/* Dark theme logo box */\n.cv-widget-theme-dark .cv-tabgroup-logo-box {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n/* Spinning animation for reset button icon */\n@keyframes cv-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(-360deg);\n  }\n}\n\n.cv-spinning {\n  animation: cv-spin 0.6s ease-in-out;\n}\n\n/* Hide widget icon in print view */\n@media print {\n  .cv-widget-icon {\n    display: none !important;\n  }\n}\n/* Widget Modal Tabs */\n.cv-modal-tabs {\n  display: flex;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n  margin-bottom: 0.5rem;\n}\n\n.cv-tab-content > .cv-content-section + .cv-content-section {\n  margin-top: 1.5rem;\n}\n\n.cv-modal-tab {\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.6);\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-modal-tab:hover {\n  color: rgba(0, 0, 0, 0.9);\n}\n\n.cv-modal-tab.active {\n  color: #3e84f4;\n  border-bottom-color: #3e84f4;\n}\n\n.cv-tab-content {\n  display: none;\n  animation: fadeIn 0.3s ease;\n}\n\n.cv-tab-content.active {\n  display: block;\n}\n\n/* Share Tab Content */\n.cv-share-content {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem 0;\n  align-items: center;\n  text-align: center;\n}\n\n.cv-share-instruction {\n  font-size: 0.9rem;\n  color: rgba(0, 0, 0, 0.7);\n  margin-bottom: 1rem;\n}\n\n.cv-share-action-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 12px 16px;\n  background: white;\n  color: #333;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.9rem;\n  font-weight: 500;\n  transition: all 0.2s ease;\n}\n\n.cv-share-action-btn:hover {\n  background: #f8f9fa;\n  border-color: rgba(0, 0, 0, 0.25);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.cv-share-action-btn.primary {\n  background: #3e84f4;\n  color: white;\n  border-color: #3e84f4;\n}\n\n.cv-share-action-btn.primary:hover {\n  background: #2b74e6;\n  border-color: #2b74e6;\n}\n\n.cv-done-btn {\n  padding: 0.375rem 1rem;\n  background: #3e84f4;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: 0.875rem;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.cv-done-btn:hover {\n  background: #2b74e6;\n}\n\n/* Dark Theme Adjustments */\n.cv-widget-theme-dark .cv-modal-tabs {\n  border-color: rgba(255, 255, 255, 0.1);\n}\n\n.cv-widget-theme-dark .cv-modal-tab {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.cv-widget-theme-dark .cv-modal-tab:hover {\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.cv-widget-theme-dark .cv-modal-tab.active {\n  color: #60a5fa;\n  border-bottom-color: #60a5fa;\n}\n\n.cv-widget-theme-dark .cv-share-instruction {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.cv-widget-theme-dark .cv-share-action-btn {\n  background: #1a202c;\n  color: white;\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n.cv-widget-theme-dark .cv-share-action-btn:hover {\n  background: #2d3748;\n}\n\n.cv-widget-theme-dark .cv-share-action-btn.primary {\n  background: #3e84f4;\n  border-color: #3e84f4;\n}\n\n.cv-widget-theme-dark .cv-share-action-btn.primary:hover {\n  background: #2b74e6;\n}\n\n/* Intro Callout styles */\n.cv-widget-callout {\n  position: fixed;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  padding: 12px 16px;\n  width: 260px;\n  z-index: 9999;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  animation: cvFadeIn 0.3s ease-out;\n  pointer-events: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.cv-widget-callout-text {\n  font-size: 0.9rem;\n  color: #333;\n  margin: 0;\n  line-height: 1.4;\n}\n\n.cv-widget-callout-close {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  width: 18px;\n  height: 18px;\n  border: none;\n  background: rgba(0,0,0,0.05);\n  color: #666;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  font-size: 14px;\n  line-height: 1;\n  padding: 0;\n  transition: all 0.2s ease;\n}\n\n.cv-widget-callout-close:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n/* Callout positioning and arrow */\n.cv-widget-callout::after {\n  content: '';\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  background: white;\n  transform: rotate(45deg);\n  box-shadow: 1px 1px 1px rgba(0,0,0,0.05); /* subtle shadow for arrow */\n}\n\n/* Top-Right Widget -> Callout to the left */\n.cv-widget-callout.cv-pos-top-right {\n  top: 20px;\n  right: 64px;\n}\n.cv-widget-callout.cv-pos-top-right::after {\n  top: 13px;\n  right: -5px;\n  box-shadow: 1px -1px 1px rgba(0,0,0,0.05);\n  transform: rotate(45deg);\n}\n\n/* Bottom-Right Widget -> Callout to the left */\n.cv-widget-callout.cv-pos-bottom-right {\n  bottom: 20px;\n  right: 64px;\n}\n.cv-widget-callout.cv-pos-bottom-right::after {\n  bottom: 13px;\n  right: -5px;\n}\n\n/* Top-Left Widget -> Callout to the right */\n.cv-widget-callout.cv-pos-top-left {\n  top: 20px;\n  left: 64px;\n}\n.cv-widget-callout.cv-pos-top-left::after {\n  top: 13px;\n  left: -5px;\n}\n\n/* Bottom-Left Widget -> Callout to the right */\n.cv-widget-callout.cv-pos-bottom-left {\n  bottom: 20px;\n  left: 64px;\n}\n.cv-widget-callout.cv-pos-bottom-left::after {\n  bottom: 13px;\n  left: -5px;\n}\n\n/* Middle-Right Widget -> Callout to the left */\n.cv-widget-callout.cv-pos-middle-right {\n  top: 50%;\n  right: 64px;\n  transform: translateY(-50%);\n}\n.cv-widget-callout.cv-pos-middle-right::after {\n  top: 50%;\n  right: -5px;\n  transform: translateY(-50%) rotate(45deg);\n}\n\n/* Middle-Left Widget -> Callout to the right */\n.cv-widget-callout.cv-pos-middle-left {\n  top: 50%;\n  left: 64px;\n  transform: translateY(-50%);\n}\n.cv-widget-callout.cv-pos-middle-left::after {\n  top: 50%;\n  left: -5px;\n  transform: translateY(-50%) rotate(45deg);\n}\n\n/* Pulse animation utility */\n.cv-widget-icon.cv-pulse {\n  animation: cv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  box-shadow: 0 0 0 0 rgba(62, 132, 244, 0.7);\n}\n\n@keyframes cv-pulse {\n  0% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(62, 132, 244, 0.7);\n  }\n  70% {\n    transform: scale(1.05);\n    box-shadow: 0 0 0 10px rgba(62, 132, 244, 0);\n  }\n  100% {\n    transform: scale(1);\n    box-shadow: 0 0 0 0 rgba(62, 132, 244, 0);\n  }\n}\n\n/* Dark Theme */\n.cv-widget-theme-dark .cv-widget-callout {\n    background: #1f2937; /* Tailwind gray-800 mostly */\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n    border: 1px solid rgba(255,255,255,0.1);\n}\n.cv-widget-theme-dark .cv-widget-callout::after {\n    background: #1f2937;\n    border-top: 1px solid rgba(255,255,255,0.1);\n    border-right: 1px solid rgba(255,255,255,0.1);\n}\n.cv-widget-theme-dark .cv-widget-callout-text {\n    color: #e5e7eb;\n}\n.cv-widget-theme-dark .cv-widget-callout-close {\n    background: rgba(255,255,255,0.1);\n    color: #9ca3af;\n}\n.cv-widget-theme-dark .cv-widget-callout-close:hover {\n    background: rgba(255,255,255,0.2);\n    color: #fff;\n}\n";
-/**
- * Inject widget styles into the document head
- */
-export declare function injectWidgetStyles(): void;
-//# sourceMappingURL=widget-styles.d.ts.map

package/dist/types/styles/widget-styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-styles.d.ts","sourceRoot":"","sources":["../../../src/styles/widget-styles.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,aAAa,wgzBAmxCzB,CAAC;AAEF;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAQzC"}

package/dist/types/utils/scroll-manager.d.ts

@@ -1,26 +0,0 @@
-export declare class ScrollManager {
-    /**
-     * Finds the highest tab group currently in the viewport.
-     * This is intended to be called BEFORE the state changes, to identify which element to scroll to.
-     * @returns The HTMLElement of the highest visible tab group, or null if none are found.
-     */
-    static findHighestVisibleTabGroup(): HTMLElement | null;
-    /**
-     * Scrolls the page to align the given tab group's header (or the group itself)
-     * to the top of the viewport, accounting for a fixed/sticky page header.
-     * This should be called AFTER the content has changed.
-     * @param groupEl The tab group element to scroll to.
-     */
-    static scrollToTabGroup(groupEl: HTMLElement): void;
-    /**
-     * Adjusts the scroll position to keep a specific element in the same visual location
-     * after a content change. This is useful for preventing the page from jumping when
-     * content above the element is added or removed.
-     * @param scrollAnchor An object containing the element to anchor and its initial top position.
-     */
-    static handleScrollAnchor(scrollAnchor: {
-        element: HTMLElement;
-        top: number;
-    }): void;
-}
-//# sourceMappingURL=scroll-manager.d.ts.map

package/dist/types/utils/scroll-manager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scroll-manager.d.ts","sourceRoot":"","sources":["../../../src/utils/scroll-manager.ts"],"names":[],"mappings":"AAEA,qBAAa,aAAa;IACxB;;;;OAIG;WACW,0BAA0B,IAAI,WAAW,GAAG,IAAI;IA8C9D;;;;;OAKG;WACW,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IA8B1D;;;;;OAKG;WACW,kBAAkB,CAAC,YAAY,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI;CAe5F"}