@lastbrain/ai-ui-react 1.0.25 → 1.0.26

package/dist/components/AiImageButton.js

@@ -1,13 +1,21 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { ImageIcon, Loader2, Download, Copy, ExternalLink, X, } from "lucide-react";
 import { useAiCallImage } from "../hooks/useAiCallImage";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
-import { UsageToast, useUsageToast } from "./UsageToast";
-export function AiImageButton({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onImage, onToast, disabled, className, children, ...buttonProps }) {
+import { useUsageToast } from "./UsageToast";
+import { aiStyles } from "../styles/inline";
+import { useAiContext } from "../context/AiProvider";
+export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", context: _context, model: _model, prompt: _prompt, onImage, onToast, disabled, className, children, showImageCard = true, onImageSave, storeOutputs, artifactTitle, ...buttonProps }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [generatedImage, setGeneratedImage] = useState(null);
     const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+    // Récupérer le contexte AiProvider avec fallback sur les props
+    const aiContext = useAiContext();
+    const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+    const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
     const handleOpenPanel = () => {
@@ -16,24 +24,226 @@ export function AiImageButton({ baseUrl, apiKeyId, uiMode = "modal", context, mo
     const handleClosePanel = () => {
         setIsOpen(false);
     };
+    // Actions sur l'image
+    const handleDownload = () => {
+        if (!generatedImage)
+            return;
+        const link = document.createElement("a");
+        link.href = generatedImage.url;
+        link.download = `ai-image-${generatedImage.requestId}.png`;
+        link.click();
+    };
+    const handleCopyUrl = async () => {
+        if (!generatedImage)
+            return;
+        try {
+            await navigator.clipboard.writeText(generatedImage.url);
+            onToast?.({
+                type: "success",
+                message: "URL copiée dans le presse-papier",
+            });
+        }
+        catch (_error) {
+            onToast?.({ type: "error", message: "Erreur lors de la copie" });
+        }
+    };
+    const handleSave = async () => {
+        if (!generatedImage || !onImageSave)
+            return;
+        try {
+            await onImageSave(generatedImage.url);
+            onToast?.({ type: "success", message: "Image sauvegardée" });
+        }
+        catch (_error) {
+            onToast?.({ type: "error", message: "Erreur lors de la sauvegarde" });
+        }
+    };
+    const handleCloseImage = () => {
+        setGeneratedImage(null);
+    };
+    // Styles selon le thème
+    const getThemeStyles = () => {
+        // Détection automatique du thème comme dans les autres composants
+        const isDark = typeof document !== "undefined" &&
+            (document.documentElement.classList.contains("dark") ||
+                (!document.documentElement.classList.contains("light") &&
+                    window.matchMedia("(prefers-color-scheme: dark)").matches));
+        return {
+            card: {
+                backgroundColor: isDark ? "#1f2937" : "white",
+                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+                color: isDark ? "#f3f4f6" : "#374151",
+            },
+            header: {
+                color: isDark ? "#f9fafb" : "#1f2937",
+            },
+            closeButton: {
+                color: isDark ? "#9ca3af" : "#6b7280",
+                hoverColor: isDark ? "#d1d5db" : "#374151",
+            },
+            imageContainer: {
+                backgroundColor: isDark ? "#111827" : "#f9fafb",
+            },
+            actionButton: {
+                backgroundColor: isDark ? "#374151" : "white",
+                border: `1px solid ${isDark ? "#4b5563" : "#e5e7eb"}`,
+                color: isDark ? "#d1d5db" : "#6b7280",
+                hoverBackground: isDark ? "#4b5563" : "#f3f4f6",
+                hoverColor: isDark ? "#f3f4f6" : "#1f2937",
+            },
+            metadata: {
+                borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
+                color: isDark ? "#9ca3af" : "#6b7280",
+            },
+        };
+    };
     const handleSubmit = async (selectedModel, selectedPrompt) => {
         try {
             const result = await generateImage({
                 model: selectedModel,
                 prompt: selectedPrompt,
+                size: "1024x1024", // Taille par défaut
             });
             if (result.url) {
-                onImage?.(result.url);
-                onToast?.({ type: "success", message: "Image generated successfully" });
-                showUsageToast(result);
+                // Stocker l'image générée
+                const imageData = {
+                    url: result.url,
+                    prompt: selectedPrompt,
+                    requestId: result.requestId,
+                    tokens: result.debitTokens,
+                };
+                setGeneratedImage(imageData);
+                onImage?.(result.url, {
+                    requestId: result.requestId,
+                    tokens: result.debitTokens,
+                });
+                onToast?.({ type: "success", message: "Image générée avec succès" });
+                // Afficher le toast de coût même en mode dev
+                showUsageToast({
+                    requestId: result.requestId,
+                    debitTokens: result.debitTokens,
+                    usage: {
+                        total_tokens: result.debitTokens,
+                        prompt_tokens: Math.floor(result.debitTokens * 0.8),
+                        completion_tokens: Math.floor(result.debitTokens * 0.2),
+                    },
+                    cost: apiKeyId?.includes("dev") ? 0 : result.debitTokens * 0.002, // Coût simulé
+                });
             }
         }
         catch (error) {
-            onToast?.({ type: "error", message: "Failed to generate image" });
+            onToast?.({
+                type: "error",
+                message: "Erreur lors de la génération de l'image",
+                code: error instanceof Error ? error.message : undefined,
+            });
         }
         finally {
             setIsOpen(false);
         }
     };
-    return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading, className: className, "data-ai-image-button": true, children: loading ? "Generating..." : children || "Generate Image" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models?.filter((m) => m.type === "image") || [] })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
+    return (_jsxs("div", { className: "flex items-start gap-4", children: [_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading, className: className, style: {
+                            ...aiStyles.button,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            cursor: disabled || loading ? "not-allowed" : "pointer",
+                            opacity: disabled || loading ? 0.6 : 1,
+                            backgroundColor: loading ? "#8b5cf6" : "#6366f1",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "12px",
+                            padding: "12px 20px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            minWidth: "140px",
+                            height: "44px",
+                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                            boxShadow: loading
+                                ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+                                : "0 2px 8px rgba(99, 102, 241, 0.2)",
+                            transform: "scale(1)",
+                            ...(loading && {
+                                background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+                                animation: "pulse 2s ease-in-out infinite",
+                            }),
+                            ...buttonProps.style,
+                        }, onMouseEnter: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1.02)";
+                                e.currentTarget.style.boxShadow =
+                                    "0 6px 16px rgba(99, 102, 241, 0.3)";
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1)";
+                                e.currentTarget.style.boxShadow = loading
+                                    ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+                                    : "0 2px 8px rgba(99, 102, 241, 0.2)";
+                            }
+                        }, onMouseDown: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(0.98)";
+                            }
+                        }, onMouseUp: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1.02)";
+                            }
+                        }, "data-ai-image-button": true, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "animate-spin", style: {
+                                        color: "white",
+                                        filter: "drop-shadow(0 0 2px rgba(255,255,255,0.3))",
+                                    } }), _jsx("span", { style: { letterSpacing: "0.025em" }, children: "G\u00E9n\u00E9ration..." })] })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { size: 18, style: {
+                                        color: "white",
+                                        filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
+                                    } }), _jsx("span", { style: { letterSpacing: "0.025em" }, children: children || "Générer une image" })] })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models?.filter((m) => m.type === "image") || [] }))] }), showImageCard && generatedImage && (_jsxs("div", { className: "relative", style: {
+                    maxWidth: "320px",
+                    borderRadius: "12px",
+                    padding: "16px",
+                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+                    ...getThemeStyles().card,
+                }, children: [_jsxs("div", { className: "flex items-start justify-between mb-3", children: [_jsx("h3", { className: "font-medium text-sm leading-tight", style: {
+                                    maxWidth: "calc(100% - 32px)",
+                                    ...getThemeStyles().header,
+                                }, title: generatedImage.prompt, children: generatedImage.prompt.length > 60
+                                    ? `${generatedImage.prompt.substring(0, 60)}...`
+                                    : generatedImage.prompt }), _jsx("button", { onClick: handleCloseImage, className: "transition-colors flex-shrink-0", style: {
+                                    padding: "2px",
+                                    borderRadius: "4px",
+                                    backgroundColor: "transparent",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    color: getThemeStyles().closeButton.color,
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().closeButton.hoverColor;
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().closeButton.color;
+                                }, children: _jsx(X, { size: 16 }) })] }), _jsx("div", { className: "mb-4 rounded-lg overflow-hidden", style: getThemeStyles().imageContainer, children: _jsx("img", { src: generatedImage.url, alt: generatedImage.prompt, className: "w-full h-auto", style: {
+                                maxHeight: "200px",
+                                objectFit: "contain",
+                                display: "block",
+                            } }) }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs("button", { onClick: handleDownload, className: "flex items-center gap-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors", style: getThemeStyles().actionButton, onMouseEnter: (e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        getThemeStyles().actionButton.hoverBackground;
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().actionButton.hoverColor;
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        getThemeStyles().actionButton.backgroundColor;
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().actionButton.color;
+                                }, title: "T\u00E9l\u00E9charger l'image", children: [_jsx(Download, { size: 14 }), "T\u00E9l\u00E9charger"] }), _jsxs("button", { onClick: handleCopyUrl, className: "flex items-center gap-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors", style: getThemeStyles().actionButton, onMouseEnter: (e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        getThemeStyles().actionButton.hoverBackground;
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().actionButton.hoverColor;
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.backgroundColor =
+                                        getThemeStyles().actionButton.backgroundColor;
+                                    e.currentTarget.style.color =
+                                        getThemeStyles().actionButton.color;
+                                }, title: "Copier l'URL", children: [_jsx(Copy, { size: 14 }), "Copier URL"] }), onImageSave && (_jsxs("button", { onClick: handleSave, className: "flex items-center gap-1 px-3 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors", title: "Sauvegarder en base", children: [_jsx(ExternalLink, { size: 14 }), "Sauvegarder"] }))] }), _jsx("div", { className: "mt-3 pt-3 text-xs", style: {
+                            ...getThemeStyles().metadata,
+                        }, children: _jsx("div", { className: "flex justify-center", children: _jsxs("span", { children: ["ID: ", generatedImage.requestId.slice(-8)] }) }) })] }))] }));
 }

