@armoyu/ui 1.1.22 → 1.1.24

package/dist/models/social/feed/Story.js

@@ -4,11 +4,14 @@ exports.Story = void 0;
 const StoryAuthor_1 = require("./StoryAuthor");
 /**
  * Represents a Social Story in the UI.
+ * A Story can have multiple media items from the same author.
  */
 class Story {
     id = '';
     author = null;
     media = '';
+    /** All media items for this story group (multiple stories from same author) */
+    items = [];
     timestamp = '';
     isViewed = false;
     isRead = false;
@@ -16,21 +19,47 @@ class Story {
         Object.assign(this, data);
     }
     /**
-     * Instantiates a Story object from an API response.
+     * Instantiates a Story object from a Core StoryResponse.
+     * Maps the nested items array into a flat Story with all media.
      */
     static fromAPI(json) {
         if (!json)
             return new Story({});
-        const isRead = json.isRead === true || json.izlendi === 1 || json.isViewed === true || false;
-        // From Core StoryResponse: items, authorName, authorAvatar
-        const firstItem = Array.isArray(json.items) && json.items.length > 0 ? json.items[0] : null;
+        const isReadStatus = json.isRead === true || json.isSeen === true || false;
+        // Core StoryResponse: { authorId, authorName, authorUsername, authorAvatar, items: [...] }
+        const coreItems = Array.isArray(json.items) ? json.items : [];
+        // Her item'ı basit bir yapıya dönüştür
+        const storyItems = coreItems.map((item) => {
+            // Detect type
+            let type = 'image';
+            const url = item.mediaUrl || '';
+            const ext = url.split('.').pop()?.toLowerCase();
+            if (['mp4', 'webm', 'ogg', 'mov'].includes(ext || '')) {
+                type = 'video';
+            }
+            else if (['mp3', 'wav', 'mpeg'].includes(ext || '')) {
+                type = 'audio';
+            }
+            return {
+                id: String(item.id || 0),
+                media: url,
+                type,
+                timestamp: item.createdAt || '',
+                isRead: item.isSeen === true || item.isMe === true || false,
+                isLiked: item.isLiked === true || false,
+                likeCount: item.likeCount || 0,
+                viewCount: item.viewCount || 0
+            };
+        });
+        const firstItem = coreItems.length > 0 ? coreItems[0] : null;
         return new Story({
-            id: String(firstItem?.id || json.id || json.hikayeid || json.hikayeID || ''),
+            id: String(firstItem?.id || json.id || ''),
             author: StoryAuthor_1.StoryAuthor.fromAPI(json),
-            media: firstItem?.mediaUrl || json.media || json.resim || json.url || json.hikayemedya || '',
-            timestamp: firstItem?.createdAt || json.timestamp || json.tarih || json.hikayezaman || '',
-            isViewed: isRead,
-            isRead: isRead
+            media: firstItem?.mediaUrl || '',
+            items: storyItems,
+            timestamp: firstItem?.createdAt || '',
+            isViewed: isReadStatus,
+            isRead: isReadStatus
         });
     }
 }

package/dist/models/social/feed/Story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Story.js","sourceRoot":"","sources":["../../../../src/models/social/feed/Story.ts"],"names":[],"mappings":";;;AAAA,+CAA4C;AAE5C;;GAEG;AACH,MAAa,KAAK;IAChB,EAAE,GAAW,EAAE,CAAC;IAChB,MAAM,GAAuB,IAAI,CAAC;IAClC,KAAK,GAAW,EAAE,CAAC;IACnB,SAAS,GAAW,EAAE,CAAC;IACvB,QAAQ,GAAY,KAAK,CAAC;IAC1B,MAAM,GAAY,KAAK,CAAC;IAExB,YAAY,IAAoB;QAC9B,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,OAAO,CAAC,IAAyB;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC;QAEhC,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,KAAK,CAAC;QAE7F,2DAA2D;QAC3D,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE5F,OAAO,IAAI,KAAK,CAAC;YACf,EAAE,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;YAC5E,MAAM,EAAE,yBAAW,CAAC,OAAO,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE;YAC5F,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE;YACzF,QAAQ,EAAE,MAAM;YAChB,MAAM,EAAE,MAAM;SACf,CAAC,CAAC;IACL,CAAC;CACF;AAhCD,sBAgCC"}
+{"version":3,"file":"Story.js","sourceRoot":"","sources":["../../../../src/models/social/feed/Story.ts"],"names":[],"mappings":";;;AAAA,+CAA4C;AAE5C;;;GAGG;AACH,MAAa,KAAK;IAChB,EAAE,GAAW,EAAE,CAAC;IAChB,MAAM,GAAuB,IAAI,CAAC;IAClC,KAAK,GAAW,EAAE,CAAC;IACnB,+EAA+E;IAC/E,KAAK,GASC,EAAE,CAAC;IACT,SAAS,GAAW,EAAE,CAAC;IACvB,QAAQ,GAAY,KAAK,CAAC;IAC1B,MAAM,GAAY,KAAK,CAAC;IAExB,YAAY,IAAoB;QAC9B,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,OAAO,CAAC,IAAyB;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC;QAEhC,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,KAAK,CAAC;QAE3E,2FAA2F;QAC3F,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QAE9D,uCAAuC;QACvC,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,IAAS,EAAE,EAAE;YAC7C,cAAc;YACd,IAAI,IAAI,GAAgC,OAAO,CAAC;YAChD,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;YAChC,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,CAAC;YAChD,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC;gBACtD,IAAI,GAAG,OAAO,CAAC;YACjB,CAAC;iBAAM,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,CAAC;gBACtD,IAAI,GAAG,OAAO,CAAC;YACjB,CAAC;YAED,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;gBACxB,KAAK,EAAE,GAAG;gBACV,IAAI;gBACJ,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE;gBAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,KAAK,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK;gBAC3D,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,KAAK;gBACvC,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC;gBAC9B,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC;aAC/B,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE7D,OAAO,IAAI,KAAK,CAAC;YACf,EAAE,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;YAC1C,MAAM,EAAE,yBAAW,CAAC,OAAO,CAAC,IAAI,CAAC;YACjC,KAAK,EAAE,SAAS,EAAE,QAAQ,IAAI,EAAE;YAChC,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE,SAAS,EAAE,SAAS,IAAI,EAAE;YACrC,QAAQ,EAAE,YAAY;YACtB,MAAM,EAAE,YAAY;SACrB,CAAC,CAAC;IACL,CAAC;CACF;AAvED,sBAuEC"}

