@agentiffai/design 0.1.8 → 0.1.9

package/dist/index.cjs

@@ -7828,22 +7828,35 @@ var ActionButton5 = styled11__default.default.button`
   }
 }}
 `;
-var PostPreviewCard = ({ post, isActive = false }) => {
+var PostPreviewCard = ({
+  post,
+  isActive = false,
+  isEditing = false,
+  editContent,
+  onContentChange,
+  isLoading = false
+}) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform];
+  const showSkeleton = isLoading && !post.content;
+  const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
+  const currentCharCount = displayContent.length;
   const charPercentage = react.useMemo(
-    () => getCharacterLimitPercentage(post.platform, post.characterCount),
-    [post.platform, post.characterCount]
+    () => getCharacterLimitPercentage(post.platform, currentCharCount),
+    [post.platform, currentCharCount]
   );
   const charLimitColorClass = react.useMemo(
     () => getCharacterLimitColor(charPercentage),
     [charPercentage]
   );
-  const displayContent = post.editedContent || post.content;
-  const charCountDisplay = `${post.characterCount}/${platformConfig.maxChars}`;
+  const charCountDisplay = `${currentCharCount}/${platformConfig.maxChars}`;
+  const handleContentChange = (e) => {
+    onContentChange?.(e.target.value);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     CardContainer,
     {
       $isActive: isActive,
+      $isEditing: isEditing,
       $platformColor: platformConfig.color,
       "data-testid": "post-preview-card",
       children: [
@@ -7853,8 +7866,22 @@ var PostPreviewCard = ({ post, isActive = false }) => {
           /* @__PURE__ */ jsxRuntime.jsx(CharacterBadge, { $colorClass: charLimitColorClass, children: charCountDisplay })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(ContentSection, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PostContent, { children: displayContent }),
-          post.hashtags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HashtagsContainer, { children: post.hashtags.map((hashtag) => /* @__PURE__ */ jsxRuntime.jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
+          showSkeleton ? /* @__PURE__ */ jsxRuntime.jsxs(SkeletonContent, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { $width: "100%" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { $width: "95%" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { $width: "88%" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { $width: "70%" })
+          ] }) : isEditing ? /* @__PURE__ */ jsxRuntime.jsx(
+            PostContentEditable,
+            {
+              value: displayContent,
+              onChange: handleContentChange,
+              placeholder: "Enter your post content...",
+              $platformColor: platformConfig.color,
+              autoFocus: true
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(PostContent, { children: displayContent }),
+          !showSkeleton && post.hashtags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HashtagsContainer, { children: post.hashtags.map((hashtag) => /* @__PURE__ */ jsxRuntime.jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
             "#",
             hashtag.replace(/^#/, "")
           ] }, hashtag)) })
@@ -7878,8 +7905,8 @@ var CardContainer = styled11__default.default.div`
   padding: ${tokens.spacing.md};
   position: relative;
   transition: all ${tokens.transitions.normal};
-  border: 2px solid ${({ $isActive, $platformColor }) => $isActive ? $platformColor : tokens.colors.border.default};
-  box-shadow: ${({ $isActive, $platformColor }) => $isActive ? `${tokens.shadows.lg}, 0 4px 12px ${$platformColor}33` : tokens.shadows.md};
+  border: 2px solid ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? $platformColor : $isActive ? $platformColor : tokens.colors.border.default};
+  box-shadow: ${({ $isActive, $isEditing, $platformColor }) => $isEditing ? `${tokens.shadows.lg}, 0 4px 16px ${$platformColor}40` : $isActive ? `${tokens.shadows.lg}, 0 4px 12px ${$platformColor}33` : tokens.shadows.md};
 
   &:hover {
     border-color: ${({ $platformColor }) => `${$platformColor}80`};
@@ -7936,6 +7963,35 @@ var PostContent = styled11__default.default.div`
   margin-bottom: ${tokens.spacing.sm};
   letter-spacing: 0.01em;
 `;
+var PostContentEditable = styled11__default.default.textarea`
+  width: 100%;
+  min-height: 180px;
+  max-height: 300px;
+  font-size: ${tokens.typography.fontSize.base};
+  font-family: ${tokens.typography.fontFamily.primary};
+  line-height: 1.6;
+  color: ${tokens.colors.text.primary};
+  background: ${tokens.colors.background.darker};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.md};
+  padding: ${tokens.spacing.md};
+  margin-bottom: ${tokens.spacing.sm};
+  letter-spacing: 0.01em;
+  resize: vertical;
+  box-sizing: border-box;
+  transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
+  overflow-y: auto;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ $platformColor }) => $platformColor};
+    box-shadow: 0 0 0 2px ${({ $platformColor }) => `${$platformColor}30`};
+  }
+
+  &::placeholder {
+    color: ${tokens.colors.text.tertiary};
+  }
+`;
 var HashtagsContainer = styled11__default.default.div`
   display: flex;
   flex-wrap: wrap;
