hive-react-kit 0.5.0 → 0.5.3

package/README.md

@@ -65,6 +65,10 @@ import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types'
 - **CommunityMembers** - Community members list
 - **CommunityTeam** - Community team members
 
+### Composer Components
+
+- **PostComposer** - Rich markdown composer with live preview (@snapie/renderer), image/audio/video upload, paste & drag-drop, GIF search, emoji picker (500+, 9 categories), template picker, code blocks with copy, and @ mention. See [PostComposer docs](docs/PostComposer.md)
+
 ### Modal Components
 
 - **CommentsModal** - Comments display modal
@@ -86,11 +90,16 @@ import type { Video, Comment, Wallet as WalletType } from 'hive-react-kit/types'
 ```tsx
 import { UserDetailProfile } from 'hive-react-kit';
 
-// All tabs, default order
+// All tabs, default order, with rich comment composer
 <UserDetailProfile
   username="sagarkothari88"
   currentUsername="myaccount"
   showBackButton
+  ecencyToken="your-ecency-token"
+  threeSpeakApiKey="your-3speak-api-key"
+  giphyApiKey="your-giphy-api-key"
+  templateToken="your-jwt-token"
+  templateApiBaseUrl="https://your-api.com/data/templates"
   onBack={() => navigate(-1)}
   onFollow={(user) => console.log("Follow:", user)}
   onUnfollow={(user) => console.log("Unfollow:", user)}
@@ -115,6 +124,11 @@ import { UserDetailProfile } from 'hive-react-kit';
 | `showBackButton` | `boolean` | `false` | Show back arrow in header |
 | `onBack` | `() => void` | - | Callback when back button is clicked |
 | `tabShown` | `TabType[]` | all tabs | Controls which tabs are visible and their order. Only listed tabs are shown. First tab is the default active tab. If omitted, all 12 tabs are shown in default order |
+| `ecencyToken` | `string` | `undefined` | Ecency image hosting token. Enables image upload, video thumbnail upload, and paste/drag-drop image upload. Hidden when not provided |
+| `threeSpeakApiKey` | `string` | `undefined` | 3Speak API key. Enables audio recording/upload and video upload (TUS protocol). Hidden when not provided |
+| `giphyApiKey` | `string` | `undefined` | GIPHY API key. Enables GIF search. Hidden when not provided |
+| `templateToken` | `string` | `undefined` | HReplier API JWT token. Enables template picker. Hidden when not provided |
+| `templateApiBaseUrl` | `string` | `https://hreplier-api...` | Custom template API endpoint. Override when self-hosting |
 
 **Social Action Callbacks**
 

package/dist/build.css

@@ -82,6 +82,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -386,6 +387,9 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
+  .left-2\.5 {
+    left: calc(var(--spacing) * 2.5);
+  }
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
@@ -449,6 +453,9 @@
   .m-2 {
     margin: calc(var(--spacing) * 2);
   }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -590,6 +597,9 @@
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -641,6 +651,9 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -650,6 +663,9 @@
   .h-\[90vh\] {
     height: 90vh;
   }
+  .h-\[400px\] {
+    height: 400px;
+  }
   .h-auto {
     height: auto;
   }
@@ -665,6 +681,9 @@
   .max-h-20 {
     max-height: calc(var(--spacing) * 20);
   }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -695,6 +714,9 @@
   .max-h-screen {
     max-height: 100vh;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -779,6 +801,9 @@
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -797,6 +822,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -905,8 +933,8 @@
   .resize {
     resize: both;
   }
-  .resize-none {
-    resize: none;
+  .resize-y {
+    resize: vertical;
   }
   .appearance-none {
     appearance: none;
@@ -926,6 +954,9 @@
   .grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
+  .grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1119,6 +1150,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1151,6 +1186,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-amber-700\/40 {
     border-color: color-mix(in srgb, oklch(55.5% 0.163 48.998) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1289,6 +1328,12 @@
       background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
     }
   }
+  .bg-black\/90 {
+    background-color: color-mix(in srgb, #000 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 90%, transparent);
+    }
+  }
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
@@ -1307,15 +1352,33 @@
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
+  .bg-blue-600\/20 {
+    background-color: color-mix(in srgb, oklch(54.6% 0.245 262.881) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-600) 20%, transparent);
+    }
+  }
   .bg-blue-900 {
     background-color: var(--color-blue-900);
   }
+  .bg-blue-900\/10 {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-900) 10%, transparent);
+    }
+  }
   .bg-blue-900\/20 {
     background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-blue-900) 20%, transparent);
     }
   }