package/dist/models/social/feed/StoryAuthor.d.ts

@@ -2,6 +2,7 @@
  * Minimal user model specifically for Story displays.
  */
 export declare class StoryAuthor {
+    id: number;
     username: string;
     displayName: string;
     avatar: string;

package/dist/models/social/feed/StoryAuthor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryAuthor.d.ts","sourceRoot":"","sources":["../../../../src/models/social/feed/StoryAuthor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,WAAW;IACtB,QAAQ,EAAE,MAAM,CAAM;IACtB,WAAW,EAAE,MAAM,CAAM;IACzB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,OAAO,CAAS;gBAEV,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC;IAItC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,WAAW;CAUvD"}
+{"version":3,"file":"StoryAuthor.d.ts","sourceRoot":"","sources":["../../../../src/models/social/feed/StoryAuthor.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,WAAW;IACtB,EAAE,EAAE,MAAM,CAAK;IACf,QAAQ,EAAE,MAAM,CAAM;IACtB,WAAW,EAAE,MAAM,CAAM;IACzB,MAAM,EAAE,MAAM,CAAM;IACpB,IAAI,EAAE,OAAO,CAAS;gBAEV,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC;IAItC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,WAAW;CAWvD"}

package/dist/models/social/feed/StoryAuthor.js

@@ -5,6 +5,7 @@ exports.StoryAuthor = void 0;
  * Minimal user model specifically for Story displays.
  */
 class StoryAuthor {
+    id = 0;
     username = '';
     displayName = '';
     avatar = '';
@@ -16,10 +17,11 @@ class StoryAuthor {
         if (!json)
             return new StoryAuthor({});
         return new StoryAuthor({
+            id: Number(json.authorId || json.ownerId || json.oyuncu_ID || 0),
             username: json.authorUsername || json.oyuncuadi || json.kullaniciadi || json.username || '',
             displayName: json.authorName || json.oyuncuadi || json.adsoyad || json.displayname || json.username || '',
             avatar: json.authorAvatar || json.oyuncuavatar || json.avatar || json.oyuncu_avatar || '',
-            isMe: json.hikayeben === 1 || json.isMe === true || false
+            isMe: json.isMe === true || json.hikayeben === 1 || false
         });
     }
 }

package/dist/models/social/feed/StoryAuthor.js.map

@@ -1 +1 @@
-{"version":3,"file":"StoryAuthor.js","sourceRoot":"","sources":["../../../../src/models/social/feed/StoryAuthor.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,MAAa,WAAW;IACtB,QAAQ,GAAW,EAAE,CAAC;IACtB,WAAW,GAAW,EAAE,CAAC;IACzB,MAAM,GAAW,EAAE,CAAC;IACpB,IAAI,GAAY,KAAK,CAAC;IAEtB,YAAY,IAA0B;QACpC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,IAAyB;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEtC,OAAO,IAAI,WAAW,CAAC;YACrB,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC3F,WAAW,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE;YACzG,MAAM,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,EAAE;YACzF,IAAI,EAAE,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,KAAK;SAC1D,CAAC,CAAC;IACL,CAAC;CACF;AApBD,kCAoBC"}
+{"version":3,"file":"StoryAuthor.js","sourceRoot":"","sources":["../../../../src/models/social/feed/StoryAuthor.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,MAAa,WAAW;IACtB,EAAE,GAAW,CAAC,CAAC;IACf,QAAQ,GAAW,EAAE,CAAC;IACtB,WAAW,GAAW,EAAE,CAAC;IACzB,MAAM,GAAW,EAAE,CAAC;IACpB,IAAI,GAAY,KAAK,CAAC;IAEtB,YAAY,IAA0B;QACpC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,IAAyB;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC;QAEtC,OAAO,IAAI,WAAW,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;YAChE,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC3F,WAAW,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE;YACzG,MAAM,EAAE,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,EAAE;YACzF,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,KAAK;SAC1D,CAAC,CAAC;IACL,CAAC;CACF;AAtBD,kCAsBC"}

package/dist/utils/text/MentionUtils.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Metin içindeki @kullaniciadi ve #hashtag ifadelerini bulur ve tıkalanabilir yapılara dönüştürür.
+ * @param text İşlenecek ham metin
+ * @returns JSX Element dizisi
+ */
+export declare const parseMentions: (text: string) => React.ReactNode;
+//# sourceMappingURL=MentionUtils.d.ts.map

package/dist/utils/text/MentionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/text/MentionUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,KAAK,CAAC,SA8BlD,CAAC"}

package/dist/utils/text/MentionUtils.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseMentions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const MentionLink_1 = require("../../components/common/Mentions/MentionLink");
+const HashtagLink_1 = require("../../components/common/Mentions/HashtagLink");
+/**
+ * Metin içindeki @kullaniciadi ve #hashtag ifadelerini bulur ve tıkalanabilir yapılara dönüştürür.
+ * @param text İşlenecek ham metin
+ * @returns JSX Element dizisi
+ */
+const parseMentions = (text) => {
+    if (!text)
+        return null;
+    // Regex: Hem @ hem de # ile başlayan kelimeleri yakalar
+    const regex = /(@\w+|#\w+)/g;
+    const parts = text.split(regex);
+    const matches = text.match(regex);
+    let matchIndex = 0;
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: parts.map((part, i) => {
+            const currentMatch = matches && i < parts.length - 1 ? matches[matchIndex++] : null;
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [part, currentMatch && (currentMatch.startsWith('@') ? ((0, jsx_runtime_1.jsx)(MentionLink_1.MentionLink, { username: currentMatch.substring(1) })) : ((0, jsx_runtime_1.jsx)(HashtagLink_1.HashtagLink, { tag: currentMatch.substring(1) })))] }, i));
+        }) }));
+};
+exports.parseMentions = parseMentions;
+//# sourceMappingURL=MentionUtils.js.map

