@agentiffai/design 1.3.20 → 1.3.22

package/dist/index.cjs

@@ -8540,9 +8540,11 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChange
 }) => {
   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,14 +8594,96 @@ 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 ? onImageChange ? /* @__PURE__ */ jsxRuntime.jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Change image", children: /* @__PURE__ */ jsxRuntime.jsxs(ImagePreviewContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ImagePreview,
+            {
+              src: post.imageUrl,
+              alt: "Post image preview",
+              onError: () => setImageError(true)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ImageOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx(OverlayText, { children: "Change image" }) })
+        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ImagePreview,
+          {
+            src: post.imageUrl,
+            alt: "Post image preview",
+            onError: () => setImageError(true)
+          }
+        ) }) : post.imageUrl && imageError ? onImageChange ? /* @__PURE__ */ jsxRuntime.jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Replace image", children: /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { $clickable: true, 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: "Tap to replace image" })
+        ] }) }) : /* @__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) && (onImageChange ? /* @__PURE__ */ jsxRuntime.jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Add image", children: /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { $clickable: true, 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": "Add image",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tap to add image" })
+        ] }) }) : /* @__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(
           ProgressBarFill2,
           {
@@ -8760,7 +8844,17 @@ var ProgressBarFill2 = styled48__default.default.div`
   return tokens.colors.success;
 }};
 `;
+var ImageChangeButton = styled48__default.default.button`
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+`;
 var ImagePreviewContainer = styled48__default.default.div`
+  position: relative;
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
@@ -8773,6 +8867,30 @@ var ImagePreview = styled48__default.default.img`
   object-fit: cover;
   display: block;
 `;
+var ImageOverlay = styled48__default.default.div`
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity ${tokens.transitions.fast};
+
+  ${ImageChangeButton}:hover &,
+  ${ImageChangeButton}:focus-visible & {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    opacity: 0.6;
+  }
+`;
+var OverlayText = styled48__default.default.span`
+  color: white;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+`;
 var ImagePlaceholder = styled48__default.default.div`
   width: 100%;
   height: 200px;
@@ -8792,8 +8910,16 @@ var ImagePlaceholder = styled48__default.default.div`
   gap: ${tokens.spacing.sm};
   color: white;
   font-size: ${tokens.typography.fontSize.sm};
-  opacity: 0.8;
+  opacity: ${({ $clickable }) => $clickable ? 0.9 : 0.8};
   margin-bottom: ${tokens.spacing.sm};
+  transition: opacity ${tokens.transitions.fast};
+
+  ${({ $clickable }) => $clickable && `
+    ${ImageChangeButton}:hover &,
+    ${ImageChangeButton}:focus-visible & {
+      opacity: 1;
+    }
+  `}
 `;
 var PlaceholderIcon = styled48__default.default.div`
   width: 48px;
@@ -8842,7 +8968,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChangeRequest
 }) => {
   const [activeIndex, setActiveIndex] = React4.useState(0);
   React4.useEffect(() => {
@@ -8902,7 +9029,8 @@ var PlatformCarousel = ({
           isEditing,
           editContent: isEditing ? editContent : void 0,
           onContentChange: isEditing ? onEditContentChange : void 0,
-          isLoading
+          isLoading,
+          onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
         }
       ) }, `slide-${post.platform}-${index}`);
     }) }),
@@ -9034,7 +9162,8 @@ var PlatformGrid = ({
   onEditContentChange,
   isLoading = false,
   activeIndex = 0,
-  onActiveChange
+  onActiveChange,
+  onImageChangeRequest
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateText, { children: "No posts to display" }) });
@@ -9066,7 +9195,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
-            isLoading
+            isLoading,
+            onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
         )
       },
@@ -9258,7 +9388,8 @@ var SocialMediaCanvas = ({
   editContent,
   onEditContentChange,
   isLoading = false,
-  activeIndex = 0
+  activeIndex = 0,
+  onImageChangeRequest
 }) => {
   const [viewMode, setViewMode] = React4.useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -9315,7 +9446,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        onImageChangeRequest
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       PlatformGrid,
@@ -9326,7 +9458,8 @@ var SocialMediaCanvas = ({
         onEditContentChange,
         isLoading,
         activeIndex,
-        onActiveChange: handleActiveChange
+        onActiveChange: handleActiveChange,
+        onImageChangeRequest
       }
     ) })
   ] });
@@ -10323,6 +10456,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 +10494,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 +10505,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 +10557,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: [
@@ -10421,18 +10579,20 @@ var Card2 = styled48__default.default.div`
   display: flex;
   flex-direction: column;
   background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.xl};
+  height: 100%;
   overflow: hidden;
 `;
 var Header4 = styled48__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: ${tokens.spacing.sm} ${tokens.spacing.md};
+  padding: 0 0.5rem;
   background: ${tokens.colors.background.darker};
   border-bottom: 1px solid ${tokens.colors.border.default};
   min-height: 48px;
+  flex-shrink: 0;
 `;
 var Title2 = styled48__default.default.h3`
   margin: 0;
@@ -10496,9 +10656,11 @@ 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};
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 `;
 var TransactionsHeader = styled48__default.default.h4`
   margin: 0;
@@ -10510,15 +10672,24 @@ var TransactionsHeader = styled48__default.default.h4`
 var TransactionsList = styled48__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
 `;
 var TransactionItem = styled48__default.default.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
-  background: ${tokens.colors.background.darker};
-  border-radius: ${tokens.borderRadius.sm};
+  background: ${tokens.colors.background.dark};
+  border-radius: ${tokens.borderRadius.lg};
+  border: 1px solid ${tokens.colors.border.default};
+  min-width: 0;
+  overflow: hidden;
+  transition: border-color ${tokens.transitions.fast},
+    background-color ${tokens.transitions.fast};
+
+  &:hover {
+    border-color: ${tokens.colors.border.hover};
+  }
 `;
 var TransactionIcon = styled48__default.default.span`
   width: 24px;
@@ -10526,14 +10697,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 +10732,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 +10772,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 +11773,7 @@ var spin = styled48.keyframes`
     transform: rotate(360deg);
   }
 `;
-var pulse5 = styled48.keyframes`
+var pulse6 = styled48.keyframes`
   0%, 100% {
     opacity: 1;
   }
@@ -11649,7 +11851,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";
 }}