tycho-components 0.41.0 → 0.41.1

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

@@ -33,6 +33,10 @@ export declare const CommentsTexts: {
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
     "pt-BR": {
         "label.title.comments": string;
@@ -68,6 +72,10 @@ export declare const CommentsTexts: {
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
     it: {
         "label.title.comments": string;
@@ -103,5 +111,9 @@ export declare const CommentsTexts: {
         "tab.write": string;
         "tab.preview": string;
         "placeholder.preview.empty": string;
+        "menu.undock": string;
+        "menu.dock.left": string;
+        "menu.dock.bottom": string;
+        "menu.dock.right": string;
     };
 };

package/dist/configs/localization/CommentsTexts.js

@@ -33,6 +33,10 @@ export const CommentsTexts = {
         "tab.write": "Write",
         "tab.preview": "Preview",
         "placeholder.preview.empty": "Nothing to preview",
+        "menu.undock": "Undock into separate window",
+        "menu.dock.left": "Dock to left",
+        "menu.dock.bottom": "Dock to bottom",
+        "menu.dock.right": "Dock to right",
     },
     "pt-BR": {
         "label.title.comments": "Comentários",
@@ -68,6 +72,10 @@ export const CommentsTexts = {
         "tab.write": "Escrever",
         "tab.preview": "Visualizar",
         "placeholder.preview.empty": "Nada para visualizar",
+        "menu.undock": "Desencaixar em janela separada",
+        "menu.dock.left": "Encaixar à esquerda",
+        "menu.dock.bottom": "Encaixar embaixo",
+        "menu.dock.right": "Encaixar à direita",
     },
     it: {
         "label.title.comments": "Commenti",
@@ -103,5 +111,9 @@ export const CommentsTexts = {
         "tab.write": "Scrivi",
         "tab.preview": "Anteprima",
         "placeholder.preview.empty": "Niente da visualizzare",
+        "menu.undock": "Sgancia in una finestra separata",
+        "menu.dock.left": "Aggancia a sinistra",
+        "menu.dock.bottom": "Aggancia in basso",
+        "menu.dock.right": "Aggancia a destra",
     },
 };

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

@@ -0,0 +1,24 @@
+export type DockPosition = 'left' | 'right' | 'bottom' | 'undocked';
+export type DockedPosition = Exclude<DockPosition, 'undocked'>;
+declare const CommentUtils: {
+    isDockPosition: (value: string | null) => value is DockPosition;
+    isDockedPosition: (value: DockPosition) => value is DockedPosition;
+    clampDrawerWidth: (width: number) => number;
+    clampDrawerHeight: (height: number) => number;
+    readStoredDrawerWidth: () => number;
+    readStoredDrawerHeight: () => number;
+    persistDrawerWidth: (width: number) => void;
+    persistDrawerHeight: (height: number) => void;
+    readStoredDockPosition: () => DockPosition;
+    persistDockPosition: (position: DockedPosition) => void;
+    getUndockedPopupSize: () => {
+        width: number;
+        height: number;
+    };
+    copyStylesToPopup: (popup: Window) => void;
+    openCommentsPopup: () => {
+        popup: Window;
+        container: HTMLElement;
+    } | null;
+};
+export default CommentUtils;

package/dist/features/Comments/CommentUtils.js

@@ -0,0 +1,175 @@
+const DRAWER_WIDTH_STORAGE_KEY = 'tycho-comments-drawer-width';
+const DRAWER_HEIGHT_STORAGE_KEY = 'tycho-comments-drawer-height';
+const DOCK_POSITION_STORAGE_KEY = 'tycho-comments-dock-position';
+const DRAWER_MIN_WIDTH = 320;
+const DRAWER_MIN_HEIGHT = 200;
+const POPUP_NAME = 'tycho-comments';
+const POPUP_MIN_WIDTH = 960;
+const POPUP_MIN_HEIGHT = 720;
+const isDockPosition = (value) => value === 'left' ||
+    value === 'right' ||
+    value === 'bottom' ||
+    value === 'undocked';
+const isDockedPosition = (value) => value !== 'undocked';
+const getDefaultDrawerWidth = () => {
+    if (typeof window === 'undefined')
+        return 480;
+    const { innerWidth } = window;
+    if (innerWidth <= 767)
+        return Math.round(innerWidth * 0.9);
+    if (innerWidth <= 768)
+        return Math.round(innerWidth * 0.6);
+    return Math.round(innerWidth * 0.4);
+};
+const getDefaultDrawerHeight = () => {
+    if (typeof window === 'undefined')
+        return 360;
+    return Math.round(window.innerHeight * 0.4);
+};
+const clampDrawerWidth = (width) => {
+    if (typeof window === 'undefined')
+        return width;
+    const maxWidth = Math.min(Math.round(window.innerWidth * 0.9), window.innerWidth - 48);
+    return Math.min(Math.max(width, DRAWER_MIN_WIDTH), maxWidth);
+};
+const clampDrawerHeight = (height) => {
+    if (typeof window === 'undefined')
+        return height;
+    const maxHeight = Math.min(Math.round(window.innerHeight * 0.9), window.innerHeight - 48);
+    return Math.min(Math.max(height, DRAWER_MIN_HEIGHT), maxHeight);
+};
+const readStoredDrawerWidth = () => {
+    try {
+        const stored = localStorage.getItem(DRAWER_WIDTH_STORAGE_KEY);
+        if (stored) {
+            const parsed = Number(stored);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return clampDrawerWidth(parsed);
+            }
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return clampDrawerWidth(getDefaultDrawerWidth());
+};
+const readStoredDrawerHeight = () => {
+    try {
+        const stored = localStorage.getItem(DRAWER_HEIGHT_STORAGE_KEY);
+        if (stored) {
+            const parsed = Number(stored);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return clampDrawerHeight(parsed);
+            }
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return clampDrawerHeight(getDefaultDrawerHeight());
+};
+const persistDrawerWidth = (width) => {
+    try {
+        localStorage.setItem(DRAWER_WIDTH_STORAGE_KEY, String(width));
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const persistDrawerHeight = (height) => {
+    try {
+        localStorage.setItem(DRAWER_HEIGHT_STORAGE_KEY, String(height));
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const readStoredDockPosition = () => {
+    try {
+        const stored = localStorage.getItem(DOCK_POSITION_STORAGE_KEY);
+        if (isDockPosition(stored) && stored !== 'undocked') {
+            return stored;
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return 'right';
+};
+const persistDockPosition = (position) => {
+    try {
+        localStorage.setItem(DOCK_POSITION_STORAGE_KEY, position);
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const getUndockedPopupSize = () => {
+    if (typeof window === 'undefined') {
+        return { width: POPUP_MIN_WIDTH, height: POPUP_MIN_HEIGHT };
+    }
+    const availWidth = window.screen.availWidth || window.outerWidth;
+    const availHeight = window.screen.availHeight || window.outerHeight;
+    const width = Math.min(Math.max(Math.round(availWidth * 0.75), POPUP_MIN_WIDTH), availWidth - 40);
+    const height = Math.min(Math.max(Math.round(availHeight * 0.85), POPUP_MIN_HEIGHT), availHeight - 40);
+    return { width, height };
+};
+const copyStylesToPopup = (popup) => {
+    const { document: popupDoc } = popup;
+    popupDoc.head.innerHTML = '';
+    popupDoc.title = document.title;
+    document.querySelectorAll('link[rel="stylesheet"], style').forEach((node) => {
+        popupDoc.head.appendChild(node.cloneNode(true));
+    });
+    popupDoc.body.className = document.body.className;
+    popupDoc.body.style.margin = '0';
+    popupDoc.body.style.height = '100%';
+    popupDoc.documentElement.style.height = '100%';
+    popupDoc.documentElement.style.overflow = 'hidden';
+};
+const openCommentsPopup = () => {
+    if (typeof window === 'undefined')
+        return null;
+    const { width, height } = getUndockedPopupSize();
+    const left = Math.round(window.screenX + (window.outerWidth - width) / 2);
+    const top = Math.round(window.screenY + (window.outerHeight - height) / 2);
+    const features = [
+        'popup=yes',
+        `width=${width}`,
+        `height=${height}`,
+        `left=${left}`,
+        `top=${top}`,
+    ].join(',');
+    const popup = window.open('', POPUP_NAME, features);
+    if (!popup)
+        return null;
+    try {
+        popup.resizeTo(width, height);
+        popup.moveTo(left, top);
+    }
+    catch {
+        // some browsers block resize/move on already-open named windows
+    }
+    copyStylesToPopup(popup);
+    const container = popup.document.createElement('div');
+    container.id = 'tycho-comments-root';
+    container.style.height = '100%';
+    popup.document.body.appendChild(container);
+    return { popup, container };
+};
+const CommentUtils = {
+    isDockPosition,
+    isDockedPosition,
+    clampDrawerWidth,
+    clampDrawerHeight,
+    readStoredDrawerWidth,
+    readStoredDrawerHeight,
+    persistDrawerWidth,
+    persistDrawerHeight,
+    readStoredDockPosition,
+    persistDockPosition,
+    getUndockedPopupSize,
+    copyStylesToPopup,
+    openCommentsPopup,
+};
+export default CommentUtils;

package/dist/features/Comments/Comments.js

@@ -1,48 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
+import cx from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Button, IconButton } from 'tycho-storybook';
+import { Button, DropdownMenu, IconButton } from 'tycho-storybook';
 import AppLoading from '../../common/AppLoading';
 import AppPlaceholder from '../../common/AppPlaceholder';
 import SecurityUtils from '../../functions/SecurityUtils';
 import CommentAdd from './CommentAdd';
 import CommentService from './CommentService';
 import CommentThread from './CommentThread';
+import CommentUtils from './CommentUtils';
 import './style.scss';
-const DRAWER_WIDTH_STORAGE_KEY = 'tycho-comments-drawer-width';
-const DRAWER_MIN_WIDTH = 320;
-const getDefaultDrawerWidth = () => {
-    if (typeof window === 'undefined')
-        return 480;
-    const { innerWidth } = window;
-    if (innerWidth <= 767)
-        return Math.round(innerWidth * 0.9);
-    if (innerWidth <= 768)
-        return Math.round(innerWidth * 0.6);
-    return Math.round(innerWidth * 0.4);
-};
-const clampDrawerWidth = (width) => {
-    if (typeof window === 'undefined')
-        return width;
-    const maxWidth = Math.min(Math.round(window.innerWidth * 0.9), window.innerWidth - 48);
-    return Math.min(Math.max(width, DRAWER_MIN_WIDTH), maxWidth);
-};
-const readStoredDrawerWidth = () => {
-    try {
-        const stored = localStorage.getItem(DRAWER_WIDTH_STORAGE_KEY);
-        if (stored) {
-            const parsed = Number(stored);
-            if (!Number.isNaN(parsed) && parsed > 0) {
-                return clampDrawerWidth(parsed);
-            }
-        }
-    }
-    catch {
-        // ignore storage access errors
-    }
-    return clampDrawerWidth(getDefaultDrawerWidth());
-};
+function CommentsPanel({ dockPosition, showResizeHandle, onResizePointerDown, children, }) {
+    const isHorizontal = dockPosition === 'bottom';
+    return (_jsxs("div", { className: cx('comments-container', {
+            'dock-left': dockPosition === 'left',
+            'dock-right': dockPosition === 'right',
+            'dock-bottom': dockPosition === 'bottom',
+            'dock-undocked': dockPosition === 'undocked',
+        }), id: "comment-top", children: [showResizeHandle && (_jsx("div", { className: "comments-resize-handle", onPointerDown: onResizePointerDown, role: "separator", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical', "aria-label": "Resize comments panel" })), children] }));
+}
+function CommentsHeader({ hasEditAccess, onToggleAdd, onClose, dockMenuOptions, }) {
+    const { t } = useTranslation('comments');
+    return (_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsxs("div", { className: "actions", children: [hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: onToggleAdd })), _jsx(DropdownMenu, { list: dockMenuOptions })] })] }));
+}
 export default function Comments({ uid, keywords, references, mode, onClose, onChange, initialOpenAdd = false, }) {
     const { t } = useTranslation('comments');
     const [openAddComment, setOpenAddComment] = useState(initialOpenAdd);
@@ -50,8 +33,21 @@ 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(readStoredDrawerWidth);
+    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
+    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
+    const [dockPosition, setDockPosition] = useState(CommentUtils.readStoredDockPosition);
+    const [externalContainer, setExternalContainer] = useState(null);
     const commentAddRef = useRef(null);
+    const popupRef = useRef(null);
+    const popupPollRef = useRef(null);
+    const ignorePopupCloseRef = useRef(false);
+    const lastDockedRef = useRef(null);
+    if (lastDockedRef.current === null) {
+        const initial = CommentUtils.readStoredDockPosition();
+        lastDockedRef.current = CommentUtils.isDockedPosition(initial)
+            ? initial
+            : 'right';
+    }
     const load = async () => {
         try {
             const [commentsResponse, usersResponse] = await Promise.all([
@@ -63,12 +59,120 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
         }
         catch (error) {
             console.error('Error loading comments or users', error);
-            // optionally handle specific error state here
         }
     };
     const hasEditAccess = useMemo(() => {
         return SecurityUtils.hasAccess(uid, ['ADMIN', 'EDITOR'], mode);
     }, [uid, mode]);
+    const clearPopupPoll = useCallback(() => {
+        if (popupPollRef.current != null) {
+            window.clearInterval(popupPollRef.current);
+            popupPollRef.current = null;
+        }
+    }, []);
+    const redockFromPopup = useCallback(() => {
+        clearPopupPoll();
+        popupRef.current = null;
+        setExternalContainer(null);
+        if (ignorePopupCloseRef.current) {
+            ignorePopupCloseRef.current = false;
+            return;
+        }
+        setDockPosition((prev) => {
+            if (prev !== 'undocked')
+                return prev;
+            const next = lastDockedRef.current ?? 'right';
+            CommentUtils.persistDockPosition(next);
+            return next;
+        });
+    }, [clearPopupPoll]);
+    const closePopup = useCallback(() => {
+        clearPopupPoll();
+        const popup = popupRef.current;
+        if (popup && !popup.closed) {
+            ignorePopupCloseRef.current = true;
+            popup.close();
+        }
+        popupRef.current = null;
+        setExternalContainer(null);
+    }, [clearPopupPoll]);
+    const handleClose = useCallback(() => {
+        closePopup();
+        onClose();
+    }, [closePopup, onClose]);
+    const openUndockedWindow = useCallback(() => {
+        const existing = popupRef.current;
+        if (existing && !existing.closed) {
+            existing.focus();
+            setDockPosition('undocked');
+            return;
+        }
+        const opened = CommentUtils.openCommentsPopup();
+        if (!opened)
+            return;
+        const { popup, container } = opened;
+        ignorePopupCloseRef.current = false;
+        popupRef.current = popup;
+        setExternalContainer(container);
+        setDockPosition('undocked');
+        popup.addEventListener('beforeunload', () => {
+            redockFromPopup();
+        });
+        clearPopupPoll();
+        popupPollRef.current = window.setInterval(() => {
+            if (!popupRef.current || popupRef.current.closed) {
+                redockFromPopup();
+            }
+        }, 500);
+    }, [clearPopupPoll, redockFromPopup]);
+    const setDockedPosition = useCallback((position) => {
+        lastDockedRef.current = position;
+        CommentUtils.persistDockPosition(position);
+        closePopup();
+        setDockPosition(position);
+    }, [closePopup]);
+    const dockMenuOptions = useMemo(() => [
+        {
+            label: t('menu.undock'),
+            icon: 'open_in_new',
+            disabled: dockPosition === 'undocked',
+            onClick: () => {
+                if (dockPosition === 'undocked')
+                    return;
+                openUndockedWindow();
+            },
+        },
+        {
+            label: t('menu.dock.left'),
+            icon: 'dock_to_left',
+            disabled: dockPosition === 'left',
+            onClick: () => {
+                if (dockPosition === 'left')
+                    return;
+                setDockedPosition('left');
+            },
+        },
+        {
+            label: t('menu.dock.bottom'),
+            icon: 'dock_to_bottom',
+            disabled: dockPosition === 'bottom',
+            onClick: () => {
+                if (dockPosition === 'bottom')
+                    return;
+                setDockedPosition('bottom');
+            },
+        },
+        {
+            label: t('menu.dock.right'),
+            icon: 'dock_to_right',
+            disabled: dockPosition === 'right',
+            onClick: () => {
+                if (dockPosition === 'right')
+                    return;
+                setDockedPosition('right');
+            },
+        },
+    ], [dockPosition, openUndockedWindow, setDockedPosition, t]);
     useEffect(() => {
         load();
     }, []);
@@ -83,26 +187,55 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
         });
         return () => cancelAnimationFrame(frame);
     }, [openAddComment, comments, comment, reply]);
+    useEffect(() => {
+        const onHostUnload = () => {
+            closePopup();
+        };
+        window.addEventListener('pagehide', onHostUnload);
+        window.addEventListener('beforeunload', onHostUnload);
+        return () => {
+            window.removeEventListener('pagehide', onHostUnload);
+            window.removeEventListener('beforeunload', onHostUnload);
+            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 = 'col-resize';
+        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 nextWidth = clampDrawerWidth(window.innerWidth - moveEvent.clientX);
-            setDrawerWidth(nextWidth);
+            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+            }
         };
         const onPointerUp = (upEvent) => {
-            const nextWidth = clampDrawerWidth(window.innerWidth - upEvent.clientX);
-            setDrawerWidth(nextWidth);
-            try {
-                localStorage.setItem(DRAWER_WIDTH_STORAGE_KEY, String(nextWidth));
+            const next = computeSize(upEvent.clientX, upEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+                CommentUtils.persistDrawerHeight(next);
             }
-            catch {
-                // ignore storage access errors
+            else {
+                setDrawerWidth(next);
+                CommentUtils.persistDrawerWidth(next);
             }
             document.body.style.userSelect = previousUserSelect;
             document.body.style.cursor = previousCursor;
@@ -114,41 +247,54 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
         handle.addEventListener('pointermove', onPointerMove);
         handle.addEventListener('pointerup', onPointerUp);
         handle.addEventListener('pointercancel', onPointerUp);
-    }, []);
-    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, PaperProps: {
-            className: 'comments-drawer-paper',
-            style: { width: drawerWidth },
-        }, children: _jsxs("div", { className: "comments-container", id: "comment-top", children: [_jsx("div", { className: "comments-resize-handle", onPointerDown: handleResizePointerDown, role: "separator", "aria-orientation": "vertical", "aria-label": "Resize comments panel" }), !comments ? (_jsx(AppLoading, { pageLoading: true })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
-                                            setComment(undefined);
-                                            setOpenAddComment(!openAddComment);
-                                        } })) })] }), _jsxs("div", { className: "body", children: [comments?.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty'), useMarginTop: true })), _jsx(CommentThread, { comments: comments, hasEditAccess: hasEditAccess, onRemove: (id) => {
-                                        const updated = comments.filter((c) => c.id !== id);
-                                        setComments(updated);
-                                        onChange?.(updated);
-                                    }, onUpdate: (thisComment) => {
-                                        const updated = comments.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c);
-                                        setComments(updated);
-                                        onChange?.(updated);
-                                    }, onEdit: (el) => {
-                                        setComment(el);
-                                        setOpenAddComment(true);
-                                    }, onReply: (el) => {
-                                        setReply(el);
-                                        setOpenAddComment(true);
-                                    } }), hasEditAccess && openAddComment && (_jsx("div", { ref: commentAddRef, children: _jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
-                                            setComment(undefined);
-                                            setReply(undefined);
-                                            setOpenAddComment(false);
-                                        }, onChange: (el) => {
-                                            if (!comment) {
-                                                const updated = [...(comments || []), el];
-                                                setComments(updated);
-                                                onChange?.(updated);
-                                            }
-                                            else {
-                                                const updated = comments?.map((c) => c.id === comment.id ? el : c) || [];
-                                                setComments(updated);
-                                                onChange?.(updated);
-                                            }
-                                        } }) }))] })] }))] }) }));
+    }, [dockPosition]);
+    const paperStyle = dockPosition === 'bottom'
+        ? { height: drawerHeight, width: '100%' }
+        : { width: drawerWidth };
+    const content = !comments ? (_jsx(AppLoading, { pageLoading: true })) : (_jsxs(_Fragment, { children: [_jsx(CommentsHeader, { hasEditAccess: hasEditAccess, onToggleAdd: () => {
+                    setComment(undefined);
+                    setOpenAddComment(!openAddComment);
+                }, onClose: handleClose, dockMenuOptions: dockMenuOptions }), _jsxs("div", { className: "body", children: [comments.length === 0 && !openAddComment && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty'), useMarginTop: true })), _jsx(CommentThread, { comments: comments, hasEditAccess: hasEditAccess, onRemove: (id) => {
+                            const updated = comments.filter((c) => c.id !== id);
+                            setComments(updated);
+                            onChange?.(updated);
+                        }, onUpdate: (thisComment) => {
+                            const updated = comments.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c);
+                            setComments(updated);
+                            onChange?.(updated);
+                        }, onEdit: (el) => {
+                            setComment(el);
+                            setOpenAddComment(true);
+                        }, onReply: (el) => {
+                            setReply(el);
+                            setOpenAddComment(true);
+                        } }), hasEditAccess && openAddComment && (_jsx("div", { ref: commentAddRef, children: _jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
+                                setComment(undefined);
+                                setReply(undefined);
+                                setOpenAddComment(false);
+                            }, onChange: (el) => {
+                                if (!comment) {
+                                    const updated = [...(comments || []), el];
+                                    setComments(updated);
+                                    onChange?.(updated);
+                                }
+                                else {
+                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) || [];
+                                    setComments(updated);
+                                    onChange?.(updated);
+                                }
+                            } }) }))] })] }));
+    const panel = (_jsx(CommentsPanel, { dockPosition: dockPosition, showResizeHandle: CommentUtils.isDockedPosition(dockPosition), onResizePointerDown: handleResizePointerDown, children: content }));
+    const isDocked = CommentUtils.isDockedPosition(dockPosition);
+    const drawerAnchor = isDocked
+        ? dockPosition
+        : (lastDockedRef.current ?? 'right');
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer, { anchor: drawerAnchor, open: isDocked, onClose: handleClose, slotProps: {
+                    backdrop: { invisible: true },
+                }, PaperProps: {
+                    className: cx('comments-drawer-paper', `dock-${drawerAnchor}`),
+                    style: paperStyle,
+                }, children: isDocked ? panel : null }), dockPosition === 'undocked' &&
+                externalContainer &&
+                createPortal(_jsx("div", { className: "comments-undocked-root", children: panel }), externalContainer)] }));
 }

package/dist/features/Comments/style.scss

@@ -1,8 +1,26 @@
 .comments-drawer-paper {
-  width: 40vw;
-  max-width: 90vw;
-  min-width: 320px;
   overflow: hidden;
+
+  &:not(.dock-bottom) {
+    width: 40vw;
+    max-width: 90vw;
+    min-width: 320px;
+  }
+
+  &.dock-bottom {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+    max-height: 90vh;
+    min-height: 200px;
+  }
+}
+
+.comments-undocked-root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--background-default);
 }
 
 .comments-container {
@@ -15,21 +33,12 @@
 
   > .comments-resize-handle {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 6px;
-    height: 100%;
-    cursor: col-resize;
     z-index: 2;
     touch-action: none;
 
     &::after {
       content: '';
       position: absolute;
-      top: 0;
-      left: 0;
-      width: 2px;
-      height: 100%;
       background-color: transparent;
       transition: background-color 0.15s ease;
     }
@@ -40,6 +49,51 @@
     }
   }
 
+  &.dock-right > .comments-resize-handle {
+    top: 0;
+    left: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+      top: 0;
+      left: 0;
+      width: 2px;
+      height: 100%;
+    }
+  }
+
+  &.dock-left > .comments-resize-handle {
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+
+    &::after {
+      top: 0;
+      right: 0;
+      width: 2px;
+      height: 100%;
+    }
+  }
+
+  &.dock-bottom > .comments-resize-handle {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 6px;
+    cursor: row-resize;
+
+    &::after {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+  }
+
   > .header {
     display: flex;
     align-items: center;
@@ -54,10 +108,12 @@
 
     > .actions {
       display: flex;
+      align-items: center;
       margin-left: auto;
+      gap: var(--spacing-100);
 
       .edit-button {
-        margin-right: var(--spacing-100);
+        margin-right: 0;
       }
     }
   }
@@ -181,19 +237,19 @@
 }
 
 @media (max-width: 1366px) {
-  .comments-drawer-paper {
+  .comments-drawer-paper:not(.dock-bottom) {
     width: 40vw;
   }
 }
 
 @media (max-width: 768px) {
-  .comments-drawer-paper {
+  .comments-drawer-paper:not(.dock-bottom) {
     width: 60vw;
   }
 }
 
 @media (max-width: 767px) {
-  .comments-drawer-paper {
+  .comments-drawer-paper:not(.dock-bottom) {
     width: 90vw;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.41.0",
+  "version": "0.41.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {