@dust-tt/sparkle 0.2.481-rc1 → 0.2.481-rc3

package/dist/esm/components/InteractiveImage.d.ts

@@ -2,8 +2,6 @@ import React from "react";
 interface InteractiveImageProps {
     alt: string;
     isLoading?: boolean;
-    onCopyError?: (error: unknown) => void;
-    onDownloadError?: (error: unknown) => void;
     src?: string;
     title: string;
 }

package/dist/esm/components/InteractiveImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveImage.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiB1B,UAAU,qBAAqB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAgCvB"}
+{"version":3,"file":"InteractiveImage.d.ts","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,UAAU,qBAAqB;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,SAAiB,EACjB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,qBAAqB,qBA8CvB"}

package/dist/esm/components/InteractiveImage.js

@@ -1,9 +1,39 @@
 import { __assign, __awaiter, __generator, __read, __rest } from "tslib";
 import React from "react";
 import { Dialog, DialogContent, DialogTrigger, IconButton, Spinner, } from "../components";
-import { useCopyToClipboard } from "../hooks";
-import { ArrowDownOnSquareIcon, ClipboardCheckIcon, ClipboardIcon, } from "../icons/app";
+import { ArrowDownOnSquareIcon } from "../icons/app";
 import { cn } from "../lib/utils";
+function DownloadButton(_a) {
+    var _this = this;
+    var className = _a.className, _b = _a.size, size = _b === void 0 ? "xs" : _b, src = _a.src, title = _a.title;
+    var handleDownload = React.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var link;
+        return __generator(this, function (_a) {
+            if (!src) {
+                return [2 /*return*/];
+            }
+            link = document.createElement("a");
+            link.href = src;
+            link.download = title;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            return [2 /*return*/];
+        });
+    }); }, [src, title]);
+    return (React.createElement(IconButton, { icon: ArrowDownOnSquareIcon, className: cn("s-text-white", className), tooltip: "Download", size: size, onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        e.stopPropagation(); // Prevent image zoom.
+                        return [4 /*yield*/, handleDownload()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); } }));
+}
 export function InteractiveImage(_a) {
     var alt = _a.alt, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, src = _a.src, props = __rest(_a, ["alt", "isLoading", "src"]);
     var _c = __read(React.useState(false), 2), isZoomed = _c[0], setIsZoomed = _c[1];
@@ -21,111 +51,23 @@ export function InteractiveImage(_a) {
                         }
                         handleZoomToggle();
                     }, src: src }, props)))),
