@agentiffai/design 1.5.0 → 1.5.2

package/dist/index.cjs

@@ -9944,13 +9944,17 @@ var PostPreviewCard = ({
   isEditing = false,
   editContent,
   onContentChange,
+  editHashtags,
+  onHashtagsChange,
   isLoading = false,
   onImageChange
 }) => {
   const platformConfig = PLATFORM_CONFIGS[post.platform] || PLATFORM_CONFIGS.x;
   const [imageError, setImageError] = React4.useState(false);
+  const [newHashtag, setNewHashtag] = React4.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 = React4.useMemo(
     () => getCharacterLimitPercentage(post.platform, currentCharCount),
@@ -9964,6 +9968,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__ */ jsxRuntime.jsxs(
     CardContainer,
     {
@@ -9993,10 +10023,45 @@ var PostPreviewCard = ({
               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)) })
+          !showSkeleton && (displayHashtags.length > 0 || onHashtagsChange) && /* @__PURE__ */ jsxRuntime.jsxs(HashtagsContainer, { children: [
+            displayHashtags.map((hashtag) => /* @__PURE__ */ jsxRuntime.jsxs(HashtagPill, { $platformColor: platformConfig.color, children: [
+              "#",
+              hashtag.replace(/^#/, ""),
+              onHashtagsChange && /* @__PURE__ */ jsxRuntime.jsx(
+                RemoveHashtagButton,
+                {
+                  type: "button",
+                  onClick: () => handleRemoveHashtag(hashtag),
+                  "aria-label": `Remove #${hashtag.replace(/^#/, "")}`,
+                  children: "\xD7"
+                }
+              )
+            ] }, hashtag)),
+            onHashtagsChange && /* @__PURE__ */ jsxRuntime.jsxs(HashtagEditor, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(HashtagInputWrapper, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(HashPrefix, { children: "#" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  HashtagInput,
+                  {
+                    value: newHashtag,
+                    onChange: (e) => setNewHashtag(e.target.value),
+                    onKeyDown: handleNewHashtagKeyDown,
+                    placeholder: "Add hashtag",
+                    "aria-label": "Add hashtag"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                AddHashtagButton,
+                {
+                  type: "button",
+                  onClick: handleAddHashtag,
+                  disabled: !normalizeHashtag(newHashtag),
+                  children: "Add"
+                }
+              )
+            ] })
+          ] })
         ] }),
         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(
@@ -10211,7 +10276,9 @@ var HashtagsContainer = styled58__default.default.div`
   gap: 6px;
 `;
 var HashtagPill = styled58__default.default.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};
@@ -10227,6 +10294,99 @@ var HashtagPill = styled58__default.default.span`
     color: ${tokens.colors.primary};
   }
 `;
+var RemoveHashtagButton = styled58__default.default.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__default.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.spacing.xs};
+  min-width: min(100%, 190px);
+`;
+var HashtagInputWrapper = styled58__default.default.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__default.default.span`
+  color: ${tokens.colors.text.tertiary};
+  font-size: ${tokens.typography.fontSize.xs};
+`;
+var HashtagInput = styled58__default.default.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__default.default.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__default.default.div`
   margin-top: ${tokens.spacing.sm};
 `;
@@ -10372,6 +10532,8 @@ var PlatformCarousel = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   onImageChangeRequest
 }) => {
@@ -10425,14 +10587,18 @@ var PlatformCarousel = ({
     }) }),
     /* @__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(
+      const isActive = index === activeIndex;
+      const canEditHashtags = isActive && !!onEditHashtagsChange;
+      return /* @__PURE__ */ jsxRuntime.jsx(Slide, { $isActive: isActive, children: /* @__PURE__ */ jsxRuntime.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
         }
@@ -10563,6 +10729,8 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onActiveChange,
@@ -10578,6 +10746,7 @@ var PlatformGrid = ({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
       GridCell,
       {
@@ -10603,6 +10772,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
           }
@@ -10797,6 +10968,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
+  editHashtags,
+  onEditHashtagsChange,
   isLoading = false,
   activeIndex = 0,
   onImageChangeRequest
@@ -10856,6 +11029,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         onImageChangeRequest
       }
@@ -10866,6 +11041,8 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
+        editHashtags,
+        onEditHashtagsChange,
         isLoading,
         activeIndex,
         onActiveChange: handleActiveChange,