@scalemule/chat 0.0.5 → 0.0.7

package/dist/widget/styles.d.ts

@@ -0,0 +1,3 @@
+/** All CSS for the support widget, injected into Shadow DOM. */
+export declare const WIDGET_STYLES = "\n:host {\n  all: initial;\n  --sm-primary: #2563eb;\n  --sm-primary-hover: #1d4ed8;\n  --sm-primary-disabled: #93c5fd;\n  --sm-primary-text: #ffffff;\n  --sm-badge-bg: #ef4444;\n  --sm-bubble-left: auto;\n  --sm-bubble-right: 20px;\n  --sm-panel-left: auto;\n  --sm-panel-right: 20px;\n  --sm-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n  font-family: var(--sm-font-family);\n  font-size: 14px;\n  line-height: 1.5;\n  color: #111827;\n}\n\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n.sm-bubble {\n  position: fixed;\n  bottom: 20px;\n  left: var(--sm-bubble-left);\n  right: var(--sm-bubble-right);\n  width: 60px;\n  height: 60px;\n  border-radius: 999px;\n  background: var(--sm-primary);\n  color: var(--sm-primary-text);\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  z-index: 999999;\n}\n\n.sm-bubble:hover {\n  transform: translateY(-1px) scale(1.03);\n  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.28);\n}\n\n.sm-bubble .sm-badge {\n  position: absolute;\n  top: -4px;\n  right: -4px;\n  min-width: 20px;\n  height: 20px;\n  border-radius: 999px;\n  background: var(--sm-badge-bg);\n  color: #fff;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 6px;\n  font-size: 11px;\n  font-weight: 700;\n}\n\n.sm-panel {\n  position: fixed;\n  bottom: 90px;\n  left: var(--sm-panel-left);\n  right: var(--sm-panel-right);\n  width: 380px;\n  max-height: min(560px, calc(100vh - 110px));\n  background: #ffffff;\n  border-radius: 18px;\n  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  z-index: 999998;\n  animation: sm-slide-up 0.22s ease;\n}\n\n@keyframes sm-slide-up {\n  from { opacity: 0; transform: translateY(14px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.sm-panel.sm-hidden {\n  display: none;\n}\n\n.sm-header {\n  background: var(--sm-primary);\n  color: var(--sm-primary-text);\n  padding: 16px 18px;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 16px;\n}\n\n.sm-header-copy {\n  min-width: 0;\n}\n\n.sm-header-title {\n  font-size: 16px;\n  font-weight: 700;\n}\n\n.sm-header-status {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 4px;\n  font-size: 12px;\n  opacity: 0.92;\n}\n\n.sm-status-dot {\n  width: 10px;\n  height: 10px;\n  border-radius: 999px;\n  background: rgba(255, 255, 255, 0.65);\n}\n\n.sm-status-dot-online {\n  background: #22c55e;\n  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);\n}\n\n.sm-status-dot-away {\n  background: #cbd5e1;\n}\n\n.sm-header-subtitle {\n  font-size: 12px;\n  opacity: 0.82;\n  margin-top: 6px;\n  max-width: 250px;\n}\n\n.sm-header-actions {\n  display: flex;\n  gap: 6px;\n}\n\n.sm-header-btn {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  border-radius: 10px;\n  padding: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0.86;\n}\n\n.sm-header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.sm-error {\n  padding: 10px 14px;\n  background: #fef2f2;\n  border-bottom: 1px solid #fecaca;\n  color: #b91c1c;\n  font-size: 12px;\n}\n\n.sm-body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.sm-prechat {\n  padding: 20px 18px 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n}\n\n.sm-prechat-title {\n  font-size: 18px;\n  font-weight: 700;\n  color: #111827;\n}\n\n.sm-prechat-desc {\n  font-size: 13px;\n  color: #6b7280;\n}\n\n.sm-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.sm-field label {\n  font-size: 13px;\n  font-weight: 600;\n  color: #374151;\n}\n\n.sm-field input,\n.sm-field textarea,\n.sm-input {\n  border: 1px solid #d1d5db;\n  border-radius: 14px;\n  padding: 10px 12px;\n  font-size: 14px;\n  font-family: inherit;\n  color: #111827;\n  outline: none;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  background: #fff;\n}\n\n.sm-field input:focus,\n.sm-field textarea:focus,\n.sm-input:focus {\n  border-color: var(--sm-primary);\n  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);\n}\n\n.sm-field textarea {\n  resize: vertical;\n  min-height: 92px;\n}\n\n.sm-prechat-actions {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.sm-submit-btn,\n.sm-send-btn {\n  border: none;\n  cursor: pointer;\n  background: var(--sm-primary);\n  color: var(--sm-primary-text);\n  transition: background 0.15s ease, opacity 0.15s ease;\n}\n\n.sm-submit-btn:hover,\n.sm-send-btn:hover {\n  background: var(--sm-primary-hover);\n}\n\n.sm-submit-btn:disabled,\n.sm-send-btn:disabled {\n  background: var(--sm-primary-disabled);\n  cursor: not-allowed;\n}\n\n.sm-submit-btn {\n  flex: 1;\n  border-radius: 14px;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 700;\n}\n\n.sm-chat-shell {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  background: #f8fafc;\n}\n\n.sm-chat-shell.sm-dragging {\n  background: rgba(37, 99, 235, 0.05);\n}\n\n.sm-messages {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.sm-date-divider {\n  align-self: center;\n  font-size: 11px;\n  font-weight: 600;\n  color: #6b7280;\n  background: rgba(148, 163, 184, 0.16);\n  padding: 4px 10px;\n  border-radius: 999px;\n}\n\n.sm-unread-divider {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--sm-primary);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.sm-unread-divider::before,\n.sm-unread-divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: rgba(37, 99, 235, 0.24);\n}\n\n.sm-msg {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 84%;\n}\n\n.sm-msg-visitor {\n  align-self: flex-end;\n}\n\n.sm-msg-rep {\n  align-self: flex-start;\n}\n\n.sm-msg-system {\n  align-self: center;\n  max-width: 92%;\n}\n\n.sm-msg-row {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.sm-msg-bubble {\n  padding: 10px 12px;\n  border-radius: 16px;\n  line-height: 1.4;\n  word-break: break-word;\n  background: #f3f4f6;\n  color: #111827;\n}\n\n.sm-msg-content {\n  white-space: pre-wrap;\n}\n\n.sm-msg-visitor .sm-msg-bubble {\n  background: var(--sm-primary);\n  color: var(--sm-primary-text);\n  border-bottom-right-radius: 6px;\n}\n\n.sm-msg-rep .sm-msg-bubble {\n  border-bottom-left-radius: 6px;\n}\n\n.sm-msg-system .sm-msg-bubble {\n  background: transparent;\n  color: #94a3b8;\n  font-size: 12px;\n  text-align: center;\n  padding: 2px 8px;\n}\n\n.sm-msg-action {\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #6b7280;\n  border-radius: 999px;\n  width: 28px;\n  height: 28px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n.sm-msg-action:hover {\n  color: var(--sm-primary);\n  border-color: rgba(37, 99, 235, 0.24);\n}\n\n.sm-msg-time {\n  font-size: 11px;\n  color: #94a3b8;\n}\n\n.sm-msg-visitor .sm-msg-time {\n  text-align: right;\n}\n\n.sm-reactions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.sm-reaction-badge {\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  color: #374151;\n  border-radius: 999px;\n  padding: 4px 8px;\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.sm-reaction-badge-active {\n  border-color: rgba(37, 99, 235, 0.32);\n  background: rgba(37, 99, 235, 0.08);\n  color: var(--sm-primary);\n}\n\n.sm-reaction-picker {\n  display: inline-flex;\n  gap: 6px;\n  padding: 6px;\n  border-radius: 999px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);\n}\n\n.sm-reaction-picker-btn {\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 999px;\n  width: 30px;\n  height: 30px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 17px;\n}\n\n.sm-attachment {\n  display: block;\n  margin-top: 8px;\n  border-radius: 12px;\n  max-width: 100%;\n}\n\n.sm-attachment-image,\n.sm-attachment-video {\n  max-width: 260px;\n}\n\n.sm-attachment-audio {\n  width: 100%;\n}\n\n.sm-attachment-link {\n  color: inherit;\n  text-decoration: underline;\n  font-size: 13px;\n}\n\n.sm-typing {\n  min-height: 22px;\n  padding: 0 16px 10px;\n  font-size: 12px;\n  color: #6b7280;\n}\n\n.sm-typing-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.sm-typing-indicator span:nth-child(-n+3) {\n  width: 6px;\n  height: 6px;\n  border-radius: 999px;\n  background: #94a3b8;\n  animation: sm-bounce 1.2s infinite ease-in-out;\n}\n\n.sm-typing-indicator span:nth-child(2) {\n  animation-delay: 0.15s;\n}\n\n.sm-typing-indicator span:nth-child(3) {\n  animation-delay: 0.3s;\n}\n\n@keyframes sm-bounce {\n  0%, 80%, 100% { transform: scale(0.85); opacity: 0.5; }\n  40% { transform: scale(1); opacity: 1; }\n}\n\n.sm-upload-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 0 16px 10px;\n}\n\n.sm-upload-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  max-width: 100%;\n  border-radius: 999px;\n  border: 1px solid #e5e7eb;\n  background: #ffffff;\n  padding: 6px 10px;\n  font-size: 12px;\n  color: #374151;\n}\n\n.sm-upload-chip-error {\n  border-color: #fecaca;\n  background: #fef2f2;\n  color: #b91c1c;\n}\n\n.sm-upload-name {\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.sm-upload-progress {\n  color: #6b7280;\n}\n\n.sm-upload-chip-error .sm-upload-progress {\n  color: inherit;\n}\n\n.sm-upload-remove {\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  font-size: 14px;\n  line-height: 1;\n}\n\n.sm-input-area {\n  display: flex;\n  align-items: flex-end;\n  gap: 10px;\n  padding: 12px 16px 16px;\n  border-top: 1px solid #e5e7eb;\n  background: #ffffff;\n}\n\n.sm-input {\n  flex: 1;\n  min-height: 44px;\n  max-height: 100px;\n  resize: none;\n  overflow-y: auto;\n  line-height: 1.4;\n}\n\n.sm-attach-btn {\n  width: 42px;\n  height: 42px;\n  border-radius: 14px;\n  border: 1px solid #d1d5db;\n  background: #ffffff;\n  color: #374151;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sm-attach-btn:hover {\n  border-color: rgba(37, 99, 235, 0.28);\n  color: var(--sm-primary);\n}\n\n.sm-send-btn {\n  width: 42px;\n  height: 42px;\n  border-radius: 14px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.sm-footer {\n  text-align: center;\n  padding: 8px;\n  font-size: 11px;\n  color: #94a3b8;\n}\n\n.sm-footer a {\n  color: #6b7280;\n  text-decoration: none;\n}\n\n.sm-footer a:hover {\n  text-decoration: underline;\n}\n\n@media (max-width: 440px) {\n  .sm-panel {\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    max-height: 100vh;\n    border-radius: 18px 18px 0 0;\n  }\n}\n";
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/widget/styles.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAEhE,eAAO,MAAM,aAAa,6hWAwnBzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/chat",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "ScaleMule standalone chat SDK — real-time messaging, presence, typing indicators",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -34,7 +34,9 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && npm run build:types && npm run check:budgets",
+    "build:types": "tsc --emitDeclarationOnly --project tsconfig.json",
+    "check:budgets": "node ./scripts/check-bundle-budgets.mjs",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src/",
@@ -52,6 +54,7 @@
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "jsdom": "^26.0.0",
     "tsup": "^8.0.0",
     "typescript": "^5.4.0",
     "vitest": "^2.0.0"