-        React.createElement(DialogContent, { className: "s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0 focus:s-outline-none focus:s-ring-0" },
-            React.createElement("img", { src: src, alt: alt, className: "s-object-contain" }))));
+        React.createElement(DialogContent, { className: cn("s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0", "focus:s-outline-none focus:s-ring-0", "s-rounded-none s-bg-transparent s-shadow-none"), size: "xl" },
+            React.createElement("div", { className: "s-flex s-flex-col" },
+                React.createElement("div", { className: "s-flex s-justify-end s-pb-2 s-pr-1 s-pt-1" },
+                    React.createElement(DownloadButton, { src: src, title: props.title, size: "sm" })),
+                React.createElement("div", { className: "s-relative s-w-full" },
+                    React.createElement("img", { src: src, alt: alt, className: "s-w-full s-object-contain" }))))));
 }
 function LoadingImage() {
     return (React.createElement("div", { className: "s-flex s-h-full s-w-full s-items-center s-justify-center" },
-        React.createElement(Spinner, { variant: "dark", size: "sm" })));
+        React.createElement(Spinner, { variant: "dark", size: "md" })));
 }
 function ImagePreview(_a) {
-    var _this = this;
-    var isLoading = _a.isLoading, onClick = _a.onClick, alt = _a.alt, src = _a.src, title = _a.title, onCopyError = _a.onCopyError, onDownloadError = _a.onDownloadError;
-    var _b = __read(useCopyToClipboard(), 2), isCopied = _b[0], copyToClipboard = _b[1];
-    var handleCopy = function () { return __awaiter(_this, void 0, void 0, function () {
-        var response, blob, error_1;
-        var _a;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0:
-                    _b.trys.push([0, 4, , 5]);
-                    if (!src) {
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, fetch(src)];
-                case 1:
-                    response = _b.sent();
-                    return [4 /*yield*/, response.blob()];
-                case 2:
-                    blob = _b.sent();
-                    // Copy to clipboard.
-                    return [4 /*yield*/, copyToClipboard(new ClipboardItem((_a = {},
-                            _a[blob.type] = blob,
-                            _a)))];
-                case 3:
-                    // Copy to clipboard.
-                    _b.sent();
-                    return [3 /*break*/, 5];
-                case 4:
-                    error_1 = _b.sent();
-                    onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError(error_1);
-                    return [3 /*break*/, 5];
-                case 5: return [2 /*return*/];
-            }
-        });
-    }); };
-    var handleDownload = function () { return __awaiter(_this, void 0, void 0, function () {
-        var response, blob, url, link, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    _a.trys.push([0, 3, , 4]);
-                    if (!src) {
-                        return [2 /*return*/];
-                    }
-                    return [4 /*yield*/, fetch(src)];
-                case 1:
-                    response = _a.sent();
-                    return [4 /*yield*/, response.blob()];
-                case 2:
-                    blob = _a.sent();
-                    url = window.URL.createObjectURL(blob);
-                    link = document.createElement("a");
-                    link.href = url;
-                    // Extract filename from URL or use a default.
-                    link.download = title;
-                    // Trigger download.
-                    document.body.appendChild(link);
-                    link.click();
-                    // Cleanup.
-                    document.body.removeChild(link);
-                    window.URL.revokeObjectURL(url);
-                    return [3 /*break*/, 4];
-                case 3:
-                    error_2 = _a.sent();
-                    onDownloadError === null || onDownloadError === void 0 ? void 0 : onDownloadError(error_2);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
-            }
-        });
-    }); };
-    return (React.createElement("div", { onClick: onClick, className: cn("s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night", !isLoading && "s-cursor-pointer") }, isLoading ? (React.createElement(LoadingImage, null)) : (React.createElement(React.Fragment, null,
+    var isLoading = _a.isLoading, onClick = _a.onClick, alt = _a.alt, src = _a.src, title = _a.title;
+    return (React.createElement("div", { onClick: onClick, className: cn("s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl", "s-bg-muted-background dark:s-bg-muted-background-night", !isLoading && "s-cursor-pointer") }, isLoading ? (React.createElement(LoadingImage, null)) : (React.createElement(React.Fragment, null,
         React.createElement("img", { src: src, alt: alt, className: "s-h-full s-w-full s-rounded-2xl s-object-cover" }),
-        React.createElement("div", { className: "s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" }),
-        React.createElement("div", { className: "s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100" },
-            React.createElement(IconButton, { icon: isCopied ? ClipboardCheckIcon : ClipboardIcon, className: "s-text-white", tooltip: isCopied ? "Copied!" : "Copy to clipboard", size: "xs", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                e.stopPropagation(); // Prevent image zoom.
-                                return [4 /*yield*/, handleCopy()];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); } }),
-            React.createElement(IconButton, { icon: ArrowDownOnSquareIcon, className: "s-text-white", tooltip: "Download", size: "xs", onClick: function (e) { return __awaiter(_this, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                e.stopPropagation(); // Prevent image zoom.
-                                return [4 /*yield*/, handleDownload()];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); } }))))));
+        React.createElement("div", { className: cn("s-absolute s-inset-0 s-bg-gradient-to-b", "s-from-black/40 s-via-transparent s-to-black/40", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") }),
+        React.createElement("div", { className: cn("s-absolute s-right-3 s-top-3 s-z-10 s-flex", "s-opacity-0 s-transition-opacity s-duration-200", "group-hover/preview:s-opacity-100") },
+            React.createElement(DownloadButton, { src: src, title: title, size: "xs" }))))));
 }
 //# sourceMappingURL=InteractiveImage.js.map