package/dist/utils/text/MentionUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionUtils.js","sourceRoot":"","sources":["../../../src/utils/text/MentionUtils.tsx"],"names":[],"mappings":";;;;;;;AAAA,kDAA0B;AAC1B,8EAA2E;AAC3E,8EAA2E;AAE3E;;;;GAIG;AACI,MAAM,aAAa,GAAG,CAAC,IAAY,EAAmB,EAAE;IAC7D,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,wDAAwD;IACxD,MAAM,KAAK,GAAG,cAAc,CAAC;IAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAElC,IAAI,UAAU,GAAG,CAAC,CAAC;IAEnB,OAAO,CACL,2DACG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACrB,MAAM,YAAY,GAAG,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAEpF,OAAO,CACL,wBAAC,eAAK,CAAC,QAAQ,eACZ,IAAI,EACJ,YAAY,IAAI,CACf,YAAY,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,uBAAC,yBAAW,IAAC,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,GAAI,CACrD,CAAC,CAAC,CAAC,CACF,uBAAC,yBAAW,IAAC,GAAG,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,GAAI,CAChD,CACF,KARkB,CAAC,CASL,CAClB,CAAC;QACJ,CAAC,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,aAAa,iBA8BxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@armoyu/ui",
-  "version": "1.1.22",
+  "version": "1.1.24",
   "description": "Premium UI component library for ARMOYU platforms.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,7 +19,7 @@
     "dev": "next dev"
   },
   "dependencies": {
-    "@armoyu/core": "^1.1.59",
+    "@armoyu/core": "^1.1.60",
     "plyr": "^3.8.4",
     "plyr-react": "^6.0.0"
   },

package/src/globals.css

@@ -1,4 +1,18 @@
 @import "tailwindcss";
+@import "plyr-react/plyr.css";
+
+/* Plyr Custom Theme */
+:root {
+  --plyr-color-main: #3b82f6; /* Armoyu Blue */
+}
+
+.plyr {
+  border-radius: inherit;
+}
+
+.plyr--video {
+  background: transparent;
+}
 @source "./components/**/*.{js,ts,jsx,tsx}";
 @source "./app/**/*.{js,ts,jsx,tsx}";
 
@@ -185,3 +199,40 @@
     width: 100%;
   }
 }
+
+/* Slide Animations for Lightbox */
+@keyframes slideInRight {
+  from {
+    transform: translateX(100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.animate-slide-right {
+  animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-slide-left {
+  animation: slideInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+/* Mask Fade Bottom for text truncation */
+.mask-fade-bottom {
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+}