@agentiffai/design 1.3.19 → 1.3.21

package/dist/index.d.cts

@@ -700,7 +700,9 @@ interface TokenUsageCardProps {
     periodLabel: string;
     onViewAll?: () => void;
     className?: string;
+    /** Show loading skeleton state */
+    loading?: boolean;
 }
-declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, }: TokenUsageCardProps): React__default.ReactElement;
+declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
 export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };

package/dist/index.d.ts

@@ -700,7 +700,9 @@ interface TokenUsageCardProps {
     periodLabel: string;
     onViewAll?: () => void;
     className?: string;
+    /** Show loading skeleton state */
+    loading?: boolean;
 }
-declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, }: TokenUsageCardProps): React__default.ReactElement;
+declare function TokenUsageCard({ currentUsage, maxLimit, transactions, periodLabel, onViewAll, className, loading, }: TokenUsageCardProps): React__default.ReactElement;
 
 export { type ApprovalStatus, AssistantThinking, type AssistantThinkingProps, CATEGORY_CONFIGS, type CategoryConfig, ChatInput, type ChatInputProps, ConnectionStatusBadge, type ConnectionStatusBadgeProps, DarkNotificationCard, type EngagementOpportunity, type EngagementStatus, IntegrationCard, type IntegrationCardProps, NotificationCard, type NotificationCardProps, type NotificationItem, type NotificationSection, PLATFORM_CONFIGS, type Platform, PlatformCarousel, type PlatformCarouselProps, type PlatformConfig, PlatformGrid, type PlatformGridProps, PostApprovalControls, type PostApprovalControlsProps, PostPreviewCard, type PostPreviewCardProps, type PostViewMode, type ProgressCategory, type ProposedPost, RedditEngagementControls, type RedditEngagementControlsProps, RedditOpportunityCard, type RedditOpportunityCardProps, type ReplyTone, SecretInput, type SecretInputProps, SocialMediaCanvas, type SocialMediaCanvasProps, type TokenTransaction, TokenUsageCard, type TokenUsageCardProps, UserMessage, type UserMessageProps, categorizeProgress, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, normalizePlatform };

package/dist/index.js

@@ -4337,6 +4337,7 @@ var Container10 = styled48.div`
   display: flex;
   align-items: center;
   width: 100%;
+  min-width: 0;
 `;
 var Input = styled48.input`
   width: 100%;
@@ -8535,6 +8536,7 @@ var PostPreviewCard = ({
   isLoading = false
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
+  const [imageError, setImageError] = useState(false);
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -8584,12 +8586,48 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl ? /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(ImagePreview, { src: post.imageUrl, alt: "Post image preview" }) }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
-          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-            /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
-          ] }) }),
+        post.imageUrl && !imageError ? /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(
+          ImagePreview,
+          {
+            src: post.imageUrl,
+            alt: "Post image preview",
+            onError: () => setImageError(true)
+          }
+        ) }) : post.imageUrl && imageError ? /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Image unavailable",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: "Image unavailable" })
+        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "No image attached",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsx("span", { children: "No image attached" })
         ] }),
         /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsx(
@@ -10315,6 +10353,11 @@ var ActionButton6 = styled48.button`
       animation: ${pulse4} 2s ease-in-out infinite;
     `}
 `;