package/dist/esm/components/InteractiveImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractiveImage.js","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,UAAU,EACV,OAAO,GACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAWxC,MAAM,UAAU,gBAAgB,CAAC,EAKT;IAJtB,IAAA,GAAG,SAAA,EACH,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,GAAG,SAAA,EACA,KAAK,cAJuB,2BAKhC,CADS;IAEF,IAAA,KAAA,OAA0B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAA,EAA9C,QAAQ,QAAA,EAAE,WAAW,QAAyB,CAAC;IAEtD,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,gBAAgB;QACpD,oBAAC,aAAa,IAAC,OAAO;YACpB,6BAAK,SAAS,EAAC,+BAA+B;gBAC5C,oBAAC,YAAY,aACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,UAAC,CAAC;wBACT,IAAI,SAAS,EAAE,CAAC;4BACd,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,OAAO;wBACT,CAAC;wBACD,gBAAgB,EAAE,CAAC;oBACrB,CAAC,EACD,GAAG,EAAE,GAAG,IACJ,KAAK,EACT,CACE,CACQ;QAChB,oBAAC,aAAa,IAAC,SAAS,EAAC,8FAA8F;YACrH,6BAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,kBAAkB,GAAG,CAC1C,CACT,CACV,CAAC;AACJ,CAAC;AAED,SAAS,YAAY;IACnB,OAAO,CACL,6BAAK,SAAS,EAAC,0DAA0D;QACvE,oBAAC,OAAO,IAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAChC,CACP,CAAC;AACJ,CAAC;AAMD,SAAS,YAAY,CAAC,EAQF;IARpB,iBA4GC;QA3GC,SAAS,eAAA,EACT,OAAO,aAAA,EACP,GAAG,SAAA,EACH,GAAG,SAAA,EACH,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,eAAe,qBAAA;IAET,IAAA,KAAA,OAA8B,kBAAkB,EAAE,IAAA,EAAjD,QAAQ,QAAA,EAAE,eAAe,QAAwB,CAAC;IAEzD,IAAM,UAAU,GAAG;;;;;;;oBAEf,IAAI,CAAC,GAAG,EAAE,CAAC;wBACT,sBAAO;oBACT,CAAC;oBAGgB,qBAAM,KAAK,CAAC,GAAG,CAAC,EAAA;;oBAA3B,QAAQ,GAAG,SAAgB;oBACpB,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;oBAA5B,IAAI,GAAG,SAAqB;oBAElC,qBAAqB;oBACrB,qBAAM,eAAe,CACnB,IAAI,aAAa;4BACf,GAAC,IAAI,CAAC,IAAI,IAAG,IAAI;gCACjB,CACH,EAAA;;oBALD,qBAAqB;oBACrB,SAIC,CAAC;;;;oBAEF,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,OAAK,CAAC,CAAC;;;;;SAExB,CAAC;IAEF,IAAM,cAAc,GAAG;;;;;;oBAEnB,IAAI,CAAC,GAAG,EAAE,CAAC;wBACT,sBAAO;oBACT,CAAC;oBAGgB,qBAAM,KAAK,CAAC,GAAG,CAAC,EAAA;;oBAA3B,QAAQ,GAAG,SAAgB;oBACpB,qBAAM,QAAQ,CAAC,IAAI,EAAE,EAAA;;oBAA5B,IAAI,GAAG,SAAqB;oBAG5B,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;oBACvC,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACzC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;oBAEhB,8CAA8C;oBAC9C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBAEtB,oBAAoB;oBACpB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAChC,IAAI,CAAC,KAAK,EAAE,CAAC;oBAEb,WAAW;oBACX,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAChC,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;;;;oBAEhC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,OAAK,CAAC,CAAC;;;;;SAE5B,CAAC;IAEF,OAAO,CACL,6BACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CACX,qIAAqI,EACrI,CAAC,SAAS,IAAI,kBAAkB,CACjC,IAEA,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,YAAY,OAAG,CACjB,CAAC,CAAC,CAAC,CACF;QACE,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,gDAAgD,GAC1D;QAEF,6BAAK,SAAS,EAAC,kHAAkH,GAAG;QAEpI,6BAAK,SAAS,EAAC,8HAA8H;YAC3I,oBAAC,UAAU,IACT,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,aAAa,EACnD,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,EACnD,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,UAAO,CAAC;;;;gCACf,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,sBAAsB;gCAC3C,qBAAM,UAAU,EAAE,EAAA;;gCAAlB,SAAkB,CAAC;;;;qBACpB,GACD;YACF,oBAAC,UAAU,IACT,IAAI,EAAE,qBAAqB,EAC3B,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,UAAO,CAAC;;;;gCACf,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,sBAAsB;gCAC3C,qBAAM,cAAc,EAAE,EAAA;;gCAAtB,SAAsB,CAAC;;;;qBACxB,GACD,CACE,CACL,CACJ,CACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InteractiveImage.js","sourceRoot":"","sources":["../../../src/components/InteractiveImage.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -2311,6 +2311,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.s-rounded-none {
+  border-radius: 0px;
+}
+
 .s-rounded-sm {
   border-radius: 0.125rem;
 }
