framepexls-ui-lib 2.2.7 → 2.2.11

package/dist/SupportChatWidget.mjs

@@ -10,6 +10,7 @@ import TimeAgo from "./TimeAgo.mjs";
 import Tooltip from "./Tooltip.mjs";
 import {
   ChatCenteredDotsIcon,
+  ChatCircleTextIcon,
   ClockIcon,
   CloseIcon,
   DownloadSimpleIcon,
@@ -194,14 +195,34 @@ function SupportChatWidget({
   const open = openProp != null ? openProp : openState;
   const setOpen = (next) => {
     if (openProp === void 0) setOpenState(next);
+    if (next) setUnseenReplyCount(0);
     onOpenChange == null ? void 0 : onOpenChange(next);
   };
   const [messagesState, setMessagesState] = React.useState(() => defaultMessages != null ? defaultMessages : []);
   const messages = messagesProp != null ? messagesProp : messagesState;
   const messagesRef = React.useRef(messages);
+  const knownMessageIdsRef = React.useRef(new Set(messages.map((message) => message.id)));
+  const panelRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const [unseenReplyCount, setUnseenReplyCount] = React.useState(0);
   React.useEffect(() => {
     messagesRef.current = messages;
   }, [messages]);
+  React.useEffect(() => {
+    const knownIds = knownMessageIdsRef.current;
+    const newReplies = messages.filter((message) => {
+      const isNew = !knownIds.has(message.id);
+      return isNew && (message.role === "bot" || message.role === "agent");
+    });
+    messages.forEach((message) => knownIds.add(message.id));
+    if (open) {
+      setUnseenReplyCount(0);
+      return;
+    }
+    if (newReplies.length) {
+      setUnseenReplyCount((current) => Math.min(99, current + newReplies.length));
+    }
+  }, [messages, open]);
   const setMessages = (next) => {
     if (typeof next === "function") {
       const fn = next;
@@ -278,6 +299,18 @@ function SupportChatWidget({
     if (!open) return;
     (_a2 = endRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth", block: "end" });
   }, [open, messages.length, sending]);
+  React.useEffect(() => {
+    if (!open || position === "inline") return;
+    const onPointerDown = (event) => {
+      var _a2, _b2;
+      const target = event.target;
+      if (!target) return;
+      if (((_a2 = panelRef.current) == null ? void 0 : _a2.contains(target)) || ((_b2 = triggerRef.current) == null ? void 0 : _b2.contains(target))) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, position]);
   const appendBotResult = (result) => {
     if (!result) return;
     if (typeof result === "string") {
@@ -383,19 +416,22 @@ function SupportChatWidget({
     await ((_d2 = config.onSave) == null ? void 0 : _d2.call(config, payload));
     downloadFile(fileName, content, mimeType);
   };
-  const trigger = /* @__PURE__ */ jsx(Tooltip, { content: labelTrigger, placement: position === "bottom-left" ? "right" : "left", offset: 10, children: /* @__PURE__ */ jsx("div", { className: cx(positionClass, className), style: position === "inline" ? void 0 : { zIndex }, children: /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsx(Tooltip, { content: labelTrigger, placement: position === "bottom-left" ? "right" : "left", offset: 10, children: /* @__PURE__ */ jsx("div", { ref: triggerRef, className: cx(positionClass, className), style: position === "inline" ? void 0 : { zIndex }, children: /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       "aria-label": labelTrigger,
       onClick: () => setOpen(true),
       className: cx(
-        "relative grid h-14 w-14 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--ring)_28%,var(--border))]",
-        "bg-[var(--primary)] text-[var(--primary-foreground)] shadow-xl transition hover:brightness-95 active:scale-[0.98]"
+        "group relative grid size-14 place-items-center overflow-hidden rounded-2xl border border-[var(--border)]",
+        "bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--primary)] shadow-[0_20px_48px_rgba(6,19,22,0.13)] backdrop-blur-xl",
+        "transition duration-200 hover:-translate-y-0.5 hover:border-[color-mix(in_oklab,var(--primary)_38%,var(--border))] hover:bg-[var(--surface)] hover:text-[var(--foreground)] hover:shadow-[0_24px_58px_rgba(6,19,22,0.18)] active:scale-[0.98]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklab,var(--primary)_42%,transparent)] dark:shadow-[0_20px_48px_rgba(0,0,0,0.28)] dark:hover:shadow-[0_24px_58px_rgba(0,0,0,0.36)]"
       ),
       children: [
-        mode === "live" ? /* @__PURE__ */ jsx(HeadsetIcon, { "aria-hidden": true, className: "h-6 w-6" }) : /* @__PURE__ */ jsx(ChatCenteredDotsIcon, { "aria-hidden": true, className: "h-6 w-6" }),
-        unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -right-1.5 -top-1.5 grid h-5 min-w-5 place-items-center rounded-full bg-[var(--danger)] px-1 text-[0.65rem] font-semibold text-white shadow ring-2 ring-[var(--card)]", children: unreadCount > 99 ? "99+" : unreadCount }) : null
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,color-mix(in_oklab,var(--primary)_18%,transparent),transparent_38%)] opacity-80 transition group-hover:opacity-100" }),
+        /* @__PURE__ */ jsx("span", { className: "relative grid size-9 place-items-center rounded-xl bg-[color-mix(in_oklab,var(--primary)_12%,transparent)] ring-1 ring-[color-mix(in_oklab,var(--primary)_18%,transparent)]", children: /* @__PURE__ */ jsx(ChatCircleTextIcon, { "aria-hidden": true, className: "h-5 w-5" }) }),
+        Math.max(unreadCount, unseenReplyCount) > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -right-1.5 -top-1.5 grid h-5 min-w-5 animate-[fx-chat-badge_280ms_ease-out] place-items-center rounded-full bg-[var(--danger)] px-1 text-[0.65rem] font-semibold text-white shadow ring-2 ring-[var(--card)]", children: Math.max(unreadCount, unseenReplyCount) > 99 ? "99+" : Math.max(unreadCount, unseenReplyCount) }) : null
       ]
     }
   ) }) });
@@ -487,43 +523,53 @@ function SupportChatWidget({
       const prev = messages[index - 1];
       const showAvatar = !mine && !system && (prev == null ? void 0 : prev.role) !== message.role;
       const bubbleClass = system ? "mx-auto max-w-[92%] border-[color-mix(in_oklab,var(--warning)_28%,var(--border))] bg-[color-mix(in_oklab,var(--warning)_10%,transparent)] text-center text-[var(--foreground)]" : mine ? "border-[color-mix(in_oklab,var(--ring)_35%,var(--border))] bg-[color-mix(in_oklab,var(--primary)_14%,transparent)] text-[var(--foreground)]" : "border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_94%,transparent)] text-[var(--foreground)]";
-      return /* @__PURE__ */ jsxs("div", { className: cx("flex items-end gap-2", mine ? "justify-end" : system ? "justify-center" : "justify-start"), children: [
-        !mine && !system ? /* @__PURE__ */ jsx("div", { className: cx("shrink-0", showAvatar ? "" : "opacity-0"), children: /* @__PURE__ */ jsx(
-          AvatarSquare,
-          {
-            size: 28,
-            src: (_b2 = actor == null ? void 0 : actor.avatarUrl) != null ? _b2 : void 0,
-            alt: (_c2 = actor == null ? void 0 : actor.name) != null ? _c2 : brandName,
-            initials: actor == null ? void 0 : actor.initials,
-            color: actor == null ? void 0 : actor.color,
-            radiusClass: "rounded-lg",
-            className: "ring-0"
-          }
-        ) }) : null,
-        /* @__PURE__ */ jsxs("div", { className: cx("max-w-[82%]", mine ? "items-end" : "items-start"), children: [
-          !mine && !system && showAvatar ? /* @__PURE__ */ jsx("div", { className: "mb-1 px-2 text-[0.6875rem] font-semibold text-[var(--muted)]", children: (_d2 = actor == null ? void 0 : actor.name) != null ? _d2 : brandName }) : null,
-          /* @__PURE__ */ jsxs("div", { className: cx("rounded-2xl border px-3.5 py-2.5 text-sm leading-6 shadow-sm", bubbleClass, message.state === "error" ? "border-[color-mix(in_oklab,var(--danger)_35%,var(--border))]" : ""), children: [
-            message.state === "typing" ? /* @__PURE__ */ jsx(Dots, {}) : /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: message.content }),
-            ((_e2 = message.suggestedReplies) == null ? void 0 : _e2.length) ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: message.suggestedReplies.slice(0, 4).map((reply) => /* @__PURE__ */ jsx(
-              "button",
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cx(
+            "flex animate-[fx-chat-message_260ms_cubic-bezier(.2,.8,.2,1)_both] items-end gap-2",
+            mine ? "justify-end [--fx-chat-x:10px]" : system ? "justify-center [--fx-chat-x:0px]" : "justify-start [--fx-chat-x:-10px]"
+          ),
+          children: [
+            !mine && !system ? /* @__PURE__ */ jsx("div", { className: cx("shrink-0", showAvatar ? "" : "opacity-0"), children: /* @__PURE__ */ jsx(
+              AvatarSquare,
               {
-                type: "button",
-                onClick: () => {
-                  onQuickReply == null ? void 0 : onQuickReply(reply);
-                  void send(reply);
-                },
-                className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
-                children: reply
-              },
-              `${message.id}:${reply}`
-            )) }) : null,
-            ((_f2 = message.serviceSuggestions) == null ? void 0 : _f2.length) ? /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: message.serviceSuggestions.slice(0, 3).map(renderService) }) : null
-          ] }),
-          message.createdAt ? /* @__PURE__ */ jsx("div", { className: cx("mt-1 px-2 text-[0.6875rem] text-[var(--muted)]", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ jsx(TimeAgo, { iso: message.createdAt }) }) : null
-        ] })
-      ] }, message.id);
+                size: 28,
+                src: (_b2 = actor == null ? void 0 : actor.avatarUrl) != null ? _b2 : void 0,
+                alt: (_c2 = actor == null ? void 0 : actor.name) != null ? _c2 : brandName,
+                initials: actor == null ? void 0 : actor.initials,
+                color: actor == null ? void 0 : actor.color,
+                radiusClass: "rounded-lg",
+                className: "ring-0"
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("max-w-[82%]", mine ? "items-end" : "items-start"), children: [
+              !mine && !system && showAvatar ? /* @__PURE__ */ jsx("div", { className: "mb-1 px-2 text-[0.6875rem] font-semibold text-[var(--muted)]", children: (_d2 = actor == null ? void 0 : actor.name) != null ? _d2 : brandName }) : null,
+              /* @__PURE__ */ jsxs("div", { className: cx("rounded-2xl border px-3.5 py-2.5 text-sm leading-6 shadow-sm transition-[background,border-color,box-shadow,transform] duration-200", bubbleClass, message.state === "error" ? "border-[color-mix(in_oklab,var(--danger)_35%,var(--border))]" : ""), children: [
+                message.state === "typing" ? /* @__PURE__ */ jsx(Dots, {}) : /* @__PURE__ */ jsx("span", { className: "whitespace-pre-wrap", children: message.content }),
+                ((_e2 = message.suggestedReplies) == null ? void 0 : _e2.length) ? /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: message.suggestedReplies.slice(0, 4).map((reply) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onQuickReply == null ? void 0 : onQuickReply(reply);
+                      void send(reply);
+                    },
+                    className: "rounded-full border border-[var(--border)] bg-[var(--card)] px-3 py-1.5 text-xs font-semibold text-[var(--foreground)] shadow-sm transition hover:bg-[color-mix(in_oklab,var(--surface)_72%,transparent)]",
+                    children: reply
+                  },
+                  `${message.id}:${reply}`
+                )) }) : null,
+                ((_f2 = message.serviceSuggestions) == null ? void 0 : _f2.length) ? /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-2", children: message.serviceSuggestions.slice(0, 3).map(renderService) }) : null
+              ] }),
+              message.createdAt ? /* @__PURE__ */ jsx("div", { className: cx("mt-1 px-2 text-[0.6875rem] text-[var(--muted)]", mine ? "text-right" : "text-left"), children: /* @__PURE__ */ jsx(TimeAgo, { iso: message.createdAt }) }) : null
+            ] })
+          ]
+        },
+        message.id
+      );
     }),
