callix-dialer-widget 1.1.6 → 1.1.8

package/dist-widget/callix-dialer.es.js

@@ -53046,7 +53046,7 @@ const MIN_DIALER_WIDTH = 280;
 const MIN_DIALER_HEIGHT = 420;
 const MAX_DIALER_WIDTH = 1024;
 const MAX_DIALER_HEIGHT = 960;
-const MIN_DIALER_SCALE = 0.65;
+const MIN_DIALER_SCALE = 0.55;
 const MAX_DIALER_SCALE = 2.5;
 const VIEWPORT_MARGIN_SMALL = 12;
 const VIEWPORT_MARGIN_DEFAULT = 16;
@@ -53084,7 +53084,8 @@ function FloatingDialer({
   onLogin,
   onLogout,
   isLoadingSession,
-  sessionError
+  sessionError,
+  variant = "default"
 }) {
   const containerRef = useRef(null);
   const cardRef = useRef(null);
@@ -53110,6 +53111,7 @@ function FloatingDialer({
   });
   const prevAuthRef = useRef(isAuthenticated);
   const dialValue = useMemo(() => sanitizeDialInput(rawDialValue), [rawDialValue]);
+  const isMiniMode = variant === "min";
   const contentScale = useMemo(() => {
     const widthRatio = observedSize.width / DEFAULT_DIALER_DIMENSIONS.width;
     const heightRatio = observedSize.height / DEFAULT_DIALER_DIMENSIONS.height;
@@ -53401,7 +53403,8 @@ function FloatingDialer({
       username: username ?? "",
       dialValue,
       setDialValue: updateDialValue,
-      onLogout
+      onLogout,
+      variant
     }
   ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
     LoginForm,
@@ -53412,7 +53415,20 @@ function FloatingDialer({
       error: sessionError
     }
   );
+  if (isMiniMode) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: ["callix", "mode", "min", tw`w-full`].join(" "),
+        "data-callix-variant": "min",
+        style: { width: "100%", height: "100%" },
+        children: dialerContent
+      }
+    );
+  }
   const scale = Number.isFinite(contentScale) && contentScale > 0 ? contentScale : 1;
+  const scaledWidth = DEFAULT_DIALER_DIMENSIONS.width / scale;
+  const scaledHeight = DEFAULT_DIALER_DIMENSIONS.height / scale;
   const cardStyle = {
     width: manualSize ? `${manualSize.width}px` : void 0,
     height: manualSize ? `${manualSize.height}px` : void 0,
@@ -53421,16 +53437,28 @@ function FloatingDialer({
     maxWidth: `min(${MAX_DIALER_WIDTH}px, calc(100vw - 1.5rem))`,
     maxHeight: `calc(100vh - 3rem)`
   };
-  const scalePercent = Math.round(scale * 1e4) / 100;
+  const scaledWrapperStyle = {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    transform: `scale(${scale})`,
+    transformOrigin: "top left",
+    width: `${scaledWidth}px`,
+    minHeight: `${scaledHeight}px`
+  };
   const cardContentStyle = {
-    fontSize: `${scalePercent}%`,
-    lineHeight: 1.25
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    width: `${DEFAULT_DIALER_DIMENSIONS.width}px`,
+    minHeight: `${DEFAULT_DIALER_DIMENSIONS.height}px`
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       ref: containerRef,
-      className: tw`fixed z-50 select-none`,
+      className: ["callix", "mode", "full", tw`fixed z-50 select-none`].join(" "),
+      "data-callix-variant": "default",
       style: {
         transform: `translate3d(${position2.x}px, ${position2.y}px, 0)`,
         top: 0,
@@ -53444,35 +53472,43 @@ function FloatingDialer({
           className: tw`relative flex flex-col items-start overflow-hidden rounded-3xl border border-slate-200/60 bg-gradient-to-br from-white/95 via-slate-50/95 to-white/90 shadow-2xl backdrop-blur-lg transition-all duration-300 w-[min(32rem,calc(100vw-1.5rem))] max-w-[calc(100vw-1.5rem)] sm:w-[28rem] md:w-[30rem] max-h-[calc(100vh-3rem)] sm:max-h-none`,
           style: cardStyle,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex flex-1 flex-col rounded-3xl overflow-hidden`, style: cardContentStyle, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                "div",
-                {
-                  className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 text-white shadow-sm`,
-                  onPointerDown: beginDrag,
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
-                        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-base font-semibold`, children: username ?? "Visitante" })
-                      ] })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
-                        onClick: () => setIsOpen(false),
-                        "aria-label": "Fechar discadora",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex-1 overflow-y-auto p-3`, children: dialerContent })
-            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex flex-1 flex-col overflow-hidden`, style: scaledWrapperStyle, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                "data-floating-dialer-content": true,
+                className: tw`flex flex-1 flex-col rounded-3xl overflow-hidden`,
+                style: cardContentStyle,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "div",
+                    {
+                      className: tw`cursor-grab touch-none active:cursor-grabbing flex items-center justify-between bg-gradient-to-r from-primary to-primaryDark px-4 py-3 text-white shadow-sm`,
+                      onPointerDown: beginDrag,
+                      children: [
+                        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-3`, children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-white/15 shadow-inner`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhoneCall, { className: tw`text-xl` }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-0.5`, children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-[11px] uppercase tracking-[0.2em] text-white/70`, children: "Discadora" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-base font-semibold`, children: username ?? "Visitante" })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntimeExports.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: tw`rounded-full p-2 text-white/80 transition hover:bg-white/15 hover:text-white`,
+                            onClick: () => setIsOpen(false),
+                            "aria-label": "Fechar discadora",
+                            children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-lg` })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`flex-1 overflow-y-auto p-3`, children: dialerContent })
+                ]
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
@@ -53571,9 +53607,10 @@ function LoginForm({ defaultValue, onSubmit, isLoading, error: error2 }) {
     )
   ] });
 }
-function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
+function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout, variant }) {
   var _a2, _b;
   const operator = clientSdkReactExports.useCallOperator();
+  const isMiniMode = variant === "min";
   const operatorState = clientSdkReactExports.useCallOperatorState();
   const currentCall = clientSdkReactExports.useCallOperatorCurrentCall();
   const currentCallInfo = clientSdkReactExports.useCallOperatorCurrentCallInfo();
@@ -54276,6 +54313,164 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
       }
     );
   }
+  const breakModal = isBreakModalOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-lg font-bold text-slate-800`, children: "Selecione uma Pausa" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsBreakModalOpen(false);
+            setBreakError(null);
+          },
+          className: tw`text-slate-400 hover:text-slate-600 transition`,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-xl` })
+        }
+      )
+    ] }),
+    breakError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg bg-red-50 border border-red-200 px-3 py-2 flex items-start gap-2`, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`text-red-500 shrink-0 mt-0.5` }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-red-700`, children: breakError })
+    ] }),
+    !breaks || breaks.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`text-center py-8`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-slate-500`, children: "Nenhuma pausa disponivel" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2 max-h-96 overflow-y-auto`, children: breaks.map((breakItem) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => handleGoOnBreak(breakItem.id),
+        className: tw`w-full flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 text-left transition-all hover:border-amber-300 hover:bg-amber-50 hover:shadow-md`,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xl text-amber-600 shrink-0` }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 min-w-0`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`font-semibold text-slate-800 truncate`, children: breakItem.name }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-xs text-slate-500`, children: [
+              "ID: ",
+              breakItem.id
+            ] })
+          ] })
+        ]
+      },
+      breakItem.id
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          setIsBreakModalOpen(false);
+          setBreakError(null);
+        },
+        className: tw`w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100`,
+        children: "Cancelar"
+      }
+    )
+  ] }) }) : null;
+  if (isMiniMode) {
+    const isCallActive = isInCall || isConnecting;
+    const callButtonDisabled = !isCallActive && !isNumberValid;
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: ["callix", "mode", "min", tw`flex w-full max-w-full flex-col gap-3 rounded-2xl border border-slate-200 bg-white/95 p-3 shadow-sm text-slate-800`].join(" "),
+        "data-callix-variant": "min",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between gap-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`${statusVisual.badgeClass} flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-semibold uppercase leading-tight`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(statusVisual.Icon, { className: tw`text-xs` }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: statusLabel })
+            ] }),
+            isOnBreak ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleGoOffBreak(),
+                className: tw`inline-flex items-center gap-1 rounded-full border border-emerald-400 bg-emerald-50 px-2.5 py-1 text-[10px] font-semibold text-emerald-700 transition hover:bg-emerald-100`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiCheckCircle, { className: tw`text-xs` }),
+                  "Voltar"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsBreakModalOpen(true),
+                className: tw`inline-flex items-center gap-1 rounded-full border border-amber-300 bg-amber-50 px-2.5 py-1 text-[10px] font-semibold text-amber-700 transition hover:bg-amber-100`,
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xs` }),
+                  "Pausa"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`space-y-1 rounded-xl border border-slate-200 bg-slate-50 px-3 py-2`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[10px] font-semibold uppercase tracking-wide text-slate-500`, children: "Numero" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center gap-2`, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`flex-1 truncate text-lg font-semibold text-slate-800`, children: dialDisplayText || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-slate-400 text-base font-normal`, children: "Digite um numero" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleBackspace,
+                  className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-slate-300 bg-white text-slate-600 transition hover:border-slate-400 hover:text-slate-800`,
+                  "aria-label": "Apagar ultimo digito",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiDelete, { className: tw`text-base` })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClear,
+                  className: tw`inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-300 bg-rose-50 text-rose-600 transition hover:border-rose-400 hover:bg-rose-100`,
+                  "aria-label": "Limpar numero",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-sm` })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`grid grid-cols-3 gap-2`, children: keypadKeys.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleDial(item.value),
+              disabled: !canUseKeypad,
+              className: tw`flex h-12 flex-col items-center justify-center rounded-lg border border-slate-200 bg-white text-base font-semibold text-slate-800 shadow-sm transition active:scale-95 hover:border-slate-300 hover:shadow-md disabled:cursor-not-allowed disabled:opacity-50`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: item.value }),
+                item.detail && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: tw`text-[8px] font-semibold uppercase tracking-widest text-slate-400`, children: item.detail })
+              ]
+            },
+            item.value
+          )) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                if (isCallActive) {
+                  void handleHangup();
+                } else {
+                  void handleCall();
+                }
+              },
+              disabled: callButtonDisabled,
+              className: tw`${isCallActive ? "bg-rose-500 hover:bg-rose-600" : "bg-emerald-500 hover:bg-emerald-600"} flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-bold text-white shadow-md transition disabled:cursor-not-allowed disabled:opacity-60`,
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(FiPhone, { className: tw`text-base` }),
+                isCallActive ? "Encerrar" : "Ligar"
+              ]
+            }
+          ),
+          (callError || availabilityError || audioDeviceError) && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[11px] text-rose-700`, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`mr-1 inline text-xs` }),
+            callError || availabilityError || audioDeviceError
+          ] }),
+          breakModal
+        ]
+      }
+    );
+  }
   const showActiveSummary = isInCall || isConnecting;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -54617,58 +54812,7 @@ function AuthenticatedDialer({ username, dialValue, setDialValue, onLogout }) {
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: audioDeviceError })
           ] })
         ] }),
-        isBreakModalOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-4`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex items-center justify-between`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: tw`text-lg font-bold text-slate-800`, children: "Selecione uma Pausa" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  setIsBreakModalOpen(false);
-                  setBreakError(null);
-                },
-                className: tw`text-slate-400 hover:text-slate-600 transition`,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: tw`text-xl` })
-              }
-            )
-          ] }),
-          breakError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`rounded-lg bg-red-50 border border-red-200 px-3 py-2 flex items-start gap-2`, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FiAlertTriangle, { className: tw`text-red-500 shrink-0 mt-0.5` }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-sm text-red-700`, children: breakError })
-          ] }),
-          !breaks || breaks.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`text-center py-8`, children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`text-slate-500`, children: "Nenhuma pausa disponível" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: tw`space-y-2 max-h-96 overflow-y-auto`, children: breaks.map((breakItem) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => handleGoOnBreak(breakItem.id),
-              className: tw`w-full flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 text-left transition-all hover:border-amber-300 hover:bg-amber-50 hover:shadow-md`,
-              children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(FiPauseCircle, { className: tw`text-xl text-amber-600 shrink-0` }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: tw`flex-1 min-w-0`, children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: tw`font-semibold text-slate-800 truncate`, children: breakItem.name }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: tw`text-xs text-slate-500`, children: [
-                    "ID: ",
-                    breakItem.id
-                  ] })
-                ] })
-              ]
-            },
-            breakItem.id
-          )) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                setIsBreakModalOpen(false);
-                setBreakError(null);
-              },
-              className: tw`w-full rounded-lg border border-slate-200 bg-slate-50 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:bg-slate-100`,
-              children: "Cancelar"
-            }
-          )
-        ] }) }),
+        breakModal,
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "button",
           {
@@ -55018,8 +55162,8 @@ function ActiveCallSummary({
     ] })
   ] }) });
 }