+  .bg-blue-900\/30 {
+    background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
+    }
+  }
   .bg-blue-900\/40 {
     background-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1364,6 +1427,12 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-gray-800\/50 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+    }
+  }
   .bg-gray-800\/95 {
     background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 95%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1385,6 +1454,9 @@
       background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
     }
   }
+  .bg-gray-950 {
+    background-color: var(--color-gray-950);
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -1436,6 +1508,9 @@
   .bg-red-100 {
     background-color: var(--color-red-100);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-red-500\/10 {
     background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1687,6 +1762,12 @@
   .pr-10 {
     padding-right: calc(var(--spacing) * 10);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -1708,6 +1789,9 @@
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -1968,6 +2052,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2023,6 +2110,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2033,6 +2124,9 @@
       --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-500) 10%, transparent) var(--tw-shadow-alpha), transparent);
     }
   }
+  .ring-blue-500 {
+    --tw-ring-color: var(--color-blue-500);
+  }
   .ring-gray-200 {
     --tw-ring-color: var(--color-gray-200);
   }
@@ -2091,6 +2185,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-1000 {
+    --tw-duration: 1000ms;
+    transition-duration: 1000ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -2129,6 +2227,13 @@
       }
     }
   }
+  .group-hover\:text-blue-400 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-blue-400);
+      }
+    }
+  }
   .group-hover\:opacity-30 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -2202,6 +2307,16 @@
       }
     }
   }
+  .hover\:border-blue-500\/40 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 40%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--color-blue-500) 40%, transparent);
+        }
+      }
+    }
+  }
   .hover\:border-gray-600 {
     &:hover {
       @media (hover: hover) {
@@ -2306,6 +2421,16 @@
       }
     }
   }
+  .hover\:bg-gray-800\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-green-700 {
     &:hover {
       @media (hover: hover) {
@@ -2453,13 +2578,6 @@
       }
     }
   }
-  .hover\:text-gray-800 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-800);
-      }
-    }
-  }
   .hover\:text-gray-900 {
     &:hover {
       @media (hover: hover) {
@@ -2481,6 +2599,13 @@
       }
     }
   }
+  .hover\:text-red-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-400);
+      }
+    }
+  }
   .hover\:text-red-600 {
     &:hover {
       @media (hover: hover) {
@@ -2525,11 +2650,32 @@
       }
     }
   }
+  .hover\:ring-2 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:ring-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-ring-color: var(--color-blue-500);
+      }
+    }
+  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
     }
   }
+  .focus\:ring-1 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2555,14 +2701,17 @@
       outline-style: none;
     }
   }
-  .disabled\:pointer-events-none {
-    &:disabled {
-      pointer-events: none;
+  .active\:scale-95 {
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
-  .disabled\:transform-none {
+  .disabled\:pointer-events-none {
     &:disabled {
-      transform: none;
+      pointer-events: none;
     }
   }
   .disabled\:cursor-not-allowed {
@@ -2575,9 +2724,9 @@
       background-color: var(--color-blue-400);
     }
   }
-  .disabled\:bg-gray-300 {
+  .disabled\:bg-gray-700 {
     &:disabled {
-      background-color: var(--color-gray-300);
+      background-color: var(--color-gray-700);
     }
   }
   .disabled\:opacity-50 {
@@ -2668,6 +2817,11 @@
       height: calc(var(--spacing) * 32);
     }
   }
+  .sm\:h-44 {
+    @media (width >= 40rem) {
+      height: calc(var(--spacing) * 44);
+    }
+  }
   .sm\:w-4 {
     @media (width >= 40rem) {
       width: calc(var(--spacing) * 4);
@@ -2948,6 +3102,11 @@
       padding: calc(var(--spacing) * 6);
     }
   }
+  .md\:p-8 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
   .md\:px-6 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 6);
@@ -3119,11 +3278,6 @@
       }
     }
   }
