@agentiffai/design 1.3.21 → 1.3.23

package/dist/index.cjs

@@ -2232,7 +2232,7 @@ var TabPanelWrapper = styled48__default.default.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) {
@@ -8540,7 +8540,8 @@ 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);
@@ -8593,14 +8594,42 @@ var PostPreviewCard = ({
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
         ] }),
-        post.imageUrl && !imageError ? /* @__PURE__ */ jsxRuntime.jsx(ImagePreviewContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        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 ? /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
+        ) }) : 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",
             {
@@ -8618,7 +8647,25 @@ var PostPreviewCard = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Image unavailable" })
-        ] }) : ["instagram", "linkedin", "facebook", "youtube"].includes(post.platform) && /* @__PURE__ */ jsxRuntime.jsxs(ImagePlaceholder, { children: [
+        ] }) : ["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",
             {
@@ -8636,7 +8683,7 @@ var PostPreviewCard = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No image attached" })
-        ] }),
+        ] })),
         /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarTrack, { children: /* @__PURE__ */ jsxRuntime.jsx(
           ProgressBarFill2,
           {
@@ -8797,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;
@@ -8810,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;
@@ -8829,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;
@@ -8879,7 +8968,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  onImageChangeRequest
 }) => {
   const [activeIndex, setActiveIndex] = React4.useState(0);
   React4.useEffect(() => {
@@ -8939,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}`);
     }) }),
@@ -9071,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" }) });
@@ -9103,7 +9195,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
-            isLoading
+            isLoading,
+            onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
         )
       },
@@ -9295,7 +9388,8 @@ var SocialMediaCanvas = ({
   editContent,
   onEditContentChange,
   isLoading = false,
-  activeIndex = 0
+  activeIndex = 0,
+  onImageChangeRequest
 }) => {
   const [viewMode, setViewMode] = React4.useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -9352,7 +9446,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        onImageChangeRequest
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       PlatformGrid,
@@ -9363,7 +9458,8 @@ var SocialMediaCanvas = ({
         onEditContentChange,
         isLoading,
         activeIndex,
-        onActiveChange: handleActiveChange
+        onActiveChange: handleActiveChange,
+        onImageChangeRequest
       }
     ) })
   ] });
@@ -10483,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;
@@ -10560,6 +10658,9 @@ var TransactionsSection = styled48__default.default.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__default.default.h4`
   margin: 0;
@@ -10571,20 +10672,23 @@ 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};
-  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__default.default.span`
@@ -10778,7 +10882,6 @@ var Card3 = styled48__default.default.button`
   }
 
   &:disabled {
-    opacity: 0.5;
     cursor: not-allowed;
   }
 `;