@@ -2674,11 +2678,6 @@ select {
   background-color: rgb(255 255 255 / 0.8);
 }
 
-.s-bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .s-bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 235 255 / var(--tw-bg-opacity));
@@ -3563,6 +3562,10 @@ select {
   background-color: rgb(169 184 169 / var(--tw-bg-opacity));
 }
 
+.s-bg-transparent {
+  background-color: transparent;
+}
+
 .s-bg-violet-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(237 233 254 / var(--tw-bg-opacity));
@@ -3697,6 +3700,10 @@ select {
   background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
+.s-bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .s-bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -3709,6 +3716,12 @@ select {
   background-image: linear-gradient(90deg, #7AC6FF, #1C91FF, #a855f7, #4BABFF, #0A6CC6);
 }
 
+.s-from-black\/40 {
+  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .s-from-cyan-500 {
   --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
@@ -3826,6 +3839,11 @@ select {
   --tw-gradient-stops: var(--tw-gradient-from), #04140A var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.s-via-transparent {
+  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
 .s-via-warning-950 {
   --tw-gradient-to: rgb(34 10 4 / 0)  var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), #220A04 var(--tw-gradient-via-position), var(--tw-gradient-to);
@@ -3835,6 +3853,10 @@ select {
   --tw-gradient-via-position: 50%;
 }
 
+.s-to-black\/40 {
+  --tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
+}
+
 .s-to-blue-500 {
   --tw-gradient-to: #1C91FF var(--tw-gradient-to-position);
 }
@@ -4899,6 +4921,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.s-shadow-none {
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .s-shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -5811,10 +5839,6 @@ select {
   opacity: 1;
 }
 
-.s-group\/preview:hover .group-hover\/preview\:s-opacity-40 {
-  opacity: 0.4;
-}
-
 .s-group\/tree:hover .group-hover\/tree\:s-opacity-100 {
   opacity: 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.481-rc1",
+  "version": "0.2.481-rc3",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/InteractiveImage.tsx

@@ -7,19 +7,53 @@ import {
   IconButton,
   Spinner,
 } from "@sparkle/components/";
-import { useCopyToClipboard } from "@sparkle/hooks";
-import {
-  ArrowDownOnSquareIcon,
-  ClipboardCheckIcon,
-  ClipboardIcon,
-} from "@sparkle/icons/app";
+import { ArrowDownOnSquareIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib/utils";
 
+interface DownloadButtonProps {
+  className?: string;
+  size?: "xs" | "sm";
+  src?: string;
+  title: string;
+}
+
+function DownloadButton({
+  className,
+  size = "xs",
+  src,
+  title,
+}: DownloadButtonProps) {
+  const handleDownload = React.useCallback(async () => {
+    if (!src) {
+      return;
+    }
+
+    // Create a hidden link and click it.
+    const link = document.createElement("a");
+    link.href = src;
+    link.download = title;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [src, title]);
+
+  return (
+    <IconButton
+      icon={ArrowDownOnSquareIcon}
+      className={cn("s-text-white", className)}
+      tooltip="Download"
+      size={size}
+      onClick={async (e) => {
+        e.stopPropagation(); // Prevent image zoom.
+        await handleDownload();
+      }}
+    />
+  );
+}
+
 interface InteractiveImageProps {
   alt: string;
   isLoading?: boolean;
-  onCopyError?: (error: unknown) => void;
-  onDownloadError?: (error: unknown) => void;
   src?: string;
   title: string;
 }
@@ -56,8 +90,22 @@ export function InteractiveImage({
           />
         </div>
       </DialogTrigger>
-      <DialogContent className="s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0 focus:s-outline-none focus:s-ring-0">
-        <img src={src} alt={alt} className="s-object-contain" />
+      <DialogContent
+        className={cn(
+          "s-w-auto s-max-w-none s-border-0 s-outline-none s-ring-0",
+          "focus:s-outline-none focus:s-ring-0",
+          "s-rounded-none s-bg-transparent s-shadow-none"
+        )}
+        size="xl"
+      >
+        <div className="s-flex s-flex-col">
+          <div className="s-flex s-justify-end s-pb-2 s-pr-1 s-pt-1">
+            <DownloadButton src={src} title={props.title} size="sm" />
+          </div>
+          <div className="s-relative s-w-full">
+            <img src={src} alt={alt} className="s-w-full s-object-contain" />
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   );
@@ -66,7 +114,7 @@ export function InteractiveImage({
 function LoadingImage() {
   return (
     <div className="s-flex s-h-full s-w-full s-items-center s-justify-center">
-      <Spinner variant="dark" size="sm" />
+      <Spinner variant="dark" size="md" />
     </div>
   );
 }
@@ -81,67 +129,13 @@ function ImagePreview({
   alt,
   src,
   title,
-  onCopyError,
-  onDownloadError,
 }: ImagePreviewProps) {
-  const [isCopied, copyToClipboard] = useCopyToClipboard();
-
-  const handleCopy = async () => {
-    try {
-      if (!src) {
-        return;
-      }
-
-      // Fetch the image as a blob.
-      const response = await fetch(src);
-      const blob = await response.blob();
-
-      // Copy to clipboard.
-      await copyToClipboard(
-        new ClipboardItem({
-          [blob.type]: blob,
-        })
-      );
-    } catch (error) {
-      onCopyError?.(error);
-    }
-  };
-
-  const handleDownload = async () => {
-    try {
-      if (!src) {
-        return;
-      }
-
-      // Fetch the image.
-      const response = await fetch(src);
-      const blob = await response.blob();
-
-      // Create a download link.
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-
-      // Extract filename from URL or use a default.
-      link.download = title;
-
-      // Trigger download.
-      document.body.appendChild(link);
-      link.click();
-
-      // Cleanup.
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      onDownloadError?.(error);
-    }
-  };
-
   return (
     <div
       onClick={onClick}
       className={cn(
-        "s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl s-bg-muted-background dark:s-bg-muted-background-night",
+        "s-group/preview s-relative s-h-full s-w-full s-overflow-hidden s-rounded-2xl",
+        "s-bg-muted-background dark:s-bg-muted-background-night",
         !isLoading && "s-cursor-pointer"
       )}
     >
@@ -155,29 +149,23 @@ function ImagePreview({
             className="s-h-full s-w-full s-rounded-2xl s-object-cover"
           />
           {/* Dark overlay on hover */}
-          <div className="s-absolute s-inset-0 s-bg-black s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-40" />
+          <div
+            className={cn(
+              "s-absolute s-inset-0 s-bg-gradient-to-b",
+              "s-from-black/40 s-via-transparent s-to-black/40",
+              "s-opacity-0 s-transition-opacity s-duration-200",
+              "group-hover/preview:s-opacity-100"
+            )}
+          />
           {/* Icon container - only visible on hover */}
-          <div className="s-absolute s-right-3 s-top-3 s-z-10 s-flex s-opacity-0 s-transition-opacity s-duration-200 group-hover/preview:s-opacity-100">
-            <IconButton
-              icon={isCopied ? ClipboardCheckIcon : ClipboardIcon}
-              className="s-text-white"
-              tooltip={isCopied ? "Copied!" : "Copy to clipboard"}
-              size="xs"
-              onClick={async (e) => {
-                e.stopPropagation(); // Prevent image zoom.
-                await handleCopy();
-              }}
-            />
-            <IconButton
-              icon={ArrowDownOnSquareIcon}
-              className="s-text-white"
-              tooltip="Download"
-              size="xs"
-              onClick={async (e) => {
-                e.stopPropagation(); // Prevent image zoom.
-                await handleDownload();
-              }}
-            />
+          <div
+            className={cn(
+              "s-absolute s-right-3 s-top-3 s-z-10 s-flex",
+              "s-opacity-0 s-transition-opacity s-duration-200",
+              "group-hover/preview:s-opacity-100"
+            )}
+          >
+            <DownloadButton src={src} title={title} size="xs" />
           </div>
         </>
       )}