feat(docs-ui): support doc page setup to set paper size and margin (#5088)

Co-authored-by: GitHub Actions <actions@github.com>

packages/core/src/docs/data-model/document-data-model.ts

@@ -132,6 +132,10 @@ class DocumentDataModelSimple extends UnitModel<IDocumentData, UniverInstanceTyp
         }
     }
 
+    getDocumentStyle() {
+        return this.snapshot.documentStyle;
+    }
+
     updateDocumentStyle(config: IDocumentStyle) {
         if (this.snapshot.documentStyle == null) {
             this.snapshot.documentStyle = config;

packages/core/src/types/const/index.ts

@@ -16,4 +16,5 @@
 
 export * from './const';
 export * from './extension-names';
+export * from './page-size';
 export * from './theme-color-map';

packages/core/src/types/const/page-size.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ISize } from '../../shared';
+import { PaperType } from '../interfaces';
+
+export const PAGE_SIZE: Record<PaperType, Required<ISize>> = {
+    [PaperType.A3]: {
+        width: 1123,
+        height: 1587,
+    },
+    [PaperType.A4]: {
+        width: 794,
+        height: 1124,
+    },
+    [PaperType.A5]: {
+        width: 559,
+        height: 794,
+    },
+    [PaperType.B4]: {
+        width: 944,
+        height: 1344,
+    },
+    [PaperType.B5]: {
+        width: 665,
+        height: 944,
+    },
+    [PaperType.Executive]: {
+        width: 696,
+        height: 1008,
+    },
+    [PaperType.Folio]: {
+        width: 816,
+        height: 1248,
+    },
+    [PaperType.Legal]: {
+        width: 816,
+        height: 1344,
+    },
+    [PaperType.Letter]: {
+        width: 816,
+        height: 1056,
+    },
+    [PaperType.Statement]: {
+        width: 528,
+        height: 816,
+    },
+    [PaperType.Tabloid]: {
+        width: 1056,
+        height: 1632,
+    },
+};

packages/core/src/types/interfaces/i-document-data.ts

@@ -1081,4 +1081,31 @@ export enum PageOrientType {
     LANDSCAPE,
 }
 
+export enum PaperType {
+    Letter = 'Letter',
+    Tabloid = 'Tabloid',
+    Legal = 'Legal',
+    Statement = 'Statement',
+    Executive = 'Executive',
+    Folio = 'Folio',
+    A3 = 'A3',
+    A4 = 'A4',
+    A5 = 'A5',
+    B4 = 'B4',
+    B5 = 'B5',
+}
+
+export const PAPER_TYPES: PaperType[] = [
+    PaperType.A3,
+    PaperType.A4,
+    PaperType.A5,
+    PaperType.B4,
+    PaperType.B5,
+    PaperType.Letter,
+    PaperType.Tabloid,
+    PaperType.Legal,
+    PaperType.Statement,
+    PaperType.Executive,
+    PaperType.Folio,
+];
 // #region - tech dept

packages/design/src/components/confirm/Confirm.tsx

@@ -77,7 +77,6 @@ function Footer(props: { locale: ILocale['design']; cancelText?: string; confirm
 
 export function Confirm(props: IConfirmProps) {
     const { children, visible = false, title, cancelText, confirmText, width, onClose, onConfirm } = props;
-
     const { locale } = useContext(ConfigContext);
 
     return (

packages/docs-drawing-ui/src/controllers/doc-drawing-printing.controller.tsx

@@ -0,0 +1,118 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDocFloatDom } from '@univerjs/docs-drawing';
+import type { IPrintingFloatDomProps } from '../views/printing-float-dom';
+import { Disposable, DrawingTypeEnum, Inject, Injector, PRINT_CHART_COMPONENT_KEY } from '@univerjs/core';
+import { render, unmount } from '@univerjs/design';
+import { DocPrintInterceptorService } from '@univerjs/docs-ui';
+import { IDrawingManagerService } from '@univerjs/drawing';
+import { DrawingRenderService } from '@univerjs/drawing-ui';
+import { ComponentManager, connectInjector } from '@univerjs/ui';
+import { DocPrintingFloatDom } from '../views/printing-float-dom';
+
+export class DocDrawingPrintingController extends Disposable {
+    constructor(
+        @Inject(DocPrintInterceptorService) private readonly _docPrintInterceptorService: DocPrintInterceptorService,
+        @Inject(DrawingRenderService) private readonly _drawingRenderService: DrawingRenderService,
+        @IDrawingManagerService private readonly _drawingManagerService: IDrawingManagerService,
+        @Inject(ComponentManager) private readonly _componetManager: ComponentManager,
+        @Inject(Injector) private readonly _injector: Injector
+    ) {
+        super();
+
+        this._initPrinting();
+        this._initPrintingDom();
+    }
+
+    private _initPrinting() {
+        this.disposeWithMe(
+            this._docPrintInterceptorService.interceptor.intercept(
+                this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT,
+                {
+                    handler: (_param, pos, next) => {
+                        const { unitId, scene } = pos;
+                        const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+                        const subUnitData = unitData?.[unitId];
+                        if (subUnitData) {
+                            subUnitData.order.forEach((id) => {
+                                const drawing = subUnitData.data[id];
+                                if (drawing.drawingType !== DrawingTypeEnum.DRAWING_CHART && drawing.drawingType !== DrawingTypeEnum.DRAWING_DOM) {
+                                    this._drawingRenderService.renderDrawing(drawing, scene);
+                                }
+                            });
+                        }
+
+                        return next();
+                    },
+                }
+            )
+        );
+    }
+
+    private _initPrintingDom() {
+        this.disposeWithMe(
+            this._docPrintInterceptorService.interceptor.intercept(
+                this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT,
+                {
+                    handler: (disposableCollection, pos, next) => {
+                        const { unitId } = pos;
+                        const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+                        const subUnitData = unitData?.[unitId];
+                        if (subUnitData) {
+                            const floatDomInfos = subUnitData.order.map((id) => {
+                                const drawing = subUnitData.data[id];
+                                if (drawing.drawingType === DrawingTypeEnum.DRAWING_CHART) {
+                                    return {
+                                        ...drawing,
+                                        componentKey: this._componetManager.get(PRINT_CHART_COMPONENT_KEY) as any,
+                                    };
+                                }
+
+                                if (drawing.drawingType === DrawingTypeEnum.DRAWING_DOM) {
+                                    return {
+                                        ...drawing,
+                                        componentKey: this._componetManager.get((drawing as IDocFloatDom).componentKey) as any,
+                                    };
+                                }
+
+                                return null;
+                            }).filter(Boolean) as IDocFloatDom[];
+                            const PrintingFloatDomInjector = connectInjector(DocPrintingFloatDom, this._injector) as React.ComponentType<IPrintingFloatDomProps>;
+
+                            render(
+                                <PrintingFloatDomInjector
+                                    unitId={unitId}
+                                    floatDomInfos={floatDomInfos}
+                                    scene={pos.scene}
+                                    skeleton={pos.skeleton}
+                                    offset={pos.offset}
+                                />,
+                                pos.root
+                            );
+
+                            disposableCollection?.add(() => {
+                                unmount(pos.root);
+                            });
+
+                            return next(disposableCollection);
+                        }
+                    },
+                }
+            )
+        );
+    }
+}

packages/docs-drawing-ui/src/controllers/doc-float-dom.controller.ts

@@ -18,7 +18,7 @@ import type { DocumentDataModel, IDisposable, IDrawingSearch, Nullable } from '@
 import type { IDocFloatDom } from '@univerjs/docs-drawing';
 import type { ISetDocZoomRatioOperationParams } from '@univerjs/docs-ui';
 import type { IDocFloatDomDataBase } from '@univerjs/drawing';
-import type { IRender, Rect } from '@univerjs/engine-render';
+import type { IBoundRectNoAngle, IRender, Rect, Scene } from '@univerjs/engine-render';
 import type { IFloatDomLayout } from '@univerjs/ui';
 import type { IInsertDrawingCommandParams } from '../commands/commands/interfaces';
 import { Disposable, DisposableCollection, DrawingTypeEnum, fromEventSubject, generateRandomId, ICommandService, Inject, IUniverInstanceService, ObjectRelativeFromH, ObjectRelativeFromV, PositionedObjectLayoutType, toDisposable, UniverInstanceType } from '@univerjs/core';
@@ -31,13 +31,16 @@ import { CanvasFloatDomService } from '@univerjs/ui';
 import { BehaviorSubject, map, of, switchMap } from 'rxjs';
 import { InsertDocDrawingCommand } from '../commands/commands/insert-doc-drawing.command';
 
-function calcDocFloatDomPosition(
-    object: Rect,
-    renderUnit: IRender
+export function calcDocFloatDomPositionByRect(
+    rect: IBoundRectNoAngle,
+    scene: Scene,
+    opacity = 1,
+    angle = 0
 ): IFloatDomLayout {
-    const { top, left, width, height, angle, opacity } = object;
-    // const
-    const scene = renderUnit.scene;
+    const { top, left, bottom, right } = rect;
+    const width = right - left;
+    const height = bottom - top;
+
     const viewMain = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)!;
     const { viewportScrollX, viewportScrollY } = viewMain;
     const { scaleX, scaleY } = scene.getAncestorScale();
@@ -58,6 +61,14 @@ function calcDocFloatDomPosition(
     };
 }
 
+function calcDocFloatDomPosition(
+    object: Rect,
+    renderUnit: IRender
+): IFloatDomLayout {
+    const { top, left, width, height, angle, opacity } = object;
+    return calcDocFloatDomPositionByRect({ top, left, bottom: top + height, right: left + width }, renderUnit.scene, opacity, angle);
+}
+
 interface ICanvasFloatDomInfo {
     position$: BehaviorSubject<IFloatDomLayout>;
     dispose: IDisposable;

packages/docs-drawing-ui/src/plugin.ts

@@ -23,9 +23,10 @@ import { UniverDrawingUIPlugin } from '@univerjs/drawing-ui';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { UniverUIPlugin } from '@univerjs/ui';
 import { defaultPluginConfig, DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY } from './controllers/config.schema';
-import { DocDrawingAddRemoveController } from './controllers/doc-drawing-notification.controller';
-import { DocDrawingTransformerController } from './controllers/doc-drawing-transformer-update.controller';
 import { DocDrawingUIController } from './controllers/doc-drawing.controller';
+import { DocDrawingAddRemoveController } from './controllers/doc-drawing-notification.controller';
+import { DocDrawingPrintingController } from './controllers/doc-drawing-printing.controller';
+import { DocDrawingTransformerController } from './controllers/doc-drawing-transformer-update.controller';
 import { DocFloatDomController } from './controllers/doc-float-dom.controller';
 import { DocDrawingPopupMenuController } from './controllers/drawing-popup-menu.controller';
 import { DocDrawingTransformUpdateController } from './controllers/render-controllers/doc-drawing-transform-update.controller';
@@ -64,6 +65,7 @@ export class UniverDocsDrawingUIPlugin extends Plugin {
             [DocDrawingAddRemoveController],
             [DocRefreshDrawingsService],
             [DocFloatDomController],
+            [DocDrawingPrintingController],
         ];
 
         dependencies.forEach((dependency) => this._injector.add(dependency));
@@ -78,6 +80,7 @@ export class UniverDocsDrawingUIPlugin extends Plugin {
         this._injector.get(DocDrawingAddRemoveController);
         this._injector.get(DocDrawingUIController);
         this._injector.get(DocDrawingTransformerController);
+        this._injector.get(DocDrawingPrintingController);
     }
 
     override onRendered(): void {

packages/docs-drawing-ui/src/views/printing-float-dom/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IDocFloatDom } from '@univerjs/docs-drawing';
+import type { DocumentSkeleton, Scene } from '@univerjs/engine-render';
+import type { IFloatDom, IFloatDomLayout } from '@univerjs/ui';
+import { PrintFloatDomSingle } from '@univerjs/ui';
+import { useMemo } from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { calcDocFloatDomPositionByRect } from '../../controllers/doc-float-dom.controller';
+
+export interface IPrintingFloatDomProps {
+    floatDomInfos: IDocFloatDom[];
+    scene: Scene;
+    skeleton: DocumentSkeleton;
+    unitId: string;
+    offset: { x: number; y: number };
+};
+
+export const DocPrintingFloatDom = (props: IPrintingFloatDomProps) => {
+    const { floatDomInfos, scene, offset } = props;
+    const floatDomParams = useMemo(() => floatDomInfos.map((info) => {
+        const { width, height, left, top } = info.transform!;
+        const offsetBound = calcDocFloatDomPositionByRect(
+            {
+                left: left ?? 0 - offset.x,
+                right: (left ?? 0) + (width ?? 0) - offset.x,
+                top: top ?? 0 - offset.y,
+                bottom: (top ?? 0) + (height ?? 0) - offset.y,
+            },
+            scene
+        );
+
+        const domPos: IFloatDomLayout = offsetBound;
+        const floatDom: IFloatDom & { position: IFloatDomLayout } = {
+            position$: new BehaviorSubject<IFloatDomLayout>(domPos),
+            position: domPos,
+            id: info.drawingId,
+            componentKey: info.componentKey,
+            onPointerMove: () => { },
+            onPointerDown: () => { },
+            onPointerUp: () => { },
+            onWheel: () => { },
+            unitId: info.unitId,
+        };
+
+        return [info.drawingId, floatDom] as const;
+    }), [floatDomInfos, scene, offset]);
+
+    return (
+        <div style={{ position: 'absolute', top: 0, left: 0 }}>
+            {floatDomParams.map(([id, floatDom]) => (
+                <PrintFloatDomSingle key={id} layer={floatDom} id={id} position={floatDom.position} />
+            ))}
+        </div>
+    );
+};

packages/docs-ui/src/commands/commands/doc-page-setup.command.ts

@@ -0,0 +1,122 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DocumentDataModel, ICommand, ICommandInfo, ISize, JSONXActions, PageOrientType } from '@univerjs/core';
+import type { IRichTextEditingMutationParams } from '@univerjs/docs';
+import { CommandType, ICommandService, IUniverInstanceService, JSONX, UniverInstanceType } from '@univerjs/core';
+import { RichTextEditingMutation } from '@univerjs/docs';
+
+export interface IDocPageSetupCommandParams {
+    pageSize: ISize;
+    pageOrient: PageOrientType;
+    marginTop: number;
+    marginBottom: number;
+    marginLeft: number;
+    marginRight: number;
+}
+
+export const DocPageSetupCommand: ICommand<IDocPageSetupCommandParams> = {
+    id: 'docs.command.page-setup',
+    type: CommandType.COMMAND,
+    // eslint-disable-next-line complexity, max-lines-per-function
+    handler: (accessor, params) => {
+        if (!params) return false;
+        const univerInstanceService = accessor.get(IUniverInstanceService);
+        const commandService = accessor.get(ICommandService);
+        const docDataModel = univerInstanceService.getCurrentUnitOfType<DocumentDataModel>(UniverInstanceType.UNIVER_DOC);
+        if (!docDataModel) return false;
+        const { marginLeft, marginRight, marginBottom, marginTop, pageOrient, pageSize } = params;
+        const jsonX = JSONX.getInstance();
+        const documentStyle = docDataModel.getDocumentStyle();
+        const {
+            marginBottom: oldMarginBottom,
+            marginLeft: oldMarginLeft,
+            marginRight: oldMarginRight,
+            marginTop: oldMarginTop,
+            pageOrient: oldPageOrient,
+            pageSize: oldPageSize,
+        } = documentStyle;
+        const rawActions: JSONXActions = [];
+
+        if (oldMarginBottom === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'marginBottom'], marginBottom);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'marginBottom'], oldMarginBottom, marginBottom);
+            action && rawActions.push(action);
+        }
+
+        if (oldMarginLeft === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'marginLeft'], marginLeft);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'marginLeft'], oldMarginLeft, marginLeft);
+            action && rawActions.push(action);
+        }
+
+        if (oldMarginRight === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'marginRight'], marginRight);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'marginRight'], oldMarginRight, marginRight);
+            action && rawActions.push(action);
+        }
+
+        if (oldMarginTop === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'marginTop'], marginTop);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'marginTop'], oldMarginTop, marginTop);
+            action && rawActions.push(action);
+        }
+
+        if (oldPageSize === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'pageSize'], pageSize);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'pageSize'], oldPageSize, pageSize);
+            action && rawActions.push(action);
+        }
+
+        if (oldPageOrient === undefined) {
+            const action = jsonX.insertOp(['documentStyle', 'pageOrient'], pageOrient);
+            action && rawActions.push(action);
+        } else {
+            const action = jsonX.replaceOp(['documentStyle', 'pageOrient'], oldPageOrient, pageOrient);
+            action && rawActions.push(action);
+        }
+
+        const doMutation: ICommandInfo<IRichTextEditingMutationParams> = {
+            id: RichTextEditingMutation.id,
+            params: {
+                unitId: docDataModel.getUnitId(),
+                actions: [],
+                textRanges: undefined,
+            },
+        };
+
+        doMutation.params!.actions = rawActions.reduce((acc, cur) => {
+            return JSONX.compose(acc, cur as JSONXActions);
+        }, null as JSONXActions);
+
+        const result = commandService.syncExecuteCommand<
+            IRichTextEditingMutationParams,
+            IRichTextEditingMutationParams
+        >(doMutation.id, doMutation.params);
+
+        return Boolean(result);
+    },
+};

