framepexls-ui-lib 2.2.8 → 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/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.css

@@ -46,6 +46,47 @@
     }
   }
 
+  @keyframes fx-chat-message {
+    from {
+      opacity: 0;
+      transform: translate3d(var(--fx-chat-x, 0), 8px, 0) scale(0.98);
+      filter: blur(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes fx-chat-panel {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 10px, 0) scale(0.98);
+      filter: blur(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+      filter: blur(0);
+    }
+  }
+
+  @keyframes fx-chat-badge {
+    0% {
+      opacity: 0;
+      transform: translate3d(4px, -4px, 0) scale(0.7);
+    }
+    70% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1.08);
+    }
+    100% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0) scale(1);
+    }
+  }
+
   .fx-skeleton {
     position: relative;
     overflow: hidden;
@@ -85,6 +126,12 @@
     .fx-skeleton[data-animate="pulse"] {
       animation: none;
     }
+
+    [class*="fx-chat-message"],
+    [class*="fx-chat-panel"],
+    [class*="fx-chat-badge"] {
+      animation: none !important;
+    }
   }
 
   /* Color picker (react-colorful) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "2.2.8",
+  "version": "2.2.11",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",
@@ -50,6 +50,7 @@
   "dependencies": {
     "framer-motion": "12.23.26",
     "maplibre-gl": "^5.15.0",
+    "mermaid": "^11.16.0",
     "qrcode": "^1.5.4",
     "react-colorful": "^5.6.1"
   },
@@ -67,11 +68,6 @@
     "tsup": "^8.1.0",
     "typescript": "^5.9.3"
   },
-  "scripts": {
-    "build": "tsup && node scripts/fix-esm-extensions.mjs && node scripts/copy-css.mjs",
-    "dev": "tsup --watch",
-    "prepare": "npm run build"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cponce-framepexls/ui-lib.git"
@@ -80,5 +76,9 @@
   "bugs": {
     "url": "https://github.com/cponce-framepexls/ui-lib/issues"
   },
-  "homepage": "https://github.com/cponce-framepexls/ui-lib#readme"
-}
+  "homepage": "https://github.com/cponce-framepexls/ui-lib#readme",
+  "scripts": {
+    "build": "tsup && node scripts/fix-esm-extensions.mjs && node scripts/copy-css.mjs",
+    "dev": "tsup --watch"
+  }
+}