flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/ai/CodeBlock/LanguageIcon.js

@@ -0,0 +1,103 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useId } from 'react';
+import { cn } from '../../../utils/cn.js';
+import '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
+
+/**
+ * Branded language icons for CodeBlock
+ * Maps language names to their respective SVG icons
+ */
+var LanguageIcon = function (_a) {
+    var language = _a.language, className = _a.className, props = __rest(_a, ["language", "className"]);
+    var id = useId();
+    var normalizedLang = language.toLowerCase();
+    switch (normalizedLang) {
+        case "python":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("linearGradient", { id: "".concat(id, "-python-a"), gradientUnits: "userSpaceOnUse", x1: "70.252", y1: "1237.476", x2: "170.659", y2: "1151.089", gradientTransform: "matrix(.563 0 0 -.568 -29.215 707.817)" },
+                    React__default.createElement("stop", { offset: "0", stopColor: "#5A9FD4" }),
+                    React__default.createElement("stop", { offset: "1", stopColor: "#306998" })),
+                React__default.createElement("linearGradient", { id: "".concat(id, "-python-b"), gradientUnits: "userSpaceOnUse", x1: "209.474", y1: "1098.811", x2: "173.62", y2: "1149.537", gradientTransform: "matrix(.563 0 0 -.568 -29.215 707.817)" },
+                    React__default.createElement("stop", { offset: "0", stopColor: "#FFD43B" }),
+                    React__default.createElement("stop", { offset: "1", stopColor: "#FFE873" })),
+                React__default.createElement("path", { fill: "url(#".concat(id, "-python-a)"), d: "M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137H29.977c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491V67.234c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548V15.833c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zM50.037 9.557c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z", transform: "translate(0 10.26)" }),
+                React__default.createElement("path", { fill: "url(#".concat(id, "-python-b)"), d: "M91.682 28.38v10.966c0 8.5-7.208 15.655-15.426 15.655H51.591c-6.756 0-12.346 5.783-12.346 12.549v23.515c0 6.691 5.818 10.628 12.346 12.547 7.816 2.297 15.312 2.713 24.665 0 6.216-1.801 12.346-5.423 12.346-12.547v-9.412H63.938v-3.138h37.012c7.176 0 9.852-5.005 12.348-12.519 2.578-7.735 2.467-15.174 0-25.096-1.774-7.145-5.161-12.521-12.348-12.521h-9.268zM77.809 87.927c2.561 0 4.634 2.097 4.634 4.692 0 2.602-2.074 4.719-4.634 4.719-2.55 0-4.633-2.117-4.633-4.719 0-2.595 2.083-4.692 4.633-4.692z", transform: "translate(0 10.26)" }),
+                React__default.createElement("radialGradient", { id: "".concat(id, "-python-c"), cx: "1825.678", cy: "444.45", r: "26.743", gradientTransform: "matrix(0 -.24 -1.055 0 532.979 557.576)", gradientUnits: "userSpaceOnUse" },
+                    React__default.createElement("stop", { offset: "0", stopColor: "#B8B8B8", stopOpacity: ".498" }),
+                    React__default.createElement("stop", { offset: "1", stopColor: "#7F7F7F", stopOpacity: "0" })),
+                React__default.createElement("path", { opacity: ".444", fill: "url(#".concat(id, "-python-c)"), d: "M97.309 119.597c0 3.543-14.816 6.416-33.091 6.416-18.276 0-33.092-2.873-33.092-6.416 0-3.544 14.815-6.417 33.092-6.417 18.275 0 33.091 2.872 33.091 6.417z" })));
+        case "js":
+        case "javascript":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#F0DB4F", d: "M1.408 1.408h125.184v125.185H1.408z" }),
+                React__default.createElement("path", { fill: "#323330", d: "M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zM69.462 58.943H57.753l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z" })));
+        case "ts":
+        case "tsx":
+        case "typescript":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#fff", d: "M22.67 47h99.67v73.67H22.67z" }),
+                React__default.createElement("path", { fill: "#007acc", d: "M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 017.82 4.5 20.58 20.58 0 013 4c0 .16-5.4 3.81-8.69 5.85-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 00-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.58 4.58 0 00.54 2.34c.83 1.73 2.38 2.76 7.24 4.86 8.95 3.85 12.78 6.39 15.16 10 2.66 4 3.25 10.46 1.45 15.24-2 5.2-6.9 8.73-13.83 9.9a38.32 38.32 0 01-9.52-.1 23 23 0 01-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9.34 9.34 0 011.15-.73L82 101l3.59-2.08.75 1.11a16.78 16.78 0 004.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 00.69-6.92c-1-1.39-3-2.56-8.59-5-6.45-2.78-9.23-4.5-11.77-7.24a16.48 16.48 0 01-3.43-6.25 25 25 0 01-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.66 31.66 0 019.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49.19 49.19 0 01.12-5.17C29.08 59 39 59 51 59h21.83z" })));
+        case "java":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#0074BD", d: "M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z" }),
+                React__default.createElement("path", { fill: "#EA2D2E", d: "M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z" }),
+                React__default.createElement("path", { fill: "#0074BD", d: "M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171-4.451-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.953-3.487-32.013 6.85-13.743 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326 9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958 10.832-5.239 19.644-4.643 19.644-4.643zm40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725 0-.002.359-.327.468-.617z" }),
+                React__default.createElement("path", { fill: "#EA2D2E", d: "M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587z" }),
+                React__default.createElement("path", { fill: "#0074BD", d: "M52.214 126.021c22.476 1.437 57-.8 57.817-11.436 0 0-1.571 4.032-18.577 7.231-19.186 3.612-42.854 3.191-56.887.874 0 .001 2.875 2.381 17.647 3.331z" })));
+        case "csharp":
+        case "cs":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#9B4F96", d: "M115.4 30.7L67.1 2.9c-.8-.5-1.9-.7-3.1-.7-1.2 0-2.3.3-3.1.7l-48 27.9c-1.7 1-2.9 3.5-2.9 5.4v55.7c0 1.1.2 2.4 1 3.5l106.8-62c-.6-1.2-1.5-2.1-2.4-2.7z" }),
+                React__default.createElement("path", { fill: "#68217A", d: "M10.7 95.3c.5.8 1.2 1.5 1.9 1.9l48.2 27.9c.8.5 1.9.7 3.1.7 1.2 0 2.3-.3 3.1-.7l48-27.9c1.7-1 2.9-3.5 2.9-5.4V36.1c0-.9-.1-1.9-.6-2.8l-106.6 62z" }),
+                React__default.createElement("path", { fill: "#fff", d: "M85.3 76.1C81.1 83.5 73.1 88.5 64 88.5c-13.5 0-24.5-11-24.5-24.5s11-24.5 24.5-24.5c9.1 0 17.1 5 21.3 12.5l13-7.5c-6.8-11.9-19.6-20-34.3-20-21.8 0-39.5 17.7-39.5 39.5s17.7 39.5 39.5 39.5c14.6 0 27.4-8 34.2-19.8l-12.9-7.6zM97 66.2l.9-4.3h-4.2v-4.7h5.1L100 51h4.9l-1.2 6.1h3.8l1.2-6.1h4.8l-1.2 6.1h2.4v4.7h-3.3l-.9 4.3h4.2v4.7h-5.1l-1.2 6h-4.9l1.2-6h-3.8l-1.2 6h-4.8l1.2-6h-2.4v-4.7H97zm4.8 0h3.8l.9-4.3h-3.8l-.9 4.3z" })));
+        case "go":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("g", { fill: "#00acd7", fillRule: "evenodd" },
+                    React__default.createElement("path", { d: "M11.156 54.829c-.243 0-.303-.122-.182-.303l1.273-1.637c.12-.182.424-.303.666-.303H34.55c.243 0 .303.182.182.364l-1.03 1.576c-.121.181-.424.363-.606.363zM2.004 60.404c-.242 0-.303-.12-.182-.303l1.273-1.636c.121-.182.424-.303.667-.303h27.636c.242 0 .364.182.303.364l-.485 1.454c-.06.243-.303.364-.545.364zM16.67 65.98c-.242 0-.302-.182-.181-.364l.848-1.515c.122-.182.364-.363.607-.363h12.12c.243 0 .364.181.364.424l-.12 1.454c0 .243-.243.425-.425.425zM79.58 53.738c-3.819.97-6.425 1.697-10.182 2.666-.91.243-.97.303-1.758-.606-.909-1.03-1.576-1.697-2.848-2.303-3.819-1.878-7.516-1.333-10.97.91-4.121 2.666-6.242 6.605-6.182 11.514.06 4.849 3.394 8.849 8.182 9.516 4.121.545 7.576-.91 10.303-4 .545-.667 1.03-1.394 1.636-2.243H56.064c-1.272 0-1.575-.788-1.151-1.818.788-1.879 2.242-5.03 3.09-6.606.183-.364.607-.97 1.516-.97h22.06c-.12 1.637-.12 3.273-.363 4.91-.667 4.363-2.303 8.363-4.97 11.878-4.364 5.758-10.06 9.333-17.273 10.303-5.939.788-11.454-.364-16.302-4-4.485-3.394-7.03-7.879-7.697-13.454-.788-6.606 1.151-12.546 5.151-17.758 4.303-5.636 10-9.212 16.97-10.485 5.697-1.03 11.151-.363 16.06 2.97 3.212 2.121 5.515 5.03 7.03 8.545.364.546.122.849-.606 1.03z" }),
+                    React__default.createElement("path", { d: "M99.64 87.253c-5.515-.122-10.546-1.697-14.788-5.334-3.576-3.09-5.818-7.03-6.545-11.697-1.091-6.848.787-12.909 4.909-18.302 4.424-5.819 9.757-8.849 16.97-10.122 6.181-1.09 12-.484 17.272 3.091 4.788 3.273 7.757 7.697 8.545 13.515 1.03 8.182-1.333 14.849-6.97 20.546-4 4.06-8.909 6.606-14.545 7.757-1.636.303-3.273.364-4.848.546zm14.424-24.485c-.06-.788-.06-1.394-.182-2-1.09-6-6.606-9.394-12.363-8.06-5.637 1.272-9.273 4.848-10.606 10.545-1.091 4.727 1.212 9.515 5.575 11.454 3.334 1.455 6.667 1.273 9.879-.363 4.788-2.485 7.394-6.364 7.697-11.576z", fillRule: "nonzero" }))));
+        case "ruby":
+        case "rb":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#d91404", d: "m35.971 111.33 81.958 11.188c-9.374-15.606-18.507-30.813-27.713-46.144Zm89.71-86.383L93.513 73.339c-.462.696-1.061 1.248-.41 2.321 8.016 13.237 15.969 26.513 23.942 39.777 1.258 2.095 2.53 4.182 4.157 6.192l4.834-96.58zM16.252 66.22c.375.355 1.311.562 1.747.347 7.689-3.779 15.427-7.474 22.948-11.564 2.453-1.333 4.339-3.723 6.452-5.661 6.997-6.417 13.983-12.847 20.966-19.278.427-.395.933-.777 1.188-1.275 2.508-4.902 4.973-9.829 7.525-14.898-3.043-1.144-5.928-2.263-8.849-3.281-.396-.138-1.02.136-1.449.375-6.761 3.777-13.649 7.353-20.195 11.472-3.275 2.061-5.943 5.098-8.843 7.743-4.674 4.266-9.342 8.542-13.948 12.882a24.011 24.011 0 0 0-3.288 3.854c-3.15 4.587-6.206 9.24-9.402 14.025 1.786 1.847 3.41 3.613 5.148 5.259zm28.102-6.271-11.556 48.823 54.3-34.987zm76.631-34.846-46.15 7.71 15.662 38.096zM44.996 56.644l41.892 13.6c-5.25-12.79-10.32-25.133-15.495-37.737ZM16.831 75.643 2.169 110.691l27.925-.825Zm13.593 26.096.346-.076c3.353-13.941 6.754-27.786 10.177-42.272L18.544 71.035c3.819 9.926 7.891 20.397 11.88 30.704zm84.927-78.897c-4.459-1.181-8.918-2.366-13.379-3.539-6.412-1.686-12.829-3.351-19.237-5.052-.801-.213-1.38-.352-1.851.613-2.265 4.64-4.6 9.245-6.901 13.868-.071.143-.056.328-.111.687l41.47-6.285zM89.482 12.288l36.343 10.054-6.005-17.11-30.285 6.715ZM33.505 114.007c-4.501-.519-9.122-.042-13.687.037-3.75.063-7.5.206-11.25.323-.386.012-.771.09-1.156.506 31.003 2.866 62.005 5.732 93.007 8.6l.063-.414-29.815-4.07c-12.384-1.691-24.747-3.551-37.162-4.982ZM2.782 99.994c3.995-9.27 7.973-18.546 11.984-27.809.401-.929.37-1.56-.415-2.308-1.678-1.597-3.237-3.318-5.071-5.226-2.479 12.24-4.897 24.177-7.317 36.113l.271.127c.185-.297.411-.578.548-.897zm78.74-90.153c6.737-1.738 13.572-3.097 20.367-4.613.44-.099.87-.244 1.303-.368l-.067-.332-29.194 3.928c2.741 1.197 4.853 2.091 7.591 1.385z" })));
+        case "php":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { d: "M64 30.332C28.654 30.332 0 45.407 0 64s28.654 33.668 64 33.668c35.345 0 64-15.075 64-33.668S99.346 30.332 64 30.332zm-5.982 9.81h7.293v.003l-1.745 8.968h6.496c4.087 0 6.908.714 8.458 2.139 1.553 1.427 2.017 3.737 1.398 6.93l-3.053 15.7h-7.408l2.902-14.929c.33-1.698.208-2.855-.365-3.473-.573-.617-1.793-.925-3.658-.925h-5.828L58.752 73.88h-7.291l6.557-33.738zM26.73 49.114h14.133c4.252 0 7.355 1.116 9.305 3.348 1.95 2.232 2.536 5.346 1.758 9.346-.32 1.649-.863 3.154-1.625 4.52-.763 1.364-1.76 2.613-2.99 3.745-1.468 1.373-3.098 2.353-4.891 2.936-1.794.585-4.08.875-6.858.875h-6.294l-1.745 8.97h-7.35l6.557-33.74zm57.366 0h14.13c4.252 0 7.353 1.116 9.303 3.348h.002c1.95 2.232 2.538 5.346 1.76 9.346-.32 1.649-.861 3.154-1.623 4.52-.763 1.364-1.76 2.613-2.992 3.745-1.467 1.373-3.098 2.353-4.893 2.936-1.794.585-4.077.875-6.855.875h-6.295l-1.744 8.97h-7.35l6.557-33.74zm-51.051 5.325-2.742 14.12h4.468c2.963 0 5.172-.556 6.622-1.673 1.45-1.116 2.428-2.981 2.937-5.592.485-2.507.264-4.279-.666-5.309-.93-1.032-2.79-1.547-5.584-1.547h-5.035zm57.363 0-2.744 14.12h4.47c2.965 0 5.17-.556 6.622-1.673 1.449-1.116 2.427-2.981 2.935-5.592.487-2.507.266-4.279-.664-5.309-.93-1.032-2.792-1.547-5.584-1.547h-5.035z" })));
+        case "html":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#E44D26", d: "M19.037 113.876L9.032 1.661h109.936l-10.016 112.198-45.019 12.48z" }),
+                React__default.createElement("path", { fill: "#F16529", d: "M64 116.8l36.378-10.086 8.559-95.878H64z" }),
+                React__default.createElement("path", { fill: "#EBEBEB", d: "M64 52.455H45.788L44.53 38.361H64V24.599H29.489l.33 3.692 3.382 37.927H64zm0 35.743l-.061.017-15.327-4.14-.979-10.975H33.816l1.928 21.609 28.193 7.826.063-.017z" }),
+                React__default.createElement("path", { fill: "#fff", d: "M63.952 52.455v13.763h16.947l-1.597 17.849-15.35 4.143v14.319l28.215-7.82.207-2.325 3.234-36.233.335-3.696h-3.708zm0-27.856v13.762h33.244l.276-3.092.628-6.978.329-3.692z" })));
+        case "scss":
+        case "sass":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#CB6699", d: "M1.219 56.156c0 .703.207 1.167.323 1.618.756 2.933 2.381 5.45 4.309 7.746 2.746 3.272 6.109 5.906 9.554 8.383 2.988 2.148 6.037 4.248 9.037 6.38.515.366 1.002.787 1.561 1.236-.481.26-.881.489-1.297.7-3.959 2.008-7.768 4.259-11.279 6.986-2.116 1.644-4.162 3.391-5.607 5.674-2.325 3.672-3.148 7.584-1.415 11.761.506 1.22 1.278 2.274 2.367 3.053.353.252.749.502 1.162.6 1.058.249 2.136.412 3.207.609l3.033-.002c3.354-.299 6.407-1.448 9.166-3.352 4.312-2.976 7.217-6.966 8.466-12.087.908-3.722.945-7.448-.125-11.153a11.696 11.696 0 00-.354-1.014c-.13-.333-.283-.657-.463-1.072l6.876-3.954.103.088c-.125.409-.258.817-.371 1.23-.817 2.984-1.36 6.02-1.165 9.117.208 3.3 1.129 6.389 3.061 9.146 1.562 2.23 5.284 2.313 6.944.075.589-.795 1.16-1.626 1.589-2.513 1.121-2.315 2.159-4.671 3.23-7.011l.187-.428c-.077 1.108-.167 2.081-.208 3.055-.064 1.521.025 3.033.545 4.48.445 1.238 1.202 2.163 2.62 2.326.97.111 1.743-.333 2.456-.896a10.384 10.384 0 002.691-3.199c1.901-3.491 3.853-6.961 5.576-10.54 1.864-3.871 3.494-7.855 5.225-11.792l.286-.698c.409 1.607.694 3.181 1.219 4.671.61 1.729 1.365 3.417 2.187 5.058.389.775.344 1.278-.195 1.928-2.256 2.72-4.473 5.473-6.692 8.223-.491.607-.98 1.225-1.389 1.888a3.701 3.701 0 00-.48 1.364 1.737 1.737 0 001.383 1.971 9.661 9.661 0 002.708.193c3.097-.228 5.909-1.315 8.395-3.157 3.221-2.386 4.255-5.642 3.475-9.501-.211-1.047-.584-2.065-.947-3.074-.163-.455-.174-.774.123-1.198 2.575-3.677 4.775-7.578 6.821-11.569.081-.157.164-.314.306-.482.663 3.45 1.661 6.775 3.449 9.792-.912.879-1.815 1.676-2.632 2.554-1.799 1.934-3.359 4.034-4.173 6.595-.35 1.104-.619 2.226-.463 3.405.242 1.831 1.742 3.021 3.543 2.604 3.854-.892 7.181-2.708 9.612-5.925 1.636-2.166 1.785-4.582 1.1-7.113-.188-.688-.411-1.365-.651-2.154.951-.295 1.878-.649 2.837-.868 4.979-1.136 9.904-.938 14.702.86 2.801 1.05 5.064 2.807 6.406 5.571 1.639 3.379.733 6.585-2.452 8.721-.297.199-.637.356-.883.605a.869.869 0 00-.205.67c.021.123.346.277.533.275 1.047-.008 1.896-.557 2.711-1.121 2.042-1.413 3.532-3.314 3.853-5.817l.063-.188-.077-1.63c-.031-.094.023-.187.016-.258-.434-3.645-2.381-6.472-5.213-8.688-3.28-2.565-7.153-3.621-11.249-3.788a25.401 25.401 0 00-9.765 1.503c-.897.325-1.786.71-2.688 1.073-.121-.219-.251-.429-.358-.646-.926-1.896-2.048-3.708-2.296-5.882-.176-1.544-.392-3.086-.025-4.613.353-1.469.813-2.913 1.246-4.362.223-.746.066-1.164-.646-1.5a2.854 2.854 0 00-.786-.258c-1.75-.254-3.476-.109-5.171.384-.6.175-1.036.511-1.169 1.175-.076.381-.231.746-.339 1.122-.443 1.563-.757 3.156-1.473 4.645-1.794 3.735-3.842 7.329-5.938 10.897-.227.385-.466.763-.752 1.23-.736-1.54-1.521-2.922-1.759-4.542-.269-1.832-.481-3.661-.025-5.479.339-1.356.782-2.687 1.19-4.025.193-.636.104-.97-.472-1.305-.291-.169-.62-.319-.948-.368a11.643 11.643 0 00-5.354.438c-.543.176-.828.527-.994 1.087-.488 1.652-.904 3.344-1.589 4.915-2.774 6.36-5.628 12.687-8.479 19.013-.595 1.321-1.292 2.596-1.963 3.882-.17.326-.418.613-.63.919-.17-.201-.236-.339-.235-.477.005-.813-.092-1.65.063-2.436a172.189 172.189 0 011.578-7.099c.47-1.946 1.017-3.874 1.538-5.807.175-.647.178-1.252-.287-1.796-.781-.911-2.413-1.111-3.381-.409l-.428.242.083-.69c.204-1.479.245-2.953-.161-4.41-.506-1.816-1.802-2.861-3.686-2.803-.878.027-1.8.177-2.613.497-3.419 1.34-6.048 3.713-8.286 6.568a2.592 2.592 0 01-.757.654c-2.893 1.604-5.795 3.188-8.696 4.778l-3.229 1.769c-.866-.826-1.653-1.683-2.546-2.41-2.727-2.224-5.498-4.393-8.244-6.592-2.434-1.949-4.792-3.979-6.596-6.56-1.342-1.92-2.207-4.021-2.29-6.395-.105-3.025.753-5.789 2.293-8.362 1.97-3.292 4.657-5.934 7.611-8.327 3.125-2.53 6.505-4.678 10.008-6.639 4.901-2.743 9.942-5.171 15.347-6.774 5.542-1.644 11.165-2.585 16.965-1.929 2.28.258 4.494.78 6.527 1.895 1.557.853 2.834 1.97 3.428 3.716.586 1.718.568 3.459.162 5.204-.825 3.534-2.76 6.447-5.195 9.05-3.994 4.267-8.866 7.172-14.351 9.091a39.478 39.478 0 01-9.765 2.083c-2.729.229-5.401-.013-7.985-.962-1.711-.629-3.201-1.591-4.399-2.987-.214-.25-.488-.521-.887-.287-.391.23-.46.602-.329.979.219.626.421 1.278.762 1.838.857 1.405 2.107 2.424 3.483 3.298 2.643 1.681 5.597 2.246 8.66 2.377 4.648.201 9.183-.493 13.654-1.74 6.383-1.78 11.933-4.924 16.384-9.884 3.706-4.13 6.353-8.791 6.92-14.419.277-2.747-.018-5.438-1.304-7.944-1.395-2.715-3.613-4.734-6.265-6.125C68.756 18.179 64.588 17 60.286 17h-4.31c-5.21 0-10.247 1.493-15.143 3.274-3.706 1.349-7.34 2.941-10.868 4.703-7.683 3.839-14.838 8.468-20.715 14.833-2.928 3.171-5.407 6.67-6.833 10.79a40.494 40.494 0 00-1.111 3.746m27.839 36.013c-.333 4.459-2.354 8.074-5.657 11.002-1.858 1.646-3.989 2.818-6.471 3.23-.9.149-1.821.185-2.694-.188-1.245-.532-1.524-1.637-1.548-2.814-.037-1.876.62-3.572 1.521-5.186 1.176-2.104 2.9-3.708 4.741-5.206 2.9-2.361 6.046-4.359 9.268-6.245l.243-.1c.498 1.84.735 3.657.597 5.507zM54.303 70.98c-.235 1.424-.529 2.849-.945 4.229-1.438 4.777-3.285 9.406-5.282 13.973-.369.845-.906 1.616-1.373 2.417a1.689 1.689 0 01-.283.334c-.578.571-1.126.541-1.418-.206-.34-.868-.549-1.797-.729-2.716-.121-.617-.092-1.265-.13-1.897.039-4.494 1.41-8.578 3.736-12.38.959-1.568 2.003-3.062 3.598-4.054a6.27 6.27 0 011.595-.706c.85-.239 1.372.154 1.231 1.006zm17.164 21.868l6.169-7.203c.257 2.675-4.29 8.015-6.169 7.203zm19.703-4.847c-.436.25-.911.43-1.358.661-.409.212-.544-.002-.556-.354a2.385 2.385 0 01.093-.721c.833-2.938 2.366-5.446 4.647-7.486l.16-.082c1.085 3.035-.169 6.368-2.986 7.982z" })));
+        case "css":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#1572B6", d: "M18.814 114.123L8.76 1.352h110.48l-10.064 112.754-45.243 12.543-45.119-12.526z" }),
+                React__default.createElement("path", { fill: "#33A9DC", d: "M64.001 117.062l36.559-10.136 8.601-96.354h-45.16v106.49z" }),
+                React__default.createElement("path", { fill: "#fff", d: "M64.001 51.429h18.302l1.264-14.163H64.001V23.435h34.682l-.332 3.711-3.4 38.114h-30.95V51.429z" }),
+                React__default.createElement("path", { fill: "#EBEBEB", d: "M64.083 87.349l-.061.018-15.403-4.159-.985-11.031H33.752l1.937 21.717 28.331 7.863.063-.018v-14.39z" }),
+                React__default.createElement("path", { fill: "#fff", d: "M81.127 64.675l-1.666 18.522-15.426 4.164v14.39l28.354-7.858.208-2.337 2.406-26.881H81.127z" }),
+                React__default.createElement("path", { fill: "#EBEBEB", d: "M64.048 23.435v13.831H30.64l-.277-3.108-.63-7.012-.331-3.711h34.646zm-.047 27.996v13.831H48.792l-.277-3.108-.631-7.012-.33-3.711h16.447z" })));
+        case "json":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { fill: "#505050", d: "M45.949 63.71c0 22.998 17.853 30.038 18.223 30.175l.016.005a.823.823 0 0 0-.05.021h-.001v.001h.001c20.306 6.899 40.668-10.261 40.668-41.251 0-17.054-7.595-37.361-27.7-48.894C105.528 10.083 126 34.393 126 63.903c0 35.822-30.182 62.003-61.873 62.003-2.078 0-37.078-10.935-37.216-51.164-.103-30.18 19.208-40.406 32.72-38.442.009.003-13.682 7.806-13.682 27.41z" }),
+                React__default.createElement("path", { fill: "#505050", fillRule: "evenodd", d: "M82.051 64.29c0-22.998-17.853-30.038-18.223-30.175l-.016-.005a.823.823 0 0 0 .05-.021h.001v-.001h-.001C43.556 27.19 23.193 44.35 23.193 75.34c0 17.054 7.595 37.361 27.7 48.894C22.472 117.917 2 93.607 2 64.097 2 28.275 32.182 2.094 63.873 2.094c2.078 0 37.078 10.935 37.216 51.164.103 30.18-19.207 40.406-32.72 38.443-.009-.004 13.682-7.807 13.682-27.411z", clipRule: "evenodd" })));
+        case "md":
+        case "markdown":
+            return (React__default.createElement("svg", __assign({ viewBox: "0 0 128 128", className: cn("size-4", className) }, props),
+                React__default.createElement("path", { style: {
+                        isolation: "auto",
+                        mixBlendMode: "normal",
+                    }, d: "M11.95 24.348c-5.836 0-10.618 4.867-10.618 10.681v57.942c0 5.814 4.782 10.681 10.617 10.681h104.102c5.835 0 10.617-4.867 10.617-10.681V35.03c0-5.814-4.783-10.681-10.617-10.681H14.898l-.002-.002H11.95zm-.007 9.543h104.108c.625 0 1.076.423 1.076 1.14v57.94c0 .717-.453 1.14-1.076 1.14H11.949c-.623 0-1.076-.423-1.076 1.14V35.029c0-.715.451-1.135 1.07-1.138z", color: "#000", fontWeight: "400", fontFamily: "sans-serif", overflow: "visible" }),
+                React__default.createElement("path", { d: "M20.721 84.1V43.9H32.42l11.697 14.78L55.81 43.9h11.696v40.2H55.81V61.044l-11.694 14.78-11.698-14.78V84.1H20.722zm73.104 0L76.28 64.591h11.697V43.9h11.698v20.69h11.698zm0 0" })));
+        default:
+            // Fallback: Return null or a generic code icon
+            return null;
+    }
+};
+
+export { LanguageIcon };

