@convirza/dialer-sdk 1.0.0

package/dist/ui/ConvirzaDialerElement.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const CSS = "\n:host {\n  --primary-color: #ff6b35;\n  --accent-color: #22c55e;\n  --danger-color: #ef4444;\n\n  /* Dark theme */\n  --bg-primary-dark: #1a1a1a;\n  --bg-secondary-dark: #2d2d2d;\n  --text-primary-dark: #ffffff;\n  --text-secondary-dark: #9ca3af;\n  --border-dark: #3d3d3d;\n\n  /* Light theme */\n  --bg-primary-light: #ffffff;\n  --bg-secondary-light: #f9fafb;\n  --text-primary-light: #1f2937;\n  --text-secondary-light: #6b7280;\n  --border-light: #e5e7eb;\n\n  position: fixed;\n  z-index: 9999;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n:host([position=\"top-left\"]) { top: 24px; left: 24px; }\n:host([position=\"top-right\"]) { top: 24px; right: 24px; }\n:host([position=\"bottom-left\"]) { bottom: 24px; left: 24px; }\n:host([position=\"bottom-right\"]) { bottom: 24px; right: 24px; }\n\n/* Dark theme (default) */\n:host([theme=\"dark\"]) {\n  --bg-primary: var(--bg-primary-dark);\n  --bg-secondary: var(--bg-secondary-dark);\n  --text-primary: var(--text-primary-dark);\n  --text-secondary: var(--text-secondary-dark);\n  --border-color: var(--border-dark);\n}\n\n/* Light theme */\n:host([theme=\"light\"]) {\n  --bg-primary: var(--bg-primary-light);\n  --bg-secondary: var(--bg-secondary-light);\n  --text-primary: var(--text-primary-light);\n  --text-secondary: var(--text-secondary-light);\n  --border-color: var(--border-light);\n}\n\n/* Default to dark if no theme set */\n:host {\n  --bg-primary: var(--bg-primary-dark);\n  --bg-secondary: var(--bg-secondary-dark);\n  --text-primary: var(--text-primary-dark);\n  --text-secondary: var(--text-secondary-dark);\n  --border-color: var(--border-dark);\n}\n\n.dialer-fab {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--primary-color);\n  border: none;\n  color: white;\n  cursor: grab;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.3);\n  transition: all 0.3s ease;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.dialer-fab:active {\n  cursor: grabbing;\n}\n\n.dialer-fab:hover {\n  transform: scale(1.05);\n  box-shadow: 0 12px 30px rgba(0,0,0,0.4);\n}\n\n.call-indicator {\n  position: absolute;\n  top: 4px;\n  right: 4px;\n  width: 12px;\n  height: 12px;\n  background: var(--accent-color);\n  border-radius: 50%;\n  border: 2px solid white;\n  animation: pulse 2s infinite;\n}\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.5; }\n}\n\n.dialer-panel {\n  width: 380px;\n  height: 750px;\n  background: var(--bg-primary);\n  border-radius: 12px;\n  box-shadow: 0 20px 60px rgba(0,0,0,0.4);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n:host([state=\"expanded\"]) .dialer-panel {\n  display: flex;\n  animation: slideUp 0.3s ease;\n}\n\n:host([state=\"expanded\"]) .dialer-fab {\n  display: none;\n}\n\n@keyframes slideUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dialer-header {\n  padding: 12px 16px;\n  background: var(--primary-color);\n  color: white;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: move;\n  cursor: grab;\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.dialer-header:active {\n  cursor: grabbing;\n}\n\n.header-brand {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n  font-size: 15px;\n  letter-spacing: 0.3px;\n}\n\n.brand-logo {\n  max-height: 28px;\n  max-width: 120px;\n  object-fit: contain;\n}\n\n.header-controls {\n  display: flex;\n  gap: 8px;\n}\n\n.header-btn {\n  width: 24px;\n  height: 24px;\n  background: rgba(255,255,255,0.2);\n  border: none;\n  border-radius: 4px;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.header-btn:hover {\n  background: rgba(255,255,255,0.3);\n}\n\n.dialer-body {\n  padding: 24px 20px 0;\n  background: var(--bg-primary);\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-height: 0;\n  contain: layout style;\n  will-change: contents;\n  transition: opacity 0.15s ease;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n.brand-section {\n  text-align: center;\n  padding: 16px 0 8px;\n  display: flex;\n  justify-content: center;\n}\n\n.brand-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--bg-secondary);\n  border-radius: 10px;\n  border: 1px solid var(--border-color);\n}\n\n.brand-icon img {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  border-radius: 8px;\n}\n\n.brand-icon svg {\n  width: 24px;\n  height: 24px;\n  color: var(--primary-color);\n}\n\n.brand-name {\n  display: none;\n}\n\n.input-section {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 12px;\n  margin-bottom: 20px;\n  padding: 0 4px;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n.country-selector {\n  position: relative;\n  z-index: 100;\n}\n\n.country-btn {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  padding: 6px 8px;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  transition: all 0.2s;\n}\n\n.country-btn:hover {\n  background: var(--border-color);\n}\n\n.country-flag {\n  font-size: 16px;\n  line-height: 1;\n}\n\n.country-code {\n  font-size: 13px;\n  font-weight: 500;\n}\n\n.dropdown-icon {\n  opacity: 0.6;\n  transition: transform 0.2s;\n}\n\n.country-dropdown-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: transparent;\n  z-index: 9999;\n  pointer-events: auto;\n}\n\n.country-dropdown {\n  position: absolute;\n  background: #1a1a1a;\n  border: 1px solid #444;\n  border-radius: 8px;\n  box-shadow: 0 6px 16px rgba(0,0,0,0.6);\n  max-height: 120px;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  -webkit-overflow-scrolling: touch;\n  z-index: 10000;\n  width: 200px;\n  pointer-events: auto;\n}\n\n.country-dropdown::-webkit-scrollbar {\n  width: 6px;\n}\n\n.country-dropdown::-webkit-scrollbar-track {\n  background: rgba(255,255,255,0.05);\n  border-radius: 3px;\n  margin: 4px 0;\n}\n\n.country-dropdown::-webkit-scrollbar-thumb {\n  background: rgba(255,255,255,0.4);\n  border-radius: 3px;\n}\n\n.country-dropdown::-webkit-scrollbar-thumb:hover {\n  background: rgba(255,255,255,0.5);\n}\n\n.country-option {\n  width: 100%;\n  background: transparent;\n  border: none;\n  padding: 9px 12px;\n  color: var(--text-primary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 13px;\n  transition: background 0.12s;\n  text-align: left;\n  white-space: nowrap;\n}\n\n.country-option:hover {\n  background: rgba(255,255,255,0.12);\n}\n\n.country-option .country-flag {\n  font-size: 18px;\n}\n\n.country-option .country-name {\n  flex: 1;\n  font-weight: 500;\n}\n\n.country-option .country-code {\n  opacity: 0.7;\n  font-size: 12px;\n  font-weight: 500;\n}\n\n.phone-input-wrapper {\n  flex: 1;\n  position: relative;\n}\n\n.phone-input {\n  width: 100%;\n  min-width: 150px;\n  background: transparent;\n  background-color: transparent;\n  border: none;\n  color: var(--text-primary);\n  font-size: 22px;\n  font-weight: 300;\n  text-align: center;\n  outline: none;\n  letter-spacing: 1px;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.phone-input::placeholder {\n  color: var(--text-secondary);\n  opacity: 0.5;\n}\n\n.toggle-btn {\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  padding: 8px 10px;\n  color: var(--text-secondary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.toggle-btn:hover {\n  background: var(--bg-primary);\n}\n\n.toggle-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.dialpad {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n  margin-bottom: 12px;\n  margin-top: 0;\n  padding: 0 16px 12px;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  position: relative;\n  z-index: 0;\n  animation: fadeIn 0.2s ease;\n}\n\n.dialpad-btn {\n  aspect-ratio: 1;\n  background: transparent;\n  border: none;\n  color: var(--text-primary);\n  border-radius: 50%;\n  font-size: 24px;\n  font-weight: 300;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 0;\n  position: relative;\n  min-height: 50px;\n  max-height: 70px;\n}\n\n.dialpad-btn:hover {\n  background: var(--bg-secondary);\n}\n\n.dialpad-btn:active {\n  transform: scale(0.95);\n}\n\n.dialpad-number {\n  font-size: 24px;\n  line-height: 1;\n  font-weight: 300;\n}\n\n.dialpad-letters {\n  font-size: 8px;\n  color: var(--text-secondary);\n  letter-spacing: 1.2px;\n  text-transform: uppercase;\n  margin-top: 2px;\n}\n\n.call-btn-wrapper {\n  display: flex;\n  justify-content: center;\n  padding: 8px 0 12px;\n}\n\n.call-btn {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background: var(--accent-color);\n  border: none;\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);\n  transition: all 0.2s;\n}\n\n.call-btn:hover {\n  background: #16a34a;\n  transform: scale(1.05);\n}\n\n.call-btn:active {\n  transform: scale(0.95);\n}\n\n.call-btn:disabled {\n  background: var(--text-secondary);\n  opacity: 0.5;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.active-call {\n  padding: 0;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: space-around;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.call-info {\n  padding: 40px 20px 20px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n}\n\n.active-call.compact .call-info {\n  padding: 20px 16px 12px;\n  gap: 8px;\n}\n\n.keypad-header {\n  padding: 10px 16px;\n  text-align: center;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  font-size: 14px;\n  color: var(--text-secondary);\n}\n\n.keypad-header-number {\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.keypad-header-sep {\n  opacity: 0.4;\n  font-size: 12px;\n}\n\n.keypad-header-duration {\n  font-weight: 400;\n}\n\n.dialed-digits {\n  font-size: 18px;\n  font-weight: 500;\n  color: var(--text-primary);\n  letter-spacing: 3px;\n  font-variant-numeric: tabular-nums;\n}\n\n.call-number {\n  font-size: 32px;\n  font-weight: 400;\n  color: var(--text-primary);\n  letter-spacing: 1px;\n  order: 1;\n}\n\n.active-call.compact .call-number {\n  font-size: 24px;\n}\n\n.call-duration {\n  font-size: 16px;\n  color: var(--text-primary);\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  order: 2;\n}\n\n.duration-indicator {\n  width: 8px;\n  height: 8px;\n  background: var(--accent-color);\n  border-radius: 50%;\n  display: inline-block;\n  animation: pulse 2s infinite;\n}\n\n.call-status {\n  font-size: 13px;\n  color: var(--text-secondary);\n  text-transform: capitalize;\n  order: 3;\n}\n\n.call-controls {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 40px 20px 20px;\n}\n\n.active-call.compact .call-controls {\n  padding: 16px;\n  gap: 0;\n}\n\n.compact-controls {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 16px;\n  padding: 16px;\n}\n\n.compact-controls-icons {\n  display: flex;\n  gap: 8px;\n}\n\n.compact-controls-icons:first-child {\n  justify-content: flex-end;\n}\n\n.compact-controls-icons:last-child {\n  justify-content: flex-start;\n}\n\n.compact-icon-btn {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  border: none;\n  background: rgba(255, 255, 255, 0.08);\n  color: var(--text-primary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n}\n\n.compact-icon-btn:hover {\n  background: rgba(255, 255, 255, 0.12);\n  transform: scale(1.05);\n}\n\n.compact-icon-btn.active {\n  background: var(--primary-color);\n  color: white;\n}\n\n.compact-icon-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.compact-end-btn {\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  border: none;\n  background: #ef4444; /* Always red for destructive action */\n  color: white;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  flex-shrink: 0;\n}\n\n.compact-end-btn:hover {\n  transform: scale(1.05);\n  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);\n}\n\n.controls-row {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n  align-items: center;\n}\n\n.controls-row-end {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  margin-top: 16px;\n  padding: 0 20px;\n}\n\n.control-btn {\n  width: 60px;\n  height: 60px;\n  border-radius: 50%;\n  border: none;\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  justify-self: center;\n  pointer-events: auto;\n  position: relative;\n  z-index: 10;\n}\n\n.active-call.compact .control-btn {\n  width: 50px;\n  height: 50px;\n}\n\n.control-btn:hover {\n  background: var(--border-color);\n  transform: scale(1.05);\n}\n\n.control-btn.active {\n  background: var(--primary-color);\n  color: white;\n}\n\n.control-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n  transform: none;\n  pointer-events: none;\n}\n\n.btn-label {\n  display: none;\n}\n\n.end-btn {\n  width: 68px;\n  height: 68px;\n  background: var(--danger-color);\n  color: white;\n  border-radius: 50%;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s;\n  justify-self: center;\n}\n\n.end-btn:hover {\n  background: #dc2626;\n  transform: scale(1.05);\n}\n\n.end-btn:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n  transform: none;\n}\n\n.branding {\n  padding: 10px;\n  text-align: center;\n  font-size: 10px;\n  color: var(--text-secondary);\n  border-top: 1px solid var(--border-color);\n  background: var(--bg-primary);\n  flex-shrink: 0;\n}\n\n/* Tabs Navigation */\n.tabs-nav {\n  display: flex;\n  background: var(--bg-secondary);\n  border-bottom: 1px solid var(--border-color);\n  // margin: 0 0 16px 0;\n  flex-shrink: 0;\n}\n\n.tab-btn {\n  flex: 1;\n  padding: 12px 8px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--text-secondary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  transition: all 0.2s;\n}\n\n.tab-btn:hover {\n  background: rgba(255,255,255,0.05);\n}\n\n.tab-btn.active {\n  color: var(--primary-color);\n  border-bottom-color: var(--primary-color);\n}\n\n.tab-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n/* History View */\n.history-view {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  animation: fadeIn 0.2s ease;\n  overflow: hidden;\n  margin: -24px -20px 0;\n  position: relative;\n}\n\n/* History List */\n.history-list {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  margin: 0 -20px;\n  position: relative;\n}\n\n.history-list.updating {\n  opacity: 1;\n}\n\n.history-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px 32px;\n  border-bottom: 1px solid var(--border-color);\n  cursor: pointer;\n  transition: background 0.15s ease;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n.history-item:hover {\n  background: var(--bg-secondary);\n}\n\n.history-item.selected {\n  background: var(--bg-secondary);\n  border-left: 3px solid var(--primary-color);\n}\n\n.history-icon {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--bg-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-secondary);\n  flex-shrink: 0;\n}\n\n.history-icon.missed {\n  color: var(--danger-color);\n}\n\n.history-icon.outbound {\n  color: var(--primary-color);\n}\n\n.history-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.history-number {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-primary);\n  margin-bottom: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.history-status {\n  font-size: 12px;\n  color: var(--text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.history-status.outbound {\n  color: var(--primary-color);\n}\n\n.history-time {\n  font-size: 12px;\n  color: var(--text-secondary);\n  text-align: right;\n  flex-shrink: 0;\n  white-space: nowrap;\n  margin-left: 8px;\n}\n\n.history-duration {\n  font-size: 11px;\n  color: var(--text-secondary);\n  display: block;\n  margin-top: 2px;\n}\n\n.call-back-container {\n  position: sticky;\n  bottom: 0;\n  z-index: 10;\n}\n\n.call-back-btn {\n  width: 100%;\n  padding: 16px 20px;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 0;\n  font-size: 16px;\n  font-weight: 600;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  transition: opacity 0.2s ease;\n}\n\n.call-back-btn:hover {\n  opacity: 0.95;\n}\n\n.call-back-btn:active {\n  opacity: 0.85;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  color: var(--text-secondary);\n  height: 100%;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n}\n\n.empty-state svg {\n  width: 48px;\n  height: 48px;\n  margin-bottom: 16px;\n  opacity: 0.5;\n}\n\n.empty-state-text {\n  font-size: 14px;\n}\n\n/* Bottom Navigation */\n.bottom-nav {\n  display: flex;\n  background: var(--bg-primary);\n  border-top: 1px solid var(--border-color);\n  flex-shrink: 0;\n}\n\n.nav-btn {\n  flex: 1;\n  padding: 12px 8px 10px;\n  background: transparent;\n  border: none;\n  color: var(--text-secondary);\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.nav-btn:hover {\n  background: var(--bg-primary);\n}\n\n.nav-btn.active {\n  color: var(--primary-color);\n}\n\n.nav-btn svg {\n  width: 24px;\n  height: 24px;\n}\n\n.dialer-footer {\n  padding: 6px 16px 4px;\n  text-align: center;\n  background: var(--bg-primary);\n  flex-shrink: 0;\n}\n\n.footer-link {\n  color: var(--text-secondary);\n  font-size: 10px;\n  text-decoration: none;\n  opacity: 0.6;\n  transition: opacity 0.2s;\n  line-height: 1;\n}\n\n.footer-link:hover {\n  opacity: 0.9;\n  text-decoration: underline;\n}\n\n@media (max-width: 420px) {\n  .dialer-panel { width: calc(100vw - 48px); }\n}\n\n/* Incoming Call Modal - Compact Toast Style */\n.incoming-call-overlay {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n  z-index: 10000;\n  pointer-events: none;\n  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.incoming-call-modal {\n  background: var(--bg-primary);\n  border-radius: 20px;\n  padding: 24px;\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);\n  width: 320px;\n  pointer-events: auto;\n  backdrop-filter: blur(20px);\n  -webkit-backdrop-filter: blur(20px);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.incoming-call-info {\n  text-align: center;\n  margin-bottom: 20px;\n}\n\n.incoming-call-label {\n  font-size: 11px;\n  color: var(--text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 1.2px;\n  font-weight: 600;\n  margin-bottom: 8px;\n  opacity: 0.8;\n}\n\n.incoming-call-name {\n  font-size: 16px;\n  font-weight: 700;\n  color: var(--text-primary);\n  margin-bottom: 4px;\n  letter-spacing: -0.2px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.incoming-call-number {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--text-primary);\n  letter-spacing: -0.3px;\n  line-height: 1.3;\n}\n\n.incoming-call-actions {\n  display: flex;\n  gap: 12px;\n  justify-content: center;\n}\n\n.incoming-call-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  padding: 0;\n  border: none;\n  background: none;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  flex: 1;\n}\n\n.incoming-call-btn::before {\n  content: '';\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.incoming-call-btn svg {\n  position: absolute;\n  top: 12px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 28px;\n  height: 28px;\n  pointer-events: none;\n}\n\n.incoming-call-btn span {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--text-primary);\n  margin-top: 52px;\n}\n\n.answer-btn::before {\n  background: var(--accent-color);\n  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);\n}\n\n.answer-btn svg {\n  color: white;\n}\n\n.answer-btn:hover::before {\n  background: #1ea94f;\n  transform: scale(1.08);\n  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.5);\n}\n\n.answer-btn:active::before {\n  transform: scale(1.02);\n}\n\n.reject-btn::before {\n  background: var(--danger-color);\n  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);\n}\n\n.reject-btn svg {\n  color: white;\n}\n\n.reject-btn:hover::before {\n  background: #dc2626;\n  transform: scale(1.08);\n  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.5);\n}\n\n.reject-btn:active::before {\n  transform: scale(1.02);\n}\n\n@keyframes slideInRight {\n  0% {\n    opacity: 0;\n    transform: translateX(100px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n@media (max-width: 420px) {\n  .incoming-call-overlay {\n    top: 16px;\n    right: 16px;\n    left: 16px;\n  }\n  .incoming-call-modal {\n    width: auto;\n  }\n}\n\n/* In-Call Keypad Overlay */\n.incall-keypad-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10001;\n  animation: fadeIn 0.2s ease-out;\n}\n\n.incall-keypad-modal {\n  background: var(--bg-primary);\n  border-radius: 20px;\n  width: 360px;\n  max-width: calc(100vw - 48px);\n  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  animation: slideUp 0.3s ease-out;\n}\n\n.incall-keypad-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px 24px;\n  border-bottom: 1px solid var(--border-color);\n}\n\n.incall-keypad-header h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--text-primary);\n}\n\n.incall-dialpad {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  padding: 24px;\n}\n\n/* Inline keypad in active call */\n.incall-keypad {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 12px 16px 16px;\n  margin-top: 0;\n}\n\n.incall-keypad .dialpad-btn {\n  min-height: 56px;\n  font-size: 20px;\n  background: transparent;\n  transition: all 0.15s;\n}\n\n.incall-keypad .dialpad-btn:hover {\n  background: rgba(255, 255, 255, 0.08);\n  transform: scale(1.02);\n}\n\n.incall-keypad .dialpad-btn:active {\n  transform: scale(0.96);\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.incall-keypad .dialpad-number {\n  font-size: 24px;\n  font-weight: 300;\n}\n\n.incall-keypad .dialpad-letters {\n  font-size: 10px;\n  opacity: 0.6;\n  letter-spacing: 1px;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n/* Account View */\n.account-view {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex: 1;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  padding-bottom: 16px;\n}\n\n.account-section {\n  margin-bottom: 20px;\n  padding-bottom: 20px;\n  border-bottom: 1px solid var(--border-color);\n  overflow: hidden;\n}\n\n.account-section:last-child {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.account-section-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-primary);\n  margin: 0 0 16px 0;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.device-selector {\n  display: grid;\n  grid-template-columns: minmax(90px, auto) auto minmax(0, 1fr);\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 16px;\n  width: 100%;\n}\n\n.device-selector:last-child {\n  margin-bottom: 0;\n}\n\n.device-label {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--text-primary);\n  white-space: nowrap;\n}\n\n.device-label svg {\n  color: var(--text-secondary);\n}\n\n.device-select {\n  grid-column: 3;\n  padding: 8px 10px;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  transition: border-color 0.2s;\n  width: 100%;\n  min-width: 0;\n  max-height: 150px;\n  overflow-y: auto;\n}\n\n.device-select:hover {\n  border-color: var(--primary-color);\n}\n\n.device-select:focus {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);\n}\n\n.device-select option {\n  padding: 8px;\n  font-size: 12px;\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n}\n\n.device-select-btn {\n  padding: 6px;\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  background: var(--bg-secondary);\n  color: var(--text-secondary);\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  flex-shrink: 0;\n}\n\n.device-select-btn:hover {\n  background: var(--bg-primary);\n  color: var(--primary-color);\n  border-color: var(--primary-color);\n}\n\n.account-info {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.account-info-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px;\n  background: var(--bg-secondary);\n  border-radius: 8px;\n  gap: 12px;\n  min-width: 0;\n}\n\n.account-info-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--text-secondary);\n  flex-shrink: 0;\n}\n\n.account-info-value {\n  font-size: 13px;\n  color: var(--text-primary);\n  font-weight: 500;\n  text-align: right;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.status-connected {\n  color: var(--accent-color);\n}\n\n.status-disconnected {\n  color: var(--text-secondary);\n}\n\n.account-section-subtitle {\n  font-size: 13px;\n  color: var(--text-secondary);\n  margin: -8px 0 20px 0;\n  line-height: 1.5;\n}\n\n.device-row {\n  display: grid;\n  grid-template-columns: 100px 1fr;\n  align-items: center;\n  gap: 16px;\n  padding: 14px 0;\n  border-bottom: 1px solid var(--border-color);\n}\n\n.device-row:last-child {\n  border-bottom: none;\n}\n\n.device-row-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.device-row-select {\n  padding: 11px 14px;\n  border: 1.5px solid var(--border-color);\n  border-radius: 8px;\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 12px center;\n  padding-right: 40px;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\n.device-row-select:hover {\n  border-color: var(--primary-color);\n  background-color: var(--bg-primary);\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.device-row-select:focus {\n  outline: none;\n  border-color: var(--primary-color);\n  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);\n}\n\n.device-row-select option {\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  padding: 12px;\n  font-weight: 500;\n}\n\n/* Call Quality Indicator */\n.call-quality {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  padding: 4px 8px;\n  border-radius: 6px;\n  margin-top: 4px;\n  background: var(--bg-secondary);\n  width: fit-content;\n}\n\n.quality-bars {\n  font-size: 10px;\n  letter-spacing: 1px;\n}\n\n.quality-label {\n  text-transform: capitalize;\n  font-weight: 600;\n}\n\n.quality-excellent {\n  color: #10b981;\n  background: rgba(16, 185, 129, 0.1);\n}\n\n.quality-good {\n  color: var(--accent-color);\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.quality-fair {\n  color: #f59e0b;\n  background: rgba(245, 158, 11, 0.1);\n}\n\n.quality-poor {\n  color: var(--danger-color);\n  background: rgba(239, 68, 68, 0.1);\n}\n\n/* Park View */\n.park-view {\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex: 1;\n  backface-visibility: hidden;\n  transform: translateZ(0);\n  padding-bottom: 16px;\n}\n\n.park-header {\n  margin-bottom: 16px;\n}\n\n.park-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--text-primary);\n  margin: 0 0 4px 0;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.park-subtitle {\n  font-size: 12px;\n  color: var(--text-secondary);\n  margin: 0;\n}\n\n.park-list,\n.park-slots {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.park-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.park-item:hover {\n  background: var(--bg-hover);\n  border-color: var(--primary-color);\n}\n\n.park-item.occupied {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.park-item.occupied:hover {\n  background: var(--bg-secondary);\n  border-color: var(--border-color);\n}\n\n.park-item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  background: var(--primary-color-light);\n  border-radius: 50%;\n  color: var(--primary-color);\n  flex-shrink: 0;\n}\n\n.park-item-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.park-item-label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-primary);\n  margin-bottom: 2px;\n}\n\n.park-item-extension {\n  font-size: 12px;\n  color: var(--text-secondary);\n}\n\n.park-item-details {\n  margin-top: 6px;\n  padding-top: 6px;\n  border-top: 1px solid var(--border-color);\n}\n\n.parked-caller {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--primary-color);\n  margin-bottom: 2px;\n}\n\n.parked-meta {\n  font-size: 11px;\n  color: var(--text-secondary);\n}\n\n.park-item-status {\n  flex-shrink: 0;\n}\n\n.status-badge {\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.status-badge.available {\n  color: var(--accent-color);\n  background: rgba(34, 197, 94, 0.1);\n}\n\n.status-badge.occupied {\n  color: var(--text-secondary);\n  background: var(--bg-secondary);\n}\n\n/* Parked Call Item */\n.parked-call-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  margin-bottom: 8px;\n}\n\n.parked-call-icon {\n  width: 40px;\n  height: 40px;\n  background: rgba(255, 107, 53, 0.1);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--primary-color);\n  flex-shrink: 0;\n}\n\n.parked-call-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.parked-call-number {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--text-primary);\n  margin-bottom: 4px;\n}\n\n.parked-call-meta {\n  font-size: 12px;\n  color: var(--text-secondary);\n}\n\n.retrieve-btn {\n  padding: 8px 20px;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  flex-shrink: 0;\n}\n\n.retrieve-btn:hover {\n  background: #ff5722;\n  transform: scale(1.02);\n}\n\n/* Park Footer */\n.park-footer {\n  margin-top: 24px;\n  padding-top: 16px;\n  border-top: 1px solid var(--border-color);\n}\n\n.park-footer-text {\n  font-size: 12px;\n  color: var(--text-secondary);\n  margin: 0 0 12px 0;\n}\n\n.park-slot-buttons {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}\n\n.park-slot-btn {\n  padding: 8px 16px;\n  background: var(--bg-secondary);\n  border: 1px solid var(--border-color);\n  border-radius: 6px;\n  color: var(--text-primary);\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.park-slot-btn:hover {\n  background: var(--primary-color);\n  color: white;\n  border-color: var(--primary-color);\n}\n\n/* Transfer panel */\n.transfer-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 12px;\n  flex: 1;\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--text-primary);\n}\n\n.back-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--primary-color);\n  padding: 0;\n  font-size: 13px;\n  flex-shrink: 0;\n}\n\n.back-btn:hover {\n  opacity: 0.8;\n}\n\n.transfer-input {\n  padding: 9px 12px;\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  font-size: 14px;\n  outline: none;\n  background: var(--bg-secondary);\n  color: var(--text-primary);\n  transition: border-color 0.2s;\n}\n\n.transfer-input:focus {\n  border-color: var(--primary-color);\n}\n\n.transfer-ext-list {\n  flex: 1;\n  overflow-y: auto;\n  max-height: 150px;\n}\n\n.transfer-ext-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 6px;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.transfer-ext-item:hover {\n  background: var(--bg-hover, rgba(0,0,0,0.05));\n}\n\n.ext-name {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--text-primary);\n}\n\n.ext-num {\n  font-size: 11px;\n  color: var(--text-secondary);\n  font-family: monospace;\n}\n\n.transfer-confirm-btn {\n  padding: 10px;\n  background: var(--primary-color);\n  color: #fff;\n  border: none;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: opacity 0.2s;\n}\n\n.transfer-confirm-btn:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.transfer-confirm-btn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.transfer-empty {\n  font-size: 12px;\n  color: var(--text-secondary);\n  padding: 8px;\n  text-align: center;\n}\n\n/* Notification permission row */\n.notification-permission {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 12px;\n  font-size: 13px;\n  color: var(--text-primary);\n}\n\n.status-ok {\n  color: var(--accent-color, #22c55e);\n  font-weight: 600;\n}\n\n/* Phone Number Selector */\n.phone-number-selector {\n  margin-bottom: 16px;\n  position: relative;\n  width: 100%;\n}\n\n.account-phone-selector {\n  margin-top: 12px;\n}\n\n.phone-number-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  margin-bottom: 8px;\n  color: var(--text-primary);\n}\n\n.label-hint {\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--text-secondary);\n  font-style: italic;\n}\n\n.phone-number-dropdown-trigger {\n  width: 100%;\n  padding: 12px 16px;\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  background: var(--bg-secondary);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  transition: border-color 0.2s;\n}\n\n.phone-number-dropdown-trigger:hover {\n  border-color: var(--primary-color);\n}\n\n.phone-number-dropdown-trigger:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.selected-number {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.dropdown-icon {\n  width: 20px;\n  height: 20px;\n  fill: var(--text-secondary);\n  transition: transform 0.2s;\n}\n\n.dropdown-icon.rotated {\n  transform: rotate(180deg);\n}\n\n.phone-number-dropdown-container {\n  position: relative;\n}\n\n.phone-number-dropdown {\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  margin-bottom: 4px;\n  background: var(--bg-primary);\n  border: 1px solid var(--border-color);\n  border-radius: 8px;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\n  max-height: 240px;\n  overflow-y: auto;\n  z-index: 1000;\n}\n\n.phone-number-item {\n  width: 100%;\n  padding: 12px 16px;\n  border: none;\n  border-left: 3px solid transparent;\n  background: transparent;\n  text-align: left;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  transition: all 0.2s;\n  color: var(--text-primary);\n}\n\n.phone-number-item:hover {\n  background: var(--bg-secondary);\n}\n\n.phone-number-item.selected {\n  border-left-color: var(--primary-color);\n  background: rgba(255, 107, 53, 0.05);\n}\n\n.phone-icon {\n  width: 20px;\n  height: 20px;\n  fill: var(--text-secondary);\n  flex-shrink: 0;\n}\n\n.phone-number-info {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  flex: 1;\n}\n\n.number-text {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.number-label {\n  font-size: 12px;\n  color: var(--text-secondary);\n}\n\n.phone-number-empty {\n  padding: 16px;\n  text-align: center;\n  color: var(--text-secondary);\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n  font-size: 13px;\n}\n\n.error-text {\n  color: var(--danger-color);\n  font-size: 13px;\n}\n\n.retry-button {\n  padding: 6px 12px;\n  background: var(--primary-color);\n  color: white;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: opacity 0.2s;\n}\n\n.retry-button:hover {\n  opacity: 0.9;\n}\n\n.loading-spinner {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  border: 2px solid var(--text-secondary);\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n  to { transform: rotate(360deg); }\n}\n\n.loading-message {\n  font-size: 12px;\n  color: var(--text-secondary);\n  text-align: center;\n  margin-top: 8px;\n}\n";
+export declare const DIALPAD_LETTERS: Record<string, string>;

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Utility functions
+ */
+export { isValidPhoneNumber, formatPhoneNumber, formatDuration, generateCallId } from './validators.js';