-  .dark\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-600);
-    }
-  }
   .dark\:bg-gray-700 {
     @media (prefers-color-scheme: dark) {
       background-color: var(--color-gray-700);
@@ -3362,15 +3516,6 @@
       }
     }
   }
-  .dark\:hover\:text-gray-200 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-gray-200);
-        }
-      }
-    }
-  }
   .dark\:hover\:text-gray-300 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -3416,13 +3561,6 @@
       }
     }
   }
-  .dark\:disabled\:bg-gray-600 {
-    @media (prefers-color-scheme: dark) {
-      &:disabled {
-        background-color: var(--color-gray-600);
-      }
-    }
-  }
   .\[\&\:\:-moz-range-progress\]\:rounded-lg {
     &::-moz-range-progress {
       border-radius: var(--radius-lg);

package/dist/components/actionButtons/PostActionButton.d.ts

@@ -30,6 +30,16 @@ export interface PostActionButtonProps {
     onReport?: () => void;
     /** Called when user confirms comment upvote with (author, permlink, percent). Frontend handles signing. Voted comments show icon in blue. */
     onClickCommentUpvote?: (author: string, permlink: string, percent: number) => void | Promise<void>;
+    /** Ecency image hosting token — enables image upload in comment composer */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio/video upload in comment composer */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search in comment composer */
+    giphyApiKey?: string;
+    /** HReplier API token — enables template picker in comment composer */
+    templateToken?: string;
+    /** Custom template API endpoint */
+    templateApiBaseUrl?: string;
 }
-export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PostActionButton({ author, permlink, currentUser: currentUserProp, hiveValue, hiveIconUrl, payoutTooltip, initialVotes, initialCommentsCount, onUpvote, onSubmitComment, onComments, onReblog, onShare, onTip, onReport, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: PostActionButtonProps): import("react/jsx-runtime").JSX.Element;
 export default PostActionButton;

package/dist/components/comments/AddCommentInput.d.ts

@@ -1,10 +1,46 @@
-interface AddCommentInputProps {
+export interface PostComposerProps {
     onSubmit: (body: string) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
     currentUser?: string;
     placeholder?: string;
     parentAuthor?: string;
     parentPermlink?: string;
+    /** Ecency image hosting token — enables image/video thumbnail upload and paste/drag upload */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio and video upload */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search */
+    giphyApiKey?: string;
+    /** HReplier API token — enables template picker */
+    templateToken?: string;
+    /** Custom template API endpoint (defaults to https://hreplier-api.sagarkothari88.one/data/templates) */
+    templateApiBaseUrl?: string;
+    /** Hide individual toolbar features */
+    hideBold?: boolean;
+    hideItalic?: boolean;
+    hideLink?: boolean;
+    hideImage?: boolean;
+    hideAudio?: boolean;
+    hideVideo?: boolean;
+    hideEmoji?: boolean;
+    hideGif?: boolean;
+    hideCode?: boolean;
+    hideMention?: boolean;
+    hideTemplate?: boolean;
+    hidePreview?: boolean;
+    /** Show cancel button (default true) */
+    showCancel?: boolean;
+    /** Submit button label (default "Post") */
+    submitLabel?: string;
+    /** Title text above composer (optional) */
+    title?: string;
+    /** Enable preview by default (default false) */
+    defaultPreviewOn?: boolean;
 }
-declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink }: AddCommentInputProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use PostComposerProps instead */
+export type AddCommentInputProps = PostComposerProps;
+declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, showCancel, submitLabel, title, defaultPreviewOn, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+/** @deprecated Use PostComposer instead */
+declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideCode, hideMention, hideTemplate, hidePreview, showCancel, submitLabel, title, defaultPreviewOn, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
+export { PostComposer };
 export default AddCommentInput;

package/dist/components/comments/CommentsModal.d.ts

@@ -11,6 +11,16 @@ interface CommentsModalProps {
     onClickUpvoteButton?: (currentUser?: string, token?: string) => void;
     /** When provided, used instead of apiService.handleComment (e.g. for aioha wallet) */
     onSubmitComment?: (parentAuthor: string, parentPermlink: string, body: string) => Promise<void>;
+    /** Ecency image hosting token — enables image upload in comment composer */
+    ecencyToken?: string;
+    /** 3Speak API key — enables audio/video upload in comment composer */
+    threeSpeakApiKey?: string;
+    /** GIPHY API key — enables GIF search in comment composer */
+    giphyApiKey?: string;
+    /** HReplier API token — enables template picker in comment composer */
+    templateToken?: string;
+    /** Custom template API endpoint */
+    templateApiBaseUrl?: string;
 }
-declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const CommentsModal: ({ author, permlink, onClose, currentUser, token, onClickCommentUpvote, onClickCommentReply, onClickUpvoteButton, onSubmitComment, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl }: CommentsModalProps) => import("react/jsx-runtime").JSX.Element;
 export default CommentsModal;

package/dist/components/comments/ReplyModal.d.ts

@@ -4,6 +4,11 @@ interface ReplyModalProps {
     onClose: () => void;
     onCommentSubmitted: (parentAuthor: string, parentPermlink: string, body: string) => Promise<void>;
     currentUser?: string;
+    ecencyToken?: string;
+    threeSpeakApiKey?: string;
+    giphyApiKey?: string;
+    templateToken?: string;
+    templateApiBaseUrl?: string;
 }
-declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const ReplyModal: ({ parentAuthor, parentPermlink, onClose, onCommentSubmitted, currentUser, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, }: ReplyModalProps) => import("react/jsx-runtime").JSX.Element;
 export default ReplyModal;

package/dist/components/composer/AudioUploader.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface AudioUploaderProps {
+    /** Called with the audio embed URL and duration in seconds */
+    onAudioUploaded: (audioUrl: string, durationSeconds: number) => void;
+    /** Hive username for the upload */
+    username?: string;
+    /** 3Speak API key. Falls back to demo key if not provided. */
+    threeSpeakApiKey?: string;
+    disabled?: boolean;
+}
+declare const AudioUploader: React.FC<AudioUploaderProps>;
+export default AudioUploader;

package/dist/components/composer/EmojiPicker.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface EmojiPickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectEmoji: (emoji: string) => void;
+}
+declare const EmojiPicker: React.FC<EmojiPickerProps>;
+export default EmojiPicker;

package/dist/components/composer/GiphyPicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface GiphyPickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectGif: (gifUrl: string) => void;
+    /** GIPHY API key. Required for search functionality. */
+    giphyApiKey?: string;
+}
+declare const GiphyPicker: React.FC<GiphyPickerProps>;
+export default GiphyPicker;

package/dist/components/composer/ImageUploader.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ImageUploaderProps {
+    /** Called with the uploaded image URL */
+    onImageUploaded: (imageUrl: string) => void;
+    /** Ecency image hosting token for upload authentication */
+    ecencyToken?: string;
+    disabled?: boolean;
+}
+declare const ImageUploader: React.FC<ImageUploaderProps>;
+export default ImageUploader;

package/dist/components/composer/TemplatePicker.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TemplateModel } from '../../services/templateService';
+export interface TemplatePickerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectTemplate: (template: string) => void;
+    templates: TemplateModel[];
+    /** If provided, {{author}} in templates is replaced with this value */
+    authorFromUrl?: string;
+}
+declare const TemplatePicker: React.FC<TemplatePickerProps>;
+export default TemplatePicker;