@collabdt/core 0.3.0 → 0.3.2

package/dist/core/components/ui/Comments/CollapsibleCommentItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/core/components/ui/Comments/CollapsibleCommentItem.tsx"],"sourcesContent":["'use client'\r\n\r\n// SPDX-License-Identifier: AGPL-3.0-or-later\r\n// Copyright (C) 2025 Collab Digital Twins\r\n\r\nimport * as React from 'react'\r\nimport { usePermissions } from '../../../store'\r\n\r\nimport { Button } from '../Button'\r\nimport { Badge } from '../Badge'\r\nimport { Input } from '../Input'\r\nimport { Avatar } from '../Avatar'\r\nimport { UserAvatar } from '../UserAvatar'\r\nimport * as LR from 'lucide-react'\r\nimport { useTranslations } from 'next-intl'\r\nimport { format } from 'date-fns'\r\nimport { cn } from '../../../utils/utils'\r\nimport { Comment } from '../../../types/dbTypes'\r\nimport { useUser } from '../../../hooks/users/users'\r\nimport { useSession } from 'next-auth/react'\r\n\r\ntype CommentAction = 'view' | 'edit' | 'delete' | 'reply'\r\n\r\ninterface CollapsibleCommentItemProps {\r\n  comment: Comment\r\n  onAction?: (action: CommentAction, id: number) => void\r\n  replies?: Comment[]\r\n  onReply?: (id: number, replyText: string | number) => void\r\n  onFileUpload?: (id: number, files: FileList) => void\r\n  attachments?: Array<{ name: string; url: string; size: number }>\r\n  depth?: number\r\n  isVisible?: boolean\r\n  onMouseEnter?: () => void\r\n  onMouseLeave?: () => void\r\n}\r\n\r\nexport function CollapsibleCommentItem({\r\n  comment,\r\n  onAction,\r\n  replies = [],\r\n  onReply,\r\n  onFileUpload,\r\n  attachments = [],\r\n  depth = 0,\r\n  isVisible = true,\r\n  onMouseEnter,\r\n  onMouseLeave\r\n}: CollapsibleCommentItemProps) {\r\n  const t = useTranslations('CommentsSection')\r\n  // Permissions\r\n  const { ability } = usePermissions()\r\n\r\n  const [isExpanded, setIsExpanded] = React.useState(false)\r\n  const [showReplyInput, setShowReplyInput] = React.useState(false)\r\n  const [replyText, setReplyText] = React.useState('')\r\n  const fileInputRef = React.useRef<HTMLInputElement>(null)\r\n  const prevVisibleRef = React.useRef(isVisible)\r\n\r\n  const user = useSession().data?.user\r\n\r\n  // Auto-collapse when visibility turns off\r\n  React.useEffect(() => {\r\n    const prevVisible = prevVisibleRef.current\r\n    \r\n    if (prevVisible && !isVisible) {\r\n      // Just turned invisible - collapse\r\n      setIsExpanded(false)\r\n    }\r\n    \r\n    prevVisibleRef.current = isVisible\r\n  }, [isVisible])\r\n\r\n  const handleReplySubmit = () => {\r\n    if (replyText.trim() && onReply) {\r\n      onReply(comment.id, replyText)\r\n      setReplyText('')\r\n      setShowReplyInput(false)\r\n    }\r\n  }\r\n\r\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (event.target.files && event.target.files.length > 0 && onFileUpload) {\r\n      onFileUpload(comment.id, event.target.files)\r\n      event.target.value = ''\r\n    }\r\n  }\r\n\r\n  const indentClass = depth > 0 ? `ml-${Math.min(depth * 4, 12)}` : ''\r\n\r\n  const { user: author } = useUser(String(comment.authorId))\r\n  let authorName: string | undefined = author?.name ?? 'Unknown User'\r\n\r\n  return (\r\n    <div \r\n      className={cn(\r\n        \"border rounded-md overflow-hidden transition-opacity\",\r\n        indentClass,\r\n        // !isVisible && \"opacity-50\"\r\n      )}\r\n      onMouseEnter={onMouseEnter}\r\n      onMouseLeave={onMouseLeave}\r\n    >\r\n      {/* Comment Header */}\r\n      <div className=\"flex items-start justify-between p-3 hover:bg-accent/50 transition-colors\">\r\n        <div className=\"flex items-start gap-3 flex-1 min-w-0\">\r\n          <Button\r\n            variant=\"ghost\"\r\n            size=\"sm\"\r\n            className={cn(\"h-6 w-6 p-0 mt-1\")}\r\n            onClick={() => setIsExpanded(!isExpanded)}\r\n          >\r\n            <LR.ChevronRight\r\n              className={cn(\r\n                \"h-4 w-4 transition-transform\",\r\n                isExpanded && \"rotate-90\"\r\n              )}\r\n            />\r\n          </Button>\r\n\r\n          <Avatar className={cn(\"h-8 w-8 mt-1 rounded-full overflow-hidden\")}>\r\n            <UserAvatar imageFileId={author?.imageFileId} name={authorName} />\r\n          </Avatar>\r\n\r\n          <div className=\"flex-1 min-w-0\">\r\n            <div className=\"flex items-center gap-2\">\r\n                <span className={cn(\"text-sm font-medium text-foreground \")}>\r\n                {authorName}\r\n              </span>\r\n              {comment.updatedAt !== comment.createdAt && (\r\n                <Badge variant=\"outline\" className=\"text-xs\">\r\n                  {t('edited')}\r\n                </Badge>\r\n              )}\r\n            </div>\r\n              <p className={cn(\"text-sm mt-1 line-clamp-1 text-foreground\")}>\r\n              {comment.text}\r\n            </p>\r\n            {replies.length > 0 && !isExpanded && (\r\n              <span className=\"text-xs text-muted-foreground mt-1\">\r\n                {replies.length} {replies.length === 1 ? t('reply') : t('replies')}\r\n              </span>\r\n            )}\r\n          </div>\r\n        </div>\r\n\r\n      {/* Action Buttons */}\r\n      {onAction && (\r\n        <div className={cn(\"flex items-center gap-0 flex-shrink-0\")}>\r\n          <Button\r\n            variant=\"ghost\"\r\n            size=\"icon\"\r\n            className=\"h-8 w-8 p-0\"\r\n            onClick={() => setShowReplyInput(!showReplyInput)}\r\n            title={t('replyToComment')}\r\n            disabled={!ability.can('create', 'Comment')}\r\n          >\r\n            <LR.Reply className=\"h-4 w-4\" />\r\n          </Button>\r\n          {user?.id === String(comment.authorId) && (\r\n            <>\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"h-8 w-8 p-0\"\r\n                onClick={() => onAction('edit', comment.id)}\r\n                title={t('editComment')}\r\n                disabled={!ability.can('update', 'Comment')}\r\n              >\r\n                <LR.Pencil className=\"h-4 w-4\" />\r\n              </Button>\r\n              {/* TODO: Need 2-step confirmation dialog for DELETE COMMENT */}\r\n              <Button\r\n                variant=\"ghost\"\r\n                size=\"icon\"\r\n                className=\"h-8 w-8 p-0\"\r\n                onClick={() => onAction('delete', comment.id)}\r\n                title={t('deleteComment')}\r\n                disabled={!ability.can('delete', 'Comment')}\r\n\r\n              >\r\n                <LR.Trash2 className=\"h-4 w-4\" />\r\n              </Button>\r\n            </>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n\r\n      {/* Expanded Content */ }\r\n  {\r\n    isExpanded && (\r\n      <div className=\"border-t bg-muted/30\">\r\n        <div className=\"p-4 space-y-4\">\r\n          {/* Full Comment Text */}\r\n          <span className=\"text-xs text-muted-foreground\">\r\n            {format(new Date(comment.createdAt), 'PPp')}\r\n          </span>\r\n          <div>\r\n            <p className=\"text-sm text-foreground whitespace-pre-wrap\">\r\n              {comment.text}\r\n            </p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  {/* Reply Input */ }\r\n  {\r\n    showReplyInput && onReply && (\r\n      <div className=\"border-t p-3 bg-muted/20\">\r\n        <div className=\"flex gap-2\">\r\n          <Input\r\n            value={replyText}\r\n            onChange={(e) => setReplyText(e.target.value)}\r\n            placeholder={t('writeReply')}\r\n            className=\"flex-1\"\r\n            onKeyDown={(e) => {\r\n              if (e.key === 'Enter' && !e.shiftKey) {\r\n                e.preventDefault()\r\n                handleReplySubmit()\r\n              }\r\n            }}\r\n            disabled={!ability.can('create', 'Comment')}\r\n          />\r\n          <Button\r\n            size=\"sm\"\r\n            onClick={handleReplySubmit}\r\n            disabled={!replyText.trim() || !ability.can('create', 'Comment')}\r\n          >\r\n            <LR.Send className=\"h-4 w-4\" />\r\n          </Button>\r\n          <Button\r\n            size=\"sm\"\r\n            variant=\"ghost\"\r\n            onClick={() => {\r\n              setShowReplyInput(false)\r\n              setReplyText('')\r\n            }}\r\n            disabled={!ability.can('create', 'Comment')}\r\n          >\r\n            <LR.X className=\"h-4 w-4\" />\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  {/* Nested Replies */ }\r\n  {\r\n    isExpanded && replies.length > 0 && (\r\n      <div className=\"border-t\">\r\n        {replies.map((reply) => (\r\n          <CollapsibleCommentItem\r\n            key={reply.id}\r\n            comment={reply}\r\n            onAction={onAction}\r\n            onReply={onReply}\r\n            onFileUpload={onFileUpload}\r\n            depth={depth + 1}\r\n          />\r\n        ))}\r\n      </div>\r\n    )\r\n  }\r\n    </div >\r\n  )\r\n}\r\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/core/components/ui/Comments/CollapsibleCommentItem.tsx"],"sourcesContent":["'use client'\n\n// SPDX-License-Identifier: AGPL-3.0-or-later\n// Copyright (C) 2025 Collab Digital Twins\n\nimport * as LR from 'lucide-react'\nimport { useSession } from 'next-auth/react'\nimport { useTranslations } from 'next-intl'\nimport * as React from 'react'\n\nimport { useUser } from '../../../hooks/users/users'\nimport { usePermissions } from '../../../store'\nimport { commentRingShadow } from '../../../utils/markerUtils'\nimport { formatTimestamp } from '../../../utils/timeUtils'\nimport { cn } from '../../../utils/utils'\nimport { Avatar } from '../Avatar'\nimport { Badge } from '../Badge'\nimport { Button } from '../Button'\nimport { Input } from '../Input'\nimport { UserAvatar } from '../UserAvatar'\n\nimport { CommentActionButtons } from './CommentActionButtons'\n\nimport type { Comment } from '../../../types/dbTypes'\n\ntype CommentAction = 'view' | 'edit' | 'delete' | 'reply'\n\n/** Request from a 3D/map marker to auto-open a comment's editor or reply box. */\nexport interface PendingCommentAction {\n  commentId: number\n  action: 'edit' | 'reply'\n  requestId: number\n}\n\ninterface CollapsibleCommentItemProps {\n  comment: Comment\n  onAction?: (action: CommentAction, id: number) => void\n  replies?: Comment[]\n  onReply?: (comment: Comment, replyText: string) => void\n  onEdit?: (id: number, text: string) => void\n  onFileUpload?: (id: number, files: FileList) => void\n  attachments?: Array<{ name: string; url: string; size: number }>\n  depth?: number\n  isVisible?: boolean\n  focused?: boolean\n  onFocus?: () => void\n  pendingAction?: PendingCommentAction\n  onMouseEnter?: () => void\n  onMouseLeave?: () => void\n}\n\nexport function CollapsibleCommentItem({\n  comment,\n  onAction,\n  replies = [],\n  onReply,\n  onEdit,\n  onFileUpload,\n  depth = 0,\n  isVisible = true,\n  focused = false,\n  onFocus,\n  pendingAction,\n  onMouseEnter,\n  onMouseLeave,\n}: CollapsibleCommentItemProps) {\n  const t = useTranslations('CommentsSection')\n  const { ability } = usePermissions()\n\n  const isReply = depth > 0\n  const [isExpanded, setIsExpanded] = React.useState(false)\n  const [replyText, setReplyText] = React.useState('')\n  const [isEditing, setIsEditing] = React.useState(false)\n  const [editText, setEditText] = React.useState(comment.text)\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const replyInputRef = React.useRef<HTMLInputElement>(null)\n  const prevVisibleRef = React.useRef(isVisible)\n\n  const user = useSession().data?.user\n  const isAuthor = user?.id === String(comment.authorId)\n  const canReply = ability.can('create', 'Comment')\n  const canEdit = ability.can('update', 'Comment')\n  const canDelete = ability.can('delete', 'Comment')\n\n  const { user: author } = useUser(String(comment.authorId))\n  const authorName: string = author?.name ?? 'Unknown User'\n\n  // Auto-collapse when visibility turns off\n  React.useEffect(() => {\n    if (prevVisibleRef.current && !isVisible) setIsExpanded(false)\n    prevVisibleRef.current = isVisible\n  }, [isVisible])\n\n  const handleEditStart = React.useCallback(() => {\n    setEditText(comment.text)\n    setIsEditing(true)\n  }, [comment.text])\n\n  // Reply happens in one place: the input at the end of the thread. The reply button just\n  // expands the thread and focuses that input, so users never hunt for a per-comment control.\n  const openReply = React.useCallback(() => {\n    setIsExpanded(true)\n    requestAnimationFrame(() => replyInputRef.current?.focus())\n  }, [])\n\n  // Open the editor / reply box when a marker requests it, then scroll into view.\n  React.useEffect(() => {\n    if (!pendingAction) return\n    const matchesSelf = pendingAction.commentId === comment.id\n    const matchesReply = replies.some((r) => r.id === pendingAction.commentId)\n    if (matchesSelf) {\n      if (pendingAction.action === 'edit') handleEditStart()\n      else openReply()\n      containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })\n    }\n    if (matchesReply) setIsExpanded(true)\n  }, [pendingAction?.requestId])\n\n  const handleReplySubmit = () => {\n    if (replyText.trim() && onReply) {\n      onReply(comment, replyText)\n      setReplyText('')\n    }\n  }\n\n  const handleEditSubmit = () => {\n    const next = editText.trim()\n    if (next && next !== comment.text && onEdit) onEdit(comment.id, next)\n    setIsEditing(false)\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        'transition-colors',\n        !isReply && 'rounded-md border',\n        isReply && 'pt-2'\n      )}\n      style={focused ? { boxShadow: commentRingShadow({ focused: true }), borderColor: 'transparent' } : undefined}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onDoubleClick={(e) => {\n        e.stopPropagation()\n        onFocus?.()\n      }}\n      title={onFocus ? t('doubleClickZoom') : undefined}\n    >\n      <div className={cn('flex flex-col gap-1.5 p-3', !isReply && 'hover:bg-accent/50 transition-colors rounded-md', onFocus && 'cursor-pointer')}>\n        {/* Header: avatar, author, timestamp, actions */}\n        <div className=\"flex items-start gap-2\">\n          <Avatar className={cn('mt-0.5 rounded-full overflow-hidden shrink-0', isReply ? 'h-6 w-6' : 'h-8 w-8')}>\n            <UserAvatar imageFileId={author?.imageFileId} name={authorName} />\n          </Avatar>\n\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-sm font-medium text-foreground truncate\">{authorName}</span>\n              {comment.updatedAt !== comment.createdAt && (\n                <Badge variant=\"outline\" className=\"text-xs\">{t('edited')}</Badge>\n              )}\n              <span className=\"text-xs text-muted-foreground ml-auto whitespace-nowrap\">\n                {formatTimestamp(comment.createdAt)}\n              </span>\n            </div>\n          </div>\n\n          {onAction && (\n            <CommentActionButtons\n              // Replies are single-level, so only top-level comments expose a reply control.\n              onReply={!isReply && onReply ? openReply : undefined}\n              onEdit={isAuthor ? handleEditStart : undefined}\n              onDelete={isAuthor ? () => onAction('delete', comment.id) : undefined}\n              canReply={canReply}\n              canEdit={canEdit}\n              canDelete={canDelete}\n              labels={{ reply: t('replyToComment'), edit: t('editComment'), delete: t('deleteComment') }}\n            />\n          )}\n        </div>\n\n        {/* Body: full text (shown once) or inline editor */}\n        {isEditing ? (\n          <div className=\"flex gap-2\" onDoubleClick={(e) => e.stopPropagation()}>\n            <Input\n              value={editText}\n              onChange={(e) => setEditText(e.target.value)}\n              className=\"flex-1 h-8\"\n              autoFocus\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' && !e.shiftKey) {\n                  e.preventDefault()\n                  handleEditSubmit()\n                }\n                if (e.key === 'Escape') setIsEditing(false)\n              }}\n              disabled={!canEdit}\n            />\n            <Button size=\"icon\" className=\"h-8 w-8 p-0\" onClick={handleEditSubmit} disabled={!editText.trim() || !canEdit}>\n              <LR.Check className=\"h-4 w-4\" />\n            </Button>\n            <Button size=\"icon\" variant=\"ghost\" className=\"h-8 w-8 p-0\" onClick={() => setIsEditing(false)}>\n              <LR.X className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        ) : (\n          <p className=\"text-sm text-foreground whitespace-pre-wrap break-words\">{comment.text}</p>\n        )}\n\n        {/* Replies toggle (top-level only) */}\n        {!isReply && replies.length > 0 && (\n          <button\n            type=\"button\"\n            className=\"flex items-center gap-1 w-fit text-xs text-muted-foreground hover:text-foreground transition-colors\"\n            onClick={() => setIsExpanded((v) => !v)}\n          >\n            <LR.ChevronRight className={cn('h-3.5 w-3.5 transition-transform', isExpanded && 'rotate-90')} />\n            {replies.length} {replies.length === 1 ? t('reply') : t('replies')}\n          </button>\n        )}\n      </div>\n\n      {/* Nested replies thread + single reply input at the end */}\n      {!isReply && isExpanded && (\n        <div className=\"ml-5 border-l border-border pl-1 pr-2 pb-2\">\n          {replies.map((reply) => (\n            <CollapsibleCommentItem\n              key={reply.id}\n              comment={reply}\n              onAction={onAction}\n              onReply={onReply}\n              onEdit={onEdit}\n              onFileUpload={onFileUpload}\n              depth={depth + 1}\n              pendingAction={pendingAction}\n            />\n          ))}\n\n          {onReply && (\n            <div className=\"flex gap-2 px-1 pt-2\" onDoubleClick={(e) => e.stopPropagation()}>\n              <Input\n                ref={replyInputRef}\n                value={replyText}\n                onChange={(e) => setReplyText(e.target.value)}\n                placeholder={t('writeReply')}\n                className=\"flex-1 h-8\"\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' && !e.shiftKey) {\n                    e.preventDefault()\n                    handleReplySubmit()\n                  }\n                }}\n                disabled={!canReply}\n              />\n              <Button size=\"icon\" className=\"h-8 w-8 p-0\" onClick={handleReplySubmit} disabled={!replyText.trim() || !canReply}>\n                <LR.Send className=\"h-4 w-4\" />\n              </Button>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":["_a"]}

