tycho-components 0.42.0 → 0.42.2

package/dist/configs/localization/CommentsTexts.d.ts

@@ -15,6 +15,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -31,6 +40,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
@@ -55,6 +65,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -71,6 +90,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
@@ -95,6 +115,15 @@ export declare const CommentsTexts: {
         "tooltip.delete": string;
         "tooltip.read": string;
         "tooltip.reply": string;
+        "tooltip.resolve": string;
+        "tooltip.details": string;
+        "modal.title.details": string;
+        "label.author": string;
+        "label.edited.on": string;
+        "label.read": string;
+        "label.unread": string;
+        "label.read.on": string;
+        "label.requested": string;
         "modal.title.footnote": string;
         "placeholder.footnote.text": string;
         "modal.title.footnote.remove": string;
@@ -111,6 +140,7 @@ export declare const CommentsTexts: {
         "notification.empty": string;
         "notification.text": string;
         "label.edited": string;
+        "label.resolved": string;
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;

package/dist/configs/localization/CommentsTexts.js

@@ -15,6 +15,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Remove comment",
         "tooltip.read": "Mark as read",
         "tooltip.reply": "Reply",
+        "tooltip.resolve": "Mark as resolved",
+        "tooltip.details": "See detailed information",
+        "modal.title.details": "Comment details",
+        "label.author": "Author",
+        "label.edited.on": "Edited on:",
+        "label.read": "Read",
+        "label.unread": "Unread",
+        "label.read.on": "Read on:",
+        "label.requested": "Requested",
         "modal.title.footnote": "Edit footnote",
         "placeholder.footnote.text": "Enter footnote",
         "modal.title.footnote.remove": "Confirm footnote removal",
@@ -31,6 +40,7 @@ export const CommentsTexts = {
         "notification.empty": "No more notifications",
         "notification.text": "{{user}} added a new comment.",
         "label.edited": "edited",
+        "label.resolved": "resolved",
         "tab.write": "Write",
         "tab.preview": "Preview",
         "placeholder.preview.empty": "Nothing to preview",
@@ -55,6 +65,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Remover comentário",
         "tooltip.read": "Marcar como lido",
         "tooltip.reply": "Responder",
+        "tooltip.resolve": "Marcar como resolvido",
+        "tooltip.details": "Ver informações detalhadas",
+        "modal.title.details": "Detalhes do comentário",
+        "label.author": "Autor",
+        "label.edited.on": "Editado em:",
+        "label.read": "Lido",
+        "label.unread": "Não lido",
+        "label.read.on": "Lido em:",
+        "label.requested": "Solicitados",
         "modal.title.footnote": "Editar nota de rodapé",
         "placeholder.footnote.text": "Entre o texto da nota de rodapé",
         "modal.title.footnote.remove": "Confirmação de exclusão de nota de rodapé",
@@ -71,6 +90,7 @@ export const CommentsTexts = {
         "notification.empty": "Não há notificações",
         "notification.text": "{{user}} adicionou um novo comentário.",
         "label.edited": "editado",
+        "label.resolved": "resolvido",
         "tab.write": "Escrever",
         "tab.preview": "Visualizar",
         "placeholder.preview.empty": "Nada para visualizar",
@@ -95,6 +115,15 @@ export const CommentsTexts = {
         "tooltip.delete": "Rimuovi commento",
         "tooltip.read": "Segnala come letto",
         "tooltip.reply": "Rispondi",
+        "tooltip.resolve": "Segna come risolto",
+        "tooltip.details": "Vedi informazioni dettagliate",
+        "modal.title.details": "Dettagli del commento",
+        "label.author": "Autore",
+        "label.edited.on": "Modificato il:",
+        "label.read": "Letto",
+        "label.unread": "Non letto",
+        "label.read.on": "Letto il:",
+        "label.requested": "Richiesti",
         "modal.title.footnote": "Modifica nota a piè di pagina",
         "placeholder.footnote.text": "Inserisci nota a piè di pagina",
         "modal.title.footnote.remove": "Conferma rimozione nota a piè di pagina",
@@ -111,6 +140,7 @@ export const CommentsTexts = {
         "notification.empty": "Nessun'altra notifica",
         "notification.text": "{{user}} ha aggiunto un commento all'inserimento {{entry}}.",
         "label.edited": "modificato",
+        "label.resolved": "risolto",
         "tab.write": "Scrivi",
         "tab.preview": "Anteprima",
         "placeholder.preview.empty": "Niente da visualizzare",

package/dist/features/Comments/CommentDetails/CommentDetails.d.ts

@@ -0,0 +1,8 @@
+import { Comment } from '../types/Comment';
+import './styles.scss';
+type Props = {
+    comment: Comment;
+    onClose: () => void;
+};
+export default function CommentDetails({ comment, onClose }: Props): import("react").JSX.Element;
+export {};

package/dist/features/Comments/CommentDetails/CommentDetails.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { Avatar, Tag } from 'tycho-storybook';
+import AppModal from '../../../common/AppModal/AppModal';
+import DateUtils from '../../../functions/DateUtils';
+import './styles.scss';
+const DATE_TIME_FORMAT = 'MM/dd/yyyy - HH:mm';
+export default function CommentDetails({ comment, onClose }) {
+    const { t } = useTranslation('comments');
+    const postedDateTime = DateUtils.formatDateTime(comment.date, DATE_TIME_FORMAT);
+    const editedDateTime = comment.edited
+        ? DateUtils.formatDateTime(comment.edited, DATE_TIME_FORMAT)
+        : undefined;
+    return (_jsx(AppModal, { title: t('modal.title.details'), close: onClose, hideFooter: true, className: "comment-details-modal", children: _jsxs("div", { className: "comment-details", children: [_jsxs("div", { className: "comment-details-section", children: [_jsxs("div", { className: "comment-details-author", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "small" }), _jsxs("div", { className: "comment-details-author-meta", children: [_jsx("span", { className: "comment-details-label", children: t('label.author') }), _jsx("span", { className: "comment-details-value", children: comment.name })] }), comment.resolved && (_jsx(Tag, { text: t('label.resolved'), color: "green", size: "small" }))] }), _jsxs("div", { className: "comment-details-row", children: [_jsx("span", { className: "comment-details-label", children: t('label.posted.on') }), _jsx("span", { className: "comment-details-label", children: postedDateTime })] }), editedDateTime && (_jsxs("div", { className: "comment-details-row", children: [_jsx("span", { className: "comment-details-label", children: t('label.edited.on') }), _jsx("span", { className: "comment-details-label", children: editedDateTime })] }))] }), comment.requested && comment.requested.length > 0 && (_jsxs("div", { className: "comment-details-section", children: [_jsx("span", { className: "comment-details-section-title", children: t('label.requested') }), _jsx("ul", { className: "comment-details-requested", children: comment.requested.map((user) => (_jsxs("li", { className: "comment-details-requested-item", children: [_jsx(Avatar, { title: user.name, src: user.picture, size: "x-small" }), _jsxs("div", { className: "comment-details-requested-meta", children: [_jsx("span", { className: "comment-details-value", children: user.name }), user.email && (_jsx("span", { className: "comment-details-secondary", children: user.email })), user.read && user.dateRead && (_jsxs("span", { className: "comment-details-secondary", children: [t('label.read.on'), ' ', DateUtils.formatDateTime(user.dateRead, DATE_TIME_FORMAT)] }))] }), _jsx(Tag, { text: user.read ? t('label.read') : t('label.unread'), color: user.read ? 'green' : 'gray', size: "small" })] }, user.uid))) })] }))] }) }));
+}

package/dist/features/Comments/CommentDetails/index.d.ts

@@ -0,0 +1,2 @@
+import CommentDetails from './CommentDetails';
+export default CommentDetails;

package/dist/features/Comments/CommentDetails/index.js

@@ -0,0 +1,2 @@
+import CommentDetails from './CommentDetails';
+export default CommentDetails;

package/dist/features/Comments/CommentDetails/styles.scss

@@ -0,0 +1,87 @@
+.comment-details-modal {
+  width: 36vw;
+
+  > .body {
+    padding: 32px 16px;
+  }
+
+  .comment-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-300);
+    min-width: min(480px, 80vw);
+  }
+
+  .comment-details-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-section-title {
+    @include label-medium-1;
+    color: var(--text-secondary);
+  }
+
+  .comment-details-author {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-author-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-050);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .comment-details-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-050) var(--spacing-100);
+  }
+
+  .comment-details-label {
+    @include helper-small-1;
+    color: var(--text-tertiary);
+  }
+
+  .comment-details-value {
+    @include body-medium-1;
+    color: var(--text-primary);
+  }
+
+  .comment-details-secondary {
+    @include helper-small-1;
+    color: var(--text-tertiary);
+  }
+
+  .comment-details-author-meta .comment-details-value {
+    @include label-medium-1;
+  }
+
+  .comment-details-requested {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-requested-item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-150);
+  }
+
+  .comment-details-requested-meta {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-050);
+    min-width: 0;
+    flex: 1;
+  }
+}