-    sending ? /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+    sending ? /* @__PURE__ */ jsxs("div", { className: "flex animate-[fx-chat-message_260ms_cubic-bezier(.2,.8,.2,1)_both] items-end gap-2 [--fx-chat-x:-10px]", children: [
       /* @__PURE__ */ jsx(
         AvatarSquare,
         {
@@ -543,16 +589,17 @@ function SupportChatWidget({
   const panel = open ? /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: panelRef,
       className: cx(
         panelPositionClass,
-        "flex h-[min(680px,calc(100vh-7rem))] w-[min(400px,calc(100vw-2rem))] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[var(--card)] text-[var(--foreground)] shadow-2xl",
+        "flex h-[min(680px,calc(100vh-7rem))] w-[min(400px,calc(100vw-2rem))] animate-[fx-chat-panel_180ms_cubic-bezier(.2,.8,.2,1)_both] flex-col overflow-hidden rounded-2xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,transparent)] text-[var(--foreground)] shadow-[0_28px_80px_rgba(6,19,22,0.18)] backdrop-blur-xl dark:shadow-[0_28px_80px_rgba(0,0,0,0.38)]",
         panelClassName
       ),
       style: position === "inline" ? void 0 : { zIndex },
       role: "dialog",
       "aria-label": labelTitle,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_96%,transparent)] px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] bg-[linear-gradient(135deg,color-mix(in_oklab,var(--card)_98%,transparent),color-mix(in_oklab,var(--primary)_8%,var(--surface)))] px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
             /* @__PURE__ */ jsx(
               AvatarSquare,

package/dist/TimePanel.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Button = __toESM(require("./Button"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorRef,
   hh,
@@ -54,7 +55,7 @@ function TimePopover({
     left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
     let top = r.bottom + GAP;
     if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
-    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+    return { position: "fixed", top, left, width: W, zIndex: PORTAL_OVERLAY_Z_INDEX };
   }, [anchorRef]);
   (0, import_react.useEffect)(() => {
     const stopInside = (e) => {

package/dist/TimePanel.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import Button from "./Button.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorRef,
   hh,
@@ -21,7 +22,7 @@ function TimePopover({
     left = Math.max(M, Math.min(left, window.innerWidth - (W + M)));
     let top = r.bottom + GAP;
     if (top + H > window.innerHeight) top = Math.max(M, r.top - GAP - H);
-    return { position: "fixed", top, left, width: W, zIndex: 100001 };
+    return { position: "fixed", top, left, width: W, zIndex: PORTAL_OVERLAY_Z_INDEX };
   }, [anchorRef]);
   useEffect(() => {
     const stopInside = (e) => {

package/dist/TimePopover.js

@@ -42,6 +42,7 @@ var import_animations = require("./animations");
 var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorEl,
   hh,
@@ -142,7 +143,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -361,7 +362,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",
@@ -480,7 +481,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     import_framer_motion.motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: import_animations.popOver,
       initial: "initial",
       animate: "animate",

package/dist/TimePopover.mjs

@@ -7,6 +7,7 @@ import { popOver, menuTransition } from "./animations.mjs";
 import Button from "./Button.mjs";
 import Input from "./Input.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function TimePopover({
   anchorEl,
   hh,
@@ -107,7 +108,7 @@ function TimePopover({
       "data-dtf-pop": true,
       onPointerDownCapture: (e) => e.stopPropagation(),
       onKeyDown,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       className: "w-64 rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
       children: [
         /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-slate-700 dark:text-slate-200", children: "Selecciona hora" }),
@@ -326,7 +327,7 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",
@@ -445,7 +446,7 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
     motion.div,
     {
       ref: popRef,
-      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5, willChange: "transform, opacity" },
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: PORTAL_OVERLAY_Z_INDEX, willChange: "transform, opacity" },
       variants: popOver,
       initial: "initial",
       animate: "animate",

package/dist/TimeRangeField.js

@@ -41,6 +41,7 @@ var import_TimePopover = __toESM(require("./TimePopover"));
 var import_ActionIconButton = __toESM(require("./ActionIconButton"));
 var import_iconos = require("./iconos");
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function parseHHmm(v) {
   if (!v) return null;
   const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
@@ -142,10 +143,10 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const placeAbove = spaceAbove >= spaceBelow;
     if (placeAbove) {
       const top2 = Math.max(MARGIN, anchorRect.top - GAP);
-      return { position: "fixed", width: W, top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+      return { position: "fixed", width: W, top: top2, left, zIndex: PORTAL_OVERLAY_Z_INDEX, transform: "translateY(-100%)" };
     }
     const top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", width: W, top, left, zIndex: 1e5 };
+    return { position: "fixed", width: W, top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;

package/dist/TimeRangeField.mjs

@@ -8,6 +8,7 @@ import TimePopover from "./TimePopover.mjs";
 import ActionIconButton from "./ActionIconButton.mjs";
 import { ClockIcon } from "./iconos/index.mjs";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
+const PORTAL_OVERLAY_Z_INDEX = 2147483647;
 function parseHHmm(v) {
   if (!v) return null;
   const [hh, mm] = String(v).split(":").map((x) => parseInt(x, 10));
@@ -109,10 +110,10 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     const placeAbove = spaceAbove >= spaceBelow;
     if (placeAbove) {
       const top2 = Math.max(MARGIN, anchorRect.top - GAP);
-      return { position: "fixed", width: W, top: top2, left, zIndex: 1e5, transform: "translateY(-100%)" };
+      return { position: "fixed", width: W, top: top2, left, zIndex: PORTAL_OVERLAY_Z_INDEX, transform: "translateY(-100%)" };
     }
     const top = Math.max(MARGIN, anchorRect.bottom + GAP);
-    return { position: "fixed", width: W, top, left, zIndex: 1e5 };
+    return { position: "fixed", width: W, top, left, zIndex: PORTAL_OVERLAY_Z_INDEX };
   })();
   const commit = (f, t) => {
     let f2 = f, t2 = t;

package/dist/UploadCard.js

@@ -47,8 +47,8 @@ function UploadCard({
   multiple = true,
   disabled,
   buttonLabel = "Seleccionar",
-  dropLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-slate-700 dark:text-slate-200", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
-  note = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: "M\xE1ximo recomendado 16MB por archivo" }),
+  dropLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+  note = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: "M\xE1ximo recomendado 16MB por archivo" }),
   uploads,
   className,
   onFilesSelected
@@ -95,9 +95,9 @@ function UploadCard({
               var _a;
               return (_a = inputRef.current) == null ? void 0 : _a.click();
             },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 ring-1 ring-black/5 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:from-white/10 dark:to-white/5 dark:hover:bg-white/10",
+            className: "group flex min-h-[190px] cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-[color-mix(in_oklab,var(--border)_82%,transparent)] bg-[color-mix(in_oklab,var(--surface)_86%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--primary)_54%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_5%,var(--surface))] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-8 w-8 text-slate-400 dark:text-slate-400" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[color-mix(in_oklab,var(--muted)_82%,transparent)] transition group-hover:text-[var(--primary)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-6 w-6" }) }),
               dropLabel,
               note
             ]
@@ -114,7 +114,7 @@ function UploadCard({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -6 },
               transition: import_animations.springSm,
-              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+              className: "flex items-center gap-3 rounded-lg border border-[var(--border)] bg-[var(--card)] p-2",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
@@ -124,10 +124,10 @@ function UploadCard({
                       "%"
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_84%,transparent)]", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_framer_motion.motion.div,
                     {
-                      className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                      className: "h-full w-full origin-left bg-[var(--primary)] will-change-transform",
                       initial: { scaleX: 0 },
                       animate: { scaleX: pct / 100 },
                       transition: import_animations.springSm

package/dist/UploadCard.mjs

@@ -14,8 +14,8 @@ function UploadCard({
   multiple = true,
   disabled,
   buttonLabel = "Seleccionar",
-  dropLabel = /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-slate-700 dark:text-slate-200", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
-  note = /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: "M\xE1ximo recomendado 16MB por archivo" }),
+  dropLabel = /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Arrastra y suelta archivos aqu\xED o haz clic" }),
+  note = /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: "M\xE1ximo recomendado 16MB por archivo" }),
   uploads,
   className,
   onFilesSelected
@@ -62,9 +62,9 @@ function UploadCard({
               var _a;
               return (_a = inputRef.current) == null ? void 0 : _a.click();
             },
-            className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-slate-300 bg-gradient-to-b from-white/90 to-white/60 p-8 text-center transition hover:border-slate-400 hover:bg-white/80 ring-1 ring-black/5 dark:border-white/10 dark:bg-[var(--fx-surface)] dark:from-white/10 dark:to-white/5 dark:hover:bg-white/10",
+            className: "group flex min-h-[190px] cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-[color-mix(in_oklab,var(--border)_82%,transparent)] bg-[color-mix(in_oklab,var(--surface)_86%,var(--card))] p-8 text-center transition hover:border-[color-mix(in_oklab,var(--primary)_54%,var(--border))] hover:bg-[color-mix(in_oklab,var(--primary)_5%,var(--surface))] focus:outline-none focus-visible:ring-1 focus-visible:ring-[var(--primary)]",
             children: [
-              /* @__PURE__ */ jsx(ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-8 w-8 text-slate-400 dark:text-slate-400" }),
+              /* @__PURE__ */ jsx("span", { className: "flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--card)] text-[color-mix(in_oklab,var(--muted)_82%,transparent)] transition group-hover:text-[var(--primary)]", children: /* @__PURE__ */ jsx(ArrowUpFromBracketIcon, { "aria-hidden": true, className: "h-6 w-6" }) }),
               dropLabel,
               note
             ]
@@ -81,7 +81,7 @@ function UploadCard({
               animate: { opacity: 1, y: 0 },
               exit: { opacity: 0, y: -6 },
               transition: springSm,
-              className: "flex items-center gap-3 rounded-xl border border-slate-200 bg-white/70 p-2 dark:border-white/10 dark:bg-[var(--fx-surface)]",
+              className: "flex items-center gap-3 rounded-lg border border-[var(--border)] bg-[var(--card)] p-2",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
@@ -91,10 +91,10 @@ function UploadCard({
                       "%"
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-white/10", children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx("div", { className: "mt-1 h-2 w-full overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--surface)_84%,transparent)]", children: /* @__PURE__ */ jsx(
                     motion.div,
                     {
-                      className: "h-full w-full origin-left bg-gradient-to-r from-emerald-500/70 to-emerald-500/20 will-change-transform",
+                      className: "h-full w-full origin-left bg-[var(--primary)] will-change-transform",
                       initial: { scaleX: 0 },
                       animate: { scaleX: pct / 100 },
                       transition: springSm

package/dist/index.d.mts

@@ -92,7 +92,7 @@ export { default as ColorPicker, ColorPickerProps } from './ColorPicker.mjs';
 export { Accent, Theme, ThemeProvider, useTheme } from './theme/ThemeProvider.mjs';
 export { ThemeScript } from './theme/ThemeScript.mjs';
 export { default as ThemeToggle } from './theme/ThemeToggle.mjs';
-export { default as MarkdownEditor, MarkdownEditorProps } from './MarkdownEditor.mjs';
+export { default as MarkdownEditor, MarkdownEditorProps, MarkdownPreview, renderMarkdown } from './MarkdownEditor.mjs';
 export { default as QuoteEditor, QuoteEditorClientOption, QuoteEditorLabels, QuoteEditorProps } from './QuoteEditor.mjs';
 export { Currency, DiscountType, QuoteDraft, QuoteLine, QuoteStatus, QuoteTotals, TaxMethod, calcDiscountAmount, calcLineDiscount, calcLineSubtotal, calcQuoteTotals, calcSubtotal, clampIsrRetRate, clampIvaRetFactor, clampMoney, clampTaxRate, fmtMoney } from './quote.mjs';
 export { default as DocumentEditor, DocumentEditorLabels, DocumentEditorProps, DocumentPreview } from './DocumentEditor.mjs';

package/dist/index.d.ts

@@ -92,7 +92,7 @@ export { default as ColorPicker, ColorPickerProps } from './ColorPicker.js';
 export { Accent, Theme, ThemeProvider, useTheme } from './theme/ThemeProvider.js';
 export { ThemeScript } from './theme/ThemeScript.js';
 export { default as ThemeToggle } from './theme/ThemeToggle.js';
-export { default as MarkdownEditor, MarkdownEditorProps } from './MarkdownEditor.js';
+export { default as MarkdownEditor, MarkdownEditorProps, MarkdownPreview, renderMarkdown } from './MarkdownEditor.js';
 export { default as QuoteEditor, QuoteEditorClientOption, QuoteEditorLabels, QuoteEditorProps } from './QuoteEditor.js';
 export { Currency, DiscountType, QuoteDraft, QuoteLine, QuoteStatus, QuoteTotals, TaxMethod, calcDiscountAmount, calcLineDiscount, calcLineSubtotal, calcQuoteTotals, calcSubtotal, clampIsrRetRate, clampIvaRetFactor, clampMoney, clampTaxRate, fmtMoney } from './quote.js';
 export { default as DocumentEditor, DocumentEditorLabels, DocumentEditorProps, DocumentPreview } from './DocumentEditor.js';

package/dist/index.js

@@ -98,6 +98,7 @@ __export(index_exports, {
   LoginTools: () => import_LoginTools.default,
   Map: () => import_Map.default,
   MarkdownEditor: () => import_MarkdownEditor.default,
+  MarkdownPreview: () => import_MarkdownEditor.MarkdownPreview,
   MediaCard: () => import_MediaCard.default,
   MediaLibraryLayout: () => import_MediaLibraryLayout.default,
   MediaSelector: () => import_MediaSelector.default,
@@ -163,6 +164,7 @@ __export(index_exports, {
   formatNumericValue: () => import_Numeric.formatNumericValue,
   formatPercentValue: () => import_Numeric.formatPercentValue,
   generatePassword: () => import_PasswordField2.generatePassword,
+  renderMarkdown: () => import_MarkdownEditor.renderMarkdown,
   useCarousel: () => import_Carousel.useCarousel,
   useI18n: () => import_i18n.useI18n,
   useOmniSearchRegistry: () => import_OmniSearch2.useOmniSearchRegistry,
@@ -360,6 +362,7 @@ var import_LoginGallery = __toESM(require("./LoginGallery"));
   LoginTools,
   Map,
   MarkdownEditor,
+  MarkdownPreview,
   MediaCard,
   MediaLibraryLayout,
   MediaSelector,
@@ -425,6 +428,7 @@ var import_LoginGallery = __toESM(require("./LoginGallery"));
   formatNumericValue,
   formatPercentValue,
   generatePassword,
+  renderMarkdown,
   useCarousel,
   useI18n,
   useOmniSearchRegistry,

package/dist/index.mjs

@@ -112,7 +112,7 @@ import { default as default88 } from "./ColorPicker.mjs";
 import { default as default89, useTheme } from "./theme/ThemeProvider.mjs";
 import { default as default90 } from "./theme/ThemeScript.mjs";
 import { default as default91 } from "./theme/ThemeToggle.mjs";
-import { default as default92 } from "./MarkdownEditor.mjs";
+import { default as default92, MarkdownPreview, renderMarkdown } from "./MarkdownEditor.mjs";
 import { default as default93 } from "./QuoteEditor.mjs";
 export * from "./quote.mjs";
 import { default as default94, DocumentPreview } from "./DocumentEditor.mjs";
@@ -196,6 +196,7 @@ export {
   default100 as LoginTools,
   default4 as Map,
   default92 as MarkdownEditor,
+  MarkdownPreview,
   default32 as MediaCard,
   default33 as MediaLibraryLayout,
   default35 as MediaSelector,
@@ -261,6 +262,7 @@ export {
   formatNumericValue,
   formatPercentValue,
   generatePassword,
+  renderMarkdown,
   useCarousel,
   useI18n,
   useOmniSearchRegistry,

package/dist/theme/FontSizeController.js

@@ -54,7 +54,7 @@ function FontSizeController({
   labels
 }) {
   var _a, _b, _c, _d, _e;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
   const { fontScale, setFontScale, increaseFont, decreaseFont, resetFont } = (0, import_ThemeProvider.useTheme)();

package/dist/theme/FontSizeController.mjs

@@ -21,7 +21,7 @@ function FontSizeController({
   labels
 }) {
   var _a, _b, _c, _d, _e;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   const { fontScale, setFontScale, increaseFont, decreaseFont, resetFont } = useTheme();

package/dist/theme/ThemeController.js

@@ -82,7 +82,7 @@ function ThemeController({
   labels
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = import_react.default.useState(false);
   import_react.default.useEffect(() => setMounted(true), []);
   const { theme, setTheme, accent, setAccent } = (0, import_ThemeProvider.useTheme)();
@@ -269,6 +269,7 @@ function ThemeController({
                 style: popStyle,
                 role: "dialog",
                 "aria-label": (_g = labels == null ? void 0 : labels.accentGroup) != null ? _g : "Color",
+                "data-fx-keep-open": true,
                 className: [
                   "rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-2xl ring-1 ring-black/5",
                   "dark:ring-white/10",

package/dist/theme/ThemeController.mjs

@@ -49,7 +49,7 @@ function ThemeController({
   labels
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const POPOVER_Z_INDEX = 10050;
+  const POPOVER_Z_INDEX = 2147483647;
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => setMounted(true), []);
   const { theme, setTheme, accent, setAccent } = useTheme();
@@ -236,6 +236,7 @@ function ThemeController({
                 style: popStyle,
                 role: "dialog",
                 "aria-label": (_g = labels == null ? void 0 : labels.accentGroup) != null ? _g : "Color",
+                "data-fx-keep-open": true,
                 className: [
                   "rounded-2xl border border-[var(--border)] bg-[var(--card)] shadow-2xl ring-1 ring-black/5",
                   "dark:ring-white/10",