package/dist/core/components/ui/Comments/Comment.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type CommentActionLabels } from './CommentActionButtons';
 export type CommentProps = {
     userName: string;
     userImage: number | null;
@@ -8,10 +9,26 @@ export type CommentProps = {
     createdAt: string | Date;
     onRemove?: () => void;
     onClose?: () => void;
+    /** Called when the collapsed avatar is single-clicked (select the comment). */
+    onSelect?: () => void;
+    /** Called on double-click — used to zoom/focus the comment in the viewer. */
+    onFocus?: () => void;
+    /** Reply to the comment (in-viewer card opens the reply box in the sidebar). */
+    onReply?: () => void;
+    /** Edit the comment (in-viewer card opens the editor in the sidebar). */
+    onEdit?: () => void;
     enableCollapse?: boolean;
     defaultCollapsed?: boolean;
     isPending?: boolean;
     highlight?: boolean;
+    /** Double-clicked/zoomed comment: renders the thicker focus ring. */
+    focused?: boolean;
+    /** Render the close/reply/edit/delete action row (used by the in-viewer BIM card). */
+    showActions?: boolean;
+    canReply?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    actionLabels?: CommentActionLabels;
 };
-export default function Comment({ text, createdAt, userName, userImage, userImageFileId, onRemove, onClose, enableCollapse, defaultCollapsed, isPending, highlight, }: CommentProps): React.JSX.Element;
+export default function Comment({ text, createdAt, userName, userImage, userImageFileId, onRemove, onClose, onSelect, onFocus, onReply, onEdit, enableCollapse, defaultCollapsed, isPending, highlight, focused, showActions, canReply, canEdit, canDelete, actionLabels, }: CommentProps): React.JSX.Element;
 //# sourceMappingURL=Comment.d.ts.map

package/dist/core/components/ui/Comments/Comment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Comment.d.ts","sourceRoot":"","sources":["../../../../../src/core/components/ui/Comments/Comment.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,OAAO,EACP,cAAsB,EACtB,gBAAwB,EACxB,SAAiB,EACjB,SAAiB,GAClB,EAAE,YAAY,qBA6Gd"}
+{"version":3,"file":"Comment.d.ts","sourceRoot":"","sources":["../../../../../src/core/components/ui/Comments/Comment.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,OAAO,EAAwB,KAAK,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAEvF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,mBAAmB,CAAA;CACnC,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,cAAsB,EACtB,gBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,OAAe,EACf,WAAmB,EACnB,QAAe,EACf,OAAc,EACd,SAAgB,EAChB,YAAY,GACb,EAAE,YAAY,qBAgKd"}

package/dist/core/components/ui/Comments/Comment.js

@@ -1,14 +1,34 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import * as LR from "lucide-react";
+import * as React from "react";
+import { useFile } from "../../../hooks/files/files";
+import { commentRingShadow } from "../../../utils/markerUtils";
+import { formatTimestamp } from "../../../utils/timeUtils";
 import { Avatar } from "../Avatar";
 import { Button } from "../Button";
 import { Card } from "../Card";
-import { formatTimestamp } from "../../../utils/timeUtils";
-import { markerStyleHighlight } from "../../../utils/markerUtils";
 import { UserAvatar } from "../UserAvatar";
-import { useFile } from "../../../hooks/files/files";
+import { CommentActionButtons } from "./CommentActionButtons";
 function Comment({
   text,
   createdAt,
@@ -17,34 +37,47 @@ function Comment({
   userImageFileId,
   onRemove,
   onClose,
+  onSelect,
+  onFocus,
+  onReply,
+  onEdit,
   enableCollapse = false,
   defaultCollapsed = false,
   isPending = false,
-  highlight = false
+  highlight = false,
+  focused = false,
+  showActions = false,
+  canReply = true,
+  canEdit = true,
+  canDelete = true,
+  actionLabels
 }) {
+  var _a, _b, _c, _d;
   const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
   const lastTap = React.useRef(0);
   const resolvedImageFileId = userImageFileId != null ? userImageFileId : userImage;
   const { file } = useFile(resolvedImageFileId);
   const previewSrc = file == null ? void 0 : file.url;
-  const handlePointerDown = (e) => {
-    if (!enableCollapse) return;
-    e.stopPropagation();
-    const now = performance.now();
-    if (now - lastTap.current < 300) setIsCollapsed((v) => !v);
-    lastTap.current = now;
+  React.useEffect(() => {
+    if (focused && enableCollapse) setIsCollapsed(false);
+  }, [focused, enableCollapse]);
+  const handleClose = () => {
+    if (enableCollapse) setIsCollapsed(true);
+    else onClose == null ? void 0 : onClose();
   };
   if (enableCollapse && isCollapsed) {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: `h-9 w-9 rounded-full shadow-md overflow-hidden flex-shrink-0 pointer-events-auto ${highlight ? markerStyleHighlight : ""}`,
-        onPointerDown: handlePointerDown,
-        onDoubleClick: (e) => {
+        className: "h-9 w-9 rounded-full overflow-hidden flex-shrink-0 pointer-events-auto cursor-pointer transition-transform relative",
+        style: { boxShadow: commentRingShadow({ highlight, focused }) },
+        onPointerDown: (e) => {
           e.stopPropagation();
-          setIsCollapsed((v) => !v);
+          lastTap.current = performance.now();
+          onSelect == null ? void 0 : onSelect();
+          setIsCollapsed(false);
         },
-        children: isPending ? /* @__PURE__ */ jsx("div", { className: "w-full h-full rounded-full bg-primary-light flex items-center justify-center", children: /* @__PURE__ */ jsx(LR.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsx(Avatar, { className: "h-full w-full cursor-pointer", children: /* @__PURE__ */ jsx(
+        children: isPending ? /* @__PURE__ */ jsx("div", { className: "w-full h-full rounded-full bg-primary-light flex items-center justify-center", children: /* @__PURE__ */ jsx(LR.Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ jsx(Avatar, { className: "h-full w-full", children: /* @__PURE__ */ jsx(
           UserAvatar,
           {
             imageFileId: resolvedImageFileId,
@@ -60,13 +93,18 @@ function Comment({
     "div",
     {
       className: "relative inline-block group",
-      style: { pointerEvents: "auto" },
-      title: enableCollapse ? "Double click to collapse" : void 0,
-      onPointerDown: handlePointerDown,
+      style: { pointerEvents: "auto", boxShadow: focused ? commentRingShadow({ focused }) : void 0, borderRadius: focused ? 12 : void 0, zIndex: focused ? 30 : highlight ? 20 : void 0 },
+      title: onFocus ? "Double click to zoom" : enableCollapse ? "Double click to collapse" : void 0,
+      onPointerDown: (e) => {
+        e.stopPropagation();
+        if (!enableCollapse) return;
+        const now = performance.now();
+        if (now - lastTap.current < 300) onFocus == null ? void 0 : onFocus();
+        lastTap.current = now;
+      },
       onDoubleClick: (e) => {
         e.stopPropagation();
-        if (enableCollapse) setIsCollapsed((v) => !v);
-        else onClose == null ? void 0 : onClose();
+        if (!enableCollapse) onClose == null ? void 0 : onClose();
       },
       children: /* @__PURE__ */ jsxs(Card, { className: "w-48 px-3 py-2.5 shadow-md group-hover:shadow-lg transition-shadow duration-200", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
@@ -82,19 +120,38 @@ function Comment({
           /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-foreground leading-none truncate", children: userName }),
             /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground leading-none", children: formatTimestamp(createdAt) })
-          ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsx(
+            Button,
+            __spreadProps(__spreadValues({
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              title: (_a = actionLabels == null ? void 0 : actionLabels.close) != null ? _a : "Close",
+              "aria-label": (_b = actionLabels == null ? void 0 : actionLabels.close) != null ? _b : "Close",
+              className: "h-7 w-7 shrink-0 -mr-1 -mt-1"
+            }, enableCollapse ? { onPointerDown: (e) => {
+              e.stopPropagation();
+              handleClose();
+            } } : { onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            } }), {
+              children: /* @__PURE__ */ jsx(LR.X, { className: "h-4 w-4" })
+            })
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-start gap-2", children: [
           /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words", children: text }),
-          onRemove && /* @__PURE__ */ jsx(
+          !showActions && onRemove && /* @__PURE__ */ jsx(
             Button,
             {
               type: "button",
               variant: "ghost",
               size: "icon",
-              title: "Remove comment",
+              title: (_c = actionLabels == null ? void 0 : actionLabels.delete) != null ? _c : "Remove comment",
               className: "z-50 h-7 w-7 shrink-0",
-              "aria-label": "Remove comment",
+              "aria-label": (_d = actionLabels == null ? void 0 : actionLabels.delete) != null ? _d : "Remove comment",
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();
@@ -102,7 +159,21 @@ function Comment({
               children: /* @__PURE__ */ jsx(LR.Trash2, { className: "h-4 w-4" })
             }
           )
-        ] })
+        ] }),
+        showActions && (onReply || onEdit || onRemove) && /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end border-t pt-1", children: /* @__PURE__ */ jsx(
+          CommentActionButtons,
+          {
+            onReply,
+            onEdit,
+            onDelete: onRemove,
+            canReply,
+            canEdit,
+            canDelete,
+            labels: actionLabels,
+            buttonClassName: "h-7 w-7",
+            activateOnPointerDown: enableCollapse
+          }
+        ) })
       ] })
     }
   );

package/dist/core/components/ui/Comments/Comment.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/core/components/ui/Comments/Comment.tsx"],"sourcesContent":["'use client'\r\n\r\n// SPDX-License-Identifier: AGPL-3.0-or-later\r\n// Copyright (C) 2025 Collab Digital Twins\r\n\r\nimport * as React from 'react'\r\nimport * as LR from 'lucide-react'\r\nimport { Avatar } from '../Avatar'\r\nimport { Button } from '../Button'\r\nimport { Card } from '../Card'\r\nimport { formatTimestamp } from '../../../utils/timeUtils'\r\nimport { markerStyleHighlight } from '../../../utils/markerUtils'\r\nimport { UserAvatar } from '../UserAvatar'\r\nimport { useFile } from '../../../hooks/files/files'\r\n\r\nexport type CommentProps = {\r\n  userName: string\r\n  userImage: number | null\r\n  userImageFileId?: number | null\r\n  buildingId?: number\r\n  text: string\r\n  createdAt: string | Date\r\n  onRemove?: () => void\r\n  onClose?: () => void\r\n  enableCollapse?: boolean\r\n  defaultCollapsed?: boolean\r\n  isPending?: boolean\r\n  highlight?: boolean\r\n}\r\n\r\nexport default function Comment({\r\n  text,\r\n  createdAt,\r\n  userName,\r\n  userImage,\r\n  userImageFileId,\r\n  onRemove,\r\n  onClose,\r\n  enableCollapse = false,\r\n  defaultCollapsed = false,\r\n  isPending = false,\r\n  highlight = false,\r\n}: CommentProps) {\r\n  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed)\r\n  const lastTap = React.useRef(0)\r\n  const resolvedImageFileId = userImageFileId ?? userImage\r\n  const { file } = useFile(resolvedImageFileId)\r\n  const previewSrc = file?.url\r\n\r\n  const handlePointerDown = (e: React.PointerEvent) => {\r\n    if (!enableCollapse) return\r\n    e.stopPropagation()\r\n\r\n    const now = performance.now()\r\n    if (now - lastTap.current < 300) setIsCollapsed(v => !v)\r\n    lastTap.current = now\r\n  }\r\n  if (enableCollapse && isCollapsed) {\r\n    return (\r\n      <div\r\n        className={`h-9 w-9 rounded-full shadow-md overflow-hidden flex-shrink-0 pointer-events-auto ${highlight ? markerStyleHighlight : ''}`}\r\n        onPointerDown={handlePointerDown}\r\n        onDoubleClick={(e) => {\r\n          e.stopPropagation()\r\n          setIsCollapsed(v => !v)\r\n        }}\r\n      >\r\n        {isPending ? (\r\n          <div className=\"w-full h-full rounded-full bg-primary-light flex items-center justify-center\">\r\n            <LR.Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\r\n          </div>\r\n        ) : (\r\n          <Avatar className=\"h-full w-full cursor-pointer\">\r\n            <UserAvatar\r\n              imageFileId={resolvedImageFileId}\r\n              previewSrc={previewSrc}\r\n              name={userName}\r\n              className=\"h-full w-full rounded-full object-cover\"\r\n            />\r\n          </Avatar>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className=\"relative inline-block group\"\r\n      style={{ pointerEvents: 'auto' }}\r\n      title={enableCollapse ? 'Double click to collapse' : undefined}\r\n      onPointerDown={handlePointerDown}\r\n      onDoubleClick={(e) => {\r\n        e.stopPropagation()\r\n        if (enableCollapse) setIsCollapsed(v => !v)\r\n        else onClose?.()\r\n      }}\r\n    >\r\n        <Card className=\"w-48 px-3 py-2.5 shadow-md group-hover:shadow-lg transition-shadow duration-200\">\r\n          <div className=\"flex items-start gap-3\">\r\n            <div className=\"h-9 w-9 rounded-full shadow-sm flex items-center justify-center select-none flex-shrink-0 bg-card\">\r\n              {isPending ? (\r\n                <div className=\"h-10 w-10 rounded-full bg-muted flex items-center justify-center\">\r\n                  <LR.Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\r\n                </div>\r\n              ) : (\r\n                <Avatar className=\"h-10 w-10\">\r\n                  <UserAvatar\r\n                    imageFileId={resolvedImageFileId}\r\n                    previewSrc={previewSrc}\r\n                    name={userName}\r\n                    className=\"h-full w-full rounded-full object-cover\"\r\n                  />\r\n                </Avatar>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"flex-1 min-w-0 flex flex-col gap-1\">\r\n              <span className=\"font-medium text-sm text-foreground leading-none truncate\">\r\n                {userName}\r\n              </span>\r\n              <span className=\"text-xs text-muted-foreground leading-none\">\r\n                {formatTimestamp(createdAt)}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"mt-2 flex items-start gap-2\">\r\n            <p className=\"min-w-0 flex-1 text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words\">\r\n              {text}\r\n            </p>\r\n\r\n            {onRemove && (\r\n                  <Button\r\n                    type=\"button\"\r\n                    variant=\"ghost\"\r\n                    size=\"icon\"\r\n                    title=\"Remove comment\"\r\n                    className=\"z-50 h-7 w-7 shrink-0\"\r\n                    aria-label=\"Remove comment\"\r\n                    onClick={(e) => {\r\n                      e.stopPropagation()\r\n                      onRemove()\r\n                    }}\r\n                  >\r\n                    <LR.Trash2 className=\"h-4 w-4\" />\r\n                  </Button>\r\n            )}\r\n          </div>\r\n        </Card>\r\n    </div>\r\n  )\r\n}\r\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/core/components/ui/Comments/Comment.tsx"],"sourcesContent":["'use client'\n\n// SPDX-License-Identifier: AGPL-3.0-or-later\n// Copyright (C) 2025 Collab Digital Twins\n\nimport * as LR from 'lucide-react'\nimport * as React from 'react'\n\nimport { useFile } from '../../../hooks/files/files'\nimport { commentRingShadow } from '../../../utils/markerUtils'\nimport { formatTimestamp } from '../../../utils/timeUtils'\nimport { Avatar } from '../Avatar'\nimport { Button } from '../Button'\nimport { Card } from '../Card'\nimport { UserAvatar } from '../UserAvatar'\n\nimport { CommentActionButtons, type CommentActionLabels } from './CommentActionButtons'\n\nexport type CommentProps = {\n  userName: string\n  userImage: number | null\n  userImageFileId?: number | null\n  buildingId?: number\n  text: string\n  createdAt: string | Date\n  onRemove?: () => void\n  onClose?: () => void\n  /** Called when the collapsed avatar is single-clicked (select the comment). */\n  onSelect?: () => void\n  /** Called on double-click — used to zoom/focus the comment in the viewer. */\n  onFocus?: () => void\n  /** Reply to the comment (in-viewer card opens the reply box in the sidebar). */\n  onReply?: () => void\n  /** Edit the comment (in-viewer card opens the editor in the sidebar). */\n  onEdit?: () => void\n  enableCollapse?: boolean\n  defaultCollapsed?: boolean\n  isPending?: boolean\n  highlight?: boolean\n  /** Double-clicked/zoomed comment: renders the thicker focus ring. */\n  focused?: boolean\n  /** Render the close/reply/edit/delete action row (used by the in-viewer BIM card). */\n  showActions?: boolean\n  canReply?: boolean\n  canEdit?: boolean\n  canDelete?: boolean\n  actionLabels?: CommentActionLabels\n}\n\nexport default function Comment({\n  text,\n  createdAt,\n  userName,\n  userImage,\n  userImageFileId,\n  onRemove,\n  onClose,\n  onSelect,\n  onFocus,\n  onReply,\n  onEdit,\n  enableCollapse = false,\n  defaultCollapsed = false,\n  isPending = false,\n  highlight = false,\n  focused = false,\n  showActions = false,\n  canReply = true,\n  canEdit = true,\n  canDelete = true,\n  actionLabels,\n}: CommentProps) {\n  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed)\n  // Timestamp of the last press, shared across the puck→card transition so a quick second press\n  // (double-click) zooms even though the first press already opened the card.\n  const lastTap = React.useRef(0)\n  const resolvedImageFileId = userImageFileId ?? userImage\n  const { file } = useFile(resolvedImageFileId)\n  const previewSrc = file?.url\n\n  // Zooming to a comment (focus) should also open its card in the 3D scene.\n  React.useEffect(() => {\n    if (focused && enableCollapse) setIsCollapsed(false)\n  }, [focused, enableCollapse])\n\n  const handleClose = () => {\n    if (enableCollapse) setIsCollapsed(true)\n    else onClose?.()\n  }\n\n  if (enableCollapse && isCollapsed) {\n    return (\n      <div\n        className=\"h-9 w-9 rounded-full overflow-hidden flex-shrink-0 pointer-events-auto cursor-pointer transition-transform relative\"\n        style={{ boxShadow: commentRingShadow({ highlight, focused }) }}\n        // Open on pointerdown, not click: the CSS2D renderer re-transforms this element every\n        // frame, so a browser \"click\" (down+up on the same stable spot) often never fires in the\n        // 3D scene. stopPropagation keeps the press from reaching the canvas/orbit controls.\n        onPointerDown={(e) => {\n          e.stopPropagation()\n          lastTap.current = performance.now()\n          onSelect?.()\n          setIsCollapsed(false)\n        }}\n      >\n        {isPending ? (\n          <div className=\"w-full h-full rounded-full bg-primary-light flex items-center justify-center\">\n            <LR.Loader2 className=\"h-4 w-4 animate-spin text-muted-foreground\" />\n          </div>\n        ) : (\n          <Avatar className=\"h-full w-full\">\n            <UserAvatar\n              imageFileId={resolvedImageFileId}\n              previewSrc={previewSrc}\n              name={userName}\n              className=\"h-full w-full rounded-full object-cover\"\n            />\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n\n  return (\n    <div\n      className=\"relative inline-block group\"\n      style={{ pointerEvents: 'auto', boxShadow: focused ? commentRingShadow({ focused }) : undefined, borderRadius: focused ? 12 : undefined, zIndex: focused ? 30 : highlight ? 20 : undefined }}\n      title={onFocus ? 'Double click to zoom' : enableCollapse ? 'Double click to collapse' : undefined}\n      // In the 3D card, detect a double-press here (dblclick is unreliable under the CSS2D\n      // renderer) to trigger zoom. The map popup keeps the normal onDoubleClick path below.\n      onPointerDown={(e) => {\n        e.stopPropagation()\n        if (!enableCollapse) return\n        const now = performance.now()\n        if (now - lastTap.current < 300) onFocus?.()\n        lastTap.current = now\n      }}\n      onDoubleClick={(e) => {\n        e.stopPropagation()\n        if (!enableCollapse) onClose?.()\n      }}\n    >\n      <Card className=\"w-48 px-3 py-2.5 shadow-md group-hover:shadow-lg transition-shadow duration-200\">\n        <div className=\"flex items-start gap-3\">\n          <div className=\"h-9 w-9 rounded-full shadow-sm flex items-center justify-center select-none flex-shrink-0 bg-card\">\n            {isPending ? (\n              <div className=\"h-10 w-10 rounded-full bg-muted flex items-center justify-center\">\n                <LR.Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n              </div>\n            ) : (\n              <Avatar className=\"h-10 w-10\">\n                <UserAvatar\n                  imageFileId={resolvedImageFileId}\n                  previewSrc={previewSrc}\n                  name={userName}\n                  className=\"h-full w-full rounded-full object-cover\"\n                />\n              </Avatar>\n            )}\n          </div>\n\n          <div className=\"flex-1 min-w-0 flex flex-col gap-1\">\n            <span className=\"font-medium text-sm text-foreground leading-none truncate\">\n              {userName}\n            </span>\n            <span className=\"text-xs text-muted-foreground leading-none\">\n              {formatTimestamp(createdAt)}\n            </span>\n          </div>\n\n          {showActions && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              title={actionLabels?.close ?? 'Close'}\n              aria-label={actionLabels?.close ?? 'Close'}\n              className=\"h-7 w-7 shrink-0 -mr-1 -mt-1\"\n              // In the CSS2D 3D card (enableCollapse) activate on pointerdown for reliability;\n              // the map popup is normal DOM, so keep click for keyboard accessibility.\n              {...(enableCollapse\n                ? { onPointerDown: (e: React.PointerEvent) => { e.stopPropagation(); handleClose() } }\n                : { onClick: (e: React.MouseEvent) => { e.stopPropagation(); handleClose() } })}\n            >\n              <LR.X className=\"h-4 w-4\" />\n            </Button>\n          )}\n        </div>\n\n        <div className=\"mt-2 flex items-start gap-2\">\n          <p className=\"min-w-0 flex-1 text-sm leading-relaxed text-foreground whitespace-pre-wrap break-words\">\n            {text}\n          </p>\n\n          {/* Map popup keeps the inline delete; the BIM card uses the action row below instead. */}\n          {!showActions && onRemove && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              title={actionLabels?.delete ?? 'Remove comment'}\n              className=\"z-50 h-7 w-7 shrink-0\"\n              aria-label={actionLabels?.delete ?? 'Remove comment'}\n              onClick={(e) => {\n                e.stopPropagation()\n                onRemove()\n              }}\n            >\n              <LR.Trash2 className=\"h-4 w-4\" />\n            </Button>\n          )}\n        </div>\n\n        {showActions && (onReply || onEdit || onRemove) && (\n          <div className=\"mt-2 flex justify-end border-t pt-1\">\n            <CommentActionButtons\n              onReply={onReply}\n              onEdit={onEdit}\n              onDelete={onRemove}\n              canReply={canReply}\n              canEdit={canEdit}\n              canDelete={canDelete}\n              labels={actionLabels}\n              buttonClassName=\"h-7 w-7\"\n              activateOnPointerDown={enableCollapse}\n            />\n          </div>\n        )}\n      </Card>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/core/components/ui/Comments/CommentActionButtons.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+export interface CommentActionLabels {
+    reply?: string;
+    edit?: string;
+    delete?: string;
+    close?: string;
+}
+interface CommentActionButtonsProps {
+    onReply?: () => void;
+    onEdit?: () => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+    canReply?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+    labels?: CommentActionLabels;
+    className?: string;
+    /** Applied to each icon button; lets the caller size the row (sidebar h-8, 3D card h-7). */
+    buttonClassName?: string;
+    /**
+     * Fire on pointerdown instead of click. Needed inside the 3D comment card: the CSS2D renderer
+     * re-transforms the element every frame, so a browser "click" frequently never fires there.
+     */
+    activateOnPointerDown?: boolean;
+}
+/**
+ * Presentational reply/edit/delete/close row shared by the sidebar comment item and the
+ * in-viewer comment card. Intentionally free of i18n and permission hooks: the in-viewer
+ * card renders in a detached React root without the next-intl provider, so labels are
+ * passed in and gating is expressed by which handlers/`can*` flags the caller supplies.
+ */
+export declare function CommentActionButtons({ onReply, onEdit, onDelete, onClose, canReply, canEdit, canDelete, labels, className, buttonClassName, activateOnPointerDown, }: CommentActionButtonsProps): React.ReactElement;
+export {};
+//# sourceMappingURL=CommentActionButtons.d.ts.map

package/dist/core/components/ui/Comments/CommentActionButtons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentActionButtons.d.ts","sourceRoot":"","sources":["../../../../../src/core/components/ui/Comments/CommentActionButtons.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,UAAU,yBAAyB;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAe,EACf,OAAc,EACd,SAAgB,EAChB,MAAM,EACN,SAAS,EACT,eAAe,EACf,qBAA6B,GAC9B,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAuEhD"}

package/dist/core/components/ui/Comments/CommentActionButtons.js

@@ -0,0 +1,106 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as LR from "lucide-react";
+import { cn } from "../../../utils/utils";
+import { Button } from "../Button";
+function CommentActionButtons({
+  onReply,
+  onEdit,
+  onDelete,
+  onClose,
+  canReply = true,
+  canEdit = true,
+  canDelete = true,
+  labels,
+  className,
+  buttonClassName,
+  activateOnPointerDown = false
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const activate = (handler) => (e) => {
+    e.stopPropagation();
+    handler == null ? void 0 : handler();
+  };
+  const bind = (handler) => activateOnPointerDown ? { onPointerDown: activate(handler) } : { onClick: activate(handler) };
+  const btn = cn("h-8 w-8 p-0", buttonClassName);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-0 flex-shrink-0", className), children: [
+    onReply && /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: btn
+      }, bind(onReply)), {
+        title: (_a = labels == null ? void 0 : labels.reply) != null ? _a : "Reply",
+        "aria-label": (_b = labels == null ? void 0 : labels.reply) != null ? _b : "Reply",
+        disabled: !canReply,
+        children: /* @__PURE__ */ jsx(LR.Reply, { className: "h-4 w-4" })
+      })
+    ),
+    onEdit && /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: btn
+      }, bind(onEdit)), {
+        title: (_c = labels == null ? void 0 : labels.edit) != null ? _c : "Edit",
+        "aria-label": (_d = labels == null ? void 0 : labels.edit) != null ? _d : "Edit",
+        disabled: !canEdit,
+        children: /* @__PURE__ */ jsx(LR.Pencil, { className: "h-4 w-4" })
+      })
+    ),
+    onDelete && /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: btn
+      }, bind(onDelete)), {
+        title: (_e = labels == null ? void 0 : labels.delete) != null ? _e : "Delete",
+        "aria-label": (_f = labels == null ? void 0 : labels.delete) != null ? _f : "Delete",
+        disabled: !canDelete,
+        children: /* @__PURE__ */ jsx(LR.Trash2, { className: "h-4 w-4" })
+      })
+    ),
+    onClose && /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: btn
+      }, bind(onClose)), {
+        title: (_g = labels == null ? void 0 : labels.close) != null ? _g : "Close",
+        "aria-label": (_h = labels == null ? void 0 : labels.close) != null ? _h : "Close",
+        children: /* @__PURE__ */ jsx(LR.X, { className: "h-4 w-4" })
+      })
+    )
+  ] });
+}
+export {
+  CommentActionButtons
+};
+//# sourceMappingURL=CommentActionButtons.js.map