package/dist/components/AiStatusButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAYtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CA6hBrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAYtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAiiBrB"}

package/dist/components/AiStatusButton.js

@@ -164,7 +164,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                     }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
                                 ...aiStyles.tooltipSection,
                                 ...aiStyles.tooltipSectionFirst,
-                            }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.name })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.env })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: ["$", formatFixed(balanceUsed, 6), " / $", formatNumber(balanceTotal)] }), renderUsageCircle(balancePercentage)] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [formatStorage(storageUsed), " /", " ", formatStorage(storageAllocated)] }), renderUsageCircle(storagePercentage)] })] }), _jsxs("div", { style: {
+                            }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key?.name || "N/A" })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key?.env || "N/A" })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key?.rate_limit_rpm || 0, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: ["$", formatFixed(balanceUsed, 6), " / $", formatNumber(balanceTotal)] }), renderUsageCircle(balancePercentage)] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [formatStorage(storageUsed), " /", " ", formatStorage(storageAllocated)] }), renderUsageCircle(storagePercentage)] })] }), _jsxs("div", { style: {
                                 ...aiStyles.tooltipActions,
                                 width: "100%",
                                 flexDirection: "row",

package/dist/components/UsageToast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UsageToast.d.ts","sourceRoot":"","sources":["../../src/components/UsageToast.tsx"],"names":[],"mappings":"AAKA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAyB,EACzB,UAAU,GACX,EAAE,eAAe,kDAgJjB;AAED,wBAAgB,aAAa;6BAIK,OAAO;;;;EAgBxC"}
+{"version":3,"file":"UsageToast.d.ts","sourceRoot":"","sources":["../../src/components/UsageToast.tsx"],"names":[],"mappings":"AAKA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAyB,EACzB,UAAU,GACX,EAAE,eAAe,kDAkJjB;AAED,wBAAgB,aAAa;6BAIK,OAAO;;;;EAgBxC"}

package/dist/components/UsageToast.js

@@ -8,9 +8,11 @@ export function UsageToast({ result, position = "bottom-right", onComplete, }) {
     const fadeTimeoutRef = useRef(null);
     useEffect(() => {
         if (result) {
-            // Show toast immediately
-            setIsVisible(true);
-            setIsClosing(false);
+            // Show toast immediately - using startTransition to avoid cascading renders warning
+            queueMicrotask(() => {
+                setIsVisible(true);
+                setIsClosing(false);
+            });
         }
         return () => {
             if (fadeTimeoutRef.current) {

package/dist/examples/AiChipInputExample.d.ts

@@ -0,0 +1,2 @@
+export declare function AiChipInputExample(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiChipInputExample.d.ts.map

package/dist/examples/AiChipInputExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiChipInputExample.d.ts","sourceRoot":"","sources":["../../src/examples/AiChipInputExample.tsx"],"names":[],"mappings":"AAMA,wBAAgB,kBAAkB,4CA0EjC"}

package/dist/examples/AiChipInputExample.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AiChipInput } from "../components/AiChipLabel";
+import { AiProvider } from "../context/AiProvider";
+export function AiChipInputExample() {
+    const [tags, setTags] = useState(["react", "typescript"]);
+    return (_jsx(AiProvider, { baseUrl: "/api/ai", apiKeyId: "dev-key-example", children: _jsxs("div", { style: { padding: "20px", maxWidth: "600px" }, children: [_jsx("h2", { style: { marginBottom: "16px" }, children: "Exemple AiChipInput" }), _jsxs("div", { style: { marginBottom: "24px" }, children: [_jsx("label", { style: { display: "block", marginBottom: "8px", fontWeight: "500" }, children: "Tags du projet" }), _jsx(AiChipInput, { value: tags, onChange: setTags, placeholder: "Ajoutez des tags s\u00E9par\u00E9s par des virgules ou g\u00E9n\u00E9rez avec l'IA...", context: "web development", maxChips: 10, allowDuplicates: false })] }), _jsxs("div", { style: {
+                        marginTop: "20px",
+                        padding: "16px",
+                        backgroundColor: "#f8f9fa",
+                        borderRadius: "6px",
+                    }, children: [_jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "14px" }, children: "Valeur actuelle :" }), _jsx("pre", { style: { margin: 0, fontSize: "12px" }, children: JSON.stringify(tags, null, 2) })] }), _jsxs("div", { style: { marginTop: "16px", fontSize: "14px", color: "#6b7280" }, children: [_jsx("p", { children: _jsx("strong", { children: "Mode d\u00E9veloppement :" }) }), _jsxs("ul", { style: { paddingLeft: "20px" }, children: [_jsx("li", { children: "API Key contient \"dev\" \u2192 Simulation activ\u00E9e" }), _jsx("li", { children: "Pas d'appel API r\u00E9el" }), _jsx("li", { children: "G\u00E9n\u00E9ration de tags simul\u00E9s : \"react, typescript, javascript...\"" })] }), _jsx("p", { children: _jsx("strong", { children: "Instructions :" }) }), _jsxs("ul", { style: { paddingLeft: "20px" }, children: [_jsx("li", { children: "Tapez du texte et appuyez sur Entr\u00E9e pour cr\u00E9er un chip" }), _jsx("li", { children: "S\u00E9parez plusieurs tags avec des virgules (,) ou des points-virgules (;)" }), _jsx("li", { children: "Cliquez sur l'ic\u00F4ne \u2728 pour g\u00E9n\u00E9rer des tags automatiquement" }), _jsx("li", { children: "Utilisez le \u274C sur chaque chip pour le supprimer" }), _jsx("li", { children: "Appuyez sur Backspace dans un champ vide pour supprimer le dernier chip" })] })] })] }) }));
+}

package/dist/examples/AiContextButtonExample.d.ts

@@ -0,0 +1,2 @@
+export declare function AiContextButtonExample(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiContextButtonExample.d.ts.map

package/dist/examples/AiContextButtonExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiContextButtonExample.d.ts","sourceRoot":"","sources":["../../src/examples/AiContextButtonExample.tsx"],"names":[],"mappings":"AAqEA,wBAAgB,sBAAsB,4CA4QrC"}

package/dist/examples/AiContextButtonExample.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AiContextButton } from "@lastbrain/ai-ui-react";
+import { useState } from "react";
+// Données d'exemple pour le tableau
+const sampleTableData = [
+    {
+        id: 1,
+        user: "Alice Martin",
+        product: "Laptop Pro X1",
+        sales: 15420,
+        commission: 1542,
+        region: "Nord",
+        month: "Janvier 2026",
+    },
+    {
+        id: 2,
+        user: "Bob Durant",
+        product: "Smartphone Z10",
+        sales: 8750,
+        commission: 875,
+        region: "Sud",
+        month: "Janvier 2026",
+    },
+    {
+        id: 3,
+        user: "Claire Dubois",
+        product: "Tablet Air 5",
+        sales: 12300,
+        commission: 1230,
+        region: "Est",
+        month: "Janvier 2026",
+    },
+    {
+        id: 4,
+        user: "David Moreau",
+        product: "Laptop Pro X1",
+        sales: 18900,
+        commission: 1890,
+        region: "Ouest",
+        month: "Janvier 2026",
+    },
+    {
+        id: 5,
+        user: "Emma Leroy",
+        product: "Smartphone Z10",
+        sales: 6420,
+        commission: 642,
+        region: "Centre",
+        month: "Janvier 2026",
+    },
+];
+// Données de produits pour un autre exemple
+const productAnalytics = {
+    period: "Q1 2026",
+    totalRevenue: 2450000,
+    products: [
+        { name: "Laptop Pro X1", revenue: 980000, units: 320, avgPrice: 3062.5 },
+        { name: "Smartphone Z10", revenue: 750000, units: 500, avgPrice: 1500 },
+        { name: "Tablet Air 5", revenue: 720000, units: 400, avgPrice: 1800 },
+    ],
+    regions: {
+        Nord: { revenue: 650000, growth: "+12%" },
+        Sud: { revenue: 580000, growth: "+8%" },
+        Est: { revenue: 520000, growth: "+15%" },
+        Ouest: { revenue: 700000, growth: "+20%" },
+    },
+};
+export function AiContextButtonExample() {
+    const [analysisResults, setAnalysisResults] = useState([]);
+    const handleSalesAnalysis = (result, metadata) => {
+        console.log("Analyse des ventes:", { result, metadata });
+        setAnalysisResults((prev) => [
+            ...prev,
+            `Ventes: ${result.substring(0, 100)}...`,
+        ]);
+    };
+    const handleProductAnalysis = (result, metadata) => {
+        console.log("Analyse produits:", { result, metadata });
+        setAnalysisResults((prev) => [
+            ...prev,
+            `Produits: ${result.substring(0, 100)}...`,
+        ]);
+    };
+    const handleToast = (data) => {
+        console.log(`${data.type}: ${data.message}`);
+    };
+    return (_jsxs("div", { className: "p-6 max-w-6xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-bold mb-6", children: "AI Context Button - Exemples" }), _jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "1. Analyse de donn\u00E9es de ventes" }), _jsx("div", { className: "mb-4 overflow-hidden rounded-lg border border-gray-200", children: _jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [_jsx("thead", { className: "bg-gray-50", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Vendeur" }), _jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Produit" }), _jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Ventes (\u20AC)" }), _jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Commission (\u20AC)" }), _jsx("th", { className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "R\u00E9gion" })] }) }), _jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: sampleTableData.map((row) => (_jsxs("tr", { className: "hover:bg-gray-50", children: [_jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900", children: row.user }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: row.product }), _jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: [row.sales.toLocaleString(), " \u20AC"] }), _jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: [row.commission.toLocaleString(), " \u20AC"] }), _jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: row.region })] }, row.id))) })] }) }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(AiContextButton, { contextData: sampleTableData, contextDescription: "Donn\u00E9es de ventes par vendeur pour Janvier 2026", onResult: handleSalesAnalysis, onToast: handleToast, resultModalTitle: "Analyse des Ventes - Janvier 2026", children: "Analyser les ventes" }), _jsx(AiContextButton, { contextData: sampleTableData, contextDescription: "Performance des vendeurs", onResult: handleSalesAnalysis, onToast: handleToast, resultModalTitle: "Top Performers", children: "Top 3 vendeurs" })] })] }), _jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "2. Analyse de performance produits" }), _jsxs("div", { className: "mb-4 p-6 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6", children: [_jsxs("div", { className: "bg-white p-4 rounded-lg shadow-sm", children: [_jsx("h3", { className: "text-sm font-medium text-gray-500", children: "Chiffre d'affaires total" }), _jsxs("p", { className: "text-2xl font-bold text-gray-900", children: [productAnalytics.totalRevenue.toLocaleString(), " \u20AC"] })] }), _jsxs("div", { className: "bg-white p-4 rounded-lg shadow-sm", children: [_jsx("h3", { className: "text-sm font-medium text-gray-500", children: "P\u00E9riode" }), _jsx("p", { className: "text-2xl font-bold text-gray-900", children: productAnalytics.period })] }), _jsxs("div", { className: "bg-white p-4 rounded-lg shadow-sm", children: [_jsx("h3", { className: "text-sm font-medium text-gray-500", children: "Produits" }), _jsx("p", { className: "text-2xl font-bold text-gray-900", children: productAnalytics.products.length })] }), _jsxs("div", { className: "bg-white p-4 rounded-lg shadow-sm", children: [_jsx("h3", { className: "text-sm font-medium text-gray-500", children: "R\u00E9gions" }), _jsx("p", { className: "text-2xl font-bold text-gray-900", children: Object.keys(productAnalytics.regions).length })] })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-3", children: "Performance par produit" }), _jsx("div", { className: "space-y-2", children: productAnalytics.products.map((product, index) => (_jsxs("div", { className: "flex justify-between items-center p-3 bg-white rounded", children: [_jsx("span", { className: "font-medium", children: product.name }), _jsxs("div", { className: "text-right", children: [_jsxs("div", { className: "text-sm text-gray-600", children: [product.units, " unit\u00E9s"] }), _jsxs("div", { className: "font-semibold", children: [product.revenue.toLocaleString(), " \u20AC"] })] })] }, index))) })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold mb-3", children: "Performance par r\u00E9gion" }), _jsx("div", { className: "space-y-2", children: Object.entries(productAnalytics.regions).map(([region, data]) => (_jsxs("div", { className: "flex justify-between items-center p-3 bg-white rounded", children: [_jsx("span", { className: "font-medium", children: region }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-sm text-green-600", children: data.growth }), _jsxs("div", { className: "font-semibold", children: [data.revenue.toLocaleString(), " \u20AC"] })] })] }, region))) })] })] })] }), _jsxs("div", { className: "flex gap-3 flex-wrap", children: [_jsx(AiContextButton, { contextData: productAnalytics, contextDescription: "Analytics de performance produits Q1 2026", onResult: handleProductAnalysis, onToast: handleToast, resultModalTitle: "Analyse de Performance - Q1 2026", children: "Analyser les performances" }), _jsx(AiContextButton, { contextData: productAnalytics, contextDescription: "Donn\u00E9es produits et r\u00E9gions", onResult: handleProductAnalysis, onToast: handleToast, resultModalTitle: "Recommandations Strat\u00E9giques", children: "Recommandations" })] })] }), _jsxs("div", { className: "mb-8", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "3. Analyse de texte libre" }), _jsxs("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-700 mb-2", children: _jsx("strong", { children: "Feedback client :" }) }), _jsx("p", { className: "italic", children: "\"Le produit est excellent en terme de qualit\u00E9 mais le prix me semble un peu \u00E9lev\u00E9. La livraison a \u00E9t\u00E9 rapide et le service client tr\u00E8s r\u00E9actif quand j'ai eu un probl\u00E8me avec ma commande. Je recommande ce produit mais j'esp\u00E8re que les prix baisseront \u00E0 l'avenir.\"" })] }), _jsx(AiContextButton, { contextData: "Le produit est excellent en terme de qualit\u00E9 mais le prix me semble un peu \u00E9lev\u00E9. La livraison a \u00E9t\u00E9 rapide et le service client tr\u00E8s r\u00E9actif quand j'ai eu un probl\u00E8me avec ma commande. Je recommande ce produit mais j'esp\u00E8re que les prix baisseront \u00E0 l'avenir.", contextDescription: "Feedback client sur un produit", onResult: (result) => console.log("Analyse sentiment:", result), onToast: handleToast, resultModalTitle: "Analyse de Sentiment Client", children: "Analyser le sentiment" })] }), analysisResults.length > 0 && (_jsxs("div", { className: "mt-8", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Historique des analyses" }), _jsx("div", { className: "space-y-2", children: analysisResults.map((result, index) => (_jsx("div", { className: "p-3 bg-blue-50 rounded-lg text-sm", children: result }, index))) })] }))] }));
+}

package/dist/examples/AiImageButtonExample.d.ts

@@ -0,0 +1,2 @@
+export declare function ExampleUsage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiImageButtonExample.d.ts.map

package/dist/examples/AiImageButtonExample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiImageButtonExample.d.ts","sourceRoot":"","sources":["../../src/examples/AiImageButtonExample.tsx"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,4CAoE3B"}

package/dist/examples/AiImageButtonExample.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AiImageButton } from "@lastbrain/ai-ui-react";
+import { useState } from "react";
+export function ExampleUsage() {
+    const [savedImages, setSavedImages] = useState([]);
+    const handleImageGenerated = (url, metadata) => {
+        console.log("Image générée:", { url, metadata });
+        // L'image est automatiquement affichée dans la card
+    };
+    const handleImageSave = async (url) => {
+        // Simulation d'une sauvegarde en base
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        // Ici vous pouvez faire l'appel API pour sauvegarder en base
+        // const response = await fetch('/api/images', {
+        //   method: 'POST',
+        //   body: JSON.stringify({ url }),
+        //   headers: { 'Content-Type': 'application/json' }
+        // });
+        setSavedImages((prev) => [...prev, url]);
+    };
+    const handleToast = (data) => {
+        // Vous pouvez utiliser votre système de toast préféré ici
+        console.log(`${data.type}: ${data.message}`);
+    };
+    return (_jsxs("div", { className: "p-6", children: [_jsx("h1", { className: "text-2xl font-bold mb-4", children: "G\u00E9n\u00E9rateur d'Images AI" }), _jsx(AiImageButton, { onImage: handleImageGenerated, onImageSave: handleImageSave, onToast: handleToast, showImageCard: true, className: "mb-4", children: "Cr\u00E9er une image" }), savedImages.length > 0 && (_jsxs("div", { className: "mt-8", children: [_jsxs("h2", { className: "text-lg font-semibold mb-2", children: ["Images sauvegard\u00E9es (", savedImages.length, ")"] }), _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: savedImages.map((url, index) => (_jsx("div", { className: "border rounded-lg p-2", children: _jsx("img", { src: url, alt: `Saved image ${index + 1}`, className: "w-full h-32 object-cover rounded" }) }, index))) })] }))] }));
+}

