@agentiffai/design 1.3.21 → 1.3.23

package/dist/index.d.cts

@@ -443,6 +443,8 @@ interface PostPreviewCardProps {
     onContentChange?: (content: string) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
+    /** Callback to change/add an image. When provided, image areas become clickable. */
+    onImageChange?: () => void;
 }
 declare const PostPreviewCard: React__default.FC<PostPreviewCardProps>;
 
@@ -464,6 +466,8 @@ interface PlatformCarouselProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 declare const PlatformCarousel: React__default.FC<PlatformCarouselProps>;
 
@@ -488,6 +492,8 @@ interface PlatformGridProps {
     activeIndex?: number;
     /** Callback when a post is clicked/selected */
     onActiveChange?: (index: number) => void;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -531,6 +537,8 @@ interface SocialMediaCanvasProps {
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */
     activeIndex?: number;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.

package/dist/index.d.ts

@@ -443,6 +443,8 @@ interface PostPreviewCardProps {
     onContentChange?: (content: string) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
+    /** Callback to change/add an image. When provided, image areas become clickable. */
+    onImageChange?: () => void;
 }
 declare const PostPreviewCard: React__default.FC<PostPreviewCardProps>;
 
@@ -464,6 +466,8 @@ interface PlatformCarouselProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 declare const PlatformCarousel: React__default.FC<PlatformCarouselProps>;
 
@@ -488,6 +492,8 @@ interface PlatformGridProps {
     activeIndex?: number;
     /** Callback when a post is clicked/selected */
     onActiveChange?: (index: number) => void;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -531,6 +537,8 @@ interface SocialMediaCanvasProps {
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */
     activeIndex?: number;
+    /** Callback when user requests to change/add an image for a post */
+    onImageChangeRequest?: (index: number) => void;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.

package/dist/index.js

@@ -2225,7 +2225,7 @@ var TabPanelWrapper = styled48.div`
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
   scrollbar-gutter: stable; // Always reserve space for scrollbar to prevent width jump
-  background-color: ${tokens.colors.surface.overlay};
+  background-color: ${tokens.colors.background.dark};
   min-height: 0; // Enable proper flex shrinking and scrolling
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
@@ -8533,7 +8533,8 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChange
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const [imageError, setImageError] = useState(false);
@@ -8586,14 +8587,42 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl && !imageError ? /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(
+        post.imageUrl && !imageError ? onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Change image", children: /* @__PURE__ */ jsxs(ImagePreviewContainer, { children: [
+          /* @__PURE__ */ jsx(
+            ImagePreview,
+            {
+              src: post.imageUrl,
+              alt: "Post image preview",
+              onError: () => setImageError(true)
+            }
+          ),
+          /* @__PURE__ */ jsx(ImageOverlay, { children: /* @__PURE__ */ jsx(OverlayText, { children: "Change image" }) })
+        ] }) }) : /* @__PURE__ */ jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsx(
           ImagePreview,
           {
             src: post.imageUrl,
             alt: "Post image preview",
             onError: () => setImageError(true)
           }
-        ) }) : post.imageUrl && imageError ? /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+        ) }) : post.imageUrl && imageError ? onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Replace image", children: /* @__PURE__ */ jsxs(ImagePlaceholder, { $clickable: true, 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: "Tap to replace image" })
+        ] }) }) : /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
           /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -8611,7 +8640,25 @@ var PostPreviewCard = ({
             }
           ) }),
           /* @__PURE__ */ jsx("span", { children: "Image unavailable" })
-        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
+        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && (onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Add image", children: /* @__PURE__ */ jsxs(ImagePlaceholder, { $clickable: true, children: [
+          /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              role: "img",
+              "aria-label": "Add image",
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "16" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "16", y2: "12" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: "Tap to add image" })
+        ] }) }) : /* @__PURE__ */ jsxs(ImagePlaceholder, { children: [
           /* @__PURE__ */ jsx(PlaceholderIcon, { children: /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -8629,7 +8676,7 @@ var PostPreviewCard = ({
             }
           ) }),
           /* @__PURE__ */ jsx("span", { children: "No image attached" })
-        ] }),
+        ] })),
         /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsx(
           ProgressBarFill2,
           {
@@ -8790,7 +8837,17 @@ var ProgressBarFill2 = styled48.div`
   return tokens.colors.success;
 }};
 `;
+var ImageChangeButton = styled48.button`
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+`;
 var ImagePreviewContainer = styled48.div`
+  position: relative;
   margin-bottom: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.sm};
   overflow: hidden;
@@ -8803,6 +8860,30 @@ var ImagePreview = styled48.img`
   object-fit: cover;
   display: block;
 `;
+var ImageOverlay = styled48.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.span`
+  color: white;
+  font-size: ${tokens.typography.fontSize.sm};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+`;
 var ImagePlaceholder = styled48.div`
   width: 100%;
   height: 200px;
@@ -8822,8 +8903,16 @@ var ImagePlaceholder = styled48.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.div`
   width: 48px;
@@ -8872,7 +8961,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChangeRequest
 }) => {
   const [activeIndex, setActiveIndex] = useState(0);
   useEffect(() => {
@@ -8932,7 +9022,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}`);
     }) }),
@@ -9064,7 +9155,8 @@ var PlatformGrid = ({
   onEditContentChange,
   isLoading = false,
   activeIndex = 0,
-  onActiveChange
+  onActiveChange,
+  onImageChangeRequest
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx(EmptyState2, { children: /* @__PURE__ */ jsx(EmptyStateText, { children: "No posts to display" }) });
@@ -9096,7 +9188,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
-            isLoading
+            isLoading,
+            onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
         )
       },
@@ -9288,7 +9381,8 @@ var SocialMediaCanvas = ({
   editContent,
   onEditContentChange,
   isLoading = false,
-  activeIndex = 0
+  activeIndex = 0,
+  onImageChangeRequest
 }) => {
   const [viewMode, setViewMode] = useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -9345,7 +9439,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        onImageChangeRequest
       }
     ) : /* @__PURE__ */ jsx(
       PlatformGrid,
@@ -9356,7 +9451,8 @@ var SocialMediaCanvas = ({
         onEditContentChange,
         isLoading,
         activeIndex,
-        onActiveChange: handleActiveChange
+        onActiveChange: handleActiveChange,
+        onImageChangeRequest
       }
     ) })
   ] });
@@ -10476,18 +10572,20 @@ var Card2 = styled48.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.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.h3`
   margin: 0;
@@ -10553,6 +10651,9 @@ var TransactionsSection = styled48.div`
   gap: ${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.h4`
   margin: 0;
@@ -10564,20 +10665,23 @@ var TransactionsHeader = styled48.h4`
 var TransactionsList = styled48.div`
   display: flex;
   flex-direction: column;
-  gap: ${tokens.spacing.xs};
+  gap: ${tokens.spacing.sm};
 `;
 var TransactionItem = styled48.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.sm};
-  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: background-color ${tokens.transitions.fast};
+  transition: border-color ${tokens.transitions.fast},
+    background-color ${tokens.transitions.fast};
 
   &:hover {
-    background-color: ${tokens.colors.surface.overlayHover};
+    border-color: ${tokens.colors.border.hover};
   }
 `;
 var TransactionIcon = styled48.span`
@@ -10771,7 +10875,6 @@ var Card3 = styled48.button`
   }
 
   &:disabled {
-    opacity: 0.5;
     cursor: not-allowed;
   }
 `;