package/dist/core/components/ui/Comments/CommentActionButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/core/components/ui/Comments/CommentActionButtons.tsx"],"sourcesContent":["'use client'\n\n// SPDX-License-Identifier: AGPL-3.0-or-later\n// Copyright (C) 2025 Collab Digital Twins\n\nimport * as LR from 'lucide-react'\nimport * as React from 'react'\n\nimport { cn } from '../../../utils/utils'\nimport { Button } from '../Button'\n\nexport interface CommentActionLabels {\n  reply?: string\n  edit?: string\n  delete?: string\n  close?: string\n}\n\ninterface CommentActionButtonsProps {\n  onReply?: () => void\n  onEdit?: () => void\n  onDelete?: () => void\n  onClose?: () => void\n  canReply?: boolean\n  canEdit?: boolean\n  canDelete?: boolean\n  labels?: CommentActionLabels\n  className?: string\n  /** Applied to each icon button; lets the caller size the row (sidebar h-8, 3D card h-7). */\n  buttonClassName?: string\n  /**\n   * Fire on pointerdown instead of click. Needed inside the 3D comment card: the CSS2D renderer\n   * re-transforms the element every frame, so a browser \"click\" frequently never fires there.\n   */\n  activateOnPointerDown?: boolean\n}\n\n/**\n * Presentational reply/edit/delete/close row shared by the sidebar comment item and the\n * in-viewer comment card. Intentionally free of i18n and permission hooks: the in-viewer\n * card renders in a detached React root without the next-intl provider, so labels are\n * passed in and gating is expressed by which handlers/`can*` flags the caller supplies.\n */\nexport function CommentActionButtons({\n  onReply,\n  onEdit,\n  onDelete,\n  onClose,\n  canReply = true,\n  canEdit = true,\n  canDelete = true,\n  labels,\n  className,\n  buttonClassName,\n  activateOnPointerDown = false,\n}: CommentActionButtonsProps): React.ReactElement {\n  const activate = (handler?: () => void) => (e: React.MouseEvent | React.PointerEvent) => {\n    e.stopPropagation()\n    handler?.()\n  }\n\n  // Bind the action to pointerdown (3D card) or click (sidebar). Returns the right prop object.\n  const bind = (handler?: () => void) =>\n    activateOnPointerDown ? { onPointerDown: activate(handler) } : { onClick: activate(handler) }\n\n  const btn = cn('h-8 w-8 p-0', buttonClassName)\n\n  return (\n    <div className={cn('flex items-center gap-0 flex-shrink-0', className)}>\n      {onReply && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className={btn}\n          {...bind(onReply)}\n          title={labels?.reply ?? 'Reply'}\n          aria-label={labels?.reply ?? 'Reply'}\n          disabled={!canReply}\n        >\n          <LR.Reply className=\"h-4 w-4\" />\n        </Button>\n      )}\n      {onEdit && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className={btn}\n          {...bind(onEdit)}\n          title={labels?.edit ?? 'Edit'}\n          aria-label={labels?.edit ?? 'Edit'}\n          disabled={!canEdit}\n        >\n          <LR.Pencil className=\"h-4 w-4\" />\n        </Button>\n      )}\n      {onDelete && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className={btn}\n          {...bind(onDelete)}\n          title={labels?.delete ?? 'Delete'}\n          aria-label={labels?.delete ?? 'Delete'}\n          disabled={!canDelete}\n        >\n          <LR.Trash2 className=\"h-4 w-4\" />\n        </Button>\n      )}\n      {onClose && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon\"\n          className={btn}\n          {...bind(onClose)}\n          title={labels?.close ?? 'Close'}\n          aria-label={labels?.close ?? 'Close'}\n        >\n          <LR.X className=\"h-4 w-4\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEI,SAYM,KAZN;AA/DJ,YAAY,QAAQ;AAGpB,SAAS,UAAU;AACnB,SAAS,cAAc;AAkChB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAC1B,GAAkD;AAvDlD;AAwDE,QAAM,WAAW,CAAC,YAAyB,CAAC,MAA6C;AACvF,MAAE,gBAAgB;AAClB;AAAA,EACF;AAGA,QAAM,OAAO,CAAC,YACZ,wBAAwB,EAAE,eAAe,SAAS,OAAO,EAAE,IAAI,EAAE,SAAS,SAAS,OAAO,EAAE;AAE9F,QAAM,MAAM,GAAG,eAAe,eAAe;AAE7C,SACE,qBAAC,SAAI,WAAW,GAAG,yCAAyC,SAAS,GAClE;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW;AAAA,SACP,KAAK,OAAO,IALjB;AAAA,QAMC,QAAO,sCAAQ,UAAR,YAAiB;AAAA,QACxB,eAAY,sCAAQ,UAAR,YAAiB;AAAA,QAC7B,UAAU,CAAC;AAAA,QAEX,8BAAC,GAAG,OAAH,EAAS,WAAU,WAAU;AAAA;AAAA,IAChC;AAAA,IAED,UACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW;AAAA,SACP,KAAK,MAAM,IALhB;AAAA,QAMC,QAAO,sCAAQ,SAAR,YAAgB;AAAA,QACvB,eAAY,sCAAQ,SAAR,YAAgB;AAAA,QAC5B,UAAU,CAAC;AAAA,QAEX,8BAAC,GAAG,QAAH,EAAU,WAAU,WAAU;AAAA;AAAA,IACjC;AAAA,IAED,YACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW;AAAA,SACP,KAAK,QAAQ,IALlB;AAAA,QAMC,QAAO,sCAAQ,WAAR,YAAkB;AAAA,QACzB,eAAY,sCAAQ,WAAR,YAAkB;AAAA,QAC9B,UAAU,CAAC;AAAA,QAEX,8BAAC,GAAG,QAAH,EAAU,WAAU,WAAU;AAAA;AAAA,IACjC;AAAA,IAED,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,WAAW;AAAA,SACP,KAAK,OAAO,IALjB;AAAA,QAMC,QAAO,sCAAQ,UAAR,YAAiB;AAAA,QACxB,eAAY,sCAAQ,UAAR,YAAiB;AAAA,QAE7B,8BAAC,GAAG,GAAH,EAAK,WAAU,WAAU;AAAA;AAAA,IAC5B;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/core/components/ui/Comments/CommentInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentInput.d.ts","sourceRoot":"","sources":["../../../../../src/core/components/ui/Comments/CommentInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,OAAO,EAAW,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAG7D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,GAAG,EAAE,GAAG,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IAC5E,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,GAAG,CAAC,EAAE,0BAA0B,CAAA;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAiB,EACjB,QAAQ,EACR,GAAG,EACH,MAAc,GACf,EAAE,iBAAiB,qBA0SnB"}
+{"version":3,"file":"CommentInput.d.ts","sourceRoot":"","sources":["../../../../../src/core/components/ui/Comments/CommentInput.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAUpD,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE7D,MAAM,MAAM,0BAA0B,GAAG;IACvC,KAAK,EAAE,GAAG,CAAA;IACV,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,GAAG,CAAC;QAAC,GAAG,EAAE,GAAG,CAAA;KAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IAC5E,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3C,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,kBAAkB,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,GAAG,CAAC,EAAE,0BAA0B,CAAA;IAChC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,MAAiB,EACjB,QAAQ,EACR,GAAG,EACH,MAAc,GACf,EAAE,iBAAiB,qBA8SnB"}

package/dist/core/components/ui/Comments/CommentInput.js

@@ -1,18 +1,19 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import * as LR from "lucide-react";
-import { useTranslations } from "next-intl";
 import { useSession } from "next-auth/react";
+import { useTranslations } from "next-intl";
+import * as React from "react";
+import { toast } from "sonner";
+import { useCreateComment } from "../../../hooks/comments/comments";
+import { AppConfigContext, MapContext, BuildingsContext, MenusContext, ToolsContext } from "../../../store";
+import { ViewerNames } from "../../../types/dbTypes";
 import { cn } from "../../../utils/utils";
+import { AddItemDialog } from "../AddItemDialog";
 import { Button } from "../Button";
 import { Card, CardContent, CardHeader, CardTitle } from "../Card";
-import { AddItemDialog } from "../AddItemDialog";
 import { Input } from "../Input";
 import { Label } from "../Label";
-import { AppConfigContext, MapContext, BuildingsContext, MenusContext, ToolsContext } from "../../../store";
-import { ViewerNames } from "../../../types/dbTypes";
-import { useCreateComment } from "../../../hooks/comments/comments";
 function CommentInput({
   viewer,
   layout = "inline",
@@ -179,6 +180,7 @@ function CommentInput({
     if (text.trim() === "") return;
     setIsPlacing(true);
     setCursor("crosshair");
+    toast(viewer === ViewerNames.map ? t("placeHelpTextMap") : t("placeHelpTextBim"));
   };
   const inputEl = /* @__PURE__ */ jsx(
     Input,
@@ -202,7 +204,7 @@ function CommentInput({
       children: /* @__PURE__ */ jsx(LR.Plus, { className: cn("w-4 h-4", "cursor-pointer transition-transform duration-200 active:scale-90") })
     }
   );
-  const helpText = isPlacing ? viewer === ViewerNames.map ? t("placeHelpTextMap") : t("placeHelpTextBim") : null;
+  const helpText = isPlacing ? viewer === ViewerNames.map ? t("placeHelpTextMap") : t("placeHelpTextBim") : text.trim() !== "" ? t("clickPlusHint") : null;
   if (layout === "dialog") {
     if (isPlacing) return null;
     return /* @__PURE__ */ jsx(
@@ -217,7 +219,8 @@ function CommentInput({
           /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2", children: [
             inputEl,
             submitButtonEl
-          ] })
+          ] }),
+          helpText && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: helpText })
         ] })
       }
     );