package/dist/hooks/useAiCallImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAiCallImage.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCallImage.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IACrE,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,wBAAgB,cAAc,CAC5B,OAAO,CAAC,EAAE,qBAAqB,GAC9B,oBAAoB,CA6BtB"}
+{"version":3,"file":"useAiCallImage.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCallImage.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA8H7E,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,eAAe,CAAC,CAAC;IACrE,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,wBAAgB,cAAc,CAC5B,OAAO,CAAC,EAAE,qBAAqB,GAC9B,oBAAoB,CAsDtB"}

package/dist/hooks/useAiCallImage.js

@@ -1,6 +1,95 @@
 "use client";
 import { useState, useCallback } from "react";
 import { useAiClient } from "./useAiClient";
+/**
+ * Génère une image Canvas pour l'environnement de développement
+ */
+async function generateDevImage(prompt, width, height) {
+    // Créer un canvas
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+        throw new Error("Could not create canvas context");
+    }
+    canvas.width = width;
+    canvas.height = height;
+    // Générer des couleurs basées sur le prompt
+    const promptHash = prompt
+        .split("")
+        .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 255, 0);
+    // Couleurs de base dégradées
+    const colors = [
+        `hsl(${(promptHash * 7) % 360}, 70%, 60%)`,
+        `hsl(${(promptHash * 11) % 360}, 60%, 70%)`,
+        `hsl(${(promptHash * 13) % 360}, 50%, 80%)`,
+    ];
+    // Créer un dégradé radial
+    const gradient = ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, Math.max(width, height) / 2);
+    gradient.addColorStop(0, colors[0]);
+    gradient.addColorStop(0.5, colors[1]);
+    gradient.addColorStop(1, colors[2]);
+    // Remplir le fond
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+    // Ajouter des formes géométriques basées sur le prompt
+    const shapes = prompt.split(" ").slice(0, 5);
+    shapes.forEach((word, index) => {
+        const wordHash = word
+            .split("")
+            .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 1000, 0);
+        ctx.save();
+        ctx.globalAlpha = 0.3 + index * 0.1;
+        ctx.fillStyle = `hsl(${(wordHash * 17) % 360}, 80%, 50%)`;
+        // Formes différentes selon l'index
+        const x = (wordHash % (width - 100)) + 50;
+        const y = ((wordHash * 3) % (height - 100)) + 50;
+        const size = 30 + (wordHash % 50);
+        switch (index % 4) {
+            case 0: // Cercle
+                ctx.beginPath();
+                ctx.arc(x, y, size, 0, Math.PI * 2);
+                ctx.fill();
+                break;
+            case 1: // Carré
+                ctx.fillRect(x - size / 2, y - size / 2, size, size);
+                break;
+            case 2: // Triangle
+                ctx.beginPath();
+                ctx.moveTo(x, y - size / 2);
+                ctx.lineTo(x - size / 2, y + size / 2);
+                ctx.lineTo(x + size / 2, y + size / 2);
+                ctx.closePath();
+                ctx.fill();
+                break;
+            case 3: // Losange
+                ctx.save();
+                ctx.translate(x, y);
+                ctx.rotate((wordHash / 100) % (Math.PI * 2));
+                ctx.fillRect(-size / 2, -size / 2, size, size);
+                ctx.restore();
+                break;
+        }
+        ctx.restore();
+    });
+    // Ajouter le texte du prompt en overlay
+    ctx.save();
+    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+    ctx.font = `bold ${Math.min(width, height) / 30}px system-ui, -apple-system, sans-serif`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    // Fond semi-transparent pour le texte
+    const textMetrics = ctx.measureText(prompt);
+    const textWidth = textMetrics.width;
+    const textHeight = parseInt(ctx.font);
+    ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
+    ctx.fillRect(width / 2 - textWidth / 2 - 20, height / 2 - textHeight / 2 - 10, textWidth + 40, textHeight + 20);
+    // Texte du prompt
+    ctx.fillStyle = "white";
+    ctx.fillText(prompt, width / 2, height / 2);
+    ctx.restore();
+    // Convertir en data URL
+    return canvas.toDataURL("image/png", 0.8);
+}
 export function useAiCallImage(options) {
     const client = useAiClient(options);
     const [loading, setLoading] = useState(false);
@@ -9,6 +98,23 @@ export function useAiCallImage(options) {
         setLoading(true);
         setError(null);
         try {
+            // Vérifier si on est en mode dev (API key contient "dev")
+            if (options?.apiKeyId?.includes("dev")) {
+                // Simulation complète pour l'environnement dev
+                await new Promise((resolve) => setTimeout(resolve, 2000)); // Délai réaliste pour simuler l'API
+                // Parse size format "1024x1024" or default to "1024x1024"
+                const sizeMatch = request.size?.match(/(\d+)x(\d+)/);
+                const width = sizeMatch ? parseInt(sizeMatch[1]) : 1024;
+                const height = sizeMatch ? parseInt(sizeMatch[2]) : 1024;
+                // Créer une image générée avec Canvas
+                const imageUrl = await generateDevImage(request.prompt, width, height);
+                return {
+                    requestId: `dev-img-${Date.now()}`,
+                    url: imageUrl,
+                    debitTokens: 30, // Coût simulé
+                };
+            }
+            // Mode production : appel API normal
             const result = await client.generateImage(request);
             return result;
         }
@@ -20,7 +126,7 @@ export function useAiCallImage(options) {
         finally {
             setLoading(false);
         }
-    }, [client]);
+    }, [client, options?.apiKeyId]);
     return {
         generateImage,
         loading,

package/dist/hooks/useAiCallText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAiCallText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCallText.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CA6BrB"}
+{"version":3,"file":"useAiCallText.d.ts","sourceRoot":"","sources":["../../src/hooks/useAiCallText.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG3E,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAClE,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAC3B,OAAO,CAAC,EAAE,oBAAoB,GAC7B,mBAAmB,CA0DrB"}