package/dist/features/Comments/{CommentInfo.d.ts → CommentInfo/CommentInfo.d.ts}

@@ -1,6 +1,6 @@
 import '@uiw/react-markdown-preview/markdown.css';
-import './style.scss';
-import { Comment } from './types/Comment';
+import { Comment } from '../types/Comment';
+import './styles.scss';
 type Props = {
     comment: Comment;
     hasEditAccess?: boolean;

package/dist/features/Comments/CommentInfo/CommentInfo.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@uiw/react-markdown-preview/markdown.css';
+import MDEditor from '@uiw/react-md-editor';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Avatar, DropdownMenu, Tag } from 'tycho-storybook';
+import CommonContext from '../../../configs/CommonContext';
+import DateUtils from '../../../functions/DateUtils';
+import CommentDetails from '../CommentDetails';
+import CommentService from '../CommentService';
+import './styles.scss';
+export default function CommentInfo({ comment, hasEditAccess = true, onRemove, onUpdate, onEdit, onReply, }) {
+    const { t } = useTranslation('comments');
+    const { state } = useContext(CommonContext);
+    const markedReadRef = useRef(false);
+    const [showDetails, setShowDetails] = useState(false);
+    const isNotRead = (thisComment) => {
+        if (!thisComment.requested)
+            return false;
+        const requested = thisComment.requested.find((r) => r.uid === state.logged?.uid);
+        if (!requested)
+            return false;
+        return !requested.read;
+    };
+    useEffect(() => {
+        if (!isNotRead(comment) || markedReadRef.current)
+            return;
+        markedReadRef.current = true;
+        CommentService.markRead(comment.id).then((r) => onUpdate(r.data));
+    }, [comment, onUpdate]);
+    const handleRemove = () => {
+        CommentService.remove(comment.id).then(() => {
+            onRemove();
+        });
+    };
+    const handleResolve = () => {
+        CommentService.resolve(comment.id).then((r) => onUpdate(r.data));
+    };
+    const isAuthor = hasEditAccess && state.logged?.uid === comment.user;
+    const menuOptions = [];
+    menuOptions.push({
+        label: t('tooltip.details'),
+        icon: 'info',
+        onClick: () => setShowDetails(true),
+    });
+    if (hasEditAccess && !comment.reply) {
+        menuOptions.push({
+            label: t('tooltip.reply'),
+            icon: 'reply',
+            onClick: onReply,
+        });
+    }
+    if (isAuthor) {
+        menuOptions.push({
+            label: t('tooltip.edit'),
+            icon: 'edit',
+            onClick: onEdit,
+        }, {
+            label: t('tooltip.delete'),
+            icon: 'delete',
+            onClick: handleRemove,
+        });
+    }
+    if (hasEditAccess && !comment.reply && !comment.resolved) {
+        menuOptions.push({
+            label: t('tooltip.resolve'),
+            icon: 'check',
+            onClick: handleResolve,
+        });
+    }
+    const displayDate = comment.edited || comment.date;
+    const fullDateTitle = DateUtils.formatDateTime(displayDate, 'MM/dd/yyyy - HH:mm');
+    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "comment-header", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "x-small" }), _jsxs("div", { className: "meta", children: [_jsx("span", { className: "name", children: comment.name }), _jsxs("span", { className: "timestamp", title: fullDateTitle, children: [t('label.on'), " ", DateUtils.formatDateTime(displayDate, 'MMM d')] })] }), _jsxs("div", { className: "buttons", children: [comment.resolved && (_jsx(Tag, { text: t('label.resolved'), color: "green", size: "small" })), comment.edited && !comment.resolved && (_jsx(Tag, { text: t('label.edited'), color: "blue", size: "small" })), menuOptions.length > 0 && (_jsx(DropdownMenu, { size: "small", className: "comment-menu", list: menuOptions }))] })] }), _jsxs("div", { className: "comment-body", children: [_jsx("div", { className: "text", "data-color-mode": "light", children: _jsx(MDEditor.Markdown, { source: comment.value }) }), comment.requested && (_jsxs("div", { className: "meta-line", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] }))] }), showDetails && (_jsx(CommentDetails, { comment: comment, onClose: () => setShowDetails(false) }))] }));
+}

package/dist/features/Comments/CommentInfo/index.d.ts

@@ -0,0 +1,2 @@
+import CommentInfo from './CommentInfo';
+export default CommentInfo;

package/dist/features/Comments/CommentInfo/index.js

@@ -0,0 +1,2 @@
+import CommentInfo from './CommentInfo';
+export default CommentInfo;

package/dist/features/Comments/CommentInfo/styles.scss

@@ -0,0 +1,95 @@
+.comment {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-200);
+  background-color: var(--background-default);
+
+  .comment-header {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-100);
+    padding: 4px 8px;
+    background-color: var(--layer-hover-2);
+    border-bottom: 1px solid var(--border-subtle-1);
+    border-radius: var(--radius-200) var(--radius-200) 0 0;
+
+    > .ds-avatar {
+      flex-shrink: 0;
+    }
+
+    .meta {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: var(--spacing-050) var(--spacing-100);
+      min-width: 0;
+
+      .name {
+        @include label-medium-1;
+        color: var(--text-primary);
+      }
+
+      .timestamp {
+        @include helper-small-1;
+        color: var(--text-tertiary);
+      }
+    }
+
+    .buttons {
+      display: flex;
+      margin-left: auto;
+      flex-shrink: 0;
+      gap: var(--spacing-100);
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .comment-body {
+    padding: var(--spacing-200) var(--spacing-150);
+    background-color: var(--background-default);
+    border-radius: 0 0 var(--radius-200) var(--radius-200);
+
+    .text {
+      @include body-medium-1;
+      color: var(--text-primary);
+      word-break: break-word;
+
+      .wmde-markdown {
+        background: transparent;
+        font-size: inherit;
+        color: inherit;
+
+        p {
+          margin: 0 0 var(--spacing-100);
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        pre,
+        code {
+          border-radius: var(--radius-100);
+        }
+
+        pre {
+          overflow-x: auto;
+        }
+
+        ul,
+        ol {
+          margin: 0 0 var(--spacing-100);
+          padding-left: var(--spacing-250);
+        }
+      }
+    }
+
+    .meta-line {
+      @include helper-small-1;
+      color: var(--text-tertiary);
+      margin-top: var(--spacing-100);
+    }
+  }
+}

package/dist/features/Comments/CommentService.d.ts

@@ -4,6 +4,7 @@ import { Comment, CommentRequest } from './types/Comment';
 declare function findNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
 declare function findReadNotifications(uid: string, mode: string): Promise<AxiosResponse<Comment[], any, {}, any>>;
 declare function markRead(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
+declare function resolve(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function update(id: string, comment: CommentRequest): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function remove(id: string): Promise<AxiosResponse<Comment, any, {}, any>>;
 declare function add(uid: string, mode: string, comment: CommentRequest, references: Record<string, string | number | boolean>, keywords?: Record<string, string | number | boolean>): Promise<AxiosResponse<Comment, any, {}, any>>;
@@ -14,6 +15,7 @@ declare const CommentService: {
     remove: typeof remove;
     update: typeof update;
     markRead: typeof markRead;
+    resolve: typeof resolve;
     find: typeof find;
     findNotifications: typeof findNotifications;
     findReadNotifications: typeof findReadNotifications;

package/dist/features/Comments/CommentService.js

@@ -40,6 +40,13 @@ function markRead(id) {
     }
     return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/read/${id}`);
 }
+function resolve(id) {
+    if (StorybookUtils.isStorybook()) {
+        storybookComments = storybookComments.map((c) => c.id === id ? { ...c, resolved: true } : c);
+        return mockResponse(storybookComments.find((c) => c.id === id));
+    }
+    return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/resolve/${id}`);
+}
 function update(id, comment) {
     if (StorybookUtils.isStorybook()) {
         storybookComments = storybookComments.map((c) => {
@@ -106,6 +113,7 @@ const CommentService = {
     remove,
     update,
     markRead,
+    resolve,
     find,
     findNotifications,
     findReadNotifications,

package/dist/features/Comments/CommentService.mock.js

@@ -37,6 +37,7 @@ export const mockComments = [
         user: 'storybook-user-ana',
         picture: '',
         edited: new Date(Date.now() - 86400000).toISOString(),
+        resolved: true,
         requested: [
             {
                 uid: 'storybook-user-john',

package/dist/features/Comments/{CommentThread.d.ts → CommentThread/CommentThread.d.ts}

@@ -1,4 +1,5 @@
-import { Comment } from './types/Comment';
+import { Comment } from '../types/Comment';
+import './styles.scss';
 type Props = {
     comments: Comment[];
     hasEditAccess: boolean;

package/dist/features/Comments/{CommentThread.js → CommentThread/CommentThread.js}

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import UsabilityUtils from '../../functions/UsabilityUtils';
-import CommentInfo from './CommentInfo';
+import UsabilityUtils from '../../../functions/UsabilityUtils';
+import CommentInfo from '../CommentInfo';
+import './styles.scss';
 export default function CommentThread({ comments, hasEditAccess, onRemove, onUpdate, onEdit, onReply, }) {
     const hasReplies = (thisComment) => comments.some((c) => c.reply === thisComment.id);
     const getReplies = (thisComment) => comments.filter((c) => c.reply === thisComment.id);

package/dist/features/Comments/CommentThread/index.d.ts

@@ -0,0 +1,2 @@
+import CommentThread from './CommentThread';
+export default CommentThread;

package/dist/features/Comments/CommentThread/index.js

@@ -0,0 +1,2 @@
+import CommentThread from './CommentThread';
+export default CommentThread;

package/dist/features/Comments/CommentThread/styles.scss

@@ -0,0 +1,16 @@
+.thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-200);
+
+  & + .thread {
+    margin-top: var(--spacing-100);
+  }
+
+  .replies {
+    margin-left: var(--spacing-400);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-100);
+  }
+}

package/dist/features/Comments/Comments.js

@@ -13,6 +13,7 @@ import CommentService from './CommentService';
 import CommentThread from './CommentThread';
 import CommentUtils from './CommentUtils';
 import './style.scss';
+import useCommentsResize from './useCommentsResize';
 function CommentsPanel({ dockPosition, showResizeHandle, onResizePointerDown, children, }) {
     const isHorizontal = dockPosition === 'bottom';
     return (_jsxs("div", { className: cx('comments-container', {
@@ -33,9 +34,8 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
     const [comments, setComments] = useState();
     const [users, setUsers] = useState([]);
     const [reply, setReply] = useState();
-    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
-    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
     const [dockPosition, setDockPosition] = useState(CommentUtils.readStoredDockPosition);
+    const { drawerWidth, drawerHeight, handleResizePointerDown } = useCommentsResize(dockPosition);
     const [externalContainer, setExternalContainer] = useState(null);
     const commentAddRef = useRef(null);
     const popupRef = useRef(null);
@@ -209,55 +209,6 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
             closePopup();
         };
     }, [closePopup]);
-    const handleResizePointerDown = useCallback((event) => {
-        event.preventDefault();
-        const handle = event.currentTarget;
-        handle.setPointerCapture(event.pointerId);
-        const previousUserSelect = document.body.style.userSelect;
-        const previousCursor = document.body.style.cursor;
-        const isBottom = dockPosition === 'bottom';
-        const isLeft = dockPosition === 'left';
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = isBottom ? 'row-resize' : 'col-resize';
-        const computeSize = (clientX, clientY) => {
-            if (isBottom) {
-                return CommentUtils.clampDrawerHeight(window.innerHeight - clientY);
-            }
-            if (isLeft) {
-                return CommentUtils.clampDrawerWidth(clientX);
-            }
-            return CommentUtils.clampDrawerWidth(window.innerWidth - clientX);
-        };
-        const onPointerMove = (moveEvent) => {
-            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
-            if (isBottom) {
-                setDrawerHeight(next);
-            }
-            else {
-                setDrawerWidth(next);
-            }
-        };
-        const onPointerUp = (upEvent) => {
-            const next = computeSize(upEvent.clientX, upEvent.clientY);
-            if (isBottom) {
-                setDrawerHeight(next);
-                CommentUtils.persistDrawerHeight(next);
-            }
-            else {
-                setDrawerWidth(next);
-                CommentUtils.persistDrawerWidth(next);
-            }
-            document.body.style.userSelect = previousUserSelect;
-            document.body.style.cursor = previousCursor;
-            handle.releasePointerCapture(upEvent.pointerId);
-            handle.removeEventListener('pointermove', onPointerMove);
-            handle.removeEventListener('pointerup', onPointerUp);
-            handle.removeEventListener('pointercancel', onPointerUp);
-        };
-        handle.addEventListener('pointermove', onPointerMove);
-        handle.addEventListener('pointerup', onPointerUp);
-        handle.addEventListener('pointercancel', onPointerUp);
-    }, [dockPosition]);
     const paperStyle = dockPosition === 'bottom'
         ? { height: drawerHeight, width: '100%' }
         : { width: drawerWidth };

package/dist/features/Comments/style.scss

@@ -123,116 +123,6 @@
     overflow-y: auto;
     padding: var(--spacing-200);
     background-color: var(--background-default);
-
-    .thread {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-200);
-
-      & + .thread {
-        margin-top: var(--spacing-100);
-      }
-
-      .comment {
-        display: flex;
-        flex-direction: column;
-        border: 1px solid var(--border-subtle-1);
-        border-radius: var(--radius-200);
-        overflow: hidden;
-        background-color: var(--background-default);
-
-        .comment-header {
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-100);
-          padding: 4px 8px;
-          background-color: var(--layer-hover-2);
-          border-bottom: 1px solid var(--border-subtle-1);
-
-          > .ds-avatar {
-            flex-shrink: 0;
-          }
-
-          .meta {
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-            gap: var(--spacing-050) var(--spacing-100);
-            min-width: 0;
-
-            .name {
-              @include label-medium-1;
-              color: var(--text-primary);
-            }
-
-            .timestamp {
-              @include helper-small-1;
-              color: var(--text-tertiary);
-            }
-          }
-
-          .buttons {
-            display: flex;
-            margin-left: auto;
-            flex-shrink: 0;
-            gap: var(--spacing-100);
-          }
-        }
-
-        .comment-body {
-          padding: var(--spacing-200) var(--spacing-150);
-          background-color: var(--background-default);
-
-          .text {
-            @include body-medium-1;
-            color: var(--text-primary);
-            word-break: break-word;
-
-            .wmde-markdown {
-              background: transparent;
-              font-size: inherit;
-              color: inherit;
-
-              p {
-                margin: 0 0 var(--spacing-100);
-
-                &:last-child {
-                  margin-bottom: 0;
-                }
-              }
-
-              pre,
-              code {
-                border-radius: var(--radius-100);
-              }
-
-              pre {
-                overflow-x: auto;
-              }
-
-              ul,
-              ol {
-                margin: 0 0 var(--spacing-100);
-                padding-left: var(--spacing-250);
-              }
-            }
-          }
-
-          .meta-line {
-            @include helper-small-1;
-            color: var(--text-tertiary);
-            margin-top: var(--spacing-100);
-          }
-        }
-      }
-
-      .replies {
-        margin-left: var(--spacing-400);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-100);
-      }
-    }
   }
 }
 

package/dist/features/Comments/types/Comment.d.ts

@@ -9,6 +9,7 @@ export type Comment = {
     value: string;
     date: string;
     edited?: string;
+    resolved?: boolean;
     name: string;
     user: string;
     picture: string;
@@ -32,6 +33,7 @@ export type UserComment = {
     picture: string;
     email: string;
     read: boolean;
+    dateRead?: string;
 };
 export declare const EMPTY_COMMENT: Comment;
 export declare const EMPTY_COMMENT_REQUEST: CommentRequest;

package/dist/features/Comments/useCommentsResize.d.ts

@@ -0,0 +1,7 @@
+import { type PointerEvent as ReactPointerEvent } from 'react';
+import { type DockPosition } from './CommentUtils';
+export default function useCommentsResize(dockPosition: DockPosition): {
+    drawerWidth: number;
+    drawerHeight: number;
+    handleResizePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+};

package/dist/features/Comments/useCommentsResize.js

@@ -0,0 +1,60 @@
+import { useCallback, useState, } from 'react';
+import CommentUtils from './CommentUtils';
+export default function useCommentsResize(dockPosition) {
+    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
+    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
+    const handleResizePointerDown = useCallback((event) => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const previousUserSelect = document.body.style.userSelect;
+        const previousCursor = document.body.style.cursor;
+        const isBottom = dockPosition === 'bottom';
+        const isLeft = dockPosition === 'left';
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = isBottom ? 'row-resize' : 'col-resize';
+        const computeSize = (clientX, clientY) => {
+            if (isBottom) {
+                return CommentUtils.clampDrawerHeight(window.innerHeight - clientY);
+            }
+            if (isLeft) {
+                return CommentUtils.clampDrawerWidth(clientX);
+            }
+            return CommentUtils.clampDrawerWidth(window.innerWidth - clientX);
+        };
+        const onPointerMove = (moveEvent) => {
+            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+            }
+        };
+        const onPointerUp = (upEvent) => {
+            const next = computeSize(upEvent.clientX, upEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+                CommentUtils.persistDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+                CommentUtils.persistDrawerWidth(next);
+            }
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.cursor = previousCursor;
+            handle.releasePointerCapture(upEvent.pointerId);
+            handle.removeEventListener('pointermove', onPointerMove);
+            handle.removeEventListener('pointerup', onPointerUp);
+            handle.removeEventListener('pointercancel', onPointerUp);
+        };
+        handle.addEventListener('pointermove', onPointerMove);
+        handle.addEventListener('pointerup', onPointerUp);
+        handle.addEventListener('pointercancel', onPointerUp);
+    }, [dockPosition]);
+    return {
+        drawerWidth,
+        drawerHeight,
+        handleResizePointerDown,
+    };
+}

package/dist/features/PageRender/collapseElementsForTier.js

@@ -109,8 +109,9 @@ export function shouldSkipJunctionContinuationElement(elements, index, selectedT
         if (element.type === PageRenderElementType.JUNCTION_SPLIT &&
             splitIdx > 0 &&
             segmented) {
-            const lastP = getGlobalLastSegmentationPos(elements, ref.uid, segmentationGroup);
-            if (lastP !== null && ref.p < lastP) {
+            // Only hand later splits to a later host when that host also has junction
+            // (two-host diplomatic pattern). Seg-only follow-ons must not hide idx>0.
+            if (hasLaterJunctionHostInSegmentationGroup(elements, ref.uid, segmentationGroup, ref.p)) {
                 return true;
             }
         }
@@ -196,6 +197,30 @@ function getLastSegmentationPosInGroup(elements, start, end) {
     }
     return lastP;
 }
+function groupHasJunctionHost(elements, start, end) {
+    for (let i = start; i <= end; i += 1) {
+        const ref = elements[i].token;
+        if (ref && hasJunctionFromRef(ref)) {
+            return true;
+        }
+    }
+    return false;
+}
+function hasLaterJunctionHostInSegmentationGroup(elements, uid, groupKey, currentP) {
+    for (const element of elements) {
+        if (!isJunctionEditionElement(element))
+            continue;
+        const ref = element.token;
+        if (!sameSegmentationGroupRef(ref, uid, groupKey))
+            continue;
+        if (!hasSegmentationFromRef(ref))
+            continue;
+        if (ref.p > currentP) {
+            return true;
+        }
+    }
+    return false;
+}
 export function shouldSkipSegmentationElement(elements, index, selectedTier, corpus) {
     if (!isUnderSelected(selectedTier, SEGMENTATION_TIER, corpus)) {
         return false;
@@ -205,19 +230,99 @@ export function shouldSkipSegmentationElement(elements, index, selectedTier, cor
         return false;
     }
     const { start, end } = findSegmentationGroupBounds(elements, index);
+    const ref = element.token;
+    // Junction host + seg-only pieces: diplomatic text lives on the junction host.
+    if (groupHasJunctionHost(elements, start, end)) {
+        if (hasJunctionFromRef(ref)) {
+            return false;
+        }
+        return true;
+    }
     const lastP = getLastSegmentationPosInGroup(elements, start, end);
-    return element.token.p < lastP;
+    return ref.p < lastP;
 }
 /** @deprecated Use shouldSkipSegmentationElement */
 export function shouldSkipSegmentationToken(elements, index, selectedTier, corpus) {
     return shouldSkipSegmentationElement(elements, index, selectedTier, corpus);
 }
+function isMidJunctionHostLineBreak(elements, index) {
+    if (elements[index]?.type !== PageRenderElementType.LINE_BREAK) {
+        return false;
+    }
+    const prev = elements[index - 1];
+    if (prev?.type !== PageRenderElementType.JUNCTION_SPLIT || !prev.token) {
+        return false;
+    }
+    let nextIdx = index + 1;
+    while (nextIdx < elements.length &&
+        elements[nextIdx].type === PageRenderElementType.LINE_NUMBER) {
+        nextIdx += 1;
+    }
+    const next = elements[nextIdx];
+    if (next?.type !== PageRenderElementType.JUNCTION_SPLIT || !next.token) {
+        return false;
+    }
+    return prev.token.uid === next.token.uid && prev.token.p === next.token.p;
+}
+function sameDeferredBreakGroup(element, group) {
+    const ref = element.token;
+    if (!ref)
+        return false;
+    if (ref.uid === group.uid && ref.p === group.p)
+        return true;
+    if (group.segGroup &&
+        hasSegmentationFromRef(ref) &&
+        sameSegmentationGroupRef(ref, group.uid, group.segGroup)) {
+        return true;
+    }
+    return false;
+}
 export default function collapseElementsForTier(elements, selectedTier, corpus) {
     const showJunctionSplits = isUnderSelected(selectedTier, JUNCTION_TIER, corpus);
     const collapsed = [];
     let index = 0;
+    let deferredBreak = null;
+    let deferredLineNumbers = [];
+    let deferredBreakGroup = null;
+    const flushDeferredBreak = () => {
+        if (!deferredBreak)
+            return;
+        collapsed.push({
+            kind: 'single',
+            element: deferredBreak,
+            key: `LINE_BREAK_deferred_${collapsed.length}`,
+        });
+        for (const lineNumber of deferredLineNumbers) {
+            collapsed.push({
+                kind: 'single',
+                element: lineNumber,
+                key: `LINE_NUMBER_deferred_${collapsed.length}`,
+            });
+        }
+        deferredBreak = null;
+        deferredLineNumbers = [];
+        deferredBreakGroup = null;
+    };
     while (index < elements.length) {
         const element = elements[index];
+        if (!showJunctionSplits &&
+            deferredBreak === null &&
+            isMidJunctionHostLineBreak(elements, index)) {
+            const host = elements[index - 1].token;
+            deferredBreak = element;
+            deferredBreakGroup = {
+                uid: host.uid,
+                p: host.p,
+                segGroup: segmentationGroupKey(host),
+            };
+            index += 1;
+            while (index < elements.length &&
+                elements[index].type === PageRenderElementType.LINE_NUMBER) {
+                deferredLineNumbers.push(elements[index]);
+                index += 1;
+            }
+            continue;
+        }
         if (shouldSkipSegmentationElement(elements, index, selectedTier, corpus)) {
             index += 1;
             continue;
@@ -226,6 +331,12 @@ export default function collapseElementsForTier(elements, selectedTier, corpus)
             index += 1;
             continue;
         }
+        const inDeferredGroup = !!element.token &&
+            !!deferredBreakGroup &&
+            sameDeferredBreakGroup(element, deferredBreakGroup);
+        if (deferredBreak && !inDeferredGroup) {
+            flushDeferredBreak();
+        }
         if (!showJunctionSplits &&
             element.type === PageRenderElementType.JUNCTION_SPLIT &&
             element.token) {
@@ -251,6 +362,7 @@ export default function collapseElementsForTier(elements, selectedTier, corpus)
         });
         index += 1;
     }
+    flushDeferredBreak();
     return collapsed;
 }
 export function isTokenBearingCollapsed(item) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.42.0",
+  "version": "0.42.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -85,7 +85,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.12.0",
+    "tycho-storybook": "0.12.1",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -115,7 +115,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.12.0",
+    "tycho-storybook": "^0.12.1",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",

package/dist/features/Comments/CommentInfo.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import MDEditor from '@uiw/react-md-editor';
-import '@uiw/react-markdown-preview/markdown.css';
-import { useContext } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Avatar, IconButton, Tag } from 'tycho-storybook';
-import CommonContext from '../../configs/CommonContext';
-import DateUtils from '../../functions/DateUtils';
-import CommentService from './CommentService';
-import './style.scss';
-export default function CommentInfo({ comment, hasEditAccess = true, onRemove, onUpdate, onEdit, onReply, }) {
-    const { t } = useTranslation('comments');
-    const { state } = useContext(CommonContext);
-    const handleMarkRead = () => {
-        CommentService.markRead(comment.id).then((r) => {
-            onUpdate(r.data);
-        });
-    };
-    const handleRemove = () => {
-        CommentService.remove(comment.id).then(() => {
-            onRemove();
-        });
-    };
-    const isNotRead = (thisComment) => {
-        if (!thisComment.requested)
-            return false;
-        const requested = thisComment.requested.find((r) => r.uid === state.logged?.uid);
-        if (!requested)
-            return false;
-        return !requested.read;
-    };
-    const displayDate = comment.edited || comment.date;
-    const fullDateTitle = DateUtils.formatDateTime(displayDate, 'MM/dd/yyyy - HH:mm');
-    return (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "comment-header", children: [_jsx(Avatar, { title: comment.name, src: comment.picture, size: "x-small" }), _jsxs("div", { className: "meta", children: [_jsx("span", { className: "name", children: comment.name }), _jsxs("span", { className: "timestamp", title: fullDateTitle, children: [t('label.on'), ' ', DateUtils.formatDateTime(displayDate, 'MMM d')] })] }), _jsxs("div", { className: "buttons", children: [comment.edited && (_jsx(Tag, { text: t('label.edited'), color: "blue", size: "small" })), hasEditAccess && !comment.reply && (_jsx(IconButton, { size: "x-small", onClick: onReply, title: t('tooltip.reply'), name: "reply" })), hasEditAccess && state.logged?.uid === comment.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "x-small", onClick: onEdit, title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: "x-small", onClick: handleRemove, title: t('tooltip.delete'), name: "delete" })] })), isNotRead(comment) && (_jsx(IconButton, { size: "x-small", onClick: handleMarkRead, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "comment-body", children: [_jsx("div", { className: "text", "data-color-mode": "light", children: _jsx(MDEditor.Markdown, { source: comment.value }) }), comment.requested && (_jsxs("div", { className: "meta-line", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: comment.requested.map((e) => e.name).join(', ') })] }))] })] }));
-}