@@ -7992,7 +8048,41 @@ var ImagePreview = styled11__default.default.img`
   object-fit: cover;
   display: block;
 `;
-var PlatformCarousel = ({ posts, onActiveChange }) => {
+var shimmer = styled11.keyframes`
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+var SkeletonContent = styled11__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.sm} 0;
+`;
+var SkeletonLine = styled11__default.default.div`
+  height: 16px;
+  width: ${({ $width }) => $width};
+  background: linear-gradient(
+    90deg,
+    ${tokens.colors.border.default} 0%,
+    rgba(255, 255, 255, 0.15) 50%,
+    ${tokens.colors.border.default} 100%
+  );
+  background-size: 200% 100%;
+  border-radius: ${tokens.borderRadius.sm};
+  animation: ${shimmer} 1.5s ease-in-out infinite;
+`;
+var PlatformCarousel = ({
+  posts,
+  onActiveChange,
+  editingIndex,
+  editContent,
+  onEditContentChange,
+  isLoading = false
+}) => {
   const [activeIndex, setActiveIndex] = react.useState(0);
   react.useEffect(() => {
     if (activeIndex >= posts.length && posts.length > 0) {
@@ -8029,7 +8119,20 @@ var PlatformCarousel = ({ posts, onActiveChange }) => {
         `${post.platform}-${index}`
       );
     }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ContentContainer2, { children: posts.map((post, index) => /* @__PURE__ */ jsxRuntime.jsx(Slide, { $isActive: index === activeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(PostPreviewCard, { post }) }, `slide-${post.platform}-${index}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ContentContainer2, { children: posts.map((post, index) => {
+      const isEditing = editingIndex === index;
+      return /* @__PURE__ */ jsxRuntime.jsx(Slide, { $isActive: index === activeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(
+        PostPreviewCard,
+        {
+          post,
+          isActive: index === activeIndex,
+          isEditing,
+          editContent: isEditing ? editContent : void 0,
+          onContentChange: isEditing ? onEditContentChange : void 0,
+          isLoading
+        }
+      ) }, `slide-${post.platform}-${index}`);
+    }) }),
     posts.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(NavigationDotsContainer, { children: posts.map((post, index) => {
       const config = PLATFORM_CONFIGS[post.platform];
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8148,11 +8251,29 @@ var EmptyState = styled11__default.default.div`
   font-family: inherit;
   font-size: ${tokens.typography.fontSize.sm};
 `;
-var PlatformGrid = ({ posts }) => {
+var PlatformGrid = ({
+  posts,
+  editingIndex,
+  editContent,
+  onEditContentChange,
+  isLoading = false
+}) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateText, { children: "No posts to display" }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(PostPreviewCard, { post }) }, post.platform)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post, index) => {
+    const isEditing = editingIndex === index;
+    return /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      PostPreviewCard,
+      {
+        post,
+        isEditing,
+        editContent: isEditing ? editContent : void 0,
+        onContentChange: isEditing ? onEditContentChange : void 0,
+        isLoading
+      }
+    ) }, post.platform);
+  }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
 var Grid = styled11__default.default.div`
@@ -8289,7 +8410,11 @@ var SocialMediaCanvas = ({
   emptyTitle = "No Posts Yet",
   emptyDescription = "Generate social media posts to see them here.",
   onActiveChange,
-  showViewToggle = true
+  showViewToggle = true,
+  editingIndex,
+  editContent,
+  onEditContentChange,
+  isLoading = false
 }) => {
   const [viewMode, setViewMode] = react.useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -8334,7 +8459,26 @@ var SocialMediaCanvas = ({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content4, { children: viewMode === "carousel" ? /* @__PURE__ */ jsxRuntime.jsx(PlatformCarousel, { posts, onActiveChange: handleActiveChange }) : /* @__PURE__ */ jsxRuntime.jsx(PlatformGrid, { posts }) })
+    /* @__PURE__ */ jsxRuntime.jsx(Content4, { children: viewMode === "carousel" ? /* @__PURE__ */ jsxRuntime.jsx(
+      PlatformCarousel,
+      {
+        posts,
+        onActiveChange: handleActiveChange,
+        editingIndex,
+        editContent,
+        onEditContentChange,
+        isLoading
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      PlatformGrid,
+      {
+        posts,
+        editingIndex,
+        editContent,
+        onEditContentChange,
+        isLoading
+      }
+    ) })
   ] });
 };
 SocialMediaCanvas.displayName = "SocialMediaCanvas";