@agentiffai/design 1.3.20 → 1.3.21

package/dist/index.cjs

@@ -8543,6 +8543,7 @@ var PostPreviewCard = ({
   isLoading = false
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
+  const [imageError, setImageError] = React4.useState(false);
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
   const currentCharCount = displayContent.length;
@@ -8592,12 +8593,48 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ImagePreview, { src: post.imageUrl, alt: "Post image preview" }) }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
-          ] }) }),
+        post.imageUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ImagePreview,
+          {
+            src: post.imageUrl,
+            alt: "Post image preview",
+            onError: () => setImageError(true)
+          }
+        ) }) : post.imageUrl && imageError ? /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Image unavailable",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Image unavailable" })
+        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "No image attached",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No image attached" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10323,6 +10360,11 @@ var ActionButton6 = styled48__default.default.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`;
@@ -10356,11 +10398,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,
@@ -10372,13 +10409,38 @@ function TokenUsageCard({
   transactions,
   periodLabel,
   onViewAll,
-  className
+  className,
+  loading = false
 }) {
   const percentage = React4.useMemo(
     () => Math.min(currentUsage / maxLimit * 100, 100),
     [currentUsage, maxLimit]
   );
   const usageLevel = React4.useMemo(() => getUsageLevel(percentage), [percentage]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className, "data-testid": "token-usage-card-loading", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "120px", $height: "20px" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "80px", $height: "16px" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(UsageSection, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "160px", $height: "28px" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "100%", $height: "8px", $radius: tokens.borderRadius.full }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "80px", $height: "14px" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TransactionsSection, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "100px", $height: "14px" }),
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionsList, { children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsxs(TransactionItem, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "24px", $height: "24px", $radius: tokens.borderRadius.sm }),
+          /* @__PURE__ */ jsxRuntime.jsxs(TransactionInfo, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "70%", $height: "14px" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "50%", $height: "12px" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { $width: "32px", $height: "14px" })
+        ] }, i)) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "Token Usage" }),
@@ -10399,7 +10461,7 @@ function TokenUsageCard({
     transactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(TransactionsSection, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(TransactionsHeader, { children: "Recent Activity" }),
       /* @__PURE__ */ jsxRuntime.jsx(TransactionsList, { children: transactions.slice(0, 5).map((transaction) => /* @__PURE__ */ jsxRuntime.jsxs(TransactionItem, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TransactionIcon, { $type: transaction.type, children: typeIcons[transaction.type] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TransactionIcon, { $type: transaction.type, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: TYPE_ICONS[transaction.type], alt: "", width: 14, height: 14 }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(TransactionInfo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(TransactionDescription, { children: transaction.description }),
           /* @__PURE__ */ jsxRuntime.jsxs(TransactionMeta, { children: [
@@ -10496,8 +10558,7 @@ var TransactionsSection = styled48__default.default.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__default.default.h4`
@@ -10517,8 +10578,14 @@ var TransactionItem = styled48__default.default.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__default.default.span`
   width: 24px;
@@ -10526,14 +10593,26 @@ var TransactionIcon = styled48__default.default.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__default.default.div`
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 `;
 var TransactionDescription = styled48__default.default.div`
   font-size: ${tokens.typography.fontSize.sm};
@@ -10549,12 +10628,20 @@ var TransactionMeta = styled48__default.default.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__default.default.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__default.default.div`
   text-align: center;
@@ -10581,6 +10668,17 @@ var ViewAllButton = styled48__default.default.button`
     color: ${tokens.colors.text.primary};
   }
 `;
+var pulse5 = styled48.keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+`;
+var SkeletonBlock = styled48__default.default.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,
@@ -11571,7 +11669,7 @@ var spin = styled48.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse5 = styled48.keyframes`
+var pulse6 = styled48.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -11649,7 +11747,7 @@ var IconContainer3 = styled48__default.default.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";
 }}