package/dist/utils/validators.d.ts

@@ -0,0 +1,4 @@
+export declare function isValidPhoneNumber(phone: string): boolean;
+export declare function formatPhoneNumber(phone: string): string;
+export declare function formatDuration(ms: number): string;
+export declare function generateCallId(): string;

package/package.json

@@ -0,0 +1,70 @@
+{
+	"name": "@convirza/dialer-sdk",
+	"version": "1.0.0",
+	"type": "module",
+	"description": "Production-ready embeddable dialer widget with SIP integration hooks",
+	"main": "dist/index.cjs.js",
+	"module": "dist/index.esm.js",
+	"browser": "dist/index.umd.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"import": "./dist/index.esm.js",
+			"require": "./dist/index.cjs.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": [
+		"dist",
+		"README.md"
+	],
+	"scripts": {
+		"clean": "rm -rf dist",
+		"build": "npm run clean && rollup -c",
+		"dev": "rollup -c -w",
+		"format": "prettier --write \"src/**/*.{ts,js,css}\" \"*.{js,json,md}\"",
+		"format:check": "prettier --check \"src/**/*.{ts,js,css}\" \"*.{js,json,md}\"",
+		"typecheck": "tsc --noEmit",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"lint": "npm run typecheck && npm run format:check",
+		"demo": "cd ../../ && python3 -m http.server 8080",
+		"prepublishOnly": "npm run lint && npm run build"
+	},
+	"keywords": [
+		"dialer",
+		"voip",
+		"sip",
+		"webrtc",
+		"click-to-call",
+		"convirza",
+		"web-component"
+	],
+	"author": "Convirza",
+	"license": "PROPRIETARY",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/ContactPoint/convirza-dialer-1"
+	},
+	"engines": {
+		"node": ">=16.0.0"
+	},
+	"dependencies": {
+		"libphonenumber-js": "^1.13.4",
+		"sip.js": "^0.13.8"
+	},
+	"devDependencies": {
+		"@rollup/plugin-node-resolve": "^16.0.3",
+		"@rollup/plugin-terser": "^1.0.0",
+		"@rollup/plugin-typescript": "^12.3.0",
+		"@testing-library/dom": "^10.4.1",
+		"@types/node": "^25.9.1",
+		"happy-dom": "^20.9.0",
+		"prettier": "^3.8.3",
+		"rollup": "^4.60.4",
+		"tslib": "^2.8.1",
+		"typescript": "^5.3.3",
+		"vitest": "^4.1.7"
+	}
+}