elseware-ui 2.31.5 → 2.31.7

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { HTMLAttributes, ReactNode, JSX, FC, MouseEvent, MutableRefObject } from 'react';
+import React$1, { HTMLAttributes, ReactNode, JSX, FC, ComponentType, MouseEvent, MutableRefObject } from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 import * as d3 from 'd3';
 import * as formik from 'formik';
@@ -1435,16 +1435,85 @@ interface CommentDataSource {
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
+interface CommentHeaderProps {
+    comment: CommentEntity;
+}
+interface CommentContentProps {
+    comment: CommentEntity;
+}
+interface CommentActionsProps {
+    comment: CommentEntity;
+    onLike?: () => void;
+    onDislike?: () => void;
+    onReply?: () => void;
+}
+interface CommentMenuProps {
+    comment: CommentEntity;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canReport?: boolean;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onReport?: () => void;
+}
+interface CommentComposerProps {
+    avatar?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface ReplyComposerProps {
+    avatar?: string;
+    username?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface CommentRepliesToggleProps {
+    collapsed: boolean;
+    repliesCount: number;
+    onToggle: () => void;
+}
+interface CommentComponents {
+    /**
+     * Root comment composer
+     */
+    Composer?: ComponentType<CommentComposerProps>;
+    /**
+     * Comment header section
+     */
+    Header?: ComponentType<CommentHeaderProps>;
+    /**
+     * Comment content renderer
+     */
+    Content?: ComponentType<CommentContentProps>;
+    /**
+     * Like / Dislike / Reply actions
+     */
+    Actions?: ComponentType<CommentActionsProps>;
+    /**
+     * Comment menu (Edit/Delete/Report)
+     */
+    Menu?: ComponentType<CommentMenuProps>;
+    /**
+     * Reply composer shown below a comment
+     */
+    ReplyComposer?: ComponentType<ReplyComposerProps>;
+    /**
+     * Replies expand/collapse component
+     */
+    RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
+}
+
 interface CommentThreadProps {
     postId: string;
     currentUser: CommentAuthor;
     dataSource: CommentDataSource;
     loading?: boolean;
+    components?: CommentComponents;
     onEdit?: (comment: CommentEntity) => void;
     onDelete?: (comment: CommentEntity) => void;
     onReport?: (comment: CommentEntity) => void;
 }
-declare function CommentThread({ currentUser, dataSource, loading, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = {
     value: string;
@@ -1706,4 +1775,4 @@ interface ResolveAppearanceStylesProps {
 }
 declare function resolveAppearanceStyles({ appearance, variant, solid, lite, ghost, }: ResolveAppearanceStylesProps): string;
 
-export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentAuthor, type CommentDataSource, type CommentEntity, type CommentPermissions, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { HTMLAttributes, ReactNode, JSX, FC, MouseEvent, MutableRefObject } from 'react';
+import React$1, { HTMLAttributes, ReactNode, JSX, FC, ComponentType, MouseEvent, MutableRefObject } from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 import * as d3 from 'd3';
 import * as formik from 'formik';
@@ -1435,16 +1435,85 @@ interface CommentDataSource {
     reportComment?(commentId: string, reason: string, description?: string): Promise<void>;
 }
 
+interface CommentHeaderProps {
+    comment: CommentEntity;
+}
+interface CommentContentProps {
+    comment: CommentEntity;
+}
+interface CommentActionsProps {
+    comment: CommentEntity;
+    onLike?: () => void;
+    onDislike?: () => void;
+    onReply?: () => void;
+}
+interface CommentMenuProps {
+    comment: CommentEntity;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    canReport?: boolean;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onReport?: () => void;
+}
+interface CommentComposerProps {
+    avatar?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface ReplyComposerProps {
+    avatar?: string;
+    username?: string;
+    onSubmit: (content: string) => Promise<void> | void;
+}
+interface CommentRepliesToggleProps {
+    collapsed: boolean;
+    repliesCount: number;
+    onToggle: () => void;
+}
+interface CommentComponents {
+    /**
+     * Root comment composer
+     */
+    Composer?: ComponentType<CommentComposerProps>;
+    /**
+     * Comment header section
+     */
+    Header?: ComponentType<CommentHeaderProps>;
+    /**
+     * Comment content renderer
+     */
+    Content?: ComponentType<CommentContentProps>;
+    /**
+     * Like / Dislike / Reply actions
+     */
+    Actions?: ComponentType<CommentActionsProps>;
+    /**
+     * Comment menu (Edit/Delete/Report)
+     */
+    Menu?: ComponentType<CommentMenuProps>;
+    /**
+     * Reply composer shown below a comment
+     */
+    ReplyComposer?: ComponentType<ReplyComposerProps>;
+    /**
+     * Replies expand/collapse component
+     */
+    RepliesToggle?: ComponentType<CommentRepliesToggleProps>;
+}
+
 interface CommentThreadProps {
     postId: string;
     currentUser: CommentAuthor;
     dataSource: CommentDataSource;
     loading?: boolean;
+    components?: CommentComponents;
     onEdit?: (comment: CommentEntity) => void;
     onDelete?: (comment: CommentEntity) => void;
     onReport?: (comment: CommentEntity) => void;
 }
-declare function CommentThread({ currentUser, dataSource, loading, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
+declare function CommentThread({ currentUser, dataSource, loading, components, onEdit, onDelete, onReport, }: CommentThreadProps): react_jsx_runtime.JSX.Element;
 
 type SortOption = {
     value: string;
@@ -1706,4 +1775,4 @@ interface ResolveAppearanceStylesProps {
 }
 declare function resolveAppearanceStyles({ appearance, variant, solid, lite, ghost, }: ResolveAppearanceStylesProps): string;
 
-export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentAuthor, type CommentDataSource, type CommentEntity, type CommentPermissions, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, type AnimationComponentProps, type AnimationVariant, type Appearance, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, type BaseAnimationConfig, type BaseComponentProps, type BaseMenuNode, type BaseOverlayConfig, type BaseTopNavNode, type BlobAnimationConfig, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button, Caption, Card, CardContent, CardFooter, CardHeader, type CardinalPosition, Chapter, Checkbox, Chip, type CloudinaryConfig, CloudinaryImage, CloudinaryProvider, type CloudinaryProviderProps, CloudinaryVideo, Code, type CommentActionsProps, type CommentAuthor, type CommentComponents, type CommentComposerProps, type CommentContentProps, type CommentDataSource, type CommentEntity, type CommentHeaderProps, type CommentMenuProps, type CommentPermissions, type CommentRepliesToggleProps, CommentThread, Content, ContentArea, type CornerPosition, type CreateCommentInput, type CurrencyCode, DataView, DataViewTable, DateSelector, DefaultLayout, type DefaultMenuElements, Display, DocumentationPanel, Drawer, DrawerToggler, type EUIComponentDefaults, type EUIConfigs, EUIDevLayout, EUIProvider, type EUIRoute, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, type GradientAnimationConfig, Graph, type GraphData, GraphEdge, type GraphEdgeType, type GraphLayoutType, GraphNode, type GraphNodeType, type GraphProps, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, type HorizontalPosition, type HyperRefTarget, Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Label, Layout, type LayoutContext, type LayoutExecutor, Lead, LineChart, Link, List, type ListAlign, type ListBulletType, type ListDirection, ListItem, type ListItemData, MarkdownEditor, MarkdownProvider, MarkdownTOC, MarkdownViewer, Menu, type MenuElementType, MenuGroup, type MenuGroupNode, MenuItem, type MenuItemNode, MenuItemTitle, type MenuNode, type MenuProps, type MenuTitleNode, type MeshAnimationConfig, Modal, MotionSurface, MultiImageInput, type NavItem, NumericRating, type OctilePosition, type OverlayVariant, Overline, Paragraph, PieChart, PriceTag, ProgressBar, type ProgressBarProps, ProgressBarRating, Quote, Radio, type ReplyComposerProps, RouteTab, type RouteTabMode, RouteTabs, ScrollToTop, Section, Select, type Shape$1 as Shape, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, type Size$1 as Size, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, type TextDecoration, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, type TitleBannerLevel, Toast, type ToggleReactionResult, Tooltip, TopNav, type TopNavComponents, type TopNavGroupNode, type TopNavItemNode, type TopNavNode, type TopNavProps, type TopNavTitleNode, Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, type UpdateCommentInput, ValueBadge, type Variant$1 as Variant, type VerticalPosition, WorldMap, WorldMapCountryTable, YoutubeVideo as YoutubeVideoPlayer, cn, createForceLayout, createGridLayout, createTreeLayout, enumValues, getCurrencySymbol, getLayout, isMatch, isRenderFn, normalize, registerLayout, resolveAppearanceStyles, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/dist/index.js

@@ -17550,15 +17550,16 @@ function CommentComposer({
 }
 var CommentComposer_default = CommentComposer;
 function CommentActions({
-  likes = 0,
-  dislikes = 0,
-  liked = false,
-  disliked = false,
-  canReply = true,
+  comment,
   onLike,
   onDislike,
   onReply
 }) {
+  const likes = comment.likes ?? 0;
+  const dislikes = comment.dislikes ?? 0;
+  const liked = comment.liked ?? false;
+  const disliked = comment.disliked ?? false;
+  const canReply = comment.permissions?.canReply ?? true;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17611,14 +17612,8 @@ function CommentActions({
   );
 }
 var CommentActions_default = CommentActions;
-function CommentContent({ content }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "\n        text-sm\n        leading-relaxed\n        whitespace-pre-wrap\n        break-words\n        text-gray-700\n        dark:text-gray-300\n      ",
-      children: content
-    }
-  );
+function CommentContent({ comment }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words text-sm text-gray-700 dark:text-gray-300", children: comment.content });
 }
 var CommentContent_default = CommentContent;
 
@@ -17657,31 +17652,29 @@ function formatCommentDate(date) {
   }
   return "Just now";
 }
-function CommentHeader({
-  avatar,
-  username,
-  firstName,
-  lastName,
-  createdAt,
-  edited
-}) {
-  const displayName = firstName || lastName ? `${firstName ?? ""} ${lastName ?? ""}`.trim() : username;
+function CommentHeader({ comment }) {
+  const author = comment.author;
+  const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: author?.avatar, size: "sm" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
-        "@",
-        username
+      author?.username && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
+          "@",
+          author.username
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
-      edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(comment.createdAt) }),
+      comment.edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
     ] })
   ] });
 }
 var CommentHeader_default = CommentHeader;
 function CommentMenu({
+  open,
+  setOpen,
   canEdit,
   canDelete,
   canReport,
@@ -17689,7 +17682,6 @@ function CommentMenu({
   onDelete,
   onReport
 }) {
-  const [open, setOpen] = React4.useState(false);
   const ref = React4.useRef(null);
   React4.useEffect(() => {
     function handleOutsideClick(event) {
@@ -17699,7 +17691,7 @@ function CommentMenu({
     }
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
+  }, [setOpen]);
   const hasActions = canEdit || canDelete || canReport;
   if (!hasActions) {
     return null;
@@ -17709,7 +17701,7 @@ function CommentMenu({
       "button",
       {
         type: "button",
-        onClick: () => setOpen((prev) => !prev),
+        onClick: () => setOpen(!open),
         className: "\n          text-gray-500\n          hover:text-gray-900\n          dark:hover:text-gray-100\n          transition-colors\n        ",
         children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
       }
@@ -17818,6 +17810,7 @@ var COMMENT_INDENTATION = 24;
 function CommentItem({
   comment,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17828,10 +17821,19 @@ function CommentItem({
   const [collapsed, setCollapsed] = React4.useState(false);
   const [isReplying, setIsReplying] = React4.useState(false);
   const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  const {
+    Header: HeaderComponent = CommentHeader_default,
+    Content: ContentComponent = CommentContent_default,
+    Actions: ActionsComponent = CommentActions_default,
+    Menu: MenuComponent = CommentMenu_default,
+    ReplyComposer: ReplyComposerComponent = ReplyComposer_default,
+    RepliesToggle: RepliesToggleComponent = CommentRepliesToggle_default
+  } = components ?? {};
   async function handleReply(content) {
     await onReply?.(comment, content);
     setIsReplying(false);
   }
+  const [menuOpen, setMenuOpen] = React4.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -17842,20 +17844,13 @@ function CommentItem({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HeaderComponent, { comment }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              CommentHeader_default,
-              {
-                avatar: comment.author?.avatar,
-                username: comment.author?.username ?? "unknown",
-                firstName: comment.author?.firstName,
-                lastName: comment.author?.lastName,
-                createdAt: comment.createdAt,
-                edited: comment.edited
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              CommentMenu_default,
+              MenuComponent,
               {
+                comment,
+                open: menuOpen,
+                setOpen: setMenuOpen,
                 canEdit: comment.permissions?.canEdit,
                 canDelete: comment.permissions?.canDelete,
                 canReport: comment.permissions?.canReport,
@@ -17865,22 +17860,18 @@ function CommentItem({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(ContentComponent, { comment }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            CommentActions_default,
+            ActionsComponent,
             {
-              likes: comment.likes,
-              dislikes: comment.dislikes,
-              liked: comment.liked,
-              disliked: comment.disliked,
-              canReply: comment.permissions?.canReply,
+              comment,
               onLike: () => onLike?.(comment),
               onDislike: () => onDislike?.(comment),
               onReply: () => setIsReplying((prev) => !prev)
             }
           ),
           isReplying && /* @__PURE__ */ jsxRuntime.jsx(
-            ReplyComposer_default,
+            ReplyComposerComponent,
             {
               avatar: comment.author?.avatar,
               username: comment.author?.username,
@@ -17888,7 +17879,7 @@ function CommentItem({
             }
           ),
           !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
-            CommentRepliesToggle_default,
+            RepliesToggleComponent,
             {
               collapsed,
               repliesCount: comment.replies.length,
@@ -17908,6 +17899,7 @@ function CommentItem({
               {
                 comments: comment.replies,
                 depth: depth + 1,
+                components,
                 onLike,
                 onDislike,
                 onReply,
@@ -17926,6 +17918,7 @@ var CommentItem_default = CommentItem;
 function CommentList({
   comments,
   depth = 0,
+  components,
   onLike,
   onDislike,
   onReply,
@@ -17941,6 +17934,7 @@ function CommentList({
     {
       comment,
       depth,
+      components,
       onLike,
       onDislike,
       onReply,
@@ -18009,12 +18003,14 @@ function CommentThread({
   currentUser,
   dataSource,
   loading = false,
+  components,
   onEdit,
   onDelete,
   onReport
 }) {
   const [comments, setComments] = React4.useState([]);
   const [isLoadingComments, setIsLoadingComments] = React4.useState(true);
+  const ComposerComponent = components?.ReplyComposer ?? CommentComposer_default;
   React4.useEffect(() => {
     async function loadComments() {
       try {
@@ -18044,7 +18040,7 @@ function CommentThread({
     const optimistic = {
       liked: !comment.liked,
       disliked: false,
-      likes: comment.liked ? comment.likes - 1 : comment.likes + 1,
+      likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes + 1,
       dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes
     };
     setComments(
@@ -18067,7 +18063,7 @@ function CommentThread({
       liked: false,
       disliked: !comment.disliked,
       likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes,
-      dislikes: comment.disliked ? comment.dislikes - 1 : comment.dislikes + 1
+      dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes + 1
     };
     setComments(
       (prev) => updateComment(prev, comment.id, (item) => ({
@@ -18089,7 +18085,7 @@ function CommentThread({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      CommentComposer_default,
+      ComposerComponent,
       {
         avatar: currentUser.avatar,
         onSubmit: handleCreateComment
@@ -18099,6 +18095,7 @@ function CommentThread({
       CommentList_default,
       {
         comments,
+        components,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,