package/dist/components/ai/CodeBlock/index.d.ts

@@ -0,0 +1,3 @@
+export { CodeBlock } from "./CodeBlock";
+export { codeBlockTheme } from "./CodeBlock.theme";
+export type { CodeBlockProps, CodeBlockLanguage, CodeBlockTheme, CodeBlockThemeOverrides, } from "./CodeBlock.types";

package/dist/components/ai/EditingIndicator/EditingIndicator.animations.d.ts

@@ -0,0 +1,31 @@
+/**
+ * EditingIndicator Animations
+ *
+ * Framer Motion animation variants for typing indicators.
+ * Import from 'motion/react' (NOT 'framer-motion').
+ */
+import { Variants } from "motion/react";
+/**
+ * Container fade in/out animation with subtle scale
+ */
+export declare const containerVariants: Variants;
+/**
+ * Ellipsis dot animation
+ * Wave effect: Dots move up and down while fading
+ */
+export declare const ellipsisVariants: Variants;
+/**
+ * Pulse animation (alternative to ellipsis)
+ * Smooth fade in/out of the entire indicator
+ */
+export declare const pulseVariants: Variants;
+/**
+ * Avatar Container for staggering
+ * Ensures children (avatars) animate in sequence
+ */
+export declare const avatarContainerVariants: Variants;
+/**
+ * Individual Avatar animation
+ * Pop-in effect
+ */
+export declare const avatarVariants: Variants;