+var TYPE_ICONS = {
+  input: "/assets/icon-set/Icon-arrow-up-fill.svg",
+  output: "/assets/icon-set/Icon-download-2-fill.svg",
+  system: "/assets/icon-set/Icon-settings-3-fill.svg"
+};
 function formatNumber2(num) {
   if (num >= 1e6) {
     return `${(num / 1e6).toFixed(1)}M`;
@@ -10348,11 +10391,6 @@ var usageLevelColors = {
   high: "#ff8c00",
   critical: tokens.colors.error
 };
-var typeIcons = {
-  input: "\u2191",
-  output: "\u2193",
-  system: "\u2699"
-};
 var typeColors = {
   input: tokens.colors.info,
   output: tokens.colors.success,
@@ -10364,13 +10402,38 @@ function TokenUsageCard({
   transactions,
   periodLabel,
   onViewAll,
-  className
+  className,
+  loading = false
 }) {
   const percentage = useMemo(
     () => Math.min(currentUsage / maxLimit * 100, 100),
     [currentUsage, maxLimit]
   );
   const usageLevel = useMemo(() => getUsageLevel(percentage), [percentage]);
+  if (loading) {
+    return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card-loading", children: [
+      /* @__PURE__ */ jsxs(Header4, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "120px", $height: "20px" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "80px", $height: "16px" })
+      ] }),
+      /* @__PURE__ */ jsxs(UsageSection, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "160px", $height: "28px" }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "100%", $height: "8px", $radius: tokens.borderRadius.full }),
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "80px", $height: "14px" })
+      ] }),
+      /* @__PURE__ */ jsxs(TransactionsSection, { children: [
+        /* @__PURE__ */ jsx(SkeletonBlock, { $width: "100px", $height: "14px" }),
+        /* @__PURE__ */ jsx(TransactionsList, { children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
+          /* @__PURE__ */ jsx(SkeletonBlock, { $width: "24px", $height: "24px", $radius: tokens.borderRadius.sm }),
+          /* @__PURE__ */ jsxs(TransactionInfo, { children: [
+            /* @__PURE__ */ jsx(SkeletonBlock, { $width: "70%", $height: "14px" }),
+            /* @__PURE__ */ jsx(SkeletonBlock, { $width: "50%", $height: "12px" })
+          ] }),
+          /* @__PURE__ */ jsx(SkeletonBlock, { $width: "32px", $height: "14px" })
+        ] }, i)) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
     /* @__PURE__ */ jsxs(Header4, { children: [
       /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
@@ -10391,7 +10454,7 @@ function TokenUsageCard({
     transactions.length > 0 && /* @__PURE__ */ jsxs(TransactionsSection, { children: [
       /* @__PURE__ */ jsx(TransactionsHeader, { children: "Recent Activity" }),
       /* @__PURE__ */ jsx(TransactionsList, { children: transactions.slice(0, 5).map((transaction) => /* @__PURE__ */ jsxs(TransactionItem, { children: [
-        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: typeIcons[transaction.type] }),
+        /* @__PURE__ */ jsx(TransactionIcon, { $type: transaction.type, children: /* @__PURE__ */ jsx("img", { src: TYPE_ICONS[transaction.type], alt: "", width: 14, height: 14 }) }),
         /* @__PURE__ */ jsxs(TransactionInfo, { children: [
           /* @__PURE__ */ jsx(TransactionDescription, { children: transaction.description }),
           /* @__PURE__ */ jsxs(TransactionMeta, { children: [
@@ -10488,8 +10551,7 @@ var TransactionsSection = styled48.div`
   display: flex;
   flex-direction: column;
   gap: ${tokens.spacing.sm};
-  padding: ${tokens.spacing.md};
-  padding-top: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} ${tokens.spacing.md} ${tokens.spacing.md};
   border-top: 1px solid ${tokens.colors.border.subtle};
 `;
 var TransactionsHeader = styled48.h4`
@@ -10509,8 +10571,14 @@ var TransactionItem = styled48.div`
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
-  background: ${tokens.colors.background.darker};
   border-radius: ${tokens.borderRadius.sm};
+  min-width: 0;
+  overflow: hidden;
+  transition: background-color ${tokens.transitions.fast};
+
+  &:hover {
+    background-color: ${tokens.colors.surface.overlayHover};
+  }
 `;
 var TransactionIcon = styled48.span`
   width: 24px;
@@ -10518,14 +10586,26 @@ var TransactionIcon = styled48.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: ${tokens.typography.fontSize.sm};
-  color: ${({ $type }) => typeColors[$type]};
+  flex-shrink: 0;
   background: ${tokens.colors.background.light};
   border-radius: ${tokens.borderRadius.sm};
+
+  img {
+    filter: ${({ $type }) => {
+  if ($type === "input") {
+    return "brightness(0) saturate(100%) invert(55%) sepia(83%) saturate(1956%) hue-rotate(190deg) brightness(101%) contrast(101%)";
+  }
+  if ($type === "output") {
+    return "brightness(0) saturate(100%) invert(73%) sepia(34%) saturate(547%) hue-rotate(99deg) brightness(91%) contrast(89%)";
+  }
+  return "brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(85%)";
+}};
+  }
 `;
 var TransactionInfo = styled48.div`
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 `;
 var TransactionDescription = styled48.div`
   font-size: ${tokens.typography.fontSize.sm};
@@ -10541,12 +10621,20 @@ var TransactionMeta = styled48.div`
   font-size: ${tokens.typography.fontSize.xs};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${tokens.colors.text.tertiary};
+  overflow: hidden;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 var TransactionTokens = styled48.span`
   font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.medium};
   font-family: ${tokens.typography.fontFamily.primary};
   color: ${({ $type }) => typeColors[$type]};
+  flex-shrink: 0;
 `;
 var EmptyState4 = styled48.div`
   text-align: center;
@@ -10573,6 +10661,17 @@ var ViewAllButton = styled48.button`
     color: ${tokens.colors.text.primary};
   }
 `;
+var pulse5 = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+var SkeletonBlock = styled48.div`
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+  background: ${tokens.colors.background.light};
+  border-radius: ${({ $radius }) => $radius || tokens.borderRadius.sm};
+  animation: ${pulse5} 1.5s ease-in-out infinite;
+`;
 var WorkflowCard = ({
   id,
   name,
@@ -11563,7 +11662,7 @@ var spin = keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse5 = keyframes`
+var pulse6 = keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -11641,7 +11740,7 @@ var IconContainer3 = styled48.div`
   animation: ${(props) => {
   if (props.$animated) {
     if (props.$status === "running") return spin;
-    if (props.$status === "pending") return pulse5;
+    if (props.$status === "pending") return pulse6;
   }
   return "none";
 }}