@a3s-lab/office 0.1.0

package/dist/0~4595.js

@@ -0,0 +1,1162 @@
+import { Fragment as jsx_runtime_Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Check, ChevronDown, ChevronLeft, ChevronRight, Eye, Minus, Plus, X } from "lucide-react";
+import { moveOfficeMenuFocus, useDialogFocusScope, icon_button_IconButton, Popover, matchesAriaKeyShortcuts, officeOverlayPortalRoot } from "./0~9512.js";
+const CONTEXT_MENU_MARGIN = 8;
+const CONTEXT_MENU_TAB_STOP_SELECTOR = 'a[href]:not([tabindex="-1"]), button:not(:disabled):not([tabindex="-1"]), input:not(:disabled):not([type="hidden"]):not([tabindex="-1"]), select:not(:disabled):not([tabindex="-1"]), textarea:not(:disabled):not([tabindex="-1"]), [contenteditable="true"]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])';
+function isWorkspaceContextMenuKeyboardEvent({ key, shiftKey }) {
+    return 'ContextMenu' === key || 'F10' === key && shiftKey;
+}
+function workspaceContextMenuPosition(event, keyboardAnchorBounds) {
+    if ('clientX' in event && (0 !== event.clientX || 0 !== event.clientY)) return {
+        x: event.clientX,
+        y: event.clientY
+    };
+    const target = event.target instanceof HTMLElement ? event.target : event.currentTarget;
+    const bounds = usableContextMenuBounds(keyboardAnchorBounds) ?? contextMenuSelectionBounds(target.ownerDocument, target) ?? target.getBoundingClientRect();
+    return {
+        x: bounds.left + bounds.width / 2,
+        y: bounds.top + bounds.height / 2
+    };
+}
+function usableContextMenuBounds(bounds) {
+    if (!bounds) return null;
+    const values = [
+        bounds.left,
+        bounds.top,
+        bounds.width,
+        bounds.height
+    ];
+    return values.every(Number.isFinite) && bounds.width >= 0 && bounds.height > 0 ? bounds : null;
+}
+function WorkspaceContextMenu({ label, className = '', x, y, items, onClose, onRestoreFocus }) {
+    const menuRef = useRef(null);
+    const restoreFocusRef = useRef(null);
+    const portalRootRef = useRef(null);
+    const [position, setPosition] = useState({
+        left: x,
+        top: y
+    });
+    if (!portalRootRef.current && "u" > typeof document) portalRootRef.current = contextMenuPortalRoot(document, x, y);
+    const positionMenu = useCallback(()=>{
+        const menu = menuRef.current;
+        if (!menu) return;
+        const ownerDocument = menu.ownerDocument;
+        const view = ownerDocument.defaultView;
+        if (!view) return;
+        const bounds = menu.getBoundingClientRect();
+        const available = contextMenuAvailableBounds(ownerDocument, view, portalRootRef.current);
+        const requested = contextMenuRequestedPosition(x, y, restoreFocusRef.current);
+        setPosition({
+            left: clampCoordinate(requested.x, available.left + CONTEXT_MENU_MARGIN, available.right - bounds.width - CONTEXT_MENU_MARGIN),
+            top: clampCoordinate(requested.y, available.top + CONTEXT_MENU_MARGIN, available.bottom - bounds.height - CONTEXT_MENU_MARGIN)
+        });
+    }, [
+        x,
+        y
+    ]);
+    useLayoutEffect(()=>{
+        const menu = menuRef.current;
+        if (!menu) return;
+        const ownerDocument = menu.ownerDocument;
+        const view = ownerDocument.defaultView;
+        if (!restoreFocusRef.current) restoreFocusRef.current = ownerDocument.activeElement instanceof HTMLElement ? ownerDocument.activeElement : null;
+        positionMenu();
+        menu.querySelector('button:not(:disabled)')?.focus();
+        view?.addEventListener('resize', positionMenu);
+        view?.visualViewport?.addEventListener('resize', positionMenu);
+        view?.visualViewport?.addEventListener('scroll', positionMenu);
+        return ()=>{
+            view?.removeEventListener('resize', positionMenu);
+            view?.visualViewport?.removeEventListener('resize', positionMenu);
+            view?.visualViewport?.removeEventListener('scroll', positionMenu);
+        };
+    }, [
+        positionMenu
+    ]);
+    useEffect(()=>{
+        const menu = menuRef.current;
+        if (!menu) return;
+        const ownerDocument = menu.ownerDocument;
+        const view = ownerDocument.defaultView;
+        const closeFromOutside = (event)=>{
+            const currentMenu = menuRef.current;
+            if (!currentMenu || event.composedPath().includes(currentMenu)) return;
+            onClose();
+        };
+        const closeFromScroll = (event)=>{
+            if (menuRef.current?.contains(event.target)) return;
+            onClose();
+        };
+        ownerDocument.addEventListener('pointerdown', closeFromOutside, true);
+        ownerDocument.addEventListener('scroll', closeFromScroll, true);
+        view?.addEventListener('blur', onClose);
+        return ()=>{
+            ownerDocument.removeEventListener('pointerdown', closeFromOutside, true);
+            ownerDocument.removeEventListener('scroll', closeFromScroll, true);
+            view?.removeEventListener('blur', onClose);
+        };
+    }, [
+        onClose
+    ]);
+    const moveFocus = (direction)=>{
+        const buttons = [
+            ...menuRef.current?.querySelectorAll('button:not(:disabled)') ?? []
+        ];
+        if (!buttons.length) return;
+        const activeElement = menuRef.current?.ownerDocument.activeElement;
+        const current = buttons.indexOf(activeElement);
+        const next = current < 0 ? 0 : (current + direction + buttons.length) % buttons.length;
+        buttons[next]?.focus();
+    };
+    const restoreContextFocus = ()=>{
+        if (onRestoreFocus) return void onRestoreFocus();
+        const restoreFocus = restoreFocusRef.current;
+        if (restoreFocus?.isConnected) restoreFocus.focus({
+            preventScroll: true
+        });
+    };
+    const dismissAndRestoreFocus = ()=>{
+        onClose();
+        restoreContextFocus();
+    };
+    const dismissAndMoveFocus = (direction)=>{
+        const menu = menuRef.current;
+        const restoreFocus = restoreFocusRef.current;
+        const next = adjacentContextMenuTabStop(restoreFocus, direction, menu);
+        const view = menu?.ownerDocument.defaultView;
+        onClose();
+        const focus = ()=>{
+            const target = next?.isConnected ? next : restoreFocus;
+            if (target?.isConnected) target.focus({
+                preventScroll: true
+            });
+        };
+        if (view) view.requestAnimationFrame(focus);
+        else focus();
+    };
+    const portalRoot = portalRootRef.current;
+    if (!portalRoot) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+        ref: menuRef,
+        className: `work-office-context-menu workspace-context-menu ${className}`.trim(),
+        role: "menu",
+        "aria-label": label,
+        "aria-orientation": "vertical",
+        "data-office-shortcuts": "ignore",
+        style: position,
+        onContextMenu: (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        onKeyDown: (event)=>{
+            const shortcutItem = event.repeat || event.nativeEvent.isComposing ? void 0 : items.find((item)=>!item.disabled && matchesAriaKeyShortcuts(event.nativeEvent, item.ariaKeyShortcut));
+            if (shortcutItem) {
+                event.preventDefault();
+                event.stopPropagation();
+                dismissAndRestoreFocus();
+                shortcutItem.onSelect();
+            } else if ('Escape' === event.key) {
+                event.preventDefault();
+                event.stopPropagation();
+                dismissAndRestoreFocus();
+            } else if ('Tab' === event.key) {
+                event.preventDefault();
+                event.stopPropagation();
+                dismissAndMoveFocus(event.shiftKey ? -1 : 1);
+            } else if ('ArrowDown' === event.key) {
+                event.preventDefault();
+                moveFocus(1);
+            } else if ('ArrowUp' === event.key) {
+                event.preventDefault();
+                moveFocus(-1);
+            } else if ('Home' === event.key || 'End' === event.key) {
+                event.preventDefault();
+                const buttons = [
+                    ...menuRef.current?.querySelectorAll('button:not(:disabled)') ?? []
+                ];
+                ('Home' === event.key ? buttons[0] : buttons.at(-1))?.focus();
+            }
+        },
+        children: items.map((item)=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    item.separatorBefore && /*#__PURE__*/ jsx("hr", {
+                        className: "workspace-context-menu-separator"
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        type: "button",
+                        role: "menuitem",
+                        tabIndex: -1,
+                        className: item.danger ? 'danger' : void 0,
+                        disabled: item.disabled,
+                        "aria-label": item.label,
+                        "aria-keyshortcuts": item.ariaKeyShortcut,
+                        onClick: ()=>{
+                            onClose();
+                            restoreContextFocus();
+                            item.onSelect();
+                        },
+                        children: [
+                            item.icon,
+                            /*#__PURE__*/ jsx("span", {
+                                children: item.label
+                            }),
+                            item.shortcut && /*#__PURE__*/ jsx("kbd", {
+                                children: item.shortcut
+                            })
+                        ]
+                    })
+                ]
+            }, item.id))
+    }), portalRoot);
+}
+function contextMenuSelectionBounds(ownerDocument, target) {
+    const selection = ownerDocument.getSelection?.();
+    if (!selection || selection.isCollapsed || 0 === selection.rangeCount) return null;
+    const range = selection.getRangeAt(0);
+    if (!target.contains(range.commonAncestorContainer)) return null;
+    if ('function' != typeof range.getBoundingClientRect) return null;
+    const bounds = range.getBoundingClientRect();
+    return bounds.width > 0 || bounds.height > 0 ? bounds : null;
+}
+function contextMenuRequestedPosition(x, y, anchor) {
+    if (0 !== x || 0 !== y || !anchor) return {
+        x,
+        y
+    };
+    const bounds = contextMenuSelectionBounds(anchor.ownerDocument, anchor) ?? anchor.getBoundingClientRect();
+    return {
+        x: bounds.left + bounds.width / 2,
+        y: bounds.top + bounds.height / 2
+    };
+}
+function adjacentContextMenuTabStop(origin, direction, menu) {
+    if (!origin) return null;
+    const ownerDocument = origin.ownerDocument;
+    const view = ownerDocument.defaultView;
+    const tabStops = [
+        ...ownerDocument.querySelectorAll(CONTEXT_MENU_TAB_STOP_SELECTOR)
+    ].filter((element)=>!menu?.contains(element) && !element.closest('[hidden], [inert], [aria-hidden="true"]') && 'true' !== element.getAttribute('aria-disabled') && view?.getComputedStyle(element).display !== 'none' && view?.getComputedStyle(element).visibility !== 'hidden');
+    const index = tabStops.indexOf(origin);
+    if (index >= 0) return tabStops[index + direction] ?? null;
+    const nodeApi = view?.Node;
+    if (!nodeApi) return null;
+    const relation = 1 === direction ? nodeApi.DOCUMENT_POSITION_FOLLOWING : nodeApi.DOCUMENT_POSITION_PRECEDING;
+    const ordered = 1 === direction ? tabStops : [
+        ...tabStops
+    ].reverse();
+    return ordered.find((element)=>Boolean(origin.compareDocumentPosition(element) & relation)) ?? null;
+}
+function contextMenuPortalRoot(ownerDocument, x, y) {
+    const elementAtPoint = ownerDocument.elementFromPoint?.(x, y);
+    const activeElement = ownerDocument.activeElement;
+    return officeOverlayPortalRoot(ownerDocument, elementAtPoint, activeElement instanceof Element ? activeElement : null);
+}
+function contextMenuAvailableBounds(ownerDocument, view, portalRoot) {
+    const viewport = view.visualViewport;
+    const viewportBounds = {
+        left: viewport?.offsetLeft ?? 0,
+        top: viewport?.offsetTop ?? 0,
+        right: (viewport?.offsetLeft ?? 0) + (viewport?.width ?? view.innerWidth),
+        bottom: (viewport?.offsetTop ?? 0) + (viewport?.height ?? view.innerHeight)
+    };
+    if (!portalRoot || portalRoot === ownerDocument.body || portalRoot === ownerDocument.documentElement) return viewportBounds;
+    const rootBounds = portalRoot.getBoundingClientRect();
+    if (rootBounds.width <= 0 || rootBounds.height <= 0) return viewportBounds;
+    return {
+        left: Math.max(viewportBounds.left, rootBounds.left),
+        top: Math.max(viewportBounds.top, rootBounds.top),
+        right: Math.min(viewportBounds.right, rootBounds.right),
+        bottom: Math.min(viewportBounds.bottom, rootBounds.bottom)
+    };
+}
+function clampCoordinate(value, minimum, maximum) {
+    return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)));
+}
+function Dialog({ title, description, children, footer, onClose, closeDisabled = false, className, focusKey, restoreFocusTarget }) {
+    const titleId = useId();
+    const descriptionId = useId();
+    const portalRootRef = useRef(null);
+    if (!portalRootRef.current && "u" > typeof document) portalRootRef.current = officeOverlayPortalRoot(document, restoreFocusTarget?.());
+    const focusScope = useDialogFocusScope({
+        onEscape: onClose,
+        escapeDisabled: closeDisabled,
+        restoreFocusTarget
+    });
+    useEffect(()=>{
+        if (void 0 !== focusKey) focusScope.focusInitial();
+    }, [
+        focusKey,
+        focusScope.focusInitial
+    ]);
+    const dialog = /*#__PURE__*/ jsx("dialog", {
+        open: true,
+        className: "ds-dialog-backdrop",
+        role: "presentation",
+        onCancel: (event)=>{
+            event.preventDefault();
+            if (!closeDisabled) onClose();
+        },
+        children: /*#__PURE__*/ jsxs("section", {
+            ref: focusScope.scopeRef,
+            className: `ds-dialog${className ? ` ${className}` : ''}`,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description ? descriptionId : void 0,
+            onKeyDown: focusScope.handleKeyDown,
+            children: [
+                /*#__PURE__*/ jsxs("header", {
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            children: [
+                                /*#__PURE__*/ jsx("h2", {
+                                    id: titleId,
+                                    children: title
+                                }),
+                                description && /*#__PURE__*/ jsx("p", {
+                                    id: descriptionId,
+                                    children: description
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(icon_button_IconButton, {
+                            label: "关闭",
+                            disabled: closeDisabled,
+                            onClick: onClose,
+                            children: /*#__PURE__*/ jsx(X, {
+                                size: 16
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "ds-dialog-body",
+                    children: children
+                }),
+                footer && /*#__PURE__*/ jsx("footer", {
+                    children: footer
+                })
+            ]
+        })
+    });
+    return "u" > typeof document && portalRootRef.current ? /*#__PURE__*/ createPortal(dialog, portalRootRef.current) : dialog;
+}
+function OfficeSelect({ ariaLabel, value, options, onValueChange, disabled = false, placeholder = '请选择', className = '' }) {
+    const reactId = useId().replaceAll(':', '');
+    const [open, setOpen] = useState(false);
+    const selectedIndex = useMemo(()=>options.findIndex((option)=>option.value === value), [
+        options,
+        value
+    ]);
+    const [activeIndex, setActiveIndex] = useState(Math.max(0, selectedIndex));
+    const selected = options[selectedIndex];
+    const openAt = (index)=>{
+        const next = nearestEnabledOption(options, index, 1);
+        setActiveIndex(next);
+        setOpen(true);
+        requestAnimationFrame(()=>document.getElementById(`${reactId}-option-${next}`)?.focus());
+    };
+    const selectOption = (index, close)=>{
+        const option = options[index];
+        if (!option || option.disabled) return;
+        close();
+        onValueChange(option.value);
+    };
+    const moveOptionFocus = (event, direction)=>{
+        event.preventDefault();
+        const next = nearestEnabledOption(options, activeIndex + direction, direction);
+        setActiveIndex(next);
+        document.getElementById(`${reactId}-option-${next}`)?.focus();
+    };
+    return /*#__PURE__*/ jsx(Popover, {
+        label: ariaLabel,
+        panelLabel: ariaLabel,
+        panelRole: "listbox",
+        portal: true,
+        className: `work-office-select${className ? ` ${className}` : ''}`,
+        panelClassName: "work-office-select-menu",
+        open: open,
+        disabled: disabled,
+        onOpenChange: setOpen,
+        trigger: (triggerProps, { open: popoverOpen })=>/*#__PURE__*/ jsxs("button", {
+                ...triggerProps,
+                role: "combobox",
+                "aria-expanded": popoverOpen,
+                onClick: (event)=>{
+                    if (!popoverOpen) {
+                        const next = nearestEnabledOption(options, selectedIndex >= 0 ? selectedIndex : 0, 1);
+                        setActiveIndex(next);
+                        requestAnimationFrame(()=>document.getElementById(`${reactId}-option-${next}`)?.focus());
+                    }
+                    triggerProps.onClick(event);
+                },
+                onKeyDown: (event)=>{
+                    if ('ArrowDown' === event.key) {
+                        event.preventDefault();
+                        openAt(selectedIndex >= 0 ? selectedIndex + 1 : 0);
+                    } else if ('ArrowUp' === event.key) {
+                        event.preventDefault();
+                        openAt(selectedIndex >= 0 ? selectedIndex - 1 : options.length - 1);
+                    } else if (isOfficeSelectSearchKey(event)) {
+                        const next = matchingOptionIndex(options, event.key, selectedIndex >= 0 ? selectedIndex + 1 : 0);
+                        if (next >= 0) {
+                            event.preventDefault();
+                            openAt(next);
+                        }
+                    }
+                },
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        style: selected?.previewStyle,
+                        children: selected?.label ?? placeholder
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        size: 13,
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+        children: (close)=>/*#__PURE__*/ jsx(jsx_runtime_Fragment, {
+                children: options.map((option, index)=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            option.group && options[index - 1]?.group !== option.group && /*#__PURE__*/ jsx("div", {
+                                className: "work-office-select-group-label",
+                                role: "presentation",
+                                children: option.group
+                            }),
+                            /*#__PURE__*/ jsxs("button", {
+                                type: "button",
+                                role: "option",
+                                id: `${reactId}-option-${index}`,
+                                "aria-label": option.label,
+                                "aria-selected": option.value === value,
+                                disabled: option.disabled,
+                                tabIndex: index === activeIndex ? 0 : -1,
+                                onClick: ()=>selectOption(index, close),
+                                onFocus: ()=>setActiveIndex(index),
+                                onKeyDown: (event)=>{
+                                    if ('ArrowDown' === event.key) moveOptionFocus(event, 1);
+                                    else if ('ArrowUp' === event.key) moveOptionFocus(event, -1);
+                                    else if ('Home' === event.key) {
+                                        event.preventDefault();
+                                        const next = nearestEnabledOption(options, 0, 1);
+                                        setActiveIndex(next);
+                                        document.getElementById(`${reactId}-option-${next}`)?.focus();
+                                    } else if ('End' === event.key) {
+                                        event.preventDefault();
+                                        const next = nearestEnabledOption(options, options.length - 1, -1);
+                                        setActiveIndex(next);
+                                        document.getElementById(`${reactId}-option-${next}`)?.focus();
+                                    } else if ('Enter' === event.key || ' ' === event.key) {
+                                        event.preventDefault();
+                                        selectOption(index, close);
+                                    } else if (isOfficeSelectSearchKey(event)) {
+                                        const next = matchingOptionIndex(options, event.key, index + 1);
+                                        if (next >= 0) {
+                                            event.preventDefault();
+                                            setActiveIndex(next);
+                                            document.getElementById(`${reactId}-option-${next}`)?.focus();
+                                        }
+                                    }
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "work-office-select-option-copy",
+                                        style: option.previewStyle,
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "work-office-select-option-label",
+                                                children: option.label
+                                            }),
+                                            option.meta && /*#__PURE__*/ jsx("small", {
+                                                children: option.meta
+                                            })
+                                        ]
+                                    }),
+                                    option.value === value && /*#__PURE__*/ jsx(Check, {
+                                        size: 12,
+                                        "aria-hidden": "true"
+                                    })
+                                ]
+                            })
+                        ]
+                    }, option.value))
+            })
+    });
+}
+function isOfficeSelectSearchKey(event) {
+    return Boolean(!event.nativeEvent.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey && 1 === event.key.length && event.key.trim());
+}
+function matchingOptionIndex(options, query, requestedIndex) {
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    if (!normalizedQuery || !options.length) return -1;
+    for(let offset = 0; offset < options.length; offset += 1){
+        const index = (requestedIndex + offset + options.length) % options.length;
+        const option = options[index];
+        if (option && !option.disabled && [
+            option.label,
+            option.searchText ?? ''
+        ].join(' ').toLocaleLowerCase().split(/\s+/).some((term)=>term.startsWith(normalizedQuery))) return index;
+    }
+    return -1;
+}
+function nearestEnabledOption(options, requestedIndex, direction) {
+    if (0 === options.length) return 0;
+    for(let offset = 0; offset < options.length; offset += 1){
+        const index = (requestedIndex + offset * direction + 2 * options.length) % options.length;
+        if (!options[index]?.disabled) return index;
+    }
+    return 0;
+}
+function useTabNavigation({ items, onChange }) {
+    const elementRefs = useRef(new Map());
+    const setTabElement = useCallback((id, element)=>{
+        if (element) elementRefs.current.set(id, element);
+        else elementRefs.current.delete(id);
+    }, []);
+    const getTabElement = useCallback((id)=>elementRefs.current.get(id), []);
+    const handleTabKeyDown = useCallback((event, currentId)=>{
+        const enabledItems = items.filter((item)=>!item.disabled);
+        if (!enabledItems.length) return;
+        const currentIndex = enabledItems.findIndex((item)=>item.id === currentId);
+        if (currentIndex < 0) return;
+        let nextIndex = null;
+        if ('ArrowRight' === event.key) nextIndex = (currentIndex + 1) % enabledItems.length;
+        if ('ArrowLeft' === event.key) nextIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+        if ('Home' === event.key) nextIndex = 0;
+        if ('End' === event.key) nextIndex = enabledItems.length - 1;
+        if (null === nextIndex) return;
+        event.preventDefault();
+        const nextItem = enabledItems[nextIndex];
+        elementRefs.current.get(nextItem.id)?.focus();
+        onChange(nextItem.id);
+    }, [
+        items,
+        onChange
+    ]);
+    return {
+        getTabElement,
+        handleTabKeyDown,
+        setTabElement
+    };
+}
+function Tabs({ ariaLabel, value, items, onChange, variant = 'segment', size = 'standard', className = '', containerRef }) {
+    const tabNavigation = useTabNavigation({
+        items,
+        onChange
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        className: `ds-tabs ${variant} ${size}${className ? ` ${className}` : ''}`,
+        role: "tablist",
+        "aria-label": ariaLabel,
+        children: items.map((item)=>{
+            const selected = item.id === value;
+            return /*#__PURE__*/ jsxs("button", {
+                ref: (element)=>{
+                    tabNavigation.setTabElement(item.id, element);
+                },
+                type: "button",
+                role: "tab",
+                id: item.tabId,
+                "data-tab-id": item.id,
+                "aria-label": item.label,
+                "aria-selected": selected,
+                "aria-controls": item.panelId,
+                tabIndex: selected ? 0 : -1,
+                disabled: item.disabled,
+                onClick: ()=>onChange(item.id),
+                onKeyDown: (event)=>tabNavigation.handleTabKeyDown(event, item.id),
+                children: [
+                    item.icon && /*#__PURE__*/ jsx("span", {
+                        className: "ds-tabs-icon",
+                        "aria-hidden": "true",
+                        children: item.icon
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: `ds-tabs-label${item.compactLabel ? ' has-compact' : ''}`,
+                        children: item.label
+                    }),
+                    item.compactLabel && /*#__PURE__*/ jsx("span", {
+                        className: "ds-tabs-label-compact",
+                        "aria-hidden": "true",
+                        children: item.compactLabel
+                    }),
+                    void 0 !== item.badge && /*#__PURE__*/ jsxs(jsx_runtime_Fragment, {
+                        children: [
+                            ' ',
+                            /*#__PURE__*/ jsx("span", {
+                                className: "ds-tabs-badge",
+                                children: item.badge
+                            })
+                        ]
+                    })
+                ]
+            }, item.id);
+        })
+    });
+}
+function OfficeSlider({ ariaLabel, value, min, max, step = 1, onValueChange, disabled = false, className = '' }) {
+    const trackRef = useRef(null);
+    const percentage = max === min ? 0 : (value - min) / (max - min) * 100;
+    const commit = (next)=>onValueChange(roundSliderValue(Math.min(max, Math.max(min, next)), step));
+    const commitPointer = (event)=>{
+        if (disabled) return;
+        const bounds = trackRef.current?.getBoundingClientRect();
+        if (!bounds || 0 === bounds.width) return;
+        commit(min + (event.clientX - bounds.left) / bounds.width * (max - min));
+    };
+    const handleKey = (event)=>{
+        if (disabled) return;
+        if ('ArrowRight' === event.key || 'ArrowUp' === event.key) {
+            event.preventDefault();
+            commit(value + step);
+        } else if ('ArrowLeft' === event.key || 'ArrowDown' === event.key) {
+            event.preventDefault();
+            commit(value - step);
+        } else if ('Home' === event.key) {
+            event.preventDefault();
+            commit(min);
+        } else if ('End' === event.key) {
+            event.preventDefault();
+            commit(max);
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ref: trackRef,
+        className: `work-office-slider ${disabled ? 'disabled' : ''} ${className}`.trim(),
+        role: "slider",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": ariaLabel,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-disabled": disabled || void 0,
+        onKeyDown: handleKey,
+        onPointerDown: (event)=>{
+            event.currentTarget.setPointerCapture(event.pointerId);
+            commitPointer(event);
+        },
+        onPointerMove: (event)=>{
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) commitPointer(event);
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "work-office-slider-fill",
+                style: {
+                    width: `${Math.min(100, Math.max(0, percentage))}%`
+                }
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "work-office-slider-thumb",
+                style: {
+                    left: `${Math.min(100, Math.max(0, percentage))}%`
+                }
+            })
+        ]
+    });
+}
+function roundSliderValue(value, step) {
+    const decimalPlaces = Math.max(0, (String(step).split('.')[1] ?? '').length);
+    return Number((Math.round(value / step) * step).toFixed(decimalPlaces));
+}
+const WORK_OFFICE_RIBBON_SCROLL_INSET = 34;
+function calculateRibbonOverflow({ clientWidth, items, scrollLeft }) {
+    const lastItem = items.at(-1);
+    if (!lastItem || clientWidth <= 0) return {
+        backward: false,
+        forward: false
+    };
+    if (lastItem.right <= clientWidth - 2) return {
+        backward: false,
+        forward: false
+    };
+    return {
+        backward: scrollLeft > 2,
+        forward: lastItem.right > scrollLeft + clientWidth - 2
+    };
+}
+function calculateRibbonScrollTarget({ clientWidth, direction, items, scrollLeft }) {
+    if (!items.length || clientWidth <= 0) return scrollLeft;
+    if ((items.at(-1)?.right ?? 0) <= clientWidth - 2) return 0;
+    const visibleLeft = scrollLeft + WORK_OFFICE_RIBBON_SCROLL_INSET;
+    const visibleRight = scrollLeft + clientWidth - WORK_OFFICE_RIBBON_SCROLL_INSET;
+    const target = 1 === direction ? items.find((item)=>item.left > visibleLeft + 2 && item.right > visibleRight + 2) : [
+        ...items
+    ].reverse().find((item)=>item.left < visibleLeft - 2);
+    if (!target) return scrollLeft;
+    return Math.max(0, target.left - WORK_OFFICE_RIBBON_SCROLL_INSET);
+}
+function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange, panels, fileActions, className = '', toolbarClassName = '' }) {
+    const reactId = useId().replaceAll(':', '');
+    const [internalTab, setInternalTab] = useState(defaultTab);
+    const [ribbonOverflow, setRibbonOverflow] = useState({
+        backward: false,
+        forward: false
+    });
+    const [tabOverflow, setTabOverflow] = useState({
+        backward: false,
+        forward: false
+    });
+    const tabListRef = useRef(null);
+    const toolbarRef = useRef(null);
+    const selectedTab = activeTab ?? internalTab;
+    const selectedLabel = tabs.find((tab)=>tab.id === selectedTab)?.label ?? tabs[0]?.label ?? '';
+    const selectedPanel = panels[selectedTab];
+    const hasSelectedPanel = null != selectedPanel;
+    const updateRibbonOverflow = useCallback(()=>{
+        const toolbar = toolbarRef.current;
+        if (!toolbar) return;
+        const { backward, forward } = calculateRibbonOverflow({
+            clientWidth: toolbar.clientWidth,
+            items: ribbonItemGeometry(toolbar),
+            scrollLeft: toolbar.scrollLeft
+        });
+        if (!backward && !forward && toolbar.scrollLeft > 0) toolbar.scrollLeft = 0;
+        setRibbonOverflow((current)=>current.backward === backward && current.forward === forward ? current : {
+                backward,
+                forward
+            });
+    }, []);
+    const scrollRibbon = (direction)=>{
+        const toolbar = toolbarRef.current;
+        if (!toolbar) return;
+        toolbar.scrollLeft = calculateRibbonScrollTarget({
+            clientWidth: toolbar.clientWidth,
+            direction,
+            items: ribbonItemGeometry(toolbar),
+            scrollLeft: toolbar.scrollLeft
+        });
+        updateRibbonOverflow();
+    };
+    const updateTabOverflow = useCallback(()=>{
+        const tabList = tabListRef.current;
+        if (!tabList) return;
+        const { backward, forward } = calculateRibbonOverflow({
+            clientWidth: tabList.clientWidth,
+            items: ribbonItemGeometry(tabList),
+            scrollLeft: tabList.scrollLeft
+        });
+        if (!backward && !forward && tabList.scrollLeft > 0) tabList.scrollLeft = 0;
+        setTabOverflow((current)=>current.backward === backward && current.forward === forward ? current : {
+                backward,
+                forward
+            });
+    }, []);
+    const scrollTabs = (direction)=>{
+        const tabList = tabListRef.current;
+        if (!tabList) return;
+        tabList.scrollLeft = calculateRibbonScrollTarget({
+            clientWidth: tabList.clientWidth,
+            direction,
+            items: ribbonItemGeometry(tabList),
+            scrollLeft: tabList.scrollLeft
+        });
+        updateTabOverflow();
+    };
+    const selectTab = (tab)=>{
+        if (void 0 === activeTab) setInternalTab(tab);
+        onTabChange?.(tab);
+    };
+    useLayoutEffect(()=>{
+        const toolbar = toolbarRef.current;
+        if (!toolbar) return;
+        toolbar.scrollLeft = 0;
+        updateRibbonOverflow();
+    }, [
+        selectedTab,
+        hasSelectedPanel,
+        updateRibbonOverflow
+    ]);
+    useLayoutEffect(()=>{
+        const toolbar = toolbarRef.current;
+        if (!toolbar) return;
+        let frame = requestAnimationFrame(updateRibbonOverflow);
+        const scheduleOverflowUpdate = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(updateRibbonOverflow);
+        };
+        const resizeObserver = "u" < typeof ResizeObserver ? null : new ResizeObserver(scheduleOverflowUpdate);
+        const observeChild = (node)=>{
+            if (node instanceof Element) resizeObserver?.observe(node);
+        };
+        resizeObserver?.observe(toolbar);
+        for (const child of toolbar.children)observeChild(child);
+        const mutationObserver = "u" < typeof MutationObserver ? null : new MutationObserver((records)=>{
+            for (const record of records)for (const node of record.addedNodes)observeChild(node);
+            scheduleOverflowUpdate();
+        });
+        mutationObserver?.observe(toolbar, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true
+        });
+        window.addEventListener('resize', scheduleOverflowUpdate);
+        return ()=>{
+            cancelAnimationFrame(frame);
+            resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
+            window.removeEventListener('resize', scheduleOverflowUpdate);
+        };
+    }, [
+        hasSelectedPanel,
+        updateRibbonOverflow
+    ]);
+    useLayoutEffect(()=>{
+        const tabList = tabListRef.current;
+        if (!tabList) return;
+        let frame = requestAnimationFrame(()=>{
+            scrollSelectedRibbonTabIntoView(tabList, selectedTab);
+            updateTabOverflow();
+        });
+        const scheduleOverflowUpdate = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(updateTabOverflow);
+        };
+        const resizeObserver = "u" < typeof ResizeObserver ? null : new ResizeObserver(scheduleOverflowUpdate);
+        const observeChild = (node)=>{
+            if (node instanceof Element) resizeObserver?.observe(node);
+        };
+        resizeObserver?.observe(tabList);
+        for (const child of tabList.children)observeChild(child);
+        const mutationObserver = "u" < typeof MutationObserver ? null : new MutationObserver((records)=>{
+            for (const record of records)for (const node of record.addedNodes)observeChild(node);
+            scheduleOverflowUpdate();
+        });
+        mutationObserver?.observe(tabList, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true
+        });
+        tabList.addEventListener('scroll', updateTabOverflow);
+        window.addEventListener('resize', scheduleOverflowUpdate);
+        return ()=>{
+            cancelAnimationFrame(frame);
+            resizeObserver?.disconnect();
+            mutationObserver?.disconnect();
+            tabList.removeEventListener('scroll', updateTabOverflow);
+            window.removeEventListener('resize', scheduleOverflowUpdate);
+        };
+    }, [
+        selectedTab,
+        tabs,
+        updateTabOverflow
+    ]);
+    return /*#__PURE__*/ jsxs("section", {
+        className: `work-office-ribbon ${className}`.trim(),
+        "aria-label": ariaLabel,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "work-office-ribbon-tabs-row",
+                children: [
+                    fileActions?.length ? /*#__PURE__*/ jsx(WorkOfficeFileMenu, {
+                        actions: fileActions
+                    }) : null,
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-office-ribbon-tab-strip",
+                        children: [
+                            /*#__PURE__*/ jsx(Tabs, {
+                                ariaLabel: ariaLabel,
+                                value: selectedTab,
+                                variant: "line",
+                                size: "compact",
+                                className: "work-office-ribbon-tabs",
+                                containerRef: tabListRef,
+                                items: tabs.map((tab)=>({
+                                        ...tab,
+                                        tabId: `${reactId}-tab-${tab.id}`,
+                                        panelId: `${reactId}-panel`
+                                    })),
+                                onChange: selectTab
+                            }),
+                            (tabOverflow.backward || tabOverflow.forward) && /*#__PURE__*/ jsxs("nav", {
+                                className: "work-office-ribbon-tab-navigation",
+                                "aria-label": "功能区标签翻页",
+                                children: [
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        "aria-label": "向左查看更多功能区标签",
+                                        disabled: !tabOverflow.backward,
+                                        onClick: ()=>scrollTabs(-1),
+                                        children: /*#__PURE__*/ jsx(ChevronLeft, {
+                                            size: 14
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx("button", {
+                                        type: "button",
+                                        "aria-label": "向右查看更多功能区标签",
+                                        disabled: !tabOverflow.forward,
+                                        onClick: ()=>scrollTabs(1),
+                                        children: /*#__PURE__*/ jsx(ChevronRight, {
+                                            size: 14
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                id: `${reactId}-panel`,
+                className: "work-office-ribbon-panel",
+                "data-empty": hasSelectedPanel ? void 0 : 'true',
+                role: "tabpanel",
+                "aria-labelledby": `${reactId}-tab-${selectedTab}`,
+                children: hasSelectedPanel && /*#__PURE__*/ jsxs(jsx_runtime_Fragment, {
+                    children: [
+                        ribbonOverflow.backward && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "work-office-ribbon-scroll previous",
+                            "aria-label": `向左查看更多${selectedLabel}工具`,
+                            onClick: ()=>scrollRibbon(-1),
+                            children: /*#__PURE__*/ jsx(ChevronLeft, {
+                                size: 15
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            ref: toolbarRef,
+                            className: `work-office-toolbar ${toolbarClassName}`.trim(),
+                            "data-has-overflow": ribbonOverflow.backward || ribbonOverflow.forward ? 'true' : void 0,
+                            role: "toolbar",
+                            "aria-label": `${selectedLabel}工具栏`,
+                            onScroll: updateRibbonOverflow,
+                            children: selectedPanel
+                        }),
+                        ribbonOverflow.forward && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "work-office-ribbon-scroll next",
+                            "aria-label": `向右查看更多${selectedLabel}工具`,
+                            onClick: ()=>scrollRibbon(1),
+                            children: /*#__PURE__*/ jsx(ChevronRight, {
+                                size: 15
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function ribbonItemGeometry(toolbar) {
+    return Array.from(toolbar.children).flatMap((element)=>element instanceof HTMLElement ? [
+            {
+                left: element.offsetLeft,
+                right: element.offsetLeft + element.offsetWidth
+            }
+        ] : []);
+}
+function scrollSelectedRibbonTabIntoView(tabList, selectedTab) {
+    const selected = Array.from(tabList.children).find((element)=>element instanceof HTMLElement && element.dataset.tabId === selectedTab);
+    if (!selected || tabList.clientWidth <= 0) return;
+    const inset = 8;
+    const visibleLeft = tabList.scrollLeft + inset;
+    const visibleRight = tabList.scrollLeft + tabList.clientWidth - inset;
+    const selectedLeft = selected.offsetLeft;
+    const selectedRight = selectedLeft + selected.offsetWidth;
+    if (selectedLeft < visibleLeft) tabList.scrollLeft = Math.max(0, selectedLeft - inset);
+    else if (selectedRight > visibleRight) tabList.scrollLeft = Math.max(0, selectedRight - tabList.clientWidth + inset);
+}
+function WorkOfficePreviewBar({ ariaLabel, label, detail, fileActions, className = '' }) {
+    return /*#__PURE__*/ jsxs("section", {
+        className: `work-office-preview-bar ${className}`.trim(),
+        "aria-label": ariaLabel,
+        children: [
+            fileActions?.length ? /*#__PURE__*/ jsx(WorkOfficeFileMenu, {
+                actions: fileActions
+            }) : null,
+            /*#__PURE__*/ jsxs("div", {
+                className: "work-office-preview-summary",
+                children: [
+                    /*#__PURE__*/ jsx(Eye, {
+                        size: 14,
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsx("strong", {
+                        children: label
+                    }),
+                    detail && /*#__PURE__*/ jsx("span", {
+                        children: detail
+                    })
+                ]
+            })
+        ]
+    });
+}
+function WorkOfficeFileMenu({ actions }) {
+    const [open, setOpen] = useState(false);
+    const menuRef = useRef(null);
+    const focusEdgeRef = useRef('first');
+    const focusRequestedAction = ()=>requestAnimationFrame(()=>{
+            const buttons = [
+                ...menuRef.current?.querySelectorAll('button:not(:disabled)') ?? []
+            ];
+            const button = 'last' === focusEdgeRef.current ? buttons.at(-1) : buttons[0];
+            button?.focus();
+        });
+    return /*#__PURE__*/ jsx(Popover, {
+        label: "文件",
+        panelLabel: "文件菜单",
+        panelRole: "menu",
+        portal: true,
+        className: "work-office-file-menu",
+        panelClassName: "work-office-file-popover",
+        open: open,
+        panelRef: menuRef,
+        onPanelKeyDown: moveOfficeMenuFocus,
+        onOpenChange: (nextOpen)=>{
+            setOpen(nextOpen);
+            if (nextOpen) focusRequestedAction();
+        },
+        trigger: (triggerProps, { open })=>/*#__PURE__*/ jsxs("button", {
+                ...triggerProps,
+                className: "work-office-file-trigger",
+                onKeyDown: (event)=>{
+                    if ('ArrowDown' !== event.key && 'ArrowUp' !== event.key) return;
+                    event.preventDefault();
+                    focusEdgeRef.current = 'ArrowUp' === event.key ? 'last' : 'first';
+                    if (open) focusRequestedAction();
+                    else event.currentTarget.click();
+                },
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: "文件"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        size: 12,
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+        children: (close)=>/*#__PURE__*/ jsx(jsx_runtime_Fragment, {
+                children: actions.map((action)=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            action.separatorBefore && /*#__PURE__*/ jsx("hr", {
+                                className: "work-office-file-separator"
+                            }),
+                            /*#__PURE__*/ jsxs("button", {
+                                type: "button",
+                                role: "menuitem",
+                                tabIndex: -1,
+                                disabled: action.disabled,
+                                onClick: ()=>{
+                                    close();
+                                    action.onSelect();
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "work-office-file-action-icon",
+                                        "aria-hidden": "true",
+                                        children: action.icon
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: action.label
+                                    }),
+                                    action.shortcut && /*#__PURE__*/ jsx("kbd", {
+                                        children: action.shortcut
+                                    })
+                                ]
+                            })
+                        ]
+                    }, action.id))
+            })
+    });
+}
+function WorkOfficeRibbonGroup({ label, children }) {
+    return /*#__PURE__*/ jsxs("section", {
+        className: "work-office-ribbon-group",
+        "aria-label": label,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: children
+            }),
+            /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                children: label
+            })
+        ]
+    });
+}
+function WorkOfficeRibbonButton({ label, visibleLabel = label, badge, active, displayLabel = true, className = '', title = label, children, ...props }) {
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        "aria-label": label,
+        "aria-pressed": active,
+        title: title,
+        className: `${displayLabel ? 'with-label' : ''} ${active ? 'active' : ''} ${className}`.trim(),
+        ...props,
+        children: [
+            children,
+            displayLabel && /*#__PURE__*/ jsx("span", {
+                children: visibleLabel
+            }),
+            void 0 !== badge && /*#__PURE__*/ jsx("small", {
+                className: "work-office-ribbon-badge",
+                children: badge
+            })
+        ]
+    });
+}
+function WorkOfficeStatusBar({ children, controls, className = '' }) {
+    return /*#__PURE__*/ jsxs("footer", {
+        className: `work-office-status ${className}`.trim(),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "work-office-status-info",
+                children: children
+            }),
+            controls && /*#__PURE__*/ jsx("div", {
+                className: "work-office-status-view",
+                children: controls
+            })
+        ]
+    });
+}
+function WorkOfficeZoomControls({ zoom, minimum = 50, maximum = 200, step = 10, decreaseLabel, increaseLabel, outputLabel, sliderLabel, onChange }) {
+    const clamp = (value)=>Math.min(maximum, Math.max(minimum, Math.round(value)));
+    return /*#__PURE__*/ jsxs(jsx_runtime_Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": decreaseLabel,
+                title: decreaseLabel,
+                disabled: zoom <= minimum,
+                onClick: ()=>onChange(clamp(zoom - step)),
+                children: /*#__PURE__*/ jsx(Minus, {
+                    size: 13
+                })
+            }),
+            /*#__PURE__*/ jsxs("output", {
+                "aria-label": outputLabel,
+                children: [
+                    zoom,
+                    "%"
+                ]
+            }),
+            /*#__PURE__*/ jsx(OfficeSlider, {
+                className: "work-office-status-slider",
+                ariaLabel: sliderLabel,
+                min: minimum,
+                max: maximum,
+                step: step,
+                value: zoom,
+                onValueChange: (value)=>onChange(clamp(value))
+            }),
+            /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": increaseLabel,
+                title: increaseLabel,
+                disabled: zoom >= maximum,
+                onClick: ()=>onChange(clamp(zoom + step)),
+                children: /*#__PURE__*/ jsx(Plus, {
+                    size: 13
+                })
+            })
+        ]
+    });
+}
+export { Dialog, OfficeSelect, Tabs, WorkOfficePreviewBar, WorkOfficeRibbon, WorkOfficeRibbonButton, WorkOfficeRibbonGroup, WorkOfficeStatusBar, WorkOfficeZoomControls, WorkspaceContextMenu, isWorkspaceContextMenuKeyboardEvent, workspaceContextMenuPosition };