Update

package-lock.json

@@ -74,7 +74,6 @@
                 "sonner": "^2.0.5",
                 "tailwind-merge": "^3.0.1",
                 "tailwindcss": "^4.0.0",
-                "tailwindcss-animate": "^1.0.7",
                 "typescript": "^5.7.2",
                 "vaul": "^1.1.2",
                 "vite": "^6.0",
@@ -8333,15 +8332,6 @@
             "integrity": "sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==",
             "license": "MIT"
         },
-        "node_modules/tailwindcss-animate": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
-            "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
-            "license": "MIT",
-            "peerDependencies": {
-                "tailwindcss": ">=3.0.0 || insiders"
-            }
-        },
         "node_modules/tapable": {
             "version": "2.2.2",
             "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",

package.json

@@ -93,7 +93,6 @@
         "sonner": "^2.0.5",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.0",
-        "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.7.2",
         "vaul": "^1.1.2",
         "vite": "^6.0",

resources/css/app.css

@@ -1,6 +1,6 @@
 @import 'tailwindcss';
 
-@plugin 'tailwindcss-animate';
+/* @plugin 'tailwindcss-animate'; */
 
 @source '../views';
 @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@@ -96,6 +96,96 @@ @layer base {
             height: 0;
         }
     }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes slideInFromRight {
+        from {
+            transform: translateX(100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideOutToRight {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(100%);
+        }
+    }
+
+    @keyframes slideInFromLeft {
+        from {
+            transform: translateX(-100%);
+        }
+        to {
+            transform: translateX(0);
+        }
+    }
+
+    @keyframes slideOutToLeft {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(-100%);
+        }
+    }
+
+    @keyframes slideInFromTop {
+        from {
+            transform: translateY(-100%);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideOutToTop {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(-100%);
+        }
+    }
+
+    @keyframes slideInFromBottom {
+        from {
+            transform: translateY(100%);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes slideOutToBottom {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(100%);
+        }
+    }
 }
 
 @utility animate-accordion-down {
@@ -106,6 +196,67 @@ @utility animate-accordion-up {
     animation: accordion-up 0.2s ease-out;
 }
 
+/* Shadcn animation utilities */
+@utility animate-in {
+    animation-name: fadeIn, slideIn;
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+}
+
+@utility animate-out {
+    animation-name: fadeOut, slideOut;
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+}
+
+@utility fade-in-0 {
+    animation-name: fadeIn;
+}
+
+@utility fade-out-0 {
+    animation-name: fadeOut;
+}
+
+@utility slide-in-from-right {
+    animation-name: slideInFromRight;
+}
+
+@utility slide-out-to-right {
+    animation-name: slideOutToRight;
+}
+
+@utility slide-in-from-left {
+    animation-name: slideInFromLeft;
+}
+
+@utility slide-out-to-left {
+    animation-name: slideOutToLeft;
+}
+
+@utility slide-in-from-top {
+    animation-name: slideInFromTop;
+}
+
+@utility slide-out-to-top {
+    animation-name: slideOutToTop;
+}
+
+@utility slide-in-from-bottom {
+    animation-name: slideInFromBottom;
+}
+
+@utility slide-out-to-bottom {
+    animation-name: slideOutToBottom;
+}
+
+@utility duration-300 {
+    animation-duration: 300ms;
+}
+
+@utility duration-500 {
+    animation-duration: 500ms;
+}
+
 :root {
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);

resources/js/components/ui/sheet.tsx

@@ -56,7 +56,7 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
           side === "left" &&

resources/js/modules/editor/partials/text-sidebar.jsx

@@ -225,12 +225,12 @@ export default function TextSidebar({ isOpen, onClose }) {
                                         color: fillColor,
                                         textShadow:
                                             strokeWidth > 0
-                                                ? `
+                                                ? Array.from({ length: 10 }, (_, i) => {
-                                            -${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor},
+                                                      const angle = (i * Math.PI * 2) / 8;
-                                            ${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor},
+                                                      const x = Math.cos(angle) * strokeWidth * 0.6;
-                                            -${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor},
+                                                      const y = Math.sin(angle) * strokeWidth * 0.6;
-                                            ${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor}
+                                                      return `${x.toFixed(1)}px ${y.toFixed(1)}px 0 ${strokeColor}`;
-                                        `
+                                                  }).join(', ')
                                                 : 'none',
                                     }}
                                 />