package/dist/components/ai/EditingIndicator/EditingIndicator.animations.js

@@ -0,0 +1,115 @@
+/**
+ * EditingIndicator Animations
+ *
+ * Framer Motion animation variants for typing indicators.
+ * Import from 'motion/react' (NOT 'framer-motion').
+ */
+/**
+ * Container fade in/out animation with subtle scale
+ */
+var containerVariants = {
+    hidden: {
+        opacity: 0,
+        y: 8,
+        scale: 0.95,
+        transition: {
+            duration: 0.2,
+            ease: "easeOut",
+        },
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            duration: 0.3,
+            ease: "backOut",
+            staggerChildren: 0.1, // Stagger avatar entry
+        },
+    },
+    exit: {
+        opacity: 0,
+        y: -4,
+        scale: 0.98,
+        transition: {
+            duration: 0.2,
+            ease: "easeIn",
+        },
+    },
+};
+/**
+ * Ellipsis dot animation
+ * Wave effect: Dots move up and down while fading
+ */
+var ellipsisVariants = {
+    initial: {
+        opacity: 0.4,
+        y: 0,
+    },
+    animate: function (index) { return ({
+        opacity: [0.4, 1, 0.4],
+        y: [0, -3, 0], // Wave motion
+        transition: {
+            duration: 1.2,
+            repeat: Infinity,
+            delay: index * 0.15,
+            ease: "easeInOut",
+        },
+    }); },
+};
+/**
+ * Pulse animation (alternative to ellipsis)
+ * Smooth fade in/out of the entire indicator
+ */
+var pulseVariants = {
+    initial: {
+        scale: 1,
+        opacity: 0.5,
+    },
+    animate: {
+        scale: [1, 1.1, 1],
+        opacity: [0.5, 1, 0.5],
+        transition: {
+            duration: 1.5,
+            repeat: Infinity,
+            ease: "easeInOut",
+        },
+    },
+};
+/**
+ * Avatar Container for staggering
+ * Ensures children (avatars) animate in sequence
+ */
+var avatarContainerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.1,
+            delayChildren: 0.1,
+        },
+    },
+};
+/**
+ * Individual Avatar animation
+ * Pop-in effect
+ */
+var avatarVariants = {
+    hidden: {
+        opacity: 0,
+        scale: 0.5,
+        x: -10, // Slide in slightly from left
+    },
+    visible: {
+        opacity: 1,
+        scale: 1,
+        x: 0,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 25,
+        },
+    },
+};
+
+export { avatarContainerVariants, avatarVariants, containerVariants, ellipsisVariants, pulseVariants };

