@beweco/aurora-ui 0.1.48 → 0.1.49

package/dist/index.cjs.js

@@ -1822,7 +1822,7 @@ KanbanColumn.displayName = "KanbanColumn";
  * Traducciones por defecto en español.
  * Se mezclan con las traducciones proporcionadas por el usuario.
  */
-var DEFAULT_TRANSLATIONS$1 = {
+var DEFAULT_TRANSLATIONS$2 = {
     dropHere: "Soltar aquí",
     emptyMessage: "No hay elementos",
 };
@@ -1856,7 +1856,7 @@ var columnGapClasses = {
 var KanbanComponent = function (_a) {
     var columns = _a.columns, renderItem = _a.renderItem, onCardClick = _a.onCardClick, onItemMove = _a.onItemMove, isDraggable = _a.isDraggable, cardClassName = _a.cardClassName, isCardClickable = _a.isCardClickable, className = _a.className, _b = _a.columnWidth, columnWidth = _b === void 0 ? "280px" : _b, _c = _a.columnGap, columnGap = _c === void 0 ? "md" : _c, _d = _a.horizontalScroll, horizontalScroll = _d === void 0 ? true : _d, columnMaxHeight = _a.columnMaxHeight, renderColumnHeader = _a.renderColumnHeader, renderEmptyState = _a.renderEmptyState, _e = _a.translations, translations = _e === void 0 ? {} : _e, onLoadMore = _a.onLoadMore;
     // Mezclar traducciones del usuario con las por defecto
-    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$1), translations);
+    var t = __assign(__assign({}, DEFAULT_TRANSLATIONS$2), translations);
     // Determinar si drag está habilitado
     var dragEnabled = isDraggable !== null && isDraggable !== void 0 ? isDraggable : !!onItemMove;
     // Estado del drag actual
@@ -3682,6 +3682,391 @@ function GlobalToast() {
     return (jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[2000] w-full max-w-sm", children: jsxRuntime.jsx(react.Alert, { hideIconWrapper: true, color: toast.color, variant: "flat", title: toast.title, description: toast.description, isClosable: true, onClose: hideToast }) }));
 }
 
+/**
+ * Subscribe to a CSS media query and return its current match state.
+ */
+var useMediaQuery = function (query, initialValue) {
+    if (initialValue === void 0) { initialValue = true; }
+    var _a = React.useState(function () {
+        if (typeof window === "undefined") {
+            return initialValue;
+        }
+        return window.matchMedia(query).matches;
+    }), matches = _a[0], setMatches = _a[1];
+    React.useEffect(function () {
+        if (typeof window === "undefined") {
+            return;
+        }
+        var mediaQuery = window.matchMedia(query);
+        var onMediaQueryChange = function (event) {
+            setMatches(event.matches);
+        };
+        setMatches(mediaQuery.matches);
+        if (typeof mediaQuery.addEventListener === "function") {
+            mediaQuery.addEventListener("change", onMediaQueryChange);
+            return function () { return mediaQuery.removeEventListener("change", onMediaQueryChange); };
+        }
+        var legacyMediaQuery = mediaQuery;
+        legacyMediaQuery.addListener(onMediaQueryChange);
+        return function () { return legacyMediaQuery.removeListener(onMediaQueryChange); };
+    }, [query]);
+    return matches;
+};
+
+/** Default typing speed in milliseconds per character */
+var DEFAULT_TYPING_SPEED_MS = 20;
+/** Default system primary color token for the aura glow */
+var DEFAULT_AURA_COLOR = "hsl(var(--heroui-primary))";
+/** Default max width for the speech bubble */
+var DEFAULT_MAX_WIDTH = 420;
+/** Orb dimensions by size variant */
+var ORB_SIZES = {
+    sm: 96,
+    md: 128,
+    lg: 160,
+    xl: 192,
+};
+
+var isHexColor = function (value) {
+    var normalized = value.startsWith("#") ? value.slice(1) : value;
+    return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(normalized);
+};
+var hexToRgba = function (hexColor, alpha) {
+    var hex = hexColor.replace("#", "");
+    var parsed = hex.length === 3
+        ? hex
+            .split("")
+            .map(function (c) { return c + c; })
+            .join("")
+        : hex;
+    var r = parseInt(parsed.slice(0, 2), 16);
+    var g = parseInt(parsed.slice(2, 4), 16);
+    var b = parseInt(parsed.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+};
+var colorWithAlpha = function (color, alpha) {
+    if (isHexColor(color)) {
+        var normalized = color.startsWith("#") ? color : "#".concat(color);
+        return hexToRgba(normalized, alpha);
+    }
+    return "color-mix(in srgb, ".concat(color, " ").concat(Math.round(alpha * 100), "%, transparent)");
+};
+var STATE_ANIMATIONS = {
+    excited: {
+        scale: [1, 1.05, 1],
+        rotate: [0, 5, -5, 0],
+    },
+    thinking: {
+        scale: [1, 0.95, 1],
+        rotate: [0, 360],
+        transition: {
+            rotate: { duration: 8, repeat: Infinity, ease: "linear" },
+        },
+    },
+    happy: {
+        y: [0, -10, 0],
+    },
+    concerned: {
+        scale: [1, 0.9, 1],
+        opacity: [1, 0.8, 1],
+    },
+    learning: {
+        scale: [1, 1.1, 1],
+        rotate: [0, -5, 5, 0],
+    },
+    surprised: {
+        scale: [1, 1.2, 1],
+        y: [0, -15, 0],
+    },
+    inspired: {
+        scale: [1, 1.15, 1],
+    },
+};
+var AuraGlow = function (_a) {
+    var _b;
+    var _c = _a.state, state = _c === void 0 ? "happy" : _c, _d = _a.size, size = _d === void 0 ? "xl" : _d, _e = _a.animated, animated = _e === void 0 ? true : _e, _f = _a.className, className = _f === void 0 ? "" : _f;
+    var auraBaseColor = DEFAULT_AURA_COLOR;
+    var auraStrong = colorWithAlpha(auraBaseColor, 0.6);
+    var auraMedium = colorWithAlpha(auraBaseColor, 0.45);
+    var auraSoft = colorWithAlpha(auraBaseColor, 0.25);
+    var auraGlow = colorWithAlpha(auraBaseColor, 0.8);
+    var animations = animated && STATE_ANIMATIONS[state] ? STATE_ANIMATIONS[state] : {};
+    var dimension = (_b = ORB_SIZES[size]) !== null && _b !== void 0 ? _b : ORB_SIZES.xl;
+    return (jsxRuntime.jsxs(framerMotion.motion.div, { animate: animated
+            ? __assign({ y: [0, -12, 0] }, animations) : {}, transition: {
+            y: { duration: 5, repeat: Infinity, ease: "easeInOut" },
+            default: { duration: 0.5 },
+        }, className: className, style: {
+            width: "".concat(dimension, "px"),
+            height: "".concat(dimension, "px"),
+            position: "relative",
+            background: "none",
+            border: "none",
+            boxShadow: "none",
+            outline: "none",
+        }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+                    opacity: [0.2, 0.5, 0.2],
+                    scale: [1, 1.3, 1],
+                    rotate: [0, 180, 360],
+                }, transition: {
+                    duration: 8,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                }, className: "pointer-events-none", style: {
+                    position: "absolute",
+                    top: "-50%",
+                    left: "-50%",
+                    right: "-50%",
+                    bottom: "-50%",
+                    background: "radial-gradient(circle, ".concat(auraMedium, " 0%, ").concat(auraSoft, " 50%, transparent 70%)"),
+                    filter: "blur(40px)",
+                    borderRadius: "9999px",
+                    border: "none",
+                    boxShadow: "none",
+                } }), jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+                    opacity: [0.4, 0.7, 0.4],
+                    scale: [1.1, 1.25, 1.1],
+                    rotate: [360, 0],
+                }, transition: {
+                    duration: 10,
+                    repeat: Infinity,
+                    ease: "linear",
+                }, className: "pointer-events-none", style: {
+                    position: "absolute",
+                    top: "-30%",
+                    left: "-30%",
+                    right: "-30%",
+                    bottom: "-30%",
+                    background: "radial-gradient(ellipse, ".concat(auraStrong, " 0%, ").concat(auraMedium, " 40%, ").concat(auraSoft, " 70%, transparent 100%)"),
+                    filter: "blur(30px)",
+                    borderRadius: "9999px",
+                    border: "none",
+                    boxShadow: "none",
+                } }), jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+                    opacity: [0.6, 1, 0.6],
+                    scale: [0.9, 1.1, 0.9],
+                }, transition: {
+                    duration: 3,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                }, className: "pointer-events-none", style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: "radial-gradient(circle, ".concat(auraGlow, " 0%, ").concat(auraStrong, " 30%, ").concat(auraSoft, " 60%, transparent 100%)"),
+                    filter: "blur(20px)",
+                    borderRadius: "9999px",
+                    border: "none",
+                    boxShadow: "none",
+                } }), jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+                    opacity: [0.3, 0.8, 0.3],
+                    rotate: [0, -360],
+                    scale: [1, 1.15, 1],
+                }, transition: {
+                    duration: 12,
+                    repeat: Infinity,
+                    ease: "linear",
+                }, className: "pointer-events-none", style: {
+                    position: "absolute",
+                    top: "10%",
+                    left: "10%",
+                    right: "10%",
+                    bottom: "10%",
+                    background: "conic-gradient(from 0deg, transparent 0deg, ".concat(auraMedium, " 90deg, ").concat(auraSoft, " 180deg, ").concat(auraMedium, " 270deg, transparent 360deg)"),
+                    filter: "blur(15px)",
+                    mixBlendMode: "screen",
+                    borderRadius: "9999px",
+                    border: "none",
+                    boxShadow: "none",
+                } }), __spreadArray([], Array(3), true).map(function (_, i) { return (jsxRuntime.jsx(framerMotion.motion.div, { animate: {
+                    opacity: [0, 0.6, 0],
+                    scale: [0.5, 1.5, 0.5],
+                    x: [0, (i % 2 === 0 ? 1 : -1) * (15 + i * 5)],
+                    y: [0, (i % 2 === 0 ? -1 : 1) * (15 + i * 5)],
+                }, transition: {
+                    duration: 4 + i,
+                    repeat: Infinity,
+                    delay: i * 1.5,
+                    ease: "easeInOut",
+                }, className: "absolute w-4 h-4 rounded-full", style: {
+                    top: "".concat(30 + i * 20, "%"),
+                    left: "".concat(30 + i * 20, "%"),
+                    background: i % 2 === 0
+                        ? "radial-gradient(circle, ".concat(auraGlow, ", transparent)")
+                        : "radial-gradient(circle, ".concat(auraMedium, ", transparent)"),
+                    filter: "blur(8px)",
+                } }, i)); })] }));
+};
+
+var toGraphemes = function (value) {
+    var IntlWithSegmenter = Intl;
+    if (typeof Intl !== "undefined" && IntlWithSegmenter.Segmenter) {
+        var seg = new IntlWithSegmenter.Segmenter("es", { granularity: "grapheme" });
+        return Array.from(seg.segment(value), function (s) { return s.segment; });
+    }
+    return Array.from(value); // fallback
+};
+var SpeechBubble = React.memo(function (_a) {
+    var text = _a.text, _b = _a.typing, typing = _b === void 0 ? false : _b, _c = _a.typingSpeed, typingSpeed = _c === void 0 ? DEFAULT_TYPING_SPEED_MS : _c, _d = _a.maxWidth, maxWidth = _d === void 0 ? 700 : _d, _e = _a.className, className = _e === void 0 ? "" : _e, onTypingComplete = _a.onTypingComplete;
+    var _f = React.useState(typing ? "" : typeof text === "string" ? text : ""), displayedText = _f[0], setDisplayedText = _f[1];
+    var _g = React.useState(typing), isTyping = _g[0], setIsTyping = _g[1];
+    var onTypingCompleteRef = React.useRef(onTypingComplete);
+    var intervalIdRef = React.useRef(null);
+    React.useEffect(function () {
+        onTypingCompleteRef.current = onTypingComplete;
+    }, [onTypingComplete]);
+    React.useEffect(function () {
+        var currentText = typeof text === "string" ? toGraphemes(text) : [''];
+        if (!typing) {
+            setDisplayedText(currentText.join(''));
+            setIsTyping(false);
+            return;
+        }
+        if (intervalIdRef.current) {
+            return;
+        }
+        setIsTyping(true);
+        setDisplayedText("");
+        var cancelled = false;
+        var charIndex = 0;
+        intervalIdRef.current = setInterval(function () {
+            var _a, _b;
+            if (cancelled)
+                return;
+            if (charIndex >= currentText.length) {
+                clearInterval((_a = intervalIdRef.current) !== null && _a !== void 0 ? _a : undefined);
+                intervalIdRef.current = null;
+                setIsTyping(false);
+                (_b = onTypingCompleteRef.current) === null || _b === void 0 ? void 0 : _b.call(onTypingCompleteRef);
+                return;
+            }
+            var char = currentText[charIndex];
+            charIndex++;
+            setDisplayedText(function (prev) { return prev + char; });
+        }, typingSpeed);
+        return function () {
+            var _a;
+            if (intervalIdRef.current) {
+                clearInterval((_a = intervalIdRef.current) !== null && _a !== void 0 ? _a : undefined);
+                intervalIdRef.current = null;
+            }
+            cancelled = true;
+        };
+    }, []);
+    return (jsxRuntime.jsxs(framerMotion.motion.div, { initial: { opacity: 0, y: 12, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1 }, transition: {
+            duration: 0.6,
+            ease: [0.4, 0.0, 0.2, 1],
+        }, className: "relative ".concat(className), style: { maxWidth: "".concat(maxWidth, "px") }, children: [jsxRuntime.jsx("div", { className: "bg-white/85 dark:bg-gray-900/85 backdrop-blur-xl rounded-3xl px-8 py-6 shadow-[0_8px_30px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.3)] border border-white/50 dark:border-gray-800/50", children: jsxRuntime.jsxs("p", { className: "text-lg text-gray-800 dark:text-gray-200 leading-relaxed font-sans font-normal", children: [displayedText, isTyping && (jsxRuntime.jsx(framerMotion.motion.span, { animate: { opacity: [0.3, 1, 0.3] }, transition: {
+                                duration: 1.2,
+                                repeat: Infinity,
+                                ease: "easeInOut",
+                            }, className: "inline-block ml-1.5 w-0.5 h-5 bg-blue-500/50 align-middle rounded-full" }))] }) }), jsxRuntime.jsx("div", { className: "absolute -top-2 left-10 w-4 h-4 bg-white/85 dark:bg-gray-900/85 border-l border-t border-white/50 dark:border-gray-800/50 transform rotate-45 backdrop-blur-xl" })] }));
+});
+
+/**
+ * AssistantOrb
+ *
+ * A compound component that renders an animated aurora orb
+ * with a speech bubble featuring a character-by-character typing effect.
+ * Designed for AI assistant UIs with AuraUI system theming.
+ */
+var AssistantOrb = function (_a) {
+    var _b;
+    var text = _a.text, _c = _a.state, state = _c === void 0 ? "happy" : _c, _d = _a.size, size = _d === void 0 ? "xl" : _d, _e = _a.animated, animated = _e === void 0 ? true : _e, _f = _a.typing, typing = _f === void 0 ? false : _f, _g = _a.typingSpeed, typingSpeed = _g === void 0 ? DEFAULT_TYPING_SPEED_MS : _g, hint = _a.hint, _h = _a.maxWidth, maxWidth = _h === void 0 ? DEFAULT_MAX_WIDTH : _h, onTypingComplete = _a.onTypingComplete, translations = _a.translations, _j = _a.className, className = _j === void 0 ? "" : _j;
+    var hintText = (_b = translations === null || translations === void 0 ? void 0 : translations.hint) !== null && _b !== void 0 ? _b : hint;
+    var handleTypingComplete = React.useCallback(function () {
+        onTypingComplete === null || onTypingComplete === void 0 ? void 0 : onTypingComplete();
+    }, []);
+    return (jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center gap-6 max-w-md ".concat(className), children: [jsxRuntime.jsx(AuraGlow, { state: state, size: size, animated: animated }), jsxRuntime.jsx(SpeechBubble, { text: text, typing: typing, typingSpeed: typingSpeed, maxWidth: maxWidth, onTypingComplete: handleTypingComplete }), hintText && (jsxRuntime.jsx(framerMotion.motion.p, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: {
+                    delay: 0.6,
+                    duration: 0.6,
+                    ease: [0.4, 0.0, 0.2, 1],
+                }, className: "text-sm text-gray-500 dark:text-gray-400 text-center mt-4 font-normal", children: hintText }))] }));
+};
+
+var TYPING_SPEED_MS = 15;
+var DESKTOP_BREAKPOINT_PX = 1024;
+var WELCOME_GRADIENTS = [
+    "linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(147, 51, 234, 0.02) 50%, rgba(168, 85, 247, 0.02) 100%)",
+    "linear-gradient(135deg, rgba(147, 51, 234, 0.03) 0%, rgba(168, 85, 247, 0.02) 50%, rgba(59, 130, 246, 0.02) 100%)",
+    "linear-gradient(135deg, rgba(168, 85, 247, 0.03) 0%, rgba(59, 130, 246, 0.02) 50%, rgba(147, 51, 234, 0.02) 100%)",
+];
+var AURORAS = [
+    {
+        size: "w-[700px] h-[700px]",
+        color: "from-blue-400/4 to-transparent",
+        position: { top: "10%", left: "10%" },
+        duration: 45,
+    },
+    {
+        size: "w-[600px] h-[600px]",
+        color: "from-purple-400/4 to-transparent",
+        position: { bottom: "15%", right: "15%" },
+        duration: 50,
+    },
+    {
+        size: "w-[500px] h-[500px]",
+        color: "from-violet-400/3 to-transparent",
+        position: { top: "50%", left: "50%" },
+        duration: 55,
+    },
+];
+var DEFAULT_TRANSLATIONS$1 = {
+    backButtonLabel: "Atras",
+};
+var BackButton = function (_a) {
+    var onPress = _a.onPress, _b = _a.visible, visible = _b === void 0 ? true : _b, _c = _a.className, className = _c === void 0 ? "" : _c, label = _a.label;
+    if (!visible) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: "fixed top-6 left-6 z-30 ".concat(className), children: jsxRuntime.jsx(react.Button, { variant: "light", size: "sm", onPress: onPress, className: "bg-transparent hover:bg-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 px-3", startContent: jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }), children: label }) }));
+};
+var Aurora = function (_a) {
+    var size = _a.size, color = _a.color, position = _a.position, duration = _a.duration, _b = _a.delay, delay = _b === void 0 ? 0 : _b;
+    return (jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute ".concat(size, " rounded-full bg-gradient-radial ").concat(color, " blur-3xl"), style: position, animate: {
+            x: [0, 40, -20, 0],
+            y: [0, -30, 20, 0],
+            scale: [1, 1.1, 0.95, 1],
+            opacity: [0.3, 0.5, 0.35, 0.3],
+        }, transition: {
+            duration: duration,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: [0.4, 0.0, 0.2, 1],
+            delay: delay,
+        } }));
+};
+var AnimatedBackground = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? "" : _b;
+    return (jsxRuntime.jsxs("div", { className: "absolute inset-0 z-0 overflow-hidden pointer-events-none ".concat(className), children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950" }), jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-0", animate: { background: WELCOME_GRADIENTS }, transition: {
+                    duration: 30,
+                    repeat: Number.POSITIVE_INFINITY,
+                    ease: "linear",
+                } }), AURORAS.map(function (aurora, index) { return (jsxRuntime.jsx(Aurora, __assign({}, aurora, { delay: index * 5 }), aurora.duration)); })] }));
+};
+var TwoColumnLayoutAgent = function (_a) {
+    var _b = _a.assistantState, assistantState = _b === void 0 ? "happy" : _b, assistantSpeech = _a.assistantSpeech, _c = _a.assistantSize, assistantSize = _c === void 0 ? "xl" : _c, assistantHint = _a.assistantHint, _d = _a.enableSequence, enableSequence = _d === void 0 ? true : _d, children = _a.children, _e = _a.showBackButton, showBackButton = _e === void 0 ? false : _e, onBack = _a.onBack, _f = _a.translations, translations = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g;
+    var _h = React.useState(!enableSequence), showRightContent = _h[0], setShowRightContent = _h[1];
+    var isDesktop = useMediaQuery("(min-width: ".concat(DESKTOP_BREAKPOINT_PX, "px)"));
+    var t = React.useMemo(function () { return (__assign(__assign({}, DEFAULT_TRANSLATIONS$1), translations)); }, [translations]);
+    var handleBackPress = onBack !== null && onBack !== void 0 ? onBack : (function () { return undefined; });
+    React.useEffect(function () {
+        if (enableSequence && !showRightContent) {
+            var safetyTimeout_1 = setTimeout(function () {
+                setShowRightContent(true);
+            }, 10000);
+            return function () { return clearTimeout(safetyTimeout_1); };
+        }
+    }, [enableSequence, showRightContent]);
+    var handleTypingComplete = function () {
+        setTimeout(function () {
+            setShowRightContent(true);
+        }, 100);
+    };
+    return (jsxRuntime.jsxs("div", { className: "min-h-screen relative isolate overflow-hidden ".concat(className), children: [jsxRuntime.jsx(BackButton, { onPress: handleBackPress, visible: showBackButton, label: t.backButtonLabel }), jsxRuntime.jsx(AnimatedBackground, {}), jsxRuntime.jsx("div", { className: "relative z-10 flex flex-col h-screen", children: jsxRuntime.jsxs("div", { className: "flex-grow flex overflow-hidden", children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { opacity: 0, x: -30 }, animate: { opacity: 1, x: 0 }, transition: { duration: 0.8, ease: [0.4, 0.0, 0.2, 1] }, className: "".concat(isDesktop ? "flex w-2/5" : "hidden", " flex-col items-center justify-center p-8 xl:p-12"), children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: assistantSize, animated: true, typing: enableSequence, typingSpeed: TYPING_SPEED_MS, hint: assistantHint, onTypingComplete: handleTypingComplete }) }), jsxRuntime.jsxs("div", { className: "".concat(isDesktop ? "w-3/5 p-12" : "w-full p-6 sm:p-8", " flex flex-col items-center justify-center overflow-y-auto"), children: [!isDesktop && (jsxRuntime.jsx("div", { className: "mb-8 flex flex-col items-center gap-4", children: jsxRuntime.jsx(AssistantOrb, { text: assistantSpeech, state: assistantState, size: "lg", animated: true, typing: false }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: showRightContent && (jsxRuntime.jsx(framerMotion.motion.div, { initial: { opacity: 0, x: 30 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -30 }, transition: { duration: 0.6, ease: [0.4, 0.0, 0.2, 1] }, className: "w-full max-w-2xl", children: children }, "right-content")) })] })] }) })] }));
+};
+
 // Traducciones por defecto en español
 var defaultTranslations$1 = {
     uploadText: "Da clic y selecciona tus archivos",
@@ -5298,6 +5683,7 @@ exports.ThemePicker = ThemePicker;
 exports.ThemeProvider = ThemeProvider;
 exports.TimeInputComponent = TimeInput;
 exports.ToastContext = ToastContext;
+exports.TwoColumnLayoutAgent = TwoColumnLayoutAgent;
 exports.UploadFile = UploadFile;
 exports.VerticalSteps = VerticalSteps;
 exports.Wizard = Wizard;
@@ -5307,6 +5693,7 @@ exports.defaultTranslations = defaultTranslations$4;
 exports.sizeMap = sizeMap;
 exports.themeColors = themeColors;
 exports.useAuraToast = useAuraToast;
+exports.useMediaQuery = useMediaQuery;
 exports.useNavigationLoading = useNavigationLoading;
 exports.useThemeContext = useThemeContext;
 Object.keys(react).forEach(function (k) {