-function InlineDialer(props) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { width: "100%", height: "100%" }, children: [
+function InlineDialer({ variant = "default", ...props }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: ["callix", "mode", variant === "min" ? "min" : "inline"].join(" "), "data-callix-variant": variant === "min" ? "min" : "inline", style: { width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       "style",
       {
@@ -55036,31 +55180,26 @@ function InlineDialer(props) {
               inset: auto !important;
               transform: none !important;
               width: 100% !important;
-              max-width: 100% !important;
-              min-width: 0 !important;
               height: 100% !important;
-              max-height: 100% !important;
-              min-height: 0 !important;
             }
             .callix-inline-wrapper [data-floating-dialer-card] {
               position: relative !important;
               inset: auto !important;
               transform: none !important;
               width: 100% !important;
-              max-width: 100% !important;
-              min-width: 0 !important;
               height: 100% !important;
-              max-height: 100% !important;
-              min-height: 0 !important;
               box-shadow: none !important;
               backdrop-filter: none !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] > div {
+            .callix-inline-wrapper [data-floating-dialer-card] > div:first-child {
               width: 100% !important;
               height: 100% !important;
+              transform-origin: top left !important;
             }
-            .callix-inline-wrapper [data-floating-dialer-card] .overflow-y-auto {
-              max-height: none !important;
+            .callix-inline-wrapper [data-floating-dialer-card] [data-floating-dialer-content] {
+              width: auto !important;
+              min-width: 448px !important;
+              min-height: 640px !important;
             }
             .callix-inline-wrapper [data-floating-dialer-resize] {
               display: none !important;
@@ -55069,9 +55208,41 @@ function InlineDialer(props) {
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "callix-inline-wrapper", children: /* @__PURE__ */ jsxRuntimeExports.jsx(FloatingDialer, { ...props, variant }) })
   ] });
 }
+function deriveOptionsFromElement(element) {
+  const result2 = {};
+  const datasetMode = element.getAttribute("data-callix-mode") || element.dataset.callixMode || element.dataset.mode;
+  const datasetUsername = element.getAttribute("data-callix-username") || element.dataset.callixUsername || element.dataset.username;
+  const classList = Array.from(element.classList);
+  const lowerClasses = classList.map((cls) => cls.toLowerCase());
+  const hasCallixClass = lowerClasses.includes("callix");
+  const normalizedMode = datasetMode ? datasetMode.toLowerCase() : void 0;
+  if (normalizedMode === "min" || normalizedMode === "mini") {
+    result2.uiVariant = "min";
+  } else if (hasCallixClass) {
+    if (lowerClasses.includes("mode-min") || lowerClasses.includes("mode-mini") || lowerClasses.includes("mode") && lowerClasses.includes("min")) {
+      result2.uiVariant = "min";
+    }
+  }
+  if (!result2.presetUsername && datasetUsername) {
+    result2.presetUsername = datasetUsername.trim();
+  }
+  if (!result2.presetUsername) {
+    for (const className of classList) {
+      const match2 = className.match(/(?:user|username|callix-user)[-_:]([A-Za-z0-9.@_-]+)/i);
+      if (match2) {
+        result2.presetUsername = match2[1];
+        break;
+      }
+    }
+  }
+  if (result2.presetUsername) {
+    result2.presetUsername = result2.presetUsername.trim();
+  }
+  return result2;
+}
 class CallixDialerWidget {
   constructor(options) {
     this.root = null;
@@ -55092,6 +55263,13 @@ class CallixDialerWidget {
       if (!this.container) {
         throw new Error(`Container não encontrado: ${this.options.container}`);
       }
+      const derived = deriveOptionsFromElement(this.container);
+      if (!this.options.uiVariant && derived.uiVariant) {
+        this.options.uiVariant = derived.uiVariant;
+      }
+      if (!this.options.presetUsername && derived.presetUsername) {
+        this.options.presetUsername = derived.presetUsername;
+      }
       this.root = clientExports.createRoot(this.container);
       this.root.render(
         /* @__PURE__ */ jsxRuntimeExports.jsx(StrictMode, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialerWrapper, { options: this.options }) })
@@ -55132,6 +55310,10 @@ function DialerWrapper({ options }) {
   const [sessionToken, setSessionToken] = useState(null);
   const [callixDomain, setCallixDomain] = useState(null);
   const [isRestoringSession, setIsRestoringSession] = useState(true);
+  const presetUsername = options.presetUsername ? options.presetUsername.trim() : null;
+  const uiVariant = options.uiVariant ?? "default";
+  const autoLoginAttemptedRef = useRef(false);
+  const lastPresetRef = useRef(presetUsername);
   useEffect(() => {
     if (typeof window === "undefined") {
       setIsRestoringSession(false);
@@ -55143,6 +55325,11 @@ function DialerWrapper({ options }) {
         setIsRestoringSession(false);
         return;
       }
+      if (presetUsername && storedLastUsername !== presetUsername) {
+        console.log("[Callix Dialer] Ignorando sessao salva por mismatch com preset:", storedLastUsername, "!=", presetUsername);
+        setIsRestoringSession(false);
+        return;
+      }
       const STORAGE_KEYS = getStorageKeys(storedLastUsername);
       const storedToken = localStorage.getItem(STORAGE_KEYS.SESSION_TOKEN);
       const storedDomain = localStorage.getItem(STORAGE_KEYS.DOMAIN);
@@ -55170,7 +55357,12 @@ function DialerWrapper({ options }) {
       setIsRestoringSession(false);
     }
   }, []);
-  const handleLogin = async (user) => {
+  useEffect(() => {
+    if (presetUsername && username !== presetUsername) {
+      setUsername(presetUsername);
+    }
+  }, [presetUsername, username]);
+  const handleLogin = useCallback(async (user) => {
     setIsLoading(true);
     setError(null);
     try {
@@ -55215,14 +55407,32 @@ function DialerWrapper({ options }) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [options.apiUrl]);
+  useEffect(() => {
+    if (!presetUsername) {
+      lastPresetRef.current = null;
+      autoLoginAttemptedRef.current = false;
+      return;
+    }
+    if (lastPresetRef.current !== presetUsername) {
+      lastPresetRef.current = presetUsername;
+      autoLoginAttemptedRef.current = false;
+    }
+    if (isAuthenticated || isLoading || isRestoringSession || autoLoginAttemptedRef.current) {
+      return;
+    }
+    autoLoginAttemptedRef.current = true;
+    void handleLogin(presetUsername);
+  }, [presetUsername, isAuthenticated, isLoading, isRestoringSession, handleLogin]);
   const handleLogout = () => {
     const currentUsername = username;
-    setUsername(null);
+    setUsername(presetUsername ?? null);
     setIsAuthenticated(false);
     setSessionToken(null);
     setCallixDomain(null);
     setError(null);
+    autoLoginAttemptedRef.current = false;
+    lastPresetRef.current = presetUsername ?? null;
     if (typeof window !== "undefined" && currentUsername) {
       try {
         const STORAGE_KEYS = getStorageKeys(currentUsername);
@@ -55246,7 +55456,8 @@ function DialerWrapper({ options }) {
         onLogin: handleLogin,
         onLogout: handleLogout,
         isLoadingSession: isLoading || isRestoringSession,
-        sessionError: error2
+        sessionError: error2,
+        variant: uiVariant
       }
     );
   }
@@ -55263,7 +55474,8 @@ function DialerWrapper({ options }) {
           onLogin: handleLogin,
           onLogout: handleLogout,
           isLoadingSession: isLoading,
-          sessionError: error2
+          sessionError: error2,
+          variant: uiVariant
         }
       )
     }