packages/docs-ui/src/commands/operations/open-page-setting.operation.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ICommand, PaperType } from '@univerjs/core';
+import type { IDocPageSetupCommandParams } from '../commands/doc-page-setup.command';
+import { CommandType, ICommandService, LocaleService, PAGE_SIZE } from '@univerjs/core';
+import { IConfirmService } from '@univerjs/ui';
+import { PAGE_SETTING_COMPONENT_ID } from '../../views/page-settings';
+import { DocPageSetupCommand } from '../commands/doc-page-setup.command';
+
+export const DocOpenPageSettingCommand: ICommand = {
+    id: 'docs.operation.open-page-setting',
+    type: CommandType.OPERATION,
+    handler: (accessor) => {
+        const confirmService = accessor.get(IConfirmService);
+        const commandService = accessor.get(ICommandService);
+        const localeService = accessor.get(LocaleService);
+        const disposable = confirmService.open({
+            id: PAGE_SETTING_COMPONENT_ID,
+            title: {
+                label: localeService.t('page-settings.document-setting'),
+            },
+            children: {
+                label: PAGE_SETTING_COMPONENT_ID,
+            },
+            width: 528,
+            onClose: () => {
+                disposable.dispose();
+            },
+            onConfirm: (result) => {
+                disposable.dispose();
+                if (!result) return;
+                const paperSize = PAGE_SIZE[result.paperSize as PaperType];
+                commandService.executeCommand(DocPageSetupCommand.id, {
+                    pageOrient: result.orientation,
+                    marginTop: result.margins.top,
+                    marginBottom: result.margins.bottom,
+                    marginLeft: result.margins.left,
+                    marginRight: result.margins.right,
+                    pageSize: paperSize,
+                } as IDocPageSetupCommandParams);
+            },
+        });
+
+        return true;
+    },
+};

packages/docs-ui/src/controllers/doc-ui.controller.ts

@@ -25,7 +25,7 @@ import {
 } from '@univerjs/core';
 
 import { IRenderManagerService } from '@univerjs/engine-render';
-import { CutSingle, DeleteSingle, TodoList } from '@univerjs/icons';
+import { CutSingle, DeleteSingle, DocSettingSingle, TodoList } from '@univerjs/icons';
 import { BuiltInUIPart, ComponentManager, connectInjector, ILayoutService, IMenuManagerService, IShortcutService, IUIPartsService } from '@univerjs/ui';
 import { CoreHeaderFooterCommand, OpenHeaderFooterPanelCommand } from '../commands/commands/doc-header-footer.command';
 import { SidebarDocHeaderFooterPanelOperation } from '../commands/operations/doc-header-footer-panel.operation';
@@ -56,6 +56,7 @@ import {
     UnderlineShortCut,
 } from '../shortcuts/toolbar.shortcut';
 import { DocFooter } from '../views/doc-footer';
+import { PAGE_SETTING_COMPONENT_ID, PageSettings } from '../views/page-settings';
 import { DocSideMenu } from '../views/side-menu';
 import { menuSchema } from './menu.schema';
 
@@ -88,6 +89,8 @@ export class DocUIController extends Disposable {
         this.disposeWithMe(componentManager.register('doc.paragraph.menu', ParagraphMenu));
         this.disposeWithMe(componentManager.register('CutSingle', CutSingle));
         this.disposeWithMe(componentManager.register('DeleteSingle', DeleteSingle));
+        this.disposeWithMe(componentManager.register(PAGE_SETTING_COMPONENT_ID, PageSettings));
+        this.disposeWithMe(componentManager.register('DocumentSettingSingle', DocSettingSingle));
     }
 
     private _initUiParts() {

packages/docs-ui/src/controllers/menu.schema.ts

@@ -20,8 +20,8 @@ import { DocCopyCommand, DocCopyCurrentParagraphCommand, DocCutCommand, DocCutCu
 import { DeleteCurrentParagraphCommand, DeleteLeftCommand } from '../commands/commands/doc-delete.command';
 import { OpenHeaderFooterPanelCommand } from '../commands/commands/doc-header-footer.command';
 import { HorizontalLineCommand, InsertHorizontalLineBellowCommand } from '../commands/commands/doc-horizontal-line.command';
-import { ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatBoldCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from '../commands/commands/inline-format.command';
 
+import { ResetInlineFormatTextBackgroundColorCommand, SetInlineFormatBoldCommand, SetInlineFormatFontFamilyCommand, SetInlineFormatFontSizeCommand, SetInlineFormatItalicCommand, SetInlineFormatStrikethroughCommand, SetInlineFormatSubscriptCommand, SetInlineFormatSuperscriptCommand, SetInlineFormatTextBackgroundColorCommand, SetInlineFormatTextColorCommand, SetInlineFormatUnderlineCommand } from '../commands/commands/inline-format.command';
 import { BulletListCommand, CheckListCommand, InsertBulletListBellowCommand, InsertCheckListBellowCommand, InsertOrderListBellowCommand, OrderListCommand } from '../commands/commands/list.command';
 import { AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignRightCommand } from '../commands/commands/paragraph-align.command';
 import { H1HeadingCommand, H2HeadingCommand, H3HeadingCommand, H4HeadingCommand, H5HeadingCommand, NormalTextHeadingCommand, SetParagraphNamedStyleCommand } from '../commands/commands/set-heading.command';
@@ -30,6 +30,7 @@ import { DocTableDeleteColumnsCommand, DocTableDeleteRowsCommand, DocTableDelete
 import { DocTableInsertColumnLeftCommand, DocTableInsertColumnRightCommand, DocTableInsertRowAboveCommand, DocTableInsertRowBellowCommand } from '../commands/commands/table/doc-table-insert.command';
 import { DocCreateTableOperation } from '../commands/operations/doc-create-table.operation';
 import { DocParagraphSettingPanelOperation } from '../commands/operations/doc-paragraph-setting-panel.operation';
+import { DocOpenPageSettingCommand } from '../commands/operations/open-page-setting.operation';
 import {
     CopyMenuFactory,
     CutMenuFactory,
@@ -66,6 +67,7 @@ import {
     InsertTableMenuFactory,
     ItalicMenuItemFactory,
     OrderListMenuItemFactory,
+    PageSettingMenuItemFactory,
     ResetBackgroundColorMenuItemFactory,
     StrikeThroughMenuItemFactory,
     SubscriptMenuItemFactory,
@@ -177,6 +179,10 @@ export const menuSchema: MenuSchemaType = {
             order: 11,
             menuItemFactory: DocSwitchModeMenuItemFactory,
         },
+        [DocOpenPageSettingCommand.id]: {
+            order: 12,
+            menuItemFactory: PageSettingMenuItemFactory,
+        },
     },
     [ContextMenuPosition.MAIN_AREA]: {
         [ContextMenuGroup.FORMAT]: {

packages/docs-ui/src/controllers/menu/menu.ts

@@ -60,6 +60,7 @@ import { AlignCenterCommand, AlignJustifyCommand, AlignLeftCommand, AlignOperati
 import { SetParagraphNamedStyleCommand } from '../../commands/commands/set-heading.command';
 import { SwitchDocModeCommand } from '../../commands/commands/switch-doc-mode.command';
 import { DocCreateTableOperation } from '../../commands/operations/doc-create-table.operation';
+import { DocOpenPageSettingCommand } from '../../commands/operations/open-page-setting.operation';
 import { getCommandSkeleton } from '../../commands/util';
 import { COLOR_PICKER_COMPONENT } from '../../components/color-picker';
 import { FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT } from '../../components/font-family';
@@ -1096,3 +1097,13 @@ export function getParagraphStyleAtCursor(accessor: IAccessor) {
 
     return null;
 }
+
+export function PageSettingMenuItemFactory(accessor: IAccessor): IMenuButtonItem {
+    return {
+        id: DocOpenPageSettingCommand.id,
+        type: MenuItemType.BUTTON,
+        icon: 'DocumentSettingSingle',
+        tooltip: 'toolbar.pageSetup',
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_DOC),
+    };
+}

packages/docs-ui/src/docs-ui-plugin.ts

@@ -42,6 +42,7 @@ import { DeleteCommand, InsertCommand, UpdateCommand } from './commands/commands
 import { DeleteCurrentParagraphCommand, DeleteCustomBlockCommand, DeleteLeftCommand, DeleteRightCommand, MergeTwoParagraphCommand, RemoveHorizontalLineCommand } from './commands/commands/doc-delete.command';
 import { CloseHeaderFooterCommand } from './commands/commands/doc-header-footer.command';
 import { HorizontalLineCommand, InsertHorizontalLineBellowCommand } from './commands/commands/doc-horizontal-line.command';
+import { DocPageSetupCommand } from './commands/commands/doc-page-setup.command';
 import { DocParagraphSettingCommand } from './commands/commands/doc-paragraph-setting.command';
 import { DocSelectAllCommand } from './commands/commands/doc-select-all.command';
 import { IMEInputCommand } from './commands/commands/ime-input.command';
@@ -91,6 +92,7 @@ import {
 import { DocTableTabCommand } from './commands/commands/table/doc-table-tab.command';
 import { MoveCursorOperation, MoveSelectionOperation } from './commands/operations/doc-cursor.operation';
 import { DocParagraphSettingPanelOperation } from './commands/operations/doc-paragraph-setting-panel.operation';
+import { DocOpenPageSettingCommand } from './commands/operations/open-page-setting.operation';
 import { SetDocZoomRatioOperation } from './commands/operations/set-doc-zoom-ratio.operation';
 import { AppUIController } from './controllers';
 import { defaultPluginConfig, DOCS_UI_PLUGIN_CONFIG_KEY } from './controllers/config.schema';
@@ -119,6 +121,7 @@ import { DocMenuStyleService } from './services/doc-menu-style.service';
 import { DocPageLayoutService } from './services/doc-page-layout.service';
 import { DocParagraphMenuService } from './services/doc-paragraph-menu.service';
 import { DocCanvasPopManagerService } from './services/doc-popup-manager.service';
+import { DocPrintInterceptorService } from './services/doc-print-interceptor-service';
 import { DocStateChangeManagerService } from './services/doc-state-change-manager.service';
 import { DocsRenderService } from './services/docs-render.service';
 import { EditorService, IEditorService } from './services/editor/editor-manager.service';
@@ -283,6 +286,8 @@ export class UniverDocsUIPlugin extends Plugin {
             InsertOrderListBellowCommand,
             InsertCheckListBellowCommand,
             InsertHorizontalLineBellowCommand,
+            DocPageSetupCommand,
+            DocOpenPageSettingCommand,
         ].forEach((e) => {
             this.disposeWithMe(this._commandService.registerCommand(e));
         });
@@ -312,6 +317,7 @@ export class UniverDocsUIPlugin extends Plugin {
 
     private _initDependencies(injector: Injector) {
         const dependencies = mergeOverrideWithDependencies([
+            [DocPrintInterceptorService],
             [DocClipboardController],
             [DocEditorBridgeController],
             [DocUIController],

packages/docs-ui/src/index.ts

@@ -45,7 +45,7 @@ export { DocsRenderService } from './services/docs-render.service';
 export { Editor } from './services/editor/editor';
 export { EditorService, IEditorService } from './services/editor/editor-manager.service';
 export { isInSameTableCell, isValidRectRange, NodePositionConvertToRectRange } from './services/selection/convert-rect-range';
-
+export { DocPrintInterceptorService, type IDocPrintComponentContext, type IDocPrintContext } from './services/doc-print-interceptor-service';
 export { NodePositionConvertToCursor } from './services/selection/convert-text-range';
 export { getOneTextSelectionRange } from './services/selection/convert-text-range';
 export type { IEditorInputConfig } from './services/selection/doc-selection-render.service';

packages/docs-ui/src/locale/en-US.ts

@@ -53,6 +53,7 @@ const locale: typeof zhCN = {
         alignJustify: 'Justify',
         horizontalLine: 'Horizontal line',
         headerFooter: 'Header & Footer',
+        pageSetup: 'Page Setup',
     },
     table: {
         insert: 'Insert',
@@ -104,6 +105,34 @@ const locale: typeof zhCN = {
         checkList: 'Task list',
         insertBellow: 'Insert below',
     },
+    'page-settings': {
+        'document-setting': 'Document Setting',
+        'paper-size': 'Paper size',
+        'page-size': {
+            main: 'Paper size',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: 'Letter',
+            legal: 'Legal',
+            tabloid: 'Tabloid',
+            statement: 'Statement',
+            executive: 'Executive',
+            folio: 'Folio',
+        },
+        orientation: 'Orientation',
+        portrait: 'Portrait',
+        landscape: 'Landscape',
+        'custom-paper-size': 'Custom Paper size',
+        top: 'Top',
+        bottom: 'Bottom',
+        left: 'Left',
+        right: 'Right',
+        cancel: 'Cancel',
+        confirm: 'Confirm',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/fa-IR.ts

@@ -53,6 +53,7 @@ const locale: typeof zhCN = {
         alignJustify: 'توجیه',
         horizontalLine: 'Horizontal line',
         headerFooter: 'هدر و فوتر',
+        pageSetup: 'تنظیمات صفحه',
     },
     table: {
         insert: 'درج',
@@ -104,6 +105,34 @@ const locale: typeof zhCN = {
         checkList: 'لیست وظیفه',
         insertBellow: 'درج در پایین',
     },
+    'page-settings': {
+        'document-setting': 'تنظیمات سند',
+        'page-size': {
+            main: 'اندازه کاغذ',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: 'نامه آمریکایی',
+            legal: 'نامه حقوقی',
+            tabloid: 'روزنامه',
+            statement: 'کاغذ اظهارنامه',
+            executive: 'کاغذ اجرایی',
+            folio: 'کاغذ فولیو',
+        },
+        'paper-size': 'اندازه کاغذ',
+        orientation: 'جهت',
+        portrait: 'عمودی',
+        landscape: 'افقی',
+        'custom-paper-size': 'اندازه کاغذ سفارشی',
+        top: 'بالا',
+        bottom: 'پایین',
+        left: 'چپ',
+        right: 'راست',
+        cancel: 'لغو',
+        confirm: 'تایید',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/fr-FR.ts

@@ -53,6 +53,7 @@ const locale: typeof enUS = {
         alignJustify: 'Justifier',
         horizontalLine: 'Horizontal line',
         headerFooter: 'En-tête et pied de page',
+        pageSetup: 'Paramètres de page',
     },
     table: {
         insert: 'Insérer',
@@ -104,6 +105,34 @@ const locale: typeof enUS = {
         checkList: 'Liste de tâches',
         insertBellow: 'Insérer dans le bas',
     },
+    'page-settings': {
+        'document-setting': 'Paramètres du document',
+        'paper-size': 'Format du papier',
+        'page-size': {
+            main: 'Format du papier',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: 'Format Lettre US',
+            legal: 'Format Légal US',
+            tabloid: 'Format Tabloïd',
+            statement: 'Format Déclaration',
+            executive: 'Format Exécutif',
+            folio: 'Format Folio',
+        },
+        orientation: 'Orientation',
+        portrait: 'Portrait',
+        landscape: 'Paysage',
+        'custom-paper-size': 'Format de papier personnalisé',
+        top: 'Haut',
+        bottom: 'Bas',
+        left: 'Gauche',
+        right: 'Droite',
+        cancel: 'Annuler',
+        confirm: 'Confirmer',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/ru-RU.ts

@@ -49,10 +49,11 @@ const locale: typeof zhCN = {
         alignCenter: 'Выровнять по центру',
         alignRight: 'Выровнять по правому краю',
         alignJustify: 'Выровнять по ширине',
-        horizontalLine: 'Horizontal line',
-        headerFooter: 'Header & Footer',
-        checklist: 'Task list',
-        documentFlavor: 'Modern Mode',
+        horizontalLine: 'Горизонтальная линия',
+        headerFooter: 'Шапка и подвал',
+        checklist: 'Список задач',
+        documentFlavor: 'Современный режим',
+        pageSetup: 'Настройки страницы',
     },
     table: {
         insert: 'Insert',
@@ -104,6 +105,34 @@ const locale: typeof zhCN = {
         checkList: 'Список задач',
         insertBellow: 'Вставить ниже',
     },
+    'page-settings': {
+        'document-setting': 'Настройки документа',
+        'page-size': {
+            main: 'Размер бумаги',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: 'Американский формат',
+            legal: 'Юридический формат',
+            tabloid: 'Таблоидный формат',
+            statement: 'Формат заявления',
+            executive: 'Исполнительный формат',
+            folio: 'Формат фолио',
+        },
+        'paper-size': 'Размер бумаги',
+        orientation: 'Ориентация',
+        portrait: 'Книжная',
+        landscape: 'Альбомная',
+        'custom-paper-size': 'Пользовательский размер бумаги',
+        top: 'Верх',
+        bottom: 'Низ',
+        left: 'Слева',
+        right: 'Справа',
+        cancel: 'Отмена',
+        confirm: 'Подтвердить',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/vi-VN.ts

@@ -53,6 +53,7 @@ const locale: typeof zhCN = {
         headerFooter: 'Đầu trang và chân trang',
         checklist: 'Task list',
         documentFlavor: 'Modern Mode',
+        pageSetup: 'Cài đặt trang',
     },
     table: {
         insert: 'Insert',
@@ -104,6 +105,34 @@ const locale: typeof zhCN = {
         checkList: 'Danh sách công việc',
         insertBellow: 'Chèn dưới',
     },
+    'page-settings': {
+        'document-setting': 'Cài đặt tài liệu',
+        'paper-size': 'Kích thước giấy',
+        'page-size': {
+            main: 'Kích thước giấy',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: 'Giấy thư Mỹ',
+            legal: 'Giấy pháp lý Mỹ',
+            tabloid: 'Khổ báo',
+            statement: 'Giấy tuyên bố',
+            executive: 'Giấy hành chính',
+            folio: 'Giấy folio',
+        },
+        orientation: 'Hướng',
+        portrait: 'Dọc',
+        landscape: 'Ngang',
+        'custom-paper-size': 'Kích thước giấy tùy chỉnh',
+        top: 'Trên',
+        bottom: 'Dưới',
+        left: 'Trái',
+        right: 'Phải',
+        cancel: 'Hủy',
+        confirm: 'Xác nhận',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/zh-CN.ts

@@ -51,6 +51,7 @@ const locale = {
         alignJustify: '两端对齐',
         horizontalLine: '水平分割线',
         headerFooter: '页眉页脚',
+        pageSetup: '页面设置',
     },
     table: {
         insert: '插入',
@@ -102,6 +103,34 @@ const locale = {
         checkList: '任务列表',
         insertBellow: '在下方插入',
     },
+    'page-settings': {
+        'document-setting': '文档设置',
+        'page-size': {
+            main: '纸张大小',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: '美式信纸',
+            legal: '美式法律用纸',
+            tabloid: '小报尺寸',
+            statement: '声明用纸',
+            executive: '行政用纸',
+            folio: '对开纸',
+        },
+        'paper-size': '纸张大小',
+        orientation: '方向',
+        portrait: '纵向',
+        landscape: '横向',
+        'custom-paper-size': '自定义纸张大小',
+        top: '上',
+        bottom: '下',
+        left: '左',
+        right: '右',
+        cancel: '取消',
+        confirm: '确认',
+    },
 };
 
 export default locale;

packages/docs-ui/src/locale/zh-TW.ts

@@ -53,6 +53,7 @@ const locale: typeof zhCN = {
         headerFooter: '頁眉頁腳',
         checklist: '任務列表',
         documentFlavor: '现代模式',
+        pageSetup: '頁面設置',
     },
     table: {
         insert: 'Insert',
@@ -104,6 +105,34 @@ const locale: typeof zhCN = {
         checkList: '任務列表',
         insertBellow: '在下方插入',
     },
+    'page-settings': {
+        'document-setting': '文檔設置',
+        'page-size': {
+            main: '紙張大小',
+            a4: 'A4',
+            a3: 'A3',
+            a5: 'A5',
+            b4: 'B4',
+            b5: 'B5',
+            letter: '美式信紙',
+            legal: '美式法律用紙',
+            tabloid: '小報尺寸',
+            statement: '聲明用紙',
+            executive: '行政用紙',
+            folio: '對開紙',
+        },
+        'paper-size': '紙張大小',
+        orientation: '方向',
+        portrait: '縱向',
+        landscape: '橫向',
+        'custom-paper-size': '自定義紙張大小',
+        top: '上',
+        bottom: '下',
+        left: '左',
+        right: '右',
+        cancel: '取消',
+        confirm: '確認',
+    },
 };
 
 export default locale;

packages/docs-ui/src/services/doc-print-interceptor-service.ts

@@ -0,0 +1,58 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DisposableCollection } from '@univerjs/core';
+import type { Documents, DocumentSkeleton, Engine, Scene } from '@univerjs/engine-render';
+import { createInterceptorKey, Disposable, InterceptorManager } from '@univerjs/core';
+
+export interface IDocPrintContext {
+    unitId: string;
+    scene: Scene;
+    engine: Engine;
+    root: HTMLElement;
+    skeleton: DocumentSkeleton;
+}
+
+export interface IDocPrintDomtContext extends IDocPrintContext {
+    offset: { x: number; y: number };
+}
+export interface IDocPrintComponentContext extends IDocPrintContext {
+    documents: Documents;
+}
+
+const PRINTING_COMPONENT_COLLECT = createInterceptorKey<undefined, IDocPrintComponentContext>('PRINTING_COMPONENT_COLLECT');
+const PRINTING_DOM_COLLECT = createInterceptorKey<DisposableCollection, IDocPrintDomtContext>('PRINTING_DOM_COLLECT');
+
+export class DocPrintInterceptorService extends Disposable {
+    readonly interceptor = new InterceptorManager({
+        PRINTING_COMPONENT_COLLECT,
+        PRINTING_DOM_COLLECT,
+    });
+
+    constructor() {
+        super();
+
+        this.disposeWithMe(this.interceptor.intercept(this.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT, {
+            priority: -1,
+            handler: (_value) => _value,
+        }));
+
+        this.disposeWithMe(this.interceptor.intercept(this.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT, {
+            priority: -1,
+            handler: (_value) => _value,
+        }));
+    }
+}

packages/docs-ui/src/views/page-settings/index.tsx

@@ -0,0 +1,187 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DocumentDataModel, ISize, PaperType } from '@univerjs/core';
+import type { IConfirmChildrenProps } from '@univerjs/ui';
+import { IUniverInstanceService, LocaleService, PAGE_SIZE, PageOrientType, PAPER_TYPES, UniverInstanceType } from '@univerjs/core';
+import { InputNumber, Select } from '@univerjs/design';
+import { useDependency } from '@univerjs/ui';
+import React, { useEffect, useState } from 'react';
+
+export interface IPageSettingsProps {
+    onClose: () => void;
+    onConfirm: (settings: IPageSettings) => void;
+}
+
+export interface IPageSettings {
+    paperSize: string;
+    orientation: PageOrientType;
+    margins: {
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    };
+}
+
+const getPaperSize = (size: ISize) => {
+    const keys = Object.keys(PAGE_SIZE);
+
+    const result = keys.find((key) => {
+        const { width, height } = PAGE_SIZE[key as PaperType];
+        if (size.width === width && size.height === height) {
+            return true;
+        }
+
+        return false;
+    });
+
+    return result ?? 'A4';
+};
+
+export function PageSettings(props: IConfirmChildrenProps) {
+    const { hooks } = props;
+    const univerInstanceService = useDependency(IUniverInstanceService);
+    const currentDoc = univerInstanceService.getCurrentUnitOfType<DocumentDataModel>(UniverInstanceType.UNIVER_DOC)!;
+    const documentStyle = currentDoc.getDocumentStyle();
+    const localeService = useDependency(LocaleService);
+    const [settings, setSettings] = useState<IPageSettings>(() => ({
+        paperSize: getPaperSize(documentStyle.pageSize!),
+        orientation: documentStyle.pageOrient ?? PageOrientType.PORTRAIT,
+        margins: {
+            top: documentStyle.marginTop ?? 0,
+            bottom: documentStyle.marginBottom ?? 0,
+            left: documentStyle.marginLeft ?? 0,
+            right: documentStyle.marginRight ?? 0,
+        },
+    }));
+
+    useEffect(() => {
+        hooks.beforeClose = () => {
+            return settings;
+        };
+
+        hooks.beforeConfirm = () => {
+            return settings;
+        };
+    }, [settings]);
+
+    const handlePaperSizeChange = (value: string) => {
+        setSettings((prev) => ({ ...prev, paperSize: value }));
+    };
+
+    const handleOrientationChange = (value: PageOrientType) => {
+        setSettings((prev) => ({ ...prev, orientation: value }));
+    };
+
+    const handleMarginChange = (position: keyof IPageSettings['margins'], value: number | null) => {
+        setSettings((prev) => ({
+            ...prev,
+            margins: {
+                ...prev.margins,
+                [position]: value || 0,
+            },
+        }));
+    };
+
+    return (
+        <div className="univer-theme univer-flex univer-flex-col univer-gap-4">
+            <div className="univer-flex univer-flex-col univer-gap-2">
+                <label className="univer-text-sm univer-font-medium univer-text-[#0E111E]">
+                    {localeService.t('page-settings.paper-size')}
+                </label>
+                <Select
+                    value={settings.paperSize}
+                    onChange={handlePaperSizeChange}
+                    options={PAPER_TYPES.map((p) => ({
+                        label: localeService.t(`page-settings.page-size.${p.toLocaleLowerCase()}`),
+                        value: p,
+                    }))}
+                />
+            </div>
+
+            {/* <div className="univer-flex univer-flex-col univer-gap-2">
+                <label className="univer-text-sm univer-font-medium univer-text-[#0E111E]">
+                    {localeService.t('page-settings.orientation')}
+                </label>
+                <div className="univer-flex univer-gap-3">
+                    <Radio
+                        checked={settings.orientation === PageOrientType.PORTRAIT}
+                        onChange={() => handleOrientationChange(PageOrientType.PORTRAIT)}
+                    >
+                        {localeService.t('page-settings.portrait')}
+                    </Radio>
+                    <Radio
+                        checked={settings.orientation === PageOrientType.LANDSCAPE}
+                        onChange={() => handleOrientationChange(PageOrientType.LANDSCAPE)}
+                    >
+                        {localeService.t('page-settings.landscape')}
+                    </Radio>
+                </div>
+            </div> */}
+
+            <div className="univer-flex univer-flex-col univer-gap-2">
+                <label className="univer-text-sm univer-font-medium univer-text-[#0E111E]">
+                    {localeService.t('page-settings.custom-paper-size')}
+                </label>
+                <div className="univer-flex univer-flex-col univer-gap-2.5">
+                    <div className="univer-flex univer-gap-2.5">
+                        <div className="univer-flex univer-flex-1 univer-flex-col univer-gap-2">
+                            <label className="univer-text-sm univer-font-medium univer-text-gray-500">
+                                {localeService.t('page-settings.top')}
+                            </label>
+                            <InputNumber
+                                value={settings.margins.top}
+                                onChange={(e) => handleMarginChange('top', e)}
+                            />
+                        </div>
+                        <div className="univer-flex univer-flex-1 univer-flex-col univer-gap-2">
+                            <label className="univer-text-sm univer-font-medium univer-text-gray-500">
+                                {localeService.t('page-settings.bottom')}
+                            </label>
+                            <InputNumber
+                                value={settings.margins.bottom}
+                                onChange={(e) => handleMarginChange('bottom', e)}
+                            />
+                        </div>
+                    </div>
+                    <div className="univer-flex univer-gap-2.5">
+                        <div className="univer-flex univer-flex-1 univer-flex-col univer-gap-2">
+                            <label className="univer-text-sm univer-font-medium univer-text-gray-500">
+                                {localeService.t('page-settings.left')}
+                            </label>
+                            <InputNumber
+                                value={settings.margins.left}
+                                onChange={(e) => handleMarginChange('left', e)}
+                            />
+                        </div>
+                        <div className="univer-flex univer-flex-1 univer-flex-col univer-gap-2">
+                            <label className="univer-text-sm univer-font-medium univer-text-gray-500">
+                                {localeService.t('page-settings.right')}
+                            </label>
+                            <InputNumber
+                                value={settings.margins.right}
+                                onChange={(e) => handleMarginChange('right', e)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export const PAGE_SETTING_COMPONENT_ID = 'docs.component.page-setting';

packages/sheets-drawing-ui/src/views/printing-float-dom/index.tsx

@@ -18,9 +18,8 @@ import type { Worksheet } from '@univerjs/core';
 import type { Scene, SpreadsheetSkeleton } from '@univerjs/engine-render';
 import type { IFloatDomData } from '@univerjs/sheets-drawing';
 import type { IFloatDom, IFloatDomLayout } from '@univerjs/ui';
-import { IUniverInstanceService } from '@univerjs/core';
-import { ComponentManager, useDependency } from '@univerjs/ui';
-import { memo, useMemo, useRef } from 'react';
+import { PrintFloatDomSingle } from '@univerjs/ui';
+import { useMemo } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import { transformBound2DOMBound } from '../../services/canvas-float-dom-manager.service';
 
@@ -31,93 +30,6 @@ export interface IPrintingFloatDomProps {
     worksheet: Worksheet;
 };
 
-export const FloatDomSingle = memo((props: { layer: IFloatDom; id: string; position: IFloatDomLayout }) => {
-    const { layer, id, position } = props;
-    const univerInstanceService = useDependency(IUniverInstanceService);
-    const domRef = useRef<HTMLDivElement>(null);
-    const innerDomRef = useRef<HTMLDivElement>(null);
-    const transformRef = useRef<string>(`transform: rotate(${position?.rotate}deg) translate(${position?.startX}px, ${position?.startY}px)`);
-    const topRef = useRef<number>(position?.startY ?? 0);
-    const leftRef = useRef<number>(position?.startX ?? 0);
-
-    const Component = typeof layer.componentKey === 'string' ? useDependency(ComponentManager).get(layer.componentKey) : layer.componentKey;
-    const layerProps: any = useMemo(() => ({
-        data: layer.data,
-        ...layer.props,
-    }), [layer.data, layer.props]);
-
-    const innerStyle = {
-        width: `${position.width - 4}px`,
-        height: `${position.height - 4}px`,
-        left: `${position.absolute.left ? 0 : 'auto'}`,
-        top: `${position.absolute.top ? 0 : 'auto'}`,
-        right: `${position.absolute.left ? 'auto' : 0}`,
-        bottom: `${position.absolute.top ? 'auto' : 0}`,
-    };
-    transformRef.current = `rotate(${position.rotate}deg)`;
-    topRef.current = position.startY;
-    leftRef.current = position.startX;
-
-    const instance = univerInstanceService.getUnit(layer.unitId);
-    const component = useMemo(() => Component
-        ? (
-            <Component
-                {...layerProps}
-                unitId={layer.unitId}
-                unit={instance}
-                floatDomId={layer.id}
-                context={{
-                    root: innerDomRef,
-                }}
-            />
-        )
-        : null, [Component, layerProps]);
-
-    if (!position) {
-        return null;
-    }
-
-    //domRef univer-float-dom-wrapper
-    //innerDomRef univer-float-dom
-    return (
-        <div
-            ref={domRef}
-            className="univer-z-10"
-            style={{
-                position: 'absolute',
-                top: topRef.current,
-                left: leftRef.current,
-                width: Math.max(position.endX - position.startX - 2, 0),
-                height: Math.max(position.endY - position.startY - 2, 0),
-                transform: transformRef.current,
-                overflow: 'hidden',
-                transformOrigin: 'center center',
-            }}
-            onPointerMove={(e) => {
-                layer.onPointerMove(e.nativeEvent);
-            }}
-            onPointerDown={(e) => {
-                layer.onPointerDown(e.nativeEvent);
-            }}
-            onPointerUp={(e) => {
-                layer.onPointerUp(e.nativeEvent);
-            }}
-            onWheel={(e) => {
-                layer.onWheel(e.nativeEvent);
-            }}
-        >
-            <div
-                id={id}
-                ref={innerDomRef}
-                className="univer-overflow-hidden"
-                style={{ position: 'absolute', ...innerStyle }}
-            >
-                {component}
-            </div>
-        </div>
-    );
-});
-
 export const PrintingFloatDom = (props: IPrintingFloatDomProps) => {
     const { floatDomInfos, scene, skeleton, worksheet } = props;
     const floatDomParams = useMemo(() => floatDomInfos.map((info) => {
@@ -166,7 +78,7 @@ export const PrintingFloatDom = (props: IPrintingFloatDomProps) => {
     return (
         <div style={{ position: 'absolute', top: 0, left: 0 }}>
             {floatDomParams.map(([id, floatDom]) => (
-                <FloatDomSingle key={id} layer={floatDom} id={id} position={floatDom.position} />
+                <PrintFloatDomSingle key={id} layer={floatDom} id={id} position={floatDom.position} />
             ))}
         </div>
     );

packages/ui/src/index.ts

@@ -37,6 +37,7 @@ export {
     SharedController,
     UndoShortcutItem,
 } from './controllers/shared-shortcut.controller';
+export type { IConfirmChildrenProps } from './views/components/confirm-part/interface';
 export { ShortcutPanelController } from './controllers/shortcut-display/shortcut-panel.controller';
 export { IUIController, type IWorkbenchOptions } from './controllers/ui/ui.controller';
 export { DesktopUIController } from './controllers/ui/ui-desktop.controller';
@@ -111,6 +112,7 @@ export { ILeftSidebarService, ISidebarService } from './services/sidebar/sidebar
 export { DesktopZenZoneService } from './services/zen-zone/desktop-zen-zone.service';
 export { IZenZoneService } from './services/zen-zone/zen-zone.service';
 export { FloatDomSingle } from './views/components/dom/FloatDom';
+export { PrintFloatDomSingle } from './views/components/dom/print';
 export { DISABLE_AUTO_FOCUS_KEY, UniverUIPlugin } from './ui-plugin';
 
 export { UNIVER_UI_PLUGIN_NAME } from './ui-plugin';

packages/ui/src/views/components/confirm-part/ConfirmPart.tsx

@@ -15,14 +15,55 @@
  */
 
 import type { IConfirmProps } from '@univerjs/design';
-import type { IConfirmPartMethodOptions } from './interface';
+import type { IConfirmChildrenProps, IConfirmPartMethodOptions, IContextConfirmProps } from './interface';
 import { Confirm } from '@univerjs/design';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { CustomLabel } from '../../../components/custom-label/CustomLabel';
 import { IConfirmService } from '../../../services/confirm/confirm.service';
 import { useDependency } from '../../../utils/di';
 
+const ContextConfirm = (props: IContextConfirmProps) => {
+    const { children, onClose, onConfirm } = props;
+
+    const [hooks] = useState<IConfirmChildrenProps['hooks']>({});
+
+    // eslint-disable-next-line react/no-clone-element
+    const childrenWithHooks = React.cloneElement(children, { hooks });
+
+    return (
+        <Confirm
+            children={childrenWithHooks}
+            onClose={() => {
+                const beforeClose = hooks.beforeClose;
+                if (beforeClose) {
+                    const result = beforeClose();
+                    if (result.cancel) {
+                        return;
+                    }
+                    onClose?.(result);
+                    return;
+                }
+
+                onClose?.();
+            }}
+            onConfirm={() => {
+                const beforeConfirm = hooks.beforeConfirm;
+                if (beforeConfirm) {
+                    const result = beforeConfirm();
+                    if (result.cancel) {
+                        return;
+                    }
+                    onConfirm?.(result);
+                    return;
+                }
+
+                onConfirm?.();
+            }}
+        />
+    );
+};
+
 export function ConfirmPart() {
     const confirmService = useDependency(IConfirmService);
 
@@ -54,5 +95,5 @@ export function ConfirmPart() {
         return confirmProps;
     });
 
-    return props?.map((options, index) => <Confirm key={index} {...options} />);
+    return props?.map((options, index) => <ContextConfirm key={index} {...options} children={options.children! as React.ReactElement<IConfirmChildrenProps>} />);
 }

packages/ui/src/views/components/confirm-part/interface.ts

@@ -18,8 +18,21 @@ import type { IConfirmProps } from '@univerjs/design';
 
 import type { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 
+export interface IConfirmChildrenProps {
+    hooks: {
+        beforeConfirm?: () => Record<string, any>;
+        beforeClose?: () => Record<string, any>;
+    };
+}
+
+export interface IContextConfirmProps extends IConfirmProps {
+    children: React.ReactElement<IConfirmChildrenProps>;
+    onClose?: (result?: Record<string, any>) => void;
+    onConfirm?: (result?: Record<string, any>) => void;
+}
+
 export type IConfirmPartMethodOptions = {
     id: string;
     children?: ICustomLabelProps | string;
     title?: ICustomLabelProps;
-} & Omit<IConfirmProps, 'children' | 'title'>;
+} & Omit<IContextConfirmProps, 'children' | 'title'>;

packages/ui/src/views/components/dom/print.tsx

@@ -0,0 +1,108 @@
+/**
+ * Copyright 2023-present DreamNum Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IFloatDom, IFloatDomLayout } from '../../../services/dom/canvas-dom-layer.service';
+import { IUniverInstanceService } from '@univerjs/core';
+import { useDependency } from '@wendellhu/redi/react-bindings';
+import { memo, useMemo, useRef } from 'react';
+import { ComponentManager } from '../../../common';
+
+export const PrintFloatDomSingle = memo((props: { layer: IFloatDom; id: string; position: IFloatDomLayout }) => {
+    const { layer, id, position } = props;
+    const univerInstanceService = useDependency(IUniverInstanceService);
+    const domRef = useRef<HTMLDivElement>(null);
+    const innerDomRef = useRef<HTMLDivElement>(null);
+    const transformRef = useRef<string>(`transform: rotate(${position?.rotate}deg) translate(${position?.startX}px, ${position?.startY}px)`);
+    const topRef = useRef<number>(position?.startY ?? 0);
+    const leftRef = useRef<number>(position?.startX ?? 0);
+
+    const Component = typeof layer.componentKey === 'string' ? useDependency(ComponentManager).get(layer.componentKey) : layer.componentKey;
+    const layerProps: any = useMemo(() => ({
+        data: layer.data,
+        ...layer.props,
+    }), [layer.data, layer.props]);
+
+    const innerStyle = {
+        width: `${position.width - 4}px`,
+        height: `${position.height - 4}px`,
+        left: `${position.absolute.left ? 0 : 'auto'}`,
+        top: `${position.absolute.top ? 0 : 'auto'}`,
+        right: `${position.absolute.left ? 'auto' : 0}`,
+        bottom: `${position.absolute.top ? 'auto' : 0}`,
+    };
+    transformRef.current = `rotate(${position.rotate}deg)`;
+    topRef.current = position.startY;
+    leftRef.current = position.startX;
+
+    const instance = univerInstanceService.getUnit(layer.unitId);
+    const component = useMemo(() => Component
+        ? (
+            <Component
+                {...layerProps}
+                unitId={layer.unitId}
+                unit={instance}
+                floatDomId={layer.id}
+                context={{
+                    root: innerDomRef,
+                }}
+            />
+        )
+        : null, [Component, layerProps]);
+
+    if (!position) {
+        return null;
+    }
+
+    //domRef univer-float-dom-wrapper
+    //innerDomRef univer-float-dom
+    return (
+        <div
+            ref={domRef}
+            className="univer-z-10"
+            style={{
+                position: 'absolute',
+                top: topRef.current,
+                left: leftRef.current,
+                width: Math.max(position.endX - position.startX - 2, 0),
+                height: Math.max(position.endY - position.startY - 2, 0),
+                transform: transformRef.current,
+                overflow: 'hidden',
+                transformOrigin: 'center center',
+            }}
+            onPointerMove={(e) => {
+                layer.onPointerMove(e.nativeEvent);
+            }}
+            onPointerDown={(e) => {
+                layer.onPointerDown(e.nativeEvent);
+            }}
+            onPointerUp={(e) => {
+                layer.onPointerUp(e.nativeEvent);
+            }}
+            onWheel={(e) => {
+                layer.onWheel(e.nativeEvent);
+            }}
+        >
+            <div
+                id={id}
+                ref={innerDomRef}
+                className="univer-overflow-hidden"
+                style={{ position: 'absolute', ...innerStyle }}
+            >
+                {component}
+            </div>
+        </div>
+    );
+});

pnpm-lock.yaml

@@ -139,7 +139,7 @@ importers:
         version: 3.1.2(vitest@3.1.2(@types/debug@4.1.12)(@types/node@22.15.2)(happy-dom@17.4.4)(jiti@2.4.2)(jsdom@24.1.1)(less@4.3.0)(sass@1.77.5)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.1))
       autoprefixer:
         specifier: ^10.4.21
-        version: 10.4.21(postcss@8.5.3)
+        version: 10.4.21(postcss@8.4.49)
       eslint-plugin-readable-tailwind:
         specifier: ^1.9.1
         version: 1.9.1(eslint@9.25.1(jiti@2.4.2))(tailwindcss@3.4.17)
@@ -154,7 +154,7 @@ importers:
         version: 4.1.1
       postcss-preset-env:
         specifier: ^10.1.6
-        version: 10.1.6(postcss@8.5.3)
+        version: 10.1.6(postcss@8.4.49)
       sort-keys:
         specifier: ^5.1.0
         version: 5.1.0
@@ -4535,7 +4535,7 @@ packages:
     engines: {node: '>=12'}
 
   '@protobufjs/aspromise@1.1.2':
-    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+    resolution: {integrity: sha1-m4sMxmPWaafY9vXQiToU00jzD78=}
 
   '@protobufjs/base64@1.1.2':
     resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
@@ -4562,7 +4562,7 @@ packages:
     resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
 
   '@protobufjs/utf8@1.1.0':
-    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+    resolution: {integrity: sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=}
 
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
@@ -5605,10 +5605,6 @@ packages:
     resolution: {integrity: sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/types@8.30.1':
-    resolution: {integrity: sha512-81KawPfkuulyWo5QdyG/LOKbspyyiW+p4vpn4bYO7DM/hZImlVnFwrpCTnmNMOt8CvLRr5ojI9nU1Ekpw4RcEw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@typescript-eslint/types@8.31.0':
     resolution: {integrity: sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -11831,215 +11827,215 @@ snapshots:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
 
-  '@csstools/postcss-cascade-layers@5.0.1(postcss@8.5.3)':
+  '@csstools/postcss-cascade-layers@5.0.1(postcss@8.4.49)':
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  '@csstools/postcss-color-function@4.0.9(postcss@8.5.3)':
+  '@csstools/postcss-color-function@4.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-color-mix-function@3.0.9(postcss@8.5.3)':
+  '@csstools/postcss-color-mix-function@3.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-content-alt-text@2.0.5(postcss@8.5.3)':
+  '@csstools/postcss-content-alt-text@2.0.5(postcss@8.4.49)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-exponential-functions@2.0.8(postcss@8.5.3)':
+  '@csstools/postcss-exponential-functions@2.0.8(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.5.3)':
+  '@csstools/postcss-font-format-keywords@4.0.0(postcss@8.4.49)':
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-gamut-mapping@2.0.9(postcss@8.5.3)':
+  '@csstools/postcss-gamut-mapping@2.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-gradients-interpolation-method@5.0.9(postcss@8.5.3)':
+  '@csstools/postcss-gradients-interpolation-method@5.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-hwb-function@4.0.9(postcss@8.5.3)':
+  '@csstools/postcss-hwb-function@4.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-ic-unit@4.0.1(postcss@8.5.3)':
+  '@csstools/postcss-ic-unit@4.0.1(postcss@8.4.49)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-initial@2.0.1(postcss@8.5.3)':
+  '@csstools/postcss-initial@2.0.1(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-is-pseudo-class@5.0.1(postcss@8.5.3)':
+  '@csstools/postcss-is-pseudo-class@5.0.1(postcss@8.4.49)':
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  '@csstools/postcss-light-dark-function@2.0.8(postcss@8.5.3)':
+  '@csstools/postcss-light-dark-function@2.0.8(postcss@8.4.49)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.5.3)':
+  '@csstools/postcss-logical-float-and-clear@3.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-logical-overflow@2.0.0(postcss@8.5.3)':
+  '@csstools/postcss-logical-overflow@2.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.5.3)':
+  '@csstools/postcss-logical-overscroll-behavior@2.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-logical-resize@3.0.0(postcss@8.5.3)':
+  '@csstools/postcss-logical-resize@3.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-logical-viewport-units@3.0.3(postcss@8.5.3)':
+  '@csstools/postcss-logical-viewport-units@3.0.3(postcss@8.4.49)':
     dependencies:
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-media-minmax@2.0.8(postcss@8.5.3)':
+  '@csstools/postcss-media-minmax@2.0.8(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
       '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.4(postcss@8.5.3)':
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@3.0.4(postcss@8.4.49)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
       '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-nested-calc@4.0.0(postcss@8.5.3)':
+  '@csstools/postcss-nested-calc@4.0.0(postcss@8.4.49)':
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@4.0.0(postcss@8.5.3)':
+  '@csstools/postcss-normalize-display-values@4.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@4.0.9(postcss@8.5.3)':
+  '@csstools/postcss-oklab-function@4.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-progressive-custom-properties@4.0.1(postcss@8.5.3)':
+  '@csstools/postcss-progressive-custom-properties@4.0.1(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-random-function@2.0.0(postcss@8.5.3)':
+  '@csstools/postcss-random-function@2.0.0(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-relative-color-syntax@3.0.9(postcss@8.5.3)':
+  '@csstools/postcss-relative-color-syntax@3.0.9(postcss@8.4.49)':
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.5.3)':
+  '@csstools/postcss-scope-pseudo-class@4.0.1(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  '@csstools/postcss-sign-functions@1.1.3(postcss@8.5.3)':
+  '@csstools/postcss-sign-functions@1.1.3(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-stepped-value-functions@4.0.8(postcss@8.5.3)':
+  '@csstools/postcss-stepped-value-functions@4.0.8(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-text-decoration-shorthand@4.0.2(postcss@8.5.3)':
+  '@csstools/postcss-text-decoration-shorthand@4.0.2(postcss@8.4.49)':
     dependencies:
       '@csstools/color-helpers': 5.0.2
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@4.0.8(postcss@8.5.3)':
+  '@csstools/postcss-trigonometric-functions@4.0.8(postcss@8.4.49)':
     dependencies:
       '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  '@csstools/postcss-unset-value@4.0.0(postcss@8.5.3)':
+  '@csstools/postcss-unset-value@4.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
   '@csstools/selector-resolve-nested@3.0.0(postcss-selector-parser@7.1.0)':
     dependencies:
@@ -12049,9 +12045,9 @@ snapshots:
     dependencies:
       postcss-selector-parser: 7.1.0
 
-  '@csstools/utilities@2.0.0(postcss@8.5.3)':
+  '@csstools/utilities@2.0.0(postcss@8.4.49)':
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
   '@dprint/formatter@0.3.0': {}
 
@@ -12085,7 +12081,7 @@ snapshots:
     dependencies:
       '@types/eslint': 9.6.1
       '@types/estree': 1.0.7
-      '@typescript-eslint/types': 8.30.1
+      '@typescript-eslint/types': 8.29.1
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -13734,8 +13730,6 @@ snapshots:
 
   '@typescript-eslint/types@8.29.1': {}
 
-  '@typescript-eslint/types@8.30.1': {}
-
   '@typescript-eslint/types@8.31.0': {}
 
   '@typescript-eslint/typescript-estree@8.29.1(typescript@5.8.3)':
@@ -14416,14 +14410,14 @@ snapshots:
       stubborn-fs: 1.2.5
       when-exit: 2.1.3
 
-  autoprefixer@10.4.21(postcss@8.5.3):
+  autoprefixer@10.4.21(postcss@8.4.49):
     dependencies:
       browserslist: 4.24.4
       caniuse-lite: 1.0.30001703
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -14957,15 +14951,15 @@ snapshots:
 
   crypt@0.0.2: {}
 
-  css-blank-pseudo@7.0.1(postcss@8.5.3):
+  css-blank-pseudo@7.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  css-has-pseudo@7.0.2(postcss@8.5.3):
+  css-has-pseudo@7.0.2(postcss@8.4.49):
     dependencies:
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
       postcss-value-parser: 4.2.0
 
@@ -14995,9 +14989,9 @@ snapshots:
     optionalDependencies:
       webpack: 5.98.0(@swc/core@1.10.18)(esbuild@0.25.2)
 
-  css-prefers-color-scheme@10.0.0(postcss@8.5.3):
+  css-prefers-color-scheme@10.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
   css-select@4.3.0:
     dependencies:
@@ -18151,96 +18145,96 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-attribute-case-insensitive@7.0.1(postcss@8.5.3):
+  postcss-attribute-case-insensitive@7.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-clamp@4.1.0(postcss@8.5.3):
+  postcss-clamp@4.1.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@7.0.9(postcss@8.5.3):
+  postcss-color-functional-notation@7.0.9(postcss@8.4.49):
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
-  postcss-color-hex-alpha@10.0.0(postcss@8.5.3):
+  postcss-color-hex-alpha@10.0.0(postcss@8.4.49):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@10.0.0(postcss@8.5.3):
+  postcss-color-rebeccapurple@10.0.0(postcss@8.4.49):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@11.0.5(postcss@8.5.3):
+  postcss-custom-media@11.0.5(postcss@8.4.49):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.4(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
       '@csstools/media-query-list-parser': 4.0.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-custom-properties@14.0.4(postcss@8.5.3):
+  postcss-custom-properties@14.0.4(postcss@8.4.49):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.4(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@8.0.4(postcss@8.5.3):
+  postcss-custom-selectors@8.0.4(postcss@8.4.49):
     dependencies:
       '@csstools/cascade-layer-name-parser': 2.0.4(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-dir-pseudo-class@9.0.1(postcss@8.5.3):
+  postcss-dir-pseudo-class@9.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-double-position-gradients@6.0.1(postcss@8.5.3):
+  postcss-double-position-gradients@6.0.1(postcss@8.4.49):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-focus-visible@10.0.1(postcss@8.5.3):
+  postcss-focus-visible@10.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-focus-within@9.0.1(postcss@8.5.3):
+  postcss-focus-within@9.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-font-variant@5.0.0(postcss@8.5.3):
+  postcss-font-variant@5.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-gap-properties@6.0.0(postcss@8.5.3):
+  postcss-gap-properties@6.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-image-set-function@7.0.0(postcss@8.5.3):
+  postcss-image-set-function@7.0.0(postcss@8.4.49):
     dependencies:
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   postcss-import@15.1.0(postcss@8.4.49):
@@ -18255,14 +18249,14 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.49
 
-  postcss-lab-function@7.0.9(postcss@8.5.3):
+  postcss-lab-function@7.0.9(postcss@8.4.49):
     dependencies:
       '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3)
       '@csstools/css-tokenizer': 3.0.3
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/utilities': 2.0.0(postcss@8.5.3)
-      postcss: 8.5.3
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/utilities': 2.0.0(postcss@8.4.49)
+      postcss: 8.4.49
 
   postcss-load-config@4.0.2(postcss@8.4.49):
     dependencies:
@@ -18282,9 +18276,9 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
-  postcss-logical@8.1.0(postcss@8.5.3):
+  postcss-logical@8.1.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
   postcss-modules-extract-imports@3.1.0(postcss@8.5.3):
@@ -18337,110 +18331,110 @@ snapshots:
       postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
-  postcss-nesting@13.0.1(postcss@8.5.3):
+  postcss-nesting@13.0.1(postcss@8.4.49):
     dependencies:
       '@csstools/selector-resolve-nested': 3.0.0(postcss-selector-parser@7.1.0)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-opacity-percentage@3.0.0(postcss@8.5.3):
+  postcss-opacity-percentage@3.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-overflow-shorthand@6.0.0(postcss@8.5.3):
+  postcss-overflow-shorthand@6.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.3):
+  postcss-page-break@3.0.4(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-place@10.0.0(postcss@8.5.3):
+  postcss-place@10.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-value-parser: 4.2.0
 
-  postcss-preset-env@10.1.6(postcss@8.5.3):
+  postcss-preset-env@10.1.6(postcss@8.4.49):
     dependencies:
-      '@csstools/postcss-cascade-layers': 5.0.1(postcss@8.5.3)
-      '@csstools/postcss-color-function': 4.0.9(postcss@8.5.3)
-      '@csstools/postcss-color-mix-function': 3.0.9(postcss@8.5.3)
-      '@csstools/postcss-content-alt-text': 2.0.5(postcss@8.5.3)
-      '@csstools/postcss-exponential-functions': 2.0.8(postcss@8.5.3)
-      '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.5.3)
-      '@csstools/postcss-gamut-mapping': 2.0.9(postcss@8.5.3)
-      '@csstools/postcss-gradients-interpolation-method': 5.0.9(postcss@8.5.3)
-      '@csstools/postcss-hwb-function': 4.0.9(postcss@8.5.3)
-      '@csstools/postcss-ic-unit': 4.0.1(postcss@8.5.3)
-      '@csstools/postcss-initial': 2.0.1(postcss@8.5.3)
-      '@csstools/postcss-is-pseudo-class': 5.0.1(postcss@8.5.3)
-      '@csstools/postcss-light-dark-function': 2.0.8(postcss@8.5.3)
-      '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.5.3)
-      '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.5.3)
-      '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.5.3)
-      '@csstools/postcss-logical-resize': 3.0.0(postcss@8.5.3)
-      '@csstools/postcss-logical-viewport-units': 3.0.3(postcss@8.5.3)
-      '@csstools/postcss-media-minmax': 2.0.8(postcss@8.5.3)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.4(postcss@8.5.3)
-      '@csstools/postcss-nested-calc': 4.0.0(postcss@8.5.3)
-      '@csstools/postcss-normalize-display-values': 4.0.0(postcss@8.5.3)
-      '@csstools/postcss-oklab-function': 4.0.9(postcss@8.5.3)
-      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.5.3)
-      '@csstools/postcss-random-function': 2.0.0(postcss@8.5.3)
-      '@csstools/postcss-relative-color-syntax': 3.0.9(postcss@8.5.3)
-      '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.5.3)
-      '@csstools/postcss-sign-functions': 1.1.3(postcss@8.5.3)
-      '@csstools/postcss-stepped-value-functions': 4.0.8(postcss@8.5.3)
-      '@csstools/postcss-text-decoration-shorthand': 4.0.2(postcss@8.5.3)
-      '@csstools/postcss-trigonometric-functions': 4.0.8(postcss@8.5.3)
-      '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.3)
-      autoprefixer: 10.4.21(postcss@8.5.3)
+      '@csstools/postcss-cascade-layers': 5.0.1(postcss@8.4.49)
+      '@csstools/postcss-color-function': 4.0.9(postcss@8.4.49)
+      '@csstools/postcss-color-mix-function': 3.0.9(postcss@8.4.49)
+      '@csstools/postcss-content-alt-text': 2.0.5(postcss@8.4.49)
+      '@csstools/postcss-exponential-functions': 2.0.8(postcss@8.4.49)
+      '@csstools/postcss-font-format-keywords': 4.0.0(postcss@8.4.49)
+      '@csstools/postcss-gamut-mapping': 2.0.9(postcss@8.4.49)
+      '@csstools/postcss-gradients-interpolation-method': 5.0.9(postcss@8.4.49)
+      '@csstools/postcss-hwb-function': 4.0.9(postcss@8.4.49)
+      '@csstools/postcss-ic-unit': 4.0.1(postcss@8.4.49)
+      '@csstools/postcss-initial': 2.0.1(postcss@8.4.49)
+      '@csstools/postcss-is-pseudo-class': 5.0.1(postcss@8.4.49)
+      '@csstools/postcss-light-dark-function': 2.0.8(postcss@8.4.49)
+      '@csstools/postcss-logical-float-and-clear': 3.0.0(postcss@8.4.49)
+      '@csstools/postcss-logical-overflow': 2.0.0(postcss@8.4.49)
+      '@csstools/postcss-logical-overscroll-behavior': 2.0.0(postcss@8.4.49)
+      '@csstools/postcss-logical-resize': 3.0.0(postcss@8.4.49)
+      '@csstools/postcss-logical-viewport-units': 3.0.3(postcss@8.4.49)
+      '@csstools/postcss-media-minmax': 2.0.8(postcss@8.4.49)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 3.0.4(postcss@8.4.49)
+      '@csstools/postcss-nested-calc': 4.0.0(postcss@8.4.49)
+      '@csstools/postcss-normalize-display-values': 4.0.0(postcss@8.4.49)
+      '@csstools/postcss-oklab-function': 4.0.9(postcss@8.4.49)
+      '@csstools/postcss-progressive-custom-properties': 4.0.1(postcss@8.4.49)
+      '@csstools/postcss-random-function': 2.0.0(postcss@8.4.49)
+      '@csstools/postcss-relative-color-syntax': 3.0.9(postcss@8.4.49)
+      '@csstools/postcss-scope-pseudo-class': 4.0.1(postcss@8.4.49)
+      '@csstools/postcss-sign-functions': 1.1.3(postcss@8.4.49)
+      '@csstools/postcss-stepped-value-functions': 4.0.8(postcss@8.4.49)
+      '@csstools/postcss-text-decoration-shorthand': 4.0.2(postcss@8.4.49)
+      '@csstools/postcss-trigonometric-functions': 4.0.8(postcss@8.4.49)
+      '@csstools/postcss-unset-value': 4.0.0(postcss@8.4.49)
+      autoprefixer: 10.4.21(postcss@8.4.49)
       browserslist: 4.24.4
-      css-blank-pseudo: 7.0.1(postcss@8.5.3)
-      css-has-pseudo: 7.0.2(postcss@8.5.3)
-      css-prefers-color-scheme: 10.0.0(postcss@8.5.3)
+      css-blank-pseudo: 7.0.1(postcss@8.4.49)
+      css-has-pseudo: 7.0.2(postcss@8.4.49)
+      css-prefers-color-scheme: 10.0.0(postcss@8.4.49)
       cssdb: 8.2.5
-      postcss: 8.5.3
-      postcss-attribute-case-insensitive: 7.0.1(postcss@8.5.3)
-      postcss-clamp: 4.1.0(postcss@8.5.3)
-      postcss-color-functional-notation: 7.0.9(postcss@8.5.3)
-      postcss-color-hex-alpha: 10.0.0(postcss@8.5.3)
-      postcss-color-rebeccapurple: 10.0.0(postcss@8.5.3)
-      postcss-custom-media: 11.0.5(postcss@8.5.3)
-      postcss-custom-properties: 14.0.4(postcss@8.5.3)
-      postcss-custom-selectors: 8.0.4(postcss@8.5.3)
-      postcss-dir-pseudo-class: 9.0.1(postcss@8.5.3)
-      postcss-double-position-gradients: 6.0.1(postcss@8.5.3)
-      postcss-focus-visible: 10.0.1(postcss@8.5.3)
-      postcss-focus-within: 9.0.1(postcss@8.5.3)
-      postcss-font-variant: 5.0.0(postcss@8.5.3)
-      postcss-gap-properties: 6.0.0(postcss@8.5.3)
-      postcss-image-set-function: 7.0.0(postcss@8.5.3)
-      postcss-lab-function: 7.0.9(postcss@8.5.3)
-      postcss-logical: 8.1.0(postcss@8.5.3)
-      postcss-nesting: 13.0.1(postcss@8.5.3)
-      postcss-opacity-percentage: 3.0.0(postcss@8.5.3)
-      postcss-overflow-shorthand: 6.0.0(postcss@8.5.3)
-      postcss-page-break: 3.0.4(postcss@8.5.3)
-      postcss-place: 10.0.0(postcss@8.5.3)
-      postcss-pseudo-class-any-link: 10.0.1(postcss@8.5.3)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.3)
-      postcss-selector-not: 8.0.1(postcss@8.5.3)
+      postcss: 8.4.49
+      postcss-attribute-case-insensitive: 7.0.1(postcss@8.4.49)
+      postcss-clamp: 4.1.0(postcss@8.4.49)
+      postcss-color-functional-notation: 7.0.9(postcss@8.4.49)
+      postcss-color-hex-alpha: 10.0.0(postcss@8.4.49)
+      postcss-color-rebeccapurple: 10.0.0(postcss@8.4.49)
+      postcss-custom-media: 11.0.5(postcss@8.4.49)
+      postcss-custom-properties: 14.0.4(postcss@8.4.49)
+      postcss-custom-selectors: 8.0.4(postcss@8.4.49)
+      postcss-dir-pseudo-class: 9.0.1(postcss@8.4.49)
+      postcss-double-position-gradients: 6.0.1(postcss@8.4.49)
+      postcss-focus-visible: 10.0.1(postcss@8.4.49)
+      postcss-focus-within: 9.0.1(postcss@8.4.49)
+      postcss-font-variant: 5.0.0(postcss@8.4.49)
+      postcss-gap-properties: 6.0.0(postcss@8.4.49)
+      postcss-image-set-function: 7.0.0(postcss@8.4.49)
+      postcss-lab-function: 7.0.9(postcss@8.4.49)
+      postcss-logical: 8.1.0(postcss@8.4.49)
+      postcss-nesting: 13.0.1(postcss@8.4.49)
+      postcss-opacity-percentage: 3.0.0(postcss@8.4.49)
+      postcss-overflow-shorthand: 6.0.0(postcss@8.4.49)
+      postcss-page-break: 3.0.4(postcss@8.4.49)
+      postcss-place: 10.0.0(postcss@8.4.49)
+      postcss-pseudo-class-any-link: 10.0.1(postcss@8.4.49)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.4.49)
+      postcss-selector-not: 8.0.1(postcss@8.4.49)
 
-  postcss-pseudo-class-any-link@10.0.1(postcss@8.5.3):
+  postcss-pseudo-class-any-link@10.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.3):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
 
-  postcss-selector-not@8.0.1(postcss@8.5.3):
+  postcss-selector-not@8.0.1(postcss@8.4.49):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.4.49
       postcss-selector-parser: 7.1.0
 
   postcss-selector-parser@6.1.0: