@a3s-lab/office 0.2.2 → 0.4.0

package/dist/{0~9512.js → 0~6090.js}

@@ -1,6 +1,8 @@
-import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { Bot, LocateFixed, UsersRound } from "lucide-react";
+import { useOfficeCollaborationPresence, useOfficeCollaborationParticipantNavigation } from "./432.js";
 const focusableSelector = 'button:not(:disabled), input:not(:disabled):not([type="hidden"]), textarea:not(:disabled), select:not(:disabled), a[href], [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
 const activeFocusScopes = [];
 const inertCounts = new WeakMap();
@@ -42,6 +44,7 @@ function useDialogFocusScope({ active = true, onEscape, escapeDisabled = false,
             if (!isTopScope(activeScope)) return;
             const currentScope = optionsRef.current.getActiveScope?.() ?? scopeRef.current;
             if (!currentScope) return;
+            if (event.target instanceof Node && currentScope.contains(event.target) && 'Escape' !== event.key && 'Tab' !== event.key) return;
             handleScopedKeyDown(event, currentScope, optionsRef.current);
         };
         const handleDocumentFocus = (event)=>{
@@ -692,6 +695,540 @@ function adjacentDocumentTabStop(current, direction, excludedRoot) {
     const index = tabStops.indexOf(current);
     return index < 0 ? null : tabStops[index + direction] ?? null;
 }
+const PRESENCE_COLORS = [
+    '#1d4ed8',
+    '#6d28d9',
+    '#be123c',
+    '#047857',
+    '#a16207',
+    '#0369a1',
+    '#9d174d',
+    '#4338ca'
+];
+const MAX_PROJECTED_PARTICIPANTS = 24;
+const MAX_TEXT_SELECTION_RECTS = 64;
+function useOfficePresenceSnapshot() {
+    const presence = useOfficeCollaborationPresence();
+    const [state, setState] = useState(()=>({
+            owner: presence,
+            snapshot: presence?.snapshot()
+        }));
+    useEffect(()=>{
+        if (!presence) return void setState({
+            owner: void 0,
+            snapshot: void 0
+        });
+        setState({
+            owner: presence,
+            snapshot: presence.snapshot()
+        });
+        return presence.subscribe((snapshot)=>setState({
+                owner: presence,
+                snapshot
+            }));
+    }, [
+        presence
+    ]);
+    return state.owner === presence ? state.snapshot : presence?.snapshot();
+}
+function useOfficeRemoteParticipants() {
+    const snapshot = useOfficePresenceSnapshot();
+    return useMemo(()=>(snapshot?.participants ?? []).filter((participant)=>!participant.local && participant.location).slice(0, MAX_PROJECTED_PARTICIPANTS), [
+        snapshot
+    ]);
+}
+function useOfficePublishPresenceLocation(location) {
+    const presence = useOfficeCollaborationPresence();
+    const locationRef = useRef(location);
+    const publishedKeyRef = useRef(null);
+    locationRef.current = location;
+    const locationKey = presenceLocationKey(location);
+    useEffect(()=>{
+        if (!presence) return;
+        const next = locationRef.current;
+        const current = presence.local().location ?? null;
+        if (presenceLocationKey(current) !== locationKey) presence.update({
+            location: next
+        });
+        publishedKeyRef.current = locationKey;
+    }, [
+        locationKey,
+        presence
+    ]);
+    useEffect(()=>()=>{
+            if (!presence || null === publishedKeyRef.current) return;
+            try {
+                const current = presence.local().location ?? null;
+                if (presenceLocationKey(current) === publishedKeyRef.current) presence.update({
+                    location: null
+                });
+            } catch  {}
+        }, [
+        presence
+    ]);
+}
+function OfficePresenceAvatar({ compact = false, participant }) {
+    const avatarUrl = safeAvatarUrl(participant.actor.avatarUrl);
+    return /*#__PURE__*/ jsxs("span", {
+        className: "work-office-collaboration-avatar",
+        "data-activity": participant.activity,
+        "data-compact": compact ? 'true' : void 0,
+        style: officePresenceColorStyle(participant),
+        "aria-hidden": "true",
+        children: [
+            'agent' === participant.actor.kind ? /*#__PURE__*/ jsx(Bot, {
+                size: compact ? 10 : 12
+            }) : /*#__PURE__*/ jsx("span", {
+                children: participantInitial(participant.actor.name)
+            }),
+            avatarUrl && /*#__PURE__*/ jsx("img", {
+                src: avatarUrl,
+                alt: "",
+                loading: "lazy",
+                referrerPolicy: "no-referrer",
+                onError: (event)=>{
+                    event.currentTarget.hidden = true;
+                }
+            })
+        ]
+    });
+}
+function officePresenceColorStyle(participant) {
+    return {
+        '--work-office-presence-color': officePresenceColor(participant)
+    };
+}
+function officePresenceColor(participant) {
+    const requested = participant.actor.color;
+    if (requested && safeCssColor(requested)) return requested;
+    let hash = 0;
+    for (const character of participant.actor.id)hash = 31 * hash + (character.codePointAt(0) ?? 0) >>> 0;
+    return PRESENCE_COLORS[hash % PRESENCE_COLORS.length] ?? PRESENCE_COLORS[0];
+}
+function OfficeTiptapPresenceLayer({ containerRef, editor, kind, markdownSurface }) {
+    const remoteParticipants = useOfficeRemoteParticipants();
+    const [geometry, setGeometry] = useState([]);
+    useLayoutEffect(()=>{
+        if (!editor || editor.isDestroyed) return void setGeometry([]);
+        let frame = null;
+        const measure = ()=>{
+            frame = null;
+            setGeometry(measureTiptapPresence(editor, containerRef.current, remoteParticipants, kind, markdownSurface));
+        };
+        const schedule = ()=>{
+            if (null !== frame) cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(measure);
+        };
+        measure();
+        editor.on('transaction', schedule);
+        window.addEventListener('resize', schedule);
+        window.addEventListener('scroll', schedule, true);
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(schedule);
+        if (containerRef.current) observer?.observe(containerRef.current);
+        observer?.observe(editor.view.dom);
+        return ()=>{
+            if (null !== frame) cancelAnimationFrame(frame);
+            editor.off('transaction', schedule);
+            window.removeEventListener('resize', schedule);
+            window.removeEventListener('scroll', schedule, true);
+            observer?.disconnect();
+        };
+    }, [
+        containerRef,
+        editor,
+        kind,
+        markdownSurface,
+        remoteParticipants
+    ]);
+    if (!geometry.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-office-remote-presence-layer",
+        "data-presence-surface": kind,
+        "aria-hidden": "true",
+        children: geometry.flatMap(({ caret, participant, ranges })=>{
+            const style = officePresenceColorStyle(participant);
+            return [
+                ...ranges.map((range, index)=>/*#__PURE__*/ jsx("span", {
+                        className: "work-office-remote-selection",
+                        "data-activity": participant.activity,
+                        "data-participant-id": participant.actor.id,
+                        style: {
+                            ...style,
+                            ...range
+                        }
+                    }, `${participant.presenceId}:range:${index}`)),
+                /*#__PURE__*/ jsx("span", {
+                    className: "work-office-remote-caret",
+                    "data-activity": participant.activity,
+                    "data-participant-id": participant.actor.id,
+                    style: {
+                        ...style,
+                        ...caret
+                    },
+                    children: /*#__PURE__*/ jsx("span", {
+                        children: participant.actor.name
+                    })
+                }, `${participant.presenceId}:caret`)
+            ];
+        })
+    });
+}
+function MarkdownSourcePresenceLayer({ markdown, sourceRef }) {
+    const remoteParticipants = useOfficeRemoteParticipants();
+    const [viewport, setViewport] = useState(null);
+    const sourceParticipants = remoteParticipants.filter((participant)=>{
+        const location = participant.location;
+        return location?.kind === 'markdown' && (location.surface ?? 'source') === 'source';
+    });
+    useLayoutEffect(()=>{
+        const source = sourceRef.current;
+        if (!source) return void setViewport(null);
+        let frame = null;
+        const measure = ()=>{
+            frame = null;
+            setViewport({
+                height: source.clientHeight,
+                left: source.offsetLeft,
+                scrollLeft: source.scrollLeft,
+                scrollTop: source.scrollTop,
+                scrollWidth: Math.max(source.clientWidth, source.scrollWidth),
+                top: source.offsetTop,
+                width: source.clientWidth
+            });
+        };
+        const schedule = ()=>{
+            if (null !== frame) cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(measure);
+        };
+        measure();
+        source.addEventListener('scroll', schedule);
+        window.addEventListener('resize', schedule);
+        const observer = "u" < typeof ResizeObserver ? null : new ResizeObserver(schedule);
+        observer?.observe(source);
+        return ()=>{
+            if (null !== frame) cancelAnimationFrame(frame);
+            source.removeEventListener('scroll', schedule);
+            window.removeEventListener('resize', schedule);
+            observer?.disconnect();
+        };
+    }, [
+        markdown,
+        sourceRef
+    ]);
+    if (!viewport || !sourceParticipants.length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-markdown-source-presence-layer",
+        "aria-hidden": "true",
+        style: {
+            height: viewport.height,
+            left: viewport.left,
+            top: viewport.top,
+            width: viewport.width
+        },
+        children: sourceParticipants.map((participant)=>{
+            const location = participant.location;
+            if (location?.kind !== 'markdown') return null;
+            if (!textPositionExists(location.anchor, markdown.length) || !textPositionExists(location.head, markdown.length)) return null;
+            const { anchor, head } = location;
+            const from = Math.min(anchor, head);
+            const to = Math.max(anchor, head);
+            const collapsed = from === to;
+            return /*#__PURE__*/ jsxs("pre", {
+                className: "work-markdown-source-presence-mirror",
+                "data-activity": participant.activity,
+                "data-participant-id": participant.actor.id,
+                style: {
+                    ...officePresenceColorStyle(participant),
+                    transform: `translate(${-viewport.scrollLeft}px, ${-viewport.scrollTop}px)`,
+                    width: viewport.scrollWidth
+                },
+                children: [
+                    markdown.slice(0, from),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "work-markdown-source-remote-range",
+                        "data-collapsed": collapsed ? 'true' : void 0,
+                        "data-participant-name": participant.actor.name,
+                        children: collapsed ? '\u200b' : markdown.slice(from, to)
+                    }),
+                    markdown.slice(to)
+                ]
+            }, participant.presenceId);
+        })
+    });
+}
+function measureTiptapPresence(editor, container, participants, kind, markdownSurface) {
+    if (!container?.isConnected || editor.isDestroyed) return [];
+    const containerBounds = container.getBoundingClientRect();
+    if (containerBounds.width <= 0 || containerBounds.height <= 0) return [];
+    const scaleX = safeElementScale(containerBounds.width, container.offsetWidth);
+    const scaleY = safeElementScale(containerBounds.height, container.offsetHeight);
+    const maximum = editor.state.doc.content.size;
+    const result = [];
+    for (const participant of participants){
+        const location = participant.location;
+        if (location?.kind !== kind) continue;
+        if ('markdown' === kind && 'markdown' === location.kind && (location.surface ?? 'source') !== markdownSurface) continue;
+        if (!textPositionExists(location.anchor, maximum) || !textPositionExists(location.head, maximum)) continue;
+        const { anchor, head } = location;
+        const from = Math.min(anchor, head);
+        const to = Math.max(anchor, head);
+        try {
+            const caretBounds = editor.view.coordsAtPos(head);
+            const caret = localPresenceRect({
+                height: Math.max(1, caretBounds.bottom - caretBounds.top),
+                left: caretBounds.left,
+                top: caretBounds.top,
+                width: 2
+            }, container, containerBounds, scaleX, scaleY);
+            const ranges = from === to ? [] : tiptapSelectionRects(editor, from, to).slice(0, MAX_TEXT_SELECTION_RECTS).map((bounds)=>localPresenceRect(bounds, container, containerBounds, scaleX, scaleY)).filter((rect)=>rect.width > 0 && rect.height > 0);
+            result.push({
+                caret,
+                participant,
+                ranges
+            });
+        } catch  {}
+    }
+    return result;
+}
+function tiptapSelectionRects(editor, from, to) {
+    const start = editor.view.domAtPos(from);
+    const end = editor.view.domAtPos(to);
+    const range = document.createRange();
+    range.setStart(start.node, start.offset);
+    range.setEnd(end.node, end.offset);
+    return Array.from(range.getClientRects());
+}
+function localPresenceRect(bounds, container, containerBounds, scaleX, scaleY) {
+    return {
+        height: Math.max(1, bounds.height / scaleY),
+        left: (bounds.left - containerBounds.left) / scaleX + container.scrollLeft,
+        top: (bounds.top - containerBounds.top) / scaleY + container.scrollTop,
+        width: Math.max(1, bounds.width / scaleX)
+    };
+}
+function safeElementScale(rendered, layout) {
+    const scale = layout > 0 ? rendered / layout : 1;
+    return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
+function textPositionExists(value, maximum) {
+    return Number.isSafeInteger(value) && value >= 0 && value <= maximum;
+}
+function presenceLocationKey(location) {
+    return location ? JSON.stringify(location) : '';
+}
+function participantInitial(name) {
+    return Array.from(name.trim())[0]?.toLocaleUpperCase() ?? '?';
+}
+function safeCssColor(value) {
+    if (/[;{}]|url\(|var\(/i.test(value)) return false;
+    if (/^#(?:[\da-f]{3}|[\da-f]{4}|[\da-f]{6}|[\da-f]{8})$/i.test(value)) return true;
+    return "u" > typeof CSS && CSS.supports('color', value);
+}
+function safeAvatarUrl(value) {
+    if (!value || "u" < typeof URL) return;
+    try {
+        const url = new URL(value, 'https://a3s.invalid/');
+        if ('https:' === url.protocol || 'http:' === url.protocol || 'blob:' === url.protocol || 'data:' === url.protocol && value.startsWith('data:image/')) return value;
+    } catch  {}
+}
+function WorkOfficeCollaborationParticipants({ variant = 'status' }) {
+    const snapshot = useOfficePresenceSnapshot();
+    const navigateToParticipant = useOfficeCollaborationParticipantNavigation();
+    const participants = useMemo(()=>orderedParticipants(snapshot?.participants ?? []), [
+        snapshot
+    ]);
+    if (!participants.length) return null;
+    const count = participants.length;
+    const summary = 1 === count ? '仅你在线' : `${count} 位协作者`;
+    const visibleParticipants = participants.slice(0, 3);
+    const overflow = Math.max(0, count - visibleParticipants.length);
+    return /*#__PURE__*/ jsx(Popover, {
+        label: `查看协作者，${summary}`,
+        panelLabel: "协作者",
+        panelRole: "dialog",
+        className: "work-office-collaboration",
+        panelClassName: "work-office-collaboration-popover",
+        placement: 'status' === variant ? 'top-end' : 'bottom-end',
+        portal: true,
+        focusFirstOnOpen: participants.some((participant)=>!participant.local && Boolean(participant.location)),
+        trigger: (triggerProps, { open })=>/*#__PURE__*/ jsxs("button", {
+                ...triggerProps,
+                className: "work-office-collaboration-trigger",
+                "data-collaboration-count": count,
+                "data-variant": variant,
+                title: `协作者：${summary}`,
+                children: [
+                    /*#__PURE__*/ jsxs("span", {
+                        className: "work-office-collaboration-stack",
+                        "aria-hidden": "true",
+                        children: [
+                            visibleParticipants.map((participant)=>/*#__PURE__*/ jsx(OfficePresenceAvatar, {
+                                    participant: participant,
+                                    compact: true
+                                }, participant.presenceId)),
+                            overflow > 0 && /*#__PURE__*/ jsxs("span", {
+                                className: "work-office-collaboration-overflow",
+                                children: [
+                                    "+",
+                                    overflow
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "work-office-collaboration-summary",
+                        children: 'status' === variant ? summary : count
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        "aria-live": "polite",
+                        children: open ? '协作者列表已打开' : `${summary}在线`
+                    })
+                ]
+            }),
+        children: (close)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "work-office-collaboration-heading",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-office-collaboration-heading-icon",
+                                children: /*#__PURE__*/ jsx(UsersRound, {
+                                    size: 16,
+                                    "aria-hidden": "true"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    /*#__PURE__*/ jsx("strong", {
+                                        children: "协作者"
+                                    }),
+                                    /*#__PURE__*/ jsxs("small", {
+                                        children: [
+                                            count,
+                                            " 个在线会话"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("ul", {
+                        className: "work-office-collaboration-list",
+                        children: participants.map((participant)=>{
+                            const locationLabel = presenceLocationLabel(participant);
+                            const navigable = !participant.local && Boolean(participant.location) && Boolean(navigateToParticipant);
+                            const content = /*#__PURE__*/ jsxs(Fragment, {
+                                children: [
+                                    /*#__PURE__*/ jsx(OfficePresenceAvatar, {
+                                        participant: participant
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "work-office-collaboration-person",
+                                        children: [
+                                            /*#__PURE__*/ jsxs("span", {
+                                                className: "work-office-collaboration-name",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("strong", {
+                                                        children: participant.actor.name
+                                                    }),
+                                                    participant.local && /*#__PURE__*/ jsx("small", {
+                                                        children: "你"
+                                                    }),
+                                                    'agent' === participant.actor.kind && /*#__PURE__*/ jsx("small", {
+                                                        children: "Agent"
+                                                    }),
+                                                    'system' === participant.actor.kind && /*#__PURE__*/ jsx("small", {
+                                                        children: "系统"
+                                                    })
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs("span", {
+                                                className: "work-office-collaboration-detail",
+                                                children: [
+                                                    presenceActivityLabel(participant.activity),
+                                                    " \xb7",
+                                                    ' ',
+                                                    presenceModeLabel(participant.mode),
+                                                    " \xb7 ",
+                                                    locationLabel
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    navigable && /*#__PURE__*/ jsx(LocateFixed, {
+                                        className: "work-office-collaboration-locate",
+                                        size: 14,
+                                        "aria-hidden": "true"
+                                    })
+                                ]
+                            });
+                            return /*#__PURE__*/ jsx("li", {
+                                "data-collaboration-participant": participant.actor.id,
+                                "data-activity": participant.activity,
+                                "data-local": participant.local ? 'true' : void 0,
+                                "data-navigable": navigable ? 'true' : void 0,
+                                children: navigable ? /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "work-office-collaboration-participant",
+                                    "aria-label": `跳转到 ${participant.actor.name} 的位置，${locationLabel}`,
+                                    onClick: ()=>{
+                                        close();
+                                        requestAnimationFrame(()=>navigateToParticipant?.(participant));
+                                    },
+                                    children: content
+                                }) : /*#__PURE__*/ jsx("span", {
+                                    className: "work-office-collaboration-participant",
+                                    children: content
+                                })
+                            }, participant.presenceId);
+                        })
+                    })
+                ]
+            })
+    });
+}
+function orderedParticipants(participants) {
+    return [
+        ...participants
+    ].sort((left, right)=>Number(right.local) - Number(left.local) || presenceActivityOrder(left.activity) - presenceActivityOrder(right.activity) || left.actor.name.localeCompare(right.actor.name) || left.clientId - right.clientId);
+}
+function presenceActivityOrder(activity) {
+    return 'active' === activity ? 0 : 'idle' === activity ? 1 : 2;
+}
+function presenceActivityLabel(activity) {
+    return 'active' === activity ? '正在使用' : 'idle' === activity ? '空闲' : '离开';
+}
+function presenceModeLabel(mode) {
+    if ('edit' === mode) return '可编辑';
+    if ('suggest' === mode) return '建议';
+    if ('comment' === mode) return '评论';
+    return '只读';
+}
+function presenceLocationLabel(participant) {
+    const location = participant.location;
+    if (!location) return '未共享位置';
+    switch(location.kind){
+        case 'document':
+        case 'markdown':
+            {
+                const selected = Math.abs(location.head - location.anchor);
+                return selected > 0 ? `已选择 ${selected} 个位置` : `位置 ${location.head + 1}`;
+            }
+        case 'spreadsheet':
+            {
+                const active = location.activeCell ?? {
+                    row: location.ranges[0]?.startRow ?? 0,
+                    column: location.ranges[0]?.startColumn ?? 0
+                };
+                return `R${active.row + 1}C${active.column + 1}`;
+            }
+        case 'presentation':
+            return location.elementIds.length > 0 ? `幻灯片中的 ${location.elementIds.length} 个对象` : '当前幻灯片';
+        case 'pdf':
+            return `第 ${location.pageIndex + 1} 页`;
+    }
+}
 const OFFICE_MENU_NAVIGATION_KEYS = [
     'ArrowDown',
     'ArrowUp',
@@ -743,4 +1280,4 @@ function useOfficeEditorWheelZoom({ enabled = true, scopeRef, onZoomIn, onZoomOu
         scopeRef
     ]);
 }
-export { CommittedOfficeTextArea, CommittedOfficeTextField, Popover, button_Button, icon_button_IconButton, matchesAriaKeyShortcuts, matchesOfficeEditorKeyboardShortcut, moveOfficeMenuFocus, officeOverlayPortalRoot, office_text_field_OfficeFileInput, office_text_field_OfficeTextArea, office_text_field_OfficeTextField, stepOfficeZoom, useDialogFocusScope, useOfficeEditorWheelZoom };
+export { CommittedOfficeTextArea, CommittedOfficeTextField, MarkdownSourcePresenceLayer, OfficePresenceAvatar, OfficeTiptapPresenceLayer, Popover, WorkOfficeCollaborationParticipants, button_Button, icon_button_IconButton, matchesAriaKeyShortcuts, matchesOfficeEditorKeyboardShortcut, moveOfficeMenuFocus, officeOverlayPortalRoot, officePresenceColor, officePresenceColorStyle, office_text_field_OfficeFileInput, office_text_field_OfficeTextArea, office_text_field_OfficeTextField, stepOfficeZoom, useDialogFocusScope, useOfficeEditorWheelZoom, useOfficePublishPresenceLocation, useOfficeRemoteParticipants };