@a3s-lab/office 0.2.2 → 0.4.0

package/dist/{0~use-office-draft.js → 0~345.js}

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function useOfficeDraft(createInitial) {
     const [initial] = useState(createInitial);
     const [draft, setDraftState] = useState(initial);
@@ -43,4 +44,32 @@ function useOfficeDraft(createInitial) {
         syncDraft
     };
 }
-export { useOfficeDraft };
+function InlineNotice({ title, children, icon, actions, tone = 'info', role, className = '' }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: `ds-inline-notice ${tone}${className ? ` ${className}` : ''}`,
+        role: role,
+        children: [
+            icon && /*#__PURE__*/ jsx("span", {
+                className: "ds-inline-notice-icon",
+                "aria-hidden": "true",
+                children: icon
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "ds-inline-notice-copy",
+                children: [
+                    title && /*#__PURE__*/ jsx("strong", {
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        children: children
+                    })
+                ]
+            }),
+            actions && /*#__PURE__*/ jsx("div", {
+                className: "ds-inline-notice-actions",
+                children: actions
+            })
+        ]
+    });
+}
+export { InlineNotice, useOfficeDraft };

package/dist/0~3539.js

@@ -7,7 +7,7 @@ import { presentationChartLegendPositionLabel, presentationChartShowsLegend, nor
 import { OfficeCheckbox, CommittedOfficeNumberField, CollectionState } from "./0~7048.js";
 import { OfficeColorPicker } from "./0~3635.js";
 import { OfficeSelect } from "./0~4595.js";
-import { office_text_field_OfficeTextField, CommittedOfficeTextField } from "./0~9512.js";
+import { office_text_field_OfficeTextField, CommittedOfficeTextField } from "./0~6090.js";
 function spreadsheetAgentMenuItems(selection, onAgentRequest, applyProposal) {
     return [
         {

package/dist/0~3557.js

@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
-import { matchesOfficeEditorKeyboardShortcut } from "./0~9512.js";
+import { matchesOfficeEditorKeyboardShortcut } from "./0~6090.js";
 const DEFAULT_EXTENSION_PRIORITY = 100;
 function createOfficeEditorExtension(config) {
     const name = config.name.trim();

package/dist/0~3635.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import { button_Button, Popover } from "./0~9512.js";
+import { button_Button, Popover } from "./0~6090.js";
 const THEME_COLORS = [
     '#111827',
     '#1f2937',

package/dist/0~4595.js

@@ -1,8 +1,8 @@
 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";
+import { Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Eye, Minus, Plus, X } from "lucide-react";
+import { WorkOfficeCollaborationParticipants, moveOfficeMenuFocus, useDialogFocusScope, icon_button_IconButton, Popover, matchesAriaKeyShortcuts, officeOverlayPortalRoot } from "./0~6090.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 }) {
@@ -542,7 +542,7 @@ function useTabNavigation({ items, onChange }) {
         setTabElement
     };
 }
-function Tabs({ ariaLabel, value, items, onChange, variant = 'segment', size = 'standard', className = '', containerRef }) {
+function Tabs({ ariaLabel, value, items, onChange, onTabDoubleClick, variant = 'segment', size = 'standard', className = '', containerRef }) {
     const tabNavigation = useTabNavigation({
         items,
         onChange
@@ -562,12 +562,14 @@ function Tabs({ ariaLabel, value, items, onChange, variant = 'segment', size = '
                 role: "tab",
                 id: item.tabId,
                 "data-tab-id": item.id,
+                "data-contextual": item.contextual ? 'true' : void 0,
                 "aria-label": item.label,
                 "aria-selected": selected,
                 "aria-controls": item.panelId,
                 tabIndex: selected ? 0 : -1,
                 disabled: item.disabled,
                 onClick: ()=>onChange(item.id),
+                onDoubleClick: ()=>onTabDoubleClick?.(item.id),
                 onKeyDown: (event)=>tabNavigation.handleTabKeyDown(event, item.id),
                 children: [
                     item.icon && /*#__PURE__*/ jsx("span", {
@@ -663,6 +665,11 @@ function roundSliderValue(value, step) {
     return Number((Math.round(value / step) * step).toFixed(decimalPlaces));
 }
 const WORK_OFFICE_RIBBON_SCROLL_INSET = 34;
+function calculateRibbonDensity(clientWidth) {
+    if (clientWidth <= 0 || clientWidth >= 1120) return 'comfortable';
+    if (clientWidth >= 760) return 'compact-low';
+    return 'compact-normal';
+}
 function calculateRibbonOverflow({ clientWidth, items, scrollLeft }) {
     const lastItem = items.at(-1);
     if (!lastItem || clientWidth <= 0) return {
@@ -689,9 +696,12 @@ function calculateRibbonScrollTarget({ clientWidth, direction, items, scrollLeft
     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 = '' }) {
+function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange, panels, fileActions, quickAccessActions, adaptive = false, collapsible = false, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, className = '', toolbarClassName = '' }) {
     const reactId = useId().replaceAll(':', '');
     const [internalTab, setInternalTab] = useState(defaultTab);
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const [temporarilyExpanded, setTemporarilyExpanded] = useState(false);
+    const [ribbonDensity, setRibbonDensity] = useState('comfortable');
     const [ribbonOverflow, setRibbonOverflow] = useState({
         backward: false,
         forward: false
@@ -702,14 +712,21 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
     });
     const tabListRef = useRef(null);
     const toolbarRef = useRef(null);
+    const ribbonRef = useRef(null);
     const selectedTab = activeTab ?? internalTab;
     const selectedLabel = tabs.find((tab)=>tab.id === selectedTab)?.label ?? tabs[0]?.label ?? '';
+    const contextualTabActive = Boolean(tabs.find((tab)=>tab.id === selectedTab)?.contextual);
     const selectedPanel = panels[selectedTab];
     const hasSelectedPanel = null != selectedPanel;
+    const collapsed = collapsible && (controlledCollapsed ?? internalCollapsed);
+    const panelExpanded = hasSelectedPanel && (!collapsed || temporarilyExpanded);
     const hasRibbonOverflow = ribbonOverflow.backward || ribbonOverflow.forward;
     const updateRibbonOverflow = useCallback(()=>{
         const toolbar = toolbarRef.current;
         if (!toolbar) return;
+        const ribbonWidth = ribbonRef.current?.clientWidth || toolbar.clientWidth;
+        const nextDensity = adaptive ? calculateRibbonDensity(ribbonWidth) : 'comfortable';
+        setRibbonDensity((current)=>current === nextDensity ? current : nextDensity);
         const { backward, forward } = calculateRibbonOverflow({
             clientWidth: toolbar.clientWidth,
             items: ribbonItemGeometry(toolbar),
@@ -720,7 +737,9 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                 backward,
                 forward
             });
-    }, []);
+    }, [
+        adaptive
+    ]);
     const scrollRibbon = (direction)=>{
         const toolbar = toolbarRef.current;
         if (!toolbar) return;
@@ -759,8 +778,29 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
     };
     const selectTab = (tab)=>{
         if (void 0 === activeTab) setInternalTab(tab);
+        if (collapsed) setTemporarilyExpanded(true);
         onTabChange?.(tab);
     };
+    const changeCollapsed = useCallback((nextCollapsed)=>{
+        if (void 0 === controlledCollapsed) setInternalCollapsed(nextCollapsed);
+        setTemporarilyExpanded(false);
+        onCollapsedChange?.(nextCollapsed);
+    }, [
+        controlledCollapsed,
+        onCollapsedChange
+    ]);
+    useEffect(()=>{
+        if (!collapsed || !temporarilyExpanded) return;
+        const closeTemporaryPanel = (event)=>{
+            if (event.target instanceof Node && ribbonRef.current?.contains(event.target)) return;
+            setTemporarilyExpanded(false);
+        };
+        document.addEventListener('pointerdown', closeTemporaryPanel, true);
+        return ()=>document.removeEventListener('pointerdown', closeTemporaryPanel, true);
+    }, [
+        collapsed,
+        temporarilyExpanded
+    ]);
     useLayoutEffect(()=>{
         const toolbar = toolbarRef.current;
         if (!toolbar) return;
@@ -768,12 +808,12 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
         updateRibbonOverflow();
     }, [
         selectedTab,
-        hasSelectedPanel,
+        panelExpanded,
         updateRibbonOverflow
     ]);
     useLayoutEffect(()=>{
         const toolbar = toolbarRef.current;
-        if (!toolbar) return;
+        if (!toolbar || !panelExpanded) return;
         let frame = requestAnimationFrame(updateRibbonOverflow);
         const scheduleOverflowUpdate = ()=>{
             cancelAnimationFrame(frame);
@@ -803,7 +843,7 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
             window.removeEventListener('resize', scheduleOverflowUpdate);
         };
     }, [
-        hasSelectedPanel,
+        panelExpanded,
         updateRibbonOverflow
     ]);
     useLayoutEffect(()=>{
@@ -848,8 +888,11 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
         updateTabOverflow
     ]);
     return /*#__PURE__*/ jsxs("section", {
+        ref: ribbonRef,
         className: `work-office-ribbon ${className}`.trim(),
         "aria-label": ariaLabel,
+        "data-collapsed": collapsed ? 'true' : void 0,
+        "data-contextual-active": contextualTabActive ? 'true' : void 0,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: "work-office-ribbon-tabs-row",
@@ -857,6 +900,9 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                     fileActions?.length ? /*#__PURE__*/ jsx(WorkOfficeFileMenu, {
                         actions: fileActions
                     }) : null,
+                    quickAccessActions?.length ? /*#__PURE__*/ jsx(WorkOfficeQuickAccessToolbar, {
+                        actions: quickAccessActions
+                    }) : null,
                     /*#__PURE__*/ jsxs("div", {
                         className: "work-office-ribbon-tab-strip",
                         children: [
@@ -872,7 +918,10 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                                         tabId: `${reactId}-tab-${tab.id}`,
                                         panelId: `${reactId}-panel`
                                     })),
-                                onChange: selectTab
+                                onChange: selectTab,
+                                onTabDoubleClick: (tab)=>{
+                                    if (collapsible && tab === selectedTab) changeCollapsed(!collapsed);
+                                }
                             }),
                             (tabOverflow.backward || tabOverflow.forward) && /*#__PURE__*/ jsxs("nav", {
                                 className: "work-office-ribbon-tab-navigation",
@@ -899,6 +948,22 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                                 ]
                             })
                         ]
+                    }),
+                    collapsible && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "work-office-ribbon-collapse",
+                        "aria-label": collapsed ? '展开功能区' : '折叠功能区',
+                        title: collapsed ? '展开功能区' : '折叠功能区',
+                        "aria-controls": `${reactId}-panel`,
+                        "aria-expanded": panelExpanded,
+                        onClick: ()=>changeCollapsed(!collapsed),
+                        children: collapsed ? /*#__PURE__*/ jsx(ChevronDown, {
+                            size: 14,
+                            "aria-hidden": "true"
+                        }) : /*#__PURE__*/ jsx(ChevronUp, {
+                            size: 14,
+                            "aria-hidden": "true"
+                        })
                     })
                 ]
             }),
@@ -906,6 +971,7 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                 id: `${reactId}-panel`,
                 className: "work-office-ribbon-panel",
                 "data-empty": hasSelectedPanel ? void 0 : 'true',
+                hidden: !panelExpanded,
                 role: "tabpanel",
                 "aria-labelledby": `${reactId}-tab-${selectedTab}`,
                 children: hasSelectedPanel && /*#__PURE__*/ jsxs(jsx_runtime_Fragment, {
@@ -923,6 +989,7 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
                         /*#__PURE__*/ jsx("div", {
                             ref: toolbarRef,
                             className: `work-office-toolbar ${toolbarClassName}`.trim(),
+                            "data-density": ribbonDensity,
                             "data-has-overflow": hasRibbonOverflow ? 'true' : void 0,
                             role: "toolbar",
                             "aria-label": `${selectedLabel}工具栏`,
@@ -945,6 +1012,25 @@ function WorkOfficeRibbon({ ariaLabel, tabs, defaultTab, activeTab, onTabChange,
         ]
     });
 }
+function WorkOfficeQuickAccessToolbar({ actions }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-office-quick-access",
+        role: "toolbar",
+        "aria-label": "快速访问工具栏",
+        children: actions.map((action)=>/*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": action.label,
+                "aria-keyshortcuts": action.ariaKeyShortcuts,
+                title: action.shortcut ? `${action.label}（${action.shortcut}）` : action.label,
+                disabled: action.disabled,
+                onClick: ()=>void action.onSelect(),
+                children: /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": "true",
+                    children: action.icon
+                })
+            }, action.id))
+    });
+}
 function ribbonItemGeometry(toolbar) {
     return Array.from(toolbar.children).flatMap((element)=>element instanceof HTMLElement ? [
             ribbonItemBounds(toolbar, element)
@@ -990,6 +1076,9 @@ function WorkOfficePreviewBar({ ariaLabel, label, detail, fileActions, className
                         children: detail
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx(WorkOfficeCollaborationParticipants, {
+                variant: "toolbar"
             })
         ]
     });
@@ -1073,10 +1162,11 @@ function WorkOfficeFileMenu({ actions }) {
             })
     });
 }
-function WorkOfficeRibbonGroup({ label, children }) {
+function WorkOfficeRibbonGroup({ label, priority = 'normal', children }) {
     return /*#__PURE__*/ jsxs("section", {
         className: "work-office-ribbon-group",
         "aria-label": label,
+        "data-priority": priority,
         children: [
             /*#__PURE__*/ jsx("div", {
                 children: children
@@ -1108,21 +1198,42 @@ function WorkOfficeRibbonButton({ label, visibleLabel = label, badge, active, di
         ]
     });
 }
-function WorkOfficeStatusBar({ children, controls, className = '' }) {
-    return /*#__PURE__*/ jsxs("footer", {
+function WorkOfficeStatusBar({ ariaLabel = '编辑器状态栏', children, controls, controlsLabel = '视图与缩放', className = '' }) {
+    return /*#__PURE__*/ jsxs("section", {
         className: `work-office-status ${className}`.trim(),
+        "aria-label": ariaLabel,
         children: [
             /*#__PURE__*/ jsx("div", {
                 className: "work-office-status-info",
                 children: children
             }),
+            /*#__PURE__*/ jsx(WorkOfficeCollaborationParticipants, {}),
             controls && /*#__PURE__*/ jsx("div", {
                 className: "work-office-status-view",
+                role: "toolbar",
+                "aria-label": controlsLabel,
+                onKeyDown: moveOfficeToolbarFocus,
                 children: controls
             })
         ]
     });
 }
+function moveOfficeToolbarFocus(event) {
+    if (![
+        'ArrowLeft',
+        'ArrowRight',
+        'Home',
+        'End'
+    ].includes(event.key) || event.target instanceof HTMLElement && 'slider' === event.target.getAttribute('role')) return;
+    const controls = [
+        ...event.currentTarget.querySelectorAll('button:not(:disabled), [role="slider"]:not([aria-disabled="true"])')
+    ];
+    if (!controls.length) return;
+    const currentIndex = controls.indexOf(document.activeElement);
+    const nextIndex = 'Home' === event.key ? 0 : 'End' === event.key ? controls.length - 1 : 'ArrowRight' === event.key ? (currentIndex + 1 + controls.length) % controls.length : (currentIndex - 1 + controls.length) % controls.length;
+    event.preventDefault();
+    controls[nextIndex]?.focus();
+}
 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, {

package/dist/0~4980.js

@@ -0,0 +1,154 @@
+import jszip from "jszip";
+import { documentNoteKey } from "./8928.js";
+import { directChild, xmlNamespacePrefix, attribute, parseXml } from "./5184.js";
+import { DEFAULT_DOCUMENT_PAGE_COLOR, normalizeDocumentPageColor } from "./0~work-document-page-color.js";
+const MAX_NATIVE_ID = 2147483647;
+const MIN_NATIVE_COMMENT_ID = -2147483648;
+function importedDocumentNoteId(kind, target) {
+    const match = new RegExp(`^${kind}-([1-9][0-9]{0,9})$`).exec(target);
+    const nativeId = match ? decimalId(match[1], false) : null;
+    return null === nativeId ? null : `docx-${kind}-${nativeId}`;
+}
+function assignDocxNoteIds(notes) {
+    const candidates = notes.map((note)=>({
+            key: documentNoteKey(note.kind, note.id),
+            kind: note.kind,
+            nativeId: documentNoteNativeId(note.kind, note.id)
+        }));
+    const counts = occurrenceCounts(candidates.flatMap(({ kind, nativeId })=>null === nativeId ? [] : [
+            `${kind}:${nativeId}`
+        ]));
+    const used = {
+        footnote: new Set(),
+        endnote: new Set()
+    };
+    for (const candidate of candidates)if (null !== candidate.nativeId && 1 === counts.get(`${candidate.kind}:${candidate.nativeId}`)) used[candidate.kind].add(candidate.nativeId);
+    const next = {
+        footnote: 1,
+        endnote: 1
+    };
+    return new Map(candidates.map((candidate)=>{
+        const stable = null !== candidate.nativeId && 1 === counts.get(`${candidate.kind}:${candidate.nativeId}`) ? candidate.nativeId : null;
+        const id = stable ?? nextAvailableId(used[candidate.kind], next, candidate.kind);
+        used[candidate.kind].add(id);
+        return [
+            candidate.key,
+            id
+        ];
+    }));
+}
+function assignDocxCommentThreads(comments) {
+    const candidates = [];
+    for (const comment of comments){
+        candidates.push({
+            nativeId: documentCommentNativeId(comment.id, false)
+        });
+        for (const reply of comment.replies ?? [])candidates.push({
+            nativeId: documentCommentNativeId(reply.id, true)
+        });
+    }
+    const counts = occurrenceCounts(candidates.flatMap(({ nativeId })=>null === nativeId ? [] : [
+            String(nativeId)
+        ]));
+    const used = new Set();
+    for (const candidate of candidates)if (null !== candidate.nativeId && 1 === counts.get(String(candidate.nativeId))) used.add(candidate.nativeId);
+    let nextId = 0;
+    const assigned = new Map();
+    for (const candidate of candidates){
+        const stable = null !== candidate.nativeId && 1 === counts.get(String(candidate.nativeId)) ? candidate.nativeId : null;
+        if (null !== stable) {
+            assigned.set(candidate, stable);
+            continue;
+        }
+        while(used.has(nextId))nextId += 1;
+        assigned.set(candidate, nextId);
+        used.add(nextId);
+        nextId += 1;
+    }
+    let index = 0;
+    return comments.map((comment)=>{
+        const root = candidates[index];
+        index += 1;
+        const replies = (comment.replies ?? []).map((reply)=>{
+            const candidate = candidates[index];
+            index += 1;
+            return {
+                id: assigned.get(candidate),
+                reply
+            };
+        });
+        return {
+            comment,
+            id: assigned.get(root),
+            replies
+        };
+    });
+}
+function documentNoteNativeId(kind, id) {
+    const match = /^docx-(footnote|endnote)-([1-9][0-9]{0,9})$/.exec(id);
+    return match?.[1] === kind ? decimalId(match[2], false) : null;
+}
+function documentCommentNativeId(id, reply) {
+    const pattern = reply ? /^docx-comment-reply-(0|-?[1-9][0-9]{0,9})$/ : /^docx-comment-(0|-?[1-9][0-9]{0,9})$/;
+    return normalizeDocxCommentId(pattern.exec(id)?.[1]);
+}
+function normalizeDocxCommentId(value) {
+    if (!value || !/^(?:0|-?[1-9][0-9]{0,9})$/.test(value)) return null;
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number >= MIN_NATIVE_COMMENT_ID && number <= MAX_NATIVE_ID ? number : null;
+}
+function decimalId(value, allowZero) {
+    if (!value) return null;
+    const number = Number(value);
+    return Number.isSafeInteger(number) && number <= MAX_NATIVE_ID && (allowZero ? number >= 0 : number > 0) ? number : null;
+}
+function occurrenceCounts(values) {
+    const counts = new Map();
+    for (const value of values)counts.set(value, (counts.get(value) ?? 0) + 1);
+    return counts;
+}
+function nextAvailableId(used, next, kind) {
+    while(used.has(next[kind]))next[kind] += 1;
+    const id = next[kind];
+    next[kind] += 1;
+    return id;
+}
+const WORD_NAMESPACE = 'http://schemas.openxmlformats.org/wordprocessingml/2006/main';
+function importDocxPageColor(document) {
+    const background = directChild(document.documentElement, 'background');
+    const color = attribute(background ?? document.documentElement, 'color');
+    if (!background || !color || 'auto' === color.toLowerCase()) return;
+    return normalizeDocumentPageColor(`#${color}`);
+}
+async function patchDocxPageColor(buffer, value) {
+    const pageColor = normalizeDocumentPageColor(value);
+    if (!pageColor || pageColor === DEFAULT_DOCUMENT_PAGE_COLOR) return buffer;
+    const archive = await jszip.loadAsync(buffer);
+    const documentEntry = archive.file('word/document.xml');
+    if (!documentEntry) return buffer;
+    const document = parseXml(await documentEntry.async('text'), 'word/document.xml');
+    upsertDocumentBackground(document, pageColor.slice(1).toUpperCase());
+    archive.file('word/document.xml', new XMLSerializer().serializeToString(document));
+    const settingsEntry = archive.file('word/settings.xml');
+    if (settingsEntry) {
+        const settings = parseXml(await settingsEntry.async('text'), 'word/settings.xml');
+        if (!directChild(settings.documentElement, 'displayBackgroundShape')) settings.documentElement.append(settings.createElementNS(WORD_NAMESPACE, wordQualifiedName(settings.documentElement, 'displayBackgroundShape')));
+        archive.file('word/settings.xml', new XMLSerializer().serializeToString(settings));
+    }
+    return archive.generateAsync({
+        type: 'arraybuffer'
+    });
+}
+function upsertDocumentBackground(document, color) {
+    const root = document.documentElement;
+    let background = directChild(root, 'background');
+    if (!background) {
+        background = document.createElementNS(WORD_NAMESPACE, wordQualifiedName(root, 'background'));
+        root.insertBefore(background, directChild(root, 'body') ?? root.firstChild);
+    }
+    background.setAttributeNS(WORD_NAMESPACE, wordQualifiedName(root, 'color'), color);
+}
+function wordQualifiedName(root, localName) {
+    return `${xmlNamespacePrefix(root, WORD_NAMESPACE) ?? root.prefix ?? 'w'}:${localName}`;
+}
+export { assignDocxCommentThreads, assignDocxNoteIds, importDocxPageColor, importedDocumentNoteId, normalizeDocxCommentId, patchDocxPageColor };