package/dist/components/ai/EditingIndicator/EditingIndicator.d.ts

@@ -0,0 +1,35 @@
+/**
+ * EditingIndicator Component
+ *
+ * Displays "User is typing..." with animated ellipsis.
+ * Shows when one or more users are actively typing.
+ *
+ * @example
+ * ```tsx
+ * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
+ *   <EditingIndicator position="above" showAvatars />
+ *   <input type="text" />
+ * </PresenceProvider>
+ * ```
+ */
+import React from "react";
+import { EditingIndicatorProps } from "./EditingIndicator.types";
+/**
+ * EditingIndicator - Show typing status
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EditingIndicator />
+ *
+ * // With avatars
+ * <EditingIndicator showAvatars avatarSize="xs" />
+ *
+ * // Custom position
+ * <EditingIndicator position="below" />
+ *
+ * // Custom styling
+ * <EditingIndicator className="text-blue-600" />
+ * ```
+ */
+export declare const EditingIndicator: React.ForwardRefExoticComponent<EditingIndicatorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/EditingIndicator/EditingIndicator.js

@@ -0,0 +1,93 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { Avatar } from '../../core/Avatar/Avatar.js';
+import { usePresenceContext } from '../PresenceProvider/PresenceContext.js';
+import { editingIndicatorTheme } from './EditingIndicator.theme.js';
+import { containerVariants, avatarContainerVariants, avatarVariants, ellipsisVariants, pulseVariants } from './EditingIndicator.animations.js';
+import { cn } from '../../../utils/cn.js';
+import { formatTypingText } from '../../../utils/presenceUtils.js';
+
+/**
+ * EditingIndicator Component
+ *
+ * Displays "User is typing..." with animated ellipsis.
+ * Shows when one or more users are actively typing.
+ *
+ * @example
+ * ```tsx
+ * <PresenceProvider channel="chat" currentUser={user} adapter={adapter}>
+ *   <EditingIndicator position="above" showAvatars />
+ *   <input type="text" />
+ * </PresenceProvider>
+ * ```
+ */
+/**
+ * EditingIndicator - Show typing status
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EditingIndicator />
+ *
+ * // With avatars
+ * <EditingIndicator showAvatars avatarSize="xs" />
+ *
+ * // Custom position
+ * <EditingIndicator position="below" />
+ *
+ * // Custom styling
+ * <EditingIndicator className="text-blue-600" />
+ * ```
+ */
+var EditingIndicator = React__default.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.position, position = _c === void 0 ? "above" : _c, _d = _a.maxVisible, maxVisible = _d === void 0 ? 3 : _d, _e = _a.showAvatars, showAvatars = _e === void 0 ? false : _e, _f = _a.avatarSize, avatarSize = _f === void 0 ? "xs" : _f, formatText = _a.formatText, _g = _a.animation, animation = _g === void 0 ? "ellipsis" : _g, _h = _a.shouldAnimate, shouldAnimate = _h === void 0 ? true : _h, icon = _a.icon, _j = _a.theme, theme = _j === void 0 ? editingIndicatorTheme : _j, className = _a.className, props = __rest(_a, ["position", "maxVisible", "showAvatars", "avatarSize", "formatText", "animation", "shouldAnimate", "icon", "theme", "className"]);
+    // Get typing users from context
+    var typingUsers = usePresenceContext().typingUsers;
+    // Check for reduced motion preference
+    var prefersReducedMotion = useReducedMotion();
+    var enableAnimations = shouldAnimate && !prefersReducedMotion;
+    // Format typing text
+    var typingText = useMemo(function () {
+        if (typingUsers.length === 0)
+            return null;
+        return formatText
+            ? formatText(typingUsers)
+            : formatTypingText(typingUsers, maxVisible);
+    }, [typingUsers, maxVisible, formatText]);
+    // Build ARIA label (without ellipsis)
+    var ariaLabel = useMemo(function () {
+        if (typingUsers.length === 0)
+            return "No one is typing";
+        if (typingUsers.length === 1)
+            return "".concat(typingUsers[0].name, " is typing");
+        if (typingUsers.length === 2)
+            return "".concat(typingUsers[0].name, " and ").concat(typingUsers[1].name, " are typing");
+        return "".concat(typingUsers.length, " people are typing");
+    }, [typingUsers]);
+    // Merge theme
+    var mergedTheme = __assign(__assign({}, editingIndicatorTheme), theme);
+    // Build className
+    var containerClassName = cn(mergedTheme.baseStyle, (_b = mergedTheme.positions) === null || _b === void 0 ? void 0 : _b[position], className // User overrides take precedence
+    );
+    // Don't render if no one is typing
+    if (typingUsers.length === 0) {
+        return null;
+    }
+    return (React__default.createElement(AnimatePresence, { mode: "wait" },
+        React__default.createElement(motion.div, __assign({ ref: ref, className: containerClassName, role: "status", "aria-live": "polite", "aria-label": ariaLabel, "data-typing-count": typingUsers.length, variants: enableAnimations ? containerVariants : undefined, initial: enableAnimations ? "hidden" : undefined, animate: enableAnimations ? "visible" : undefined, exit: enableAnimations ? "exit" : undefined }, props),
+            showAvatars && typingUsers.length > 0 && (React__default.createElement(motion.div, { className: mergedTheme.avatarContainerStyle, variants: enableAnimations ? avatarContainerVariants : undefined }, typingUsers.slice(0, maxVisible).map(function (user) { return (React__default.createElement(motion.div, { key: user.id, variants: enableAnimations ? avatarVariants : undefined },
+                React__default.createElement(Avatar, { src: user.avatar, alt: user.name, size: avatarSize, className: "border-2 border-white" }))); }))),
+            icon ? (React__default.createElement("div", { className: "flex items-center gap-1" },
+                icon,
+                React__default.createElement("span", { className: mergedTheme.textStyle }, typingText))) : (React__default.createElement("span", { className: mergedTheme.textStyle },
+                typingText,
+                enableAnimations && animation === "ellipsis" && (React__default.createElement("span", { className: mergedTheme.ellipsisStyle, "aria-hidden": "true" }, [0, 1, 2].map(function (index) { return (React__default.createElement(motion.span, { key: index, custom: index, variants: ellipsisVariants, initial: "initial", animate: "animate" }, ".")); }))),
+                (!enableAnimations || animation === "none") && (React__default.createElement("span", { "aria-hidden": "true" }, "...")))),
+            enableAnimations && animation === "pulse" && (React__default.createElement(motion.span, { variants: pulseVariants, initial: "initial", animate: "animate", className: "inline-block w-2 h-2 rounded-full bg-[var(--color-primary)]", "aria-hidden": "true" })))));
+});
+// Display name for dev tools
+EditingIndicator.displayName = "EditingIndicator";
+
+export { EditingIndicator };

package/dist/components/ai/EditingIndicator/EditingIndicator.theme.d.ts

@@ -0,0 +1,2 @@
+import { EditingIndicatorTheme } from "./EditingIndicator.types";
+export declare const editingIndicatorTheme: EditingIndicatorTheme;

package/dist/components/ai/EditingIndicator/EditingIndicator.theme.js

@@ -0,0 +1,13 @@
+var editingIndicatorTheme = {
+    baseStyle: "flex items-center gap-2 text-[var(--color-text-secondary)]",
+    textStyle: "text-sm font-medium",
+    avatarContainerStyle: "inline-flex -space-x-1",
+    ellipsisStyle: "inline-flex gap-0.5 ml-0.5",
+    positions: {
+        above: "mb-2",
+        below: "mt-2",
+        inline: "",
+    },
+};
+
+export { editingIndicatorTheme };

package/dist/components/ai/EditingIndicator/EditingIndicator.types.d.ts

@@ -0,0 +1,54 @@
+/**
+ * EditingIndicator Type Definitions
+ *
+ * Defines props and interfaces for the EditingIndicator component.
+ */
+import React from 'react';
+import { TypingUser } from '../PresenceProvider/PresenceProvider.types';
+import { AvatarSize } from '../../core/Avatar/Avatar.types';
+/**
+ * Position of the indicator relative to input
+ */
+export type EditingIndicatorPosition = 'above' | 'below' | 'inline';
+/**
+ * Animation style for the indicator
+ */
+export type EditingIndicatorAnimation = 'ellipsis' | 'pulse' | 'none';
+/**
+ * EditingIndicator component props
+ */
+export interface EditingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Position relative to input (default: 'above') */
+    position?: EditingIndicatorPosition;
+    /** Maximum users to display in text (default: 3) */
+    maxVisible?: number;
+    /** Show user avatars alongside text (default: false) */
+    showAvatars?: boolean;
+    /** Avatar size when shown (default: 'xs') */
+    avatarSize?: Extract<AvatarSize, 'xs' | 'sm'>;
+    /** Custom text formatter */
+    formatText?: (users: TypingUser[]) => string;
+    /** Animation style (default: 'ellipsis') */
+    animation?: EditingIndicatorAnimation;
+    /** Enable animations (default: true) */
+    shouldAnimate?: boolean;
+    /** Custom icon instead of text */
+    icon?: React.ReactNode;
+    /** Theme overrides */
+    theme?: EditingIndicatorTheme;
+}
+/**
+ * Theme configuration for EditingIndicator
+ */
+export interface EditingIndicatorTheme {
+    /** Base container style */
+    baseStyle?: string;
+    /** Text label style */
+    textStyle?: string;
+    /** Avatar container style */
+    avatarContainerStyle?: string;
+    /** Ellipsis dots style */
+    ellipsisStyle?: string;
+    /** Position variants */
+    positions?: Partial<Record<EditingIndicatorPosition, string>>;
+}

package/dist/components/ai/EditingIndicator/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * EditingIndicator - Typing status indicator
+ *
+ * @module collaboration/EditingIndicator
+ */
+export { EditingIndicator } from './EditingIndicator';
+export { editingIndicatorTheme } from './EditingIndicator.theme';
+export { containerVariants, ellipsisVariants, pulseVariants, } from './EditingIndicator.animations';
+export type { EditingIndicatorProps, EditingIndicatorTheme, EditingIndicatorPosition, EditingIndicatorAnimation, } from './EditingIndicator.types';

package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { GenerativeRendererProps } from "./GenerativeRenderer.types";
+export declare const GenerativeRenderer: React.FC<GenerativeRendererProps>;

package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.js

@@ -0,0 +1,104 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { generativeRendererTheme } from './GenerativeRenderer.theme.js';
+import { Spinner } from '../../core/Spinner/Spinner.js';
+
+/**
+ * Wraps HTML content in a full document structure
+ */
+var createHTMLDocument = function (content) {
+    // If content already has <html> or <body>, use as-is
+    if (content.includes("<html") || content.includes("<!DOCTYPE")) {
+        return content;
+    }
+    // Check if content has style tags
+    content.includes("<style");
+    return "\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <style>\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n    body { \n      font-family: system-ui, -apple-system, sans-serif;\n      line-height: 1.5;\n      padding: 16px;\n      color: #1a1a1a;\n    }\n  </style>\n</head>\n<body>\n  ".concat(content, "\n</body>\n</html>\n  ").trim();
+};
+/**
+ * Converts markdown to basic HTML (lightweight, no external deps)
+ */
+var markdownToHTML = function (markdown) {
+    var html = markdown
+        // Headers
+        .replace(/^### (.*$)/gim, "<h3>$1</h3>")
+        .replace(/^## (.*$)/gim, "<h2>$1</h2>")
+        .replace(/^# (.*$)/gim, "<h1>$1</h1>")
+        // Bold & Italic
+        .replace(/\*\*\*(.*)\*\*\*/gim, "<strong><em>$1</em></strong>")
+        .replace(/\*\*(.*)\*\*/gim, "<strong>$1</strong>")
+        .replace(/\*(.*)\*/gim, "<em>$1</em>")
+        // Links
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" target="_blank" rel="noopener">$1</a>')
+        // Code blocks
+        .replace(/```(\w+)?\n([\s\S]*?)```/gim, "<pre><code>$2</code></pre>")
+        // Inline code
+        .replace(/`([^`]+)`/gim, "<code>$1</code>")
+        // Line breaks to paragraphs
+        .replace(/\n\n/gim, "</p><p>")
+        .replace(/\n/gim, "<br>");
+    return "<p>".concat(html, "</p>");
+};
+var GenerativeRenderer = function (_a) {
+    var content = _a.content, _b = _a.type, type = _b === void 0 ? "html" : _b, onError = _a.onError, onLoad = _a.onLoad, _c = _a.sandboxOptions, sandboxOptions = _c === void 0 ? ["allow-scripts"] : _c, _d = _a.showLoading, showLoading = _d === void 0 ? true : _d, className = _a.className, _e = _a.title, title = _e === void 0 ? "Generated content preview" : _e, props = __rest(_a, ["content", "type", "onError", "onLoad", "sandboxOptions", "showLoading", "className", "title"]);
+    var _f = useState(true), isLoading = _f[0], setIsLoading = _f[1];
+    var _g = useState(null), error = _g[0], setError = _g[1];
+    var iframeRef = useRef(null);
+    // Process content based on type
+    var processedContent = useMemo(function () {
+        try {
+            switch (type) {
+                case "markdown":
+                    return createHTMLDocument(markdownToHTML(content));
+                case "react":
+                    // For React, we show the code in a styled container
+                    // Full React rendering would require a bundler like Sucrase
+                    return createHTMLDocument("\n            <div style=\"background: #1e1e1e; padding: 16px; border-radius: 8px; overflow-x: auto;\">\n              <pre style=\"color: #d4d4d4; font-family: 'Monaco', 'Consolas', monospace; font-size: 14px; margin: 0;\">".concat(content
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;"), "</pre>\n            </div>\n          "));
+                case "html":
+                default:
+                    return createHTMLDocument(content);
+            }
+        }
+        catch (err) {
+            var error_1 = err instanceof Error ? err : new Error("Failed to process content");
+            setError(error_1);
+            onError === null || onError === void 0 ? void 0 : onError(error_1);
+            return "";
+        }
+    }, [content, type, onError]);
+    // Handle iframe load
+    var handleLoad = useCallback(function () {
+        setIsLoading(false);
+        setError(null);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad();
+    }, [onLoad]);
+    // Handle iframe error
+    var handleError = useCallback(function () {
+        var error = new Error("Failed to load content in sandbox");
+        setError(error);
+        setIsLoading(false);
+        onError === null || onError === void 0 ? void 0 : onError(error);
+    }, [onError]);
+    // Reset loading state when content changes
+    useEffect(function () {
+        setIsLoading(true);
+        setError(null);
+    }, [content, type]);
+    // Build sandbox attribute
+    var sandboxAttribute = sandboxOptions.length > 0 ? sandboxOptions.join(" ") : undefined;
+    return (React__default.createElement("div", __assign({ className: cn(generativeRendererTheme.containerStyle, className) }, props),
+        showLoading && isLoading && !error && (React__default.createElement("div", { className: generativeRendererTheme.loadingStyle },
+            React__default.createElement(Spinner, { size: "md" }))),
+        error && (React__default.createElement("div", { className: generativeRendererTheme.errorStyle },
+            React__default.createElement(ExclamationTriangleIcon, { className: "size-8 mb-2" }),
+            React__default.createElement("p", { className: "font-medium" }, "Failed to render content"),
+            React__default.createElement("p", { className: "text-sm opacity-75 mt-1" }, error.message))),
+        !error && (React__default.createElement("iframe", { ref: iframeRef, srcDoc: processedContent, sandbox: sandboxAttribute, className: cn(generativeRendererTheme.iframeStyle, isLoading && "opacity-0"), title: title, onLoad: handleLoad, onError: handleError, "aria-label": title }))));
+};
+GenerativeRenderer.displayName = "GenerativeRenderer";
+
+export { GenerativeRenderer };

package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.d.ts

@@ -0,0 +1,2 @@
+import { GenerativeRendererTheme } from "./GenerativeRenderer.types";
+export declare const generativeRendererTheme: GenerativeRendererTheme;

package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.js

@@ -0,0 +1,8 @@
+var generativeRendererTheme = {
+    containerStyle: "relative w-full h-full overflow-hidden rounded-lg border border-[var(--color-border)] bg-white",
+    iframeStyle: "w-full h-full border-0",
+    loadingStyle: "absolute inset-0 flex items-center justify-center bg-[var(--color-background)]",
+    errorStyle: "absolute inset-0 flex flex-col items-center justify-center bg-[var(--color-danger-50)] text-[var(--color-danger)] p-4 text-center",
+};
+
+export { generativeRendererTheme };