@agentiffai/design 1.5.0 → 1.5.2

package/dist/index.d.cts

@@ -664,6 +664,10 @@ interface PostPreviewCardProps {
     editContent?: string;
     /** Callback when content changes during editing */
     onContentChange?: (content: string) => void;
+    /** Current edited hashtags (controlled) */
+    editHashtags?: string[];
+    /** Callback when hashtags change */
+    onHashtagsChange?: (hashtags: string[]) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
     /** Callback to change/add an image. When provided, image areas become clickable. */
@@ -687,6 +691,10 @@ interface PlatformCarouselProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Callback when user requests to change/add an image for a post */
@@ -709,6 +717,10 @@ interface PlatformGridProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Currently active/selected post index */
@@ -756,6 +768,10 @@ interface SocialMediaCanvasProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */

package/dist/index.d.ts

@@ -664,6 +664,10 @@ interface PostPreviewCardProps {
     editContent?: string;
     /** Callback when content changes during editing */
     onContentChange?: (content: string) => void;
+    /** Current edited hashtags (controlled) */
+    editHashtags?: string[];
+    /** Callback when hashtags change */
+    onHashtagsChange?: (hashtags: string[]) => void;
     /** Show loading skeleton when content is being generated */
     isLoading?: boolean;
     /** Callback to change/add an image. When provided, image areas become clickable. */
@@ -687,6 +691,10 @@ interface PlatformCarouselProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Callback when user requests to change/add an image for a post */
@@ -709,6 +717,10 @@ interface PlatformGridProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Currently active/selected post index */
@@ -756,6 +768,10 @@ interface SocialMediaCanvasProps {
     editContent?: string;
     /** Callback when edit content changes */
     onEditContentChange?: (content: string) => void;
+    /** Hashtags of the post being edited */
+    editHashtags?: string[];
+    /** Callback when edit hashtags change */
+    onEditHashtagsChange?: (hashtags: string[]) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
     /** Currently active post index (for grid mode) */

package/dist/index.js

@@ -9937,13 +9937,17 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
+  editHashtags,
+  onHashtagsChange,
   isLoading = false,
   onImageChange
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const [imageError, setImageError] = useState(false);
+  const [newHashtag, setNewHashtag] = useState("");
   const showSkeleton = isLoading && !post.content;
   const displayContent = isEditing && editContent !== void 0 ? editContent : post.editedContent || post.content;
+  const displayHashtags = editHashtags !== void 0 ? editHashtags : post.hashtags;
   const currentCharCount = displayContent.length;
   const charPercentage = useMemo(
     () => getCharacterLimitPercentage(post.platform, currentCharCount),
@@ -9957,6 +9961,32 @@ var PostPreviewCard = ({
   const handleContentChange = (e) => {
     onContentChange?.(e.target.value);
   };
+  const normalizeHashtag = (value) => value.trim().replace(/^#+/, "").replace(/[^\p{L}\p{N}_]/gu, "");
+  const handleRemoveHashtag = (hashtagToRemove) => {
+    const normalizedToRemove = normalizeHashtag(hashtagToRemove).toLowerCase();
+    onHashtagsChange?.(
+      displayHashtags.filter(
+        (hashtag) => normalizeHashtag(hashtag).toLowerCase() !== normalizedToRemove
+      )
+    );
+  };
+  const handleAddHashtag = () => {
+    const normalized = normalizeHashtag(newHashtag);
+    if (!normalized) return;
+    const exists = displayHashtags.some(
+      (hashtag) => normalizeHashtag(hashtag).toLowerCase() === normalized.toLowerCase()
+    );
+    if (!exists) {
+      onHashtagsChange?.([...displayHashtags, normalized]);
+    }
+    setNewHashtag("");
+  };
+  const handleNewHashtagKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddHashtag();
+    }
+  };
   return /* @__PURE__ */ jsxs(
     CardContainer,
     {
@@ -9986,10 +10016,45 @@ var PostPreviewCard = ({
               autoFocus: true
             }
           ) : /* @__PURE__ */ jsx(PostContent, { children: displayContent }),
-          !showSkeleton && post.hashtags.length > 0 && /* @__PURE__ */ jsx(HashtagsContainer, { children: post.hashtags.map((hashtag) => /* @__PURE__ */ jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
-            "#",
-            hashtag.replace(/^#/, "")
-          ] }, hashtag)) })
+          !showSkeleton && (displayHashtags.length > 0 || onHashtagsChange) && /* @__PURE__ */ jsxs(HashtagsContainer, { children: [
+            displayHashtags.map((hashtag) => /* @__PURE__ */ jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
+              "#",
+              hashtag.replace(/^#/, ""),
+              onHashtagsChange && /* @__PURE__ */ jsx(
+                RemoveHashtagButton,
+                {
+                  type: "button",
+                  onClick: () => handleRemoveHashtag(hashtag),
+                  "aria-label": `Remove #${hashtag.replace(/^#/, "")}`,
+                  children: "\xD7"
+                }
+              )
+            ] }, hashtag)),
+            onHashtagsChange && /* @__PURE__ */ jsxs(HashtagEditor, { children: [
+              /* @__PURE__ */ jsxs(HashtagInputWrapper, { children: [
+                /* @__PURE__ */ jsx(HashPrefix, { children: "#" }),
+                /* @__PURE__ */ jsx(
+                  HashtagInput,
+                  {
+                    value: newHashtag,
+                    onChange: (e) => setNewHashtag(e.target.value),
+                    onKeyDown: handleNewHashtagKeyDown,
+                    placeholder: "Add hashtag",
+                    "aria-label": "Add hashtag"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                AddHashtagButton,
+                {
+                  type: "button",
+                  onClick: handleAddHashtag,
+                  disabled: !normalizeHashtag(newHashtag),
+                  children: "Add"
+                }
+              )
+            ] })
+          ] })
         ] }),
         post.imageUrl && !imageError ? onImageChange ? /* @__PURE__ */ jsx(ImageChangeButton, { type: "button", onClick: onImageChange, "aria-label": "Change image", children: /* @__PURE__ */ jsxs(ImagePreviewContainer, { children: [
           /* @__PURE__ */ jsx(
@@ -10204,7 +10269,9 @@ var HashtagsContainer = styled58.div`
   gap: 6px;
 `;
 var HashtagPill = styled58.span`
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: ${tokens.spacing.xs} 10px;
   border-radius: ${tokens.borderRadius.full};
   font-size: ${tokens.typography.fontSize.xs};
@@ -10220,6 +10287,99 @@ var HashtagPill = styled58.span`
     color: ${tokens.colors.primary};
   }
 `;
+var RemoveHashtagButton = styled58.button`
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.secondary};
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  transition: all ${tokens.transitions.fast};
+
+  &:hover,
+  &:focus-visible {
+    background: ${tokens.colors.error};
+    color: ${tokens.colors.text.primary};
+    outline: none;
+  }
+`;
+var HashtagEditor = styled58.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  min-width: min(100%, 190px);
+`;
+var HashtagInputWrapper = styled58.div`
+  display: inline-flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0 ${tokens.spacing.sm};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.darker};
+  transition: border-color ${tokens.transitions.fast}, box-shadow ${tokens.transitions.fast};
+
+  &:focus-within {
+    border-color: ${tokens.colors.border.focus};
+    box-shadow: 0 0 0 2px ${tokens.colors.primary}20;
+  }
+`;
+var HashPrefix = styled58.span`
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
+`;
+var HashtagInput = styled58.input`
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: ${tokens.colors.text.primary};
+  font-size: ${tokens.typography.fontSize.xs};
+  font-family: ${tokens.typography.fontFamily.primary};
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: ${tokens.colors.text.tertiary};
+  }
+`;
+var AddHashtagButton = styled58.button`
+  height: 28px;
+  padding: 0 ${tokens.spacing.sm};
+  border: 1px solid ${tokens.colors.border.default};
+  border-radius: ${tokens.borderRadius.full};
+  background: ${tokens.colors.background.light};
+  color: ${tokens.colors.text.primary};
+  cursor: pointer;
+  font-size: ${tokens.typography.fontSize.xs};
+  font-weight: ${tokens.typography.fontWeight.semibold};
+  transition: all ${tokens.transitions.fast};
+
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
+    background: ${tokens.colors.primary};
+    border-color: ${tokens.colors.primary};
+    color: ${tokens.colors.background.dark};
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`;
 var ProgressBarContainer2 = styled58.div`
   margin-top: ${tokens.spacing.sm};
 `;
@@ -10365,6 +10525,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   onImageChangeRequest
 }) => {
@@ -10418,14 +10580,18 @@ var PlatformCarousel = ({
     }) }),
     /* @__PURE__ */ jsx(ContentContainer2, { children: posts.map((post, index) => {
       const isEditing = editingIndex === index;
-      return /* @__PURE__ */ jsx(Slide, { $isActive: index === activeIndex, children: /* @__PURE__ */ jsx(
+      const isActive = index === activeIndex;
+      const canEditHashtags = isActive && !!onEditHashtagsChange;
+      return /* @__PURE__ */ jsx(Slide, { $isActive: isActive, children: /* @__PURE__ */ jsx(
         PostPreviewCard,
         {
           post,
-          isActive: index === activeIndex,
+          isActive,
           isEditing,
           editContent: isEditing ? editContent : void 0,
           onContentChange: isEditing ? onEditContentChange : void 0,
+          editHashtags: canEditHashtags ? editHashtags : void 0,
+          onHashtagsChange: canEditHashtags ? onEditHashtagsChange : void 0,
           isLoading,
           onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
         }
@@ -10556,6 +10722,8 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onActiveChange,
@@ -10571,6 +10739,7 @@ var PlatformGrid = ({
   return /* @__PURE__ */ jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post, index) => {
     const isEditing = editingIndex === index;
     const isActive = activeIndex === index;
+    const canEditHashtags = isActive && !!onEditHashtagsChange;
     return /* @__PURE__ */ jsx(
       GridCell,
       {
@@ -10596,6 +10765,8 @@ var PlatformGrid = ({
             isEditing,
             editContent: isEditing ? editContent : void 0,
             onContentChange: isEditing ? onEditContentChange : void 0,
+            editHashtags: canEditHashtags ? editHashtags : void 0,
+            onHashtagsChange: canEditHashtags ? onEditHashtagsChange : void 0,
             isLoading,
             onImageChange: onImageChangeRequest ? () => onImageChangeRequest(index) : void 0
           }
@@ -10790,6 +10961,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onImageChangeRequest
@@ -10849,6 +11022,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         onImageChangeRequest
       }
@@ -10859,6 +11034,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         activeIndex,
         onActiveChange: handleActiveChange,