@univerjs/ui 0.1.0-alpha.1

package/lib/esm/index.js

@@ -0,0 +1,4507 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _construct(Parent, args, Class) {
+    if (_is_native_reflect_construct()) {
+        _construct = Reflect.construct;
+    } else {
+        _construct = function construct(Parent, args, Class) {
+            var a = [
+                null
+            ];
+            a.push.apply(a, args);
+            var Constructor = Function.bind.apply(Parent, a);
+            var instance = new Constructor();
+            if (Class) _set_prototype_of(instance, Class.prototype);
+            return instance;
+        };
+    }
+    return _construct.apply(null, arguments);
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get(target, property, receiver) {
+    if (typeof Reflect !== "undefined" && Reflect.get) {
+        _get = Reflect.get;
+    } else {
+        _get = function get(target, property, receiver) {
+            var base = _super_prop_base(target, property);
+            if (!base) return;
+            var desc = Object.getOwnPropertyDescriptor(base, property);
+            if (desc.get) {
+                return desc.get.call(receiver || target);
+            }
+            return desc.value;
+        };
+    }
+    return _get(target, property, receiver || target);
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _is_native_function(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _super_prop_base(object, property) {
+    while(!Object.prototype.hasOwnProperty.call(object, property)){
+        object = _get_prototype_of(object);
+        if (object === null) break;
+    }
+    return object;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _wrap_native_super(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+    _wrap_native_super = function wrapNativeSuper(Class) {
+        if (Class === null || !_is_native_function(Class)) return Class;
+        if (typeof Class !== "function") {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        if (typeof _cache !== "undefined") {
+            if (_cache.has(Class)) return _cache.get(Class);
+            _cache.set(Class, Wrapper);
+        }
+        function Wrapper() {
+            return _construct(Class, arguments, _get_prototype_of(this).constructor);
+        }
+        Wrapper.prototype = Object.create(Class.prototype, {
+            constructor: {
+                value: Wrapper,
+                enumerable: false,
+                writable: true,
+                configurable: true
+            }
+        });
+        return _set_prototype_of(Wrapper, Class);
+    };
+    return _wrap_native_super(Class);
+}
+function _is_native_reflect_construct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
+    try {
+        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+        return true;
+    } catch (e) {
+        return false;
+    }
+}
+function _create_super(Derived) {
+    var hasNativeReflectConstruct = _is_native_reflect_construct();
+    return function _createSuperInternal() {
+        var Super = _get_prototype_of(Derived), result;
+        if (hasNativeReflectConstruct) {
+            var NewTarget = _get_prototype_of(this).constructor;
+            result = Reflect.construct(Super, arguments, NewTarget);
+        } else {
+            result = Super.apply(this, arguments);
+        }
+        return _possible_constructor_return(this, result);
+    };
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+var _class;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = function(decorators, target, key, kind) {
+    var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+    for(var i = decorators.length - 1, decorator; i >= 0; i--)if (decorator = decorators[i]) result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+    if (kind && result) __defProp(target, key, result);
+    return result;
+};
+var __decorateParam = function(index, decorator) {
+    return function(target, key) {
+        return decorator(target, key, index);
+    };
+};
+// src/common/component-manager.ts
+import { toDisposable } from "@univerjs/core";
+import { AdjustHeight, AdjustWidth, AlignBottomSingle, AlignTopSingle, AllBorderSingle, AutoHeight, AutowrapSingle, AvgSingle, BoldSingle, BrushSingle, CancelFreezeSingle, CancelMergeSingle, ClearFormat, CntSingle, CodeSingle, ContentSingle16, Copy, DeleteCellMoveDown, DeleteCellShiftLeft, DeleteCellShiftRight, DeleteCellShiftUp, DeleteColumn, DeleteRow, DownBorder, FontColor, FreezeColumnSingle, FreezeRowSingle, FreezeToSelectedSingle, FunctionSingle, Hide, HorizontallySingle, HorizontalMergeSingle, InnerBorder, Insert, InsertCellDown, InsertCellShiftRight, InsertRowAbove, InsertRowBelow, ItalicSingle, KeyboardSingle, LeftBorder, LeftInsertColumn, LeftJustifyingSingle, LeftRotationFortyFiveDegreesSingle, LeftRotationNinetyDegreesSingle, MaxSingle, MergeAllSingle, MinSingle, NoBorderSingle, NoColor, NoRotationSingle, OuterBorder, OverflowSingle, PaintBucket, PasteSpecial, RedoSingle, Reduce, RightBorder, RightInsertColumn, RightJustifyingSingle, RightRotationFortyFiveDegreesSingle, RightRotationNinetyDegreesSingle, StrikethroughSingle, SumSingle, TruncationSingle, UnderlineSingle, UndoSingle, UpBorder, VerticalCenterSingle, VerticalIntegrationSingle, VerticalTextSingle } from "@univerjs/icons";
+var ComponentManager = /*#__PURE__*/ function() {
+    "use strict";
+    function ComponentManager() {
+        _class_call_check(this, ComponentManager);
+        _define_property(this, "_components", /* @__PURE__ */ new Map());
+        var iconList = {
+            AlignBottomSingle: AlignBottomSingle,
+            AlignTopSingle: AlignTopSingle,
+            AllBorderSingle: AllBorderSingle,
+            AutowrapSingle: AutowrapSingle,
+            BoldSingle: BoldSingle,
+            BrushSingle: BrushSingle,
+            Copy: Copy,
+            ClearFormat: ClearFormat,
+            DownBorder: DownBorder,
+            FontColor: FontColor,
+            FunctionSingle: FunctionSingle,
+            HorizontallySingle: HorizontallySingle,
+            InnerBorder: InnerBorder,
+            ItalicSingle: ItalicSingle,
+            KeyboardSingle: KeyboardSingle,
+            ContentSingle16: ContentSingle16,
+            LeftBorder: LeftBorder,
+            LeftJustifyingSingle: LeftJustifyingSingle,
+            LeftRotationFortyFiveDegreesSingle: LeftRotationFortyFiveDegreesSingle,
+            LeftRotationNinetyDegreesSingle: LeftRotationNinetyDegreesSingle,
+            MergeAllSingle: MergeAllSingle,
+            HorizontalMergeSingle: HorizontalMergeSingle,
+            VerticalIntegrationSingle: VerticalIntegrationSingle,
+            CancelMergeSingle: CancelMergeSingle,
+            NoBorderSingle: NoBorderSingle,
+            NoColor: NoColor,
+            NoRotationSingle: NoRotationSingle,
+            OuterBorder: OuterBorder,
+            OverflowSingle: OverflowSingle,
+            PaintBucket: PaintBucket,
+            PasteSpecial: PasteSpecial,
+            RedoSingle: RedoSingle,
+            RightBorder: RightBorder,
+            RightJustifyingSingle: RightJustifyingSingle,
+            RightRotationFortyFiveDegreesSingle: RightRotationFortyFiveDegreesSingle,
+            RightRotationNinetyDegreesSingle: RightRotationNinetyDegreesSingle,
+            StrikethroughSingle: StrikethroughSingle,
+            TruncationSingle: TruncationSingle,
+            UnderlineSingle: UnderlineSingle,
+            UndoSingle: UndoSingle,
+            UpBorder: UpBorder,
+            VerticalCenterSingle: VerticalCenterSingle,
+            VerticalTextSingle: VerticalTextSingle,
+            Insert: Insert,
+            InsertCellDown: InsertCellDown,
+            InsertCellShiftRight: InsertCellShiftRight,
+            InsertRowAbove: InsertRowAbove,
+            InsertRowBelow: InsertRowBelow,
+            LeftInsertColumn: LeftInsertColumn,
+            RightInsertColumn: RightInsertColumn,
+            DeleteColumn: DeleteColumn,
+            DeleteRow: DeleteRow,
+            DeleteCellShiftUp: DeleteCellShiftUp,
+            DeleteCellShiftRight: DeleteCellShiftRight,
+            DeleteCellShiftLeft: DeleteCellShiftLeft,
+            DeleteCellMoveDown: DeleteCellMoveDown,
+            Reduce: Reduce,
+            Hide: Hide,
+            AutoHeight: AutoHeight,
+            AdjustHeight: AdjustHeight,
+            AdjustWidth: AdjustWidth,
+            AvgSingle: AvgSingle,
+            CntSingle: CntSingle,
+            MaxSingle: MaxSingle,
+            MinSingle: MinSingle,
+            SumSingle: SumSingle,
+            CancelFreezeSingle: CancelFreezeSingle,
+            FreezeColumnSingle: FreezeColumnSingle,
+            FreezeRowSingle: FreezeRowSingle,
+            FreezeToSelectedSingle: FreezeToSelectedSingle,
+            CodeSingle: CodeSingle
+        };
+        for(var k in iconList){
+            this.register(k, iconList[k]);
+        }
+    }
+    _create_class(ComponentManager, [
+        {
+            key: "register",
+            value: function register(name, component) {
+                var _this = this;
+                if (this._components.has(name)) {
+                    console.warn("Component ".concat(name, " already exists."));
+                }
+                this._components.set(name, component);
+                return toDisposable(function() {
+                    return _this._components.delete(name);
+                });
+            }
+        },
+        {
+            key: "get",
+            value: function get(name) {
+                return this._components.get(name);
+            }
+        },
+        {
+            key: "delete",
+            value: function _delete(name) {
+                this._components.delete(name);
+            }
+        }
+    ]);
+    return ComponentManager;
+}();
+// src/common/z-index-manager.ts
+var ZIndexManager = /*#__PURE__*/ function() {
+    "use strict";
+    function ZIndexManager() {
+        _class_call_check(this, ZIndexManager);
+        _define_property(this, "_list", /* @__PURE__ */ new Map());
+    }
+    _create_class(ZIndexManager, [
+        {
+            key: "setIndex",
+            value: function setIndex(name, index) {
+                this._list.set(name, index);
+            }
+        },
+        {
+            key: "getIndex",
+            value: function getIndex(name) {
+                return this._list.get(name);
+            }
+        },
+        {
+            key: "removeIndex",
+            value: function removeIndex(name) {
+                this._list.delete(name);
+            }
+        },
+        {
+            key: "getMaxIndex",
+            value: function getMaxIndex() {
+                var max = -9999999;
+                this._list.forEach(function(item) {
+                    if (+item > max) {
+                        max = +item;
+                    }
+                });
+                return max;
+            }
+        }
+    ]);
+    return ZIndexManager;
+}();
+// src/components/custom-label/CustomLabel.tsx
+import { TinyColor } from "@ctrl/tinycolor";
+import { LocaleService } from "@univerjs/core";
+import { useDependency } from "@wendellhu/redi/react-bindings";
+import React from "react";
+import { isObservable } from "rxjs";
+// src/components/hooks/observable.ts
+import { useRef, useState } from "react";
+function useObservable(observable, defaultValue, shouldHaveSyncValue) {
+    var observableRef = useRef(null);
+    var subscriptionRef = useRef(null);
+    var setValue;
+    var initialized = false;
+    var innerDefaultValue;
+    if (!observableRef.current || observableRef.current !== observable) {
+        var _subscriptionRef_current;
+        (_subscriptionRef_current = subscriptionRef.current) === null || _subscriptionRef_current === void 0 ? void 0 : _subscriptionRef_current.unsubscribe();
+        subscriptionRef.current = observable.subscribe(function(v) {
+            if (setValue) {
+                setValue(v);
+            } else {
+                innerDefaultValue = v;
+                initialized = true;
+            }
+        });
+    }
+    if (shouldHaveSyncValue && !initialized) {
+        throw new Error("[useObservable]: expect shouldHaveSyncValue but not getting a sync value!");
+    }
+    var s = useState(innerDefaultValue || defaultValue);
+    var value = s[0];
+    setValue = s[1];
+    return value;
+}
+// src/components/custom-label/CustomLabel.tsx
+function CustomLabel(props) {
+    var title = props.title, icon = props.icon, label = props.label, value = props.value, value$ = props.value$;
+    var localeService = useDependency(LocaleService);
+    var componentManager = useDependency(ComponentManager);
+    var nodes = [];
+    var index = 0;
+    var realValue = value;
+    if (value$) {
+        realValue = useObservable(value$, void 0, true);
+    }
+    var realIcon;
+    if (isObservable(icon)) {
+        realIcon = useObservable(icon, void 0, true);
+    } else {
+        realIcon = icon;
+    }
+    var isValid = new TinyColor(realValue).isValid;
+    if (icon) {
+        var Icon = componentManager.get(realIcon !== null && realIcon !== void 0 ? realIcon : "");
+        Icon && nodes.push(/* @__PURE__ */ React.createElement(Icon, {
+            key: index++,
+            extend: {
+                colorChannel1: isValid ? realValue : "rgb(var(--primary-color))"
+            }
+        }));
+    }
+    if (label) {
+        var isStringLabel = typeof label === "string";
+        var customProps = isStringLabel ? _object_spread({}, props) : _object_spread({}, label === null || label === void 0 ? void 0 : label.props, props);
+        var labelName = isStringLabel ? label : label === null || label === void 0 ? void 0 : label.name;
+        var CustomComponent = componentManager.get(labelName);
+        if (CustomComponent) {
+            nodes.push(/* @__PURE__ */ React.createElement(CustomComponent, _object_spread_props(_object_spread({
+                key: index++
+            }, customProps), {
+                value: realValue
+            })));
+        } else {
+            nodes.push(/* @__PURE__ */ React.createElement("span", {
+                key: index++
+            }, localeService.t(labelName)));
+        }
+    }
+    if (title) {
+        nodes.push(/* @__PURE__ */ React.createElement("span", {
+            key: index++
+        }, localeService.t(title)));
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, nodes);
+}
+// src/components/menu/Menu.tsx
+import { isRealNum } from "@univerjs/core";
+import { Menu as DesignMenu, MenuItem as DesignMenuItem, MenuItemGroup as DesignMenuItemGroup, SubMenu as DesignSubMenu } from "@univerjs/design";
+import { CheckMarkSingle, MoreSingle } from "@univerjs/icons";
+import { useDependency as useDependency2 } from "@wendellhu/redi/react-bindings";
+import clsx from "clsx";
+import React2, { useState as useState2 } from "react";
+import { isObservable as isObservable2, of } from "rxjs";
+// src/services/menu/menu.ts
+var MenuPosition = /* @__PURE__ */ function(MenuPosition2) {
+    MenuPosition2["VOID"] = "void";
+    MenuPosition2["TOOLBAR_START"] = "uiToolbar.start";
+    MenuPosition2["TOOLBAR_INSERT"] = "uiToolbar.insert";
+    MenuPosition2["TOOLBAR_FORMULAS"] = "uiToolbar.formulas";
+    MenuPosition2["TOOLBAR_DATA"] = "uiToolbar.data";
+    MenuPosition2["TOOLBAR_VIEW"] = "uiToolbar.view";
+    MenuPosition2["TOOLBAR_OTHERS"] = "uiToolbar.others";
+    MenuPosition2["CONTEXT_MENU"] = "contextMenu";
+    return MenuPosition2;
+}(MenuPosition || {});
+var MenuGroup = /* @__PURE__ */ function(MenuGroup2) {
+    MenuGroup2[MenuGroup2["TOOLBAR_HISTORY"] = 0] = "TOOLBAR_HISTORY";
+    MenuGroup2[MenuGroup2["TOOLBAR_FORMAT"] = 1] = "TOOLBAR_FORMAT";
+    MenuGroup2[MenuGroup2["TOOLBAR_LAYOUT"] = 2] = "TOOLBAR_LAYOUT";
+    MenuGroup2[MenuGroup2["TOOLBAR_FORMULAS_INSERT"] = 3] = "TOOLBAR_FORMULAS_INSERT";
+    MenuGroup2[MenuGroup2["TOOLBAR_FORMULAS_VIEW"] = 4] = "TOOLBAR_FORMULAS_VIEW";
+    MenuGroup2[MenuGroup2["TOOLBAR_FILE"] = 5] = "TOOLBAR_FILE";
+    MenuGroup2[MenuGroup2["TOOLBAR_OTHERS"] = 6] = "TOOLBAR_OTHERS";
+    MenuGroup2[MenuGroup2["CONTEXT_MENU_FORMAT"] = 7] = "CONTEXT_MENU_FORMAT";
+    MenuGroup2[MenuGroup2["CONTEXT_MENU_LAYOUT"] = 8] = "CONTEXT_MENU_LAYOUT";
+    MenuGroup2[MenuGroup2["CONTEXT_MENU_DATA"] = 9] = "CONTEXT_MENU_DATA";
+    MenuGroup2[MenuGroup2["CONTEXT_MENU_OTHERS"] = 10] = "CONTEXT_MENU_OTHERS";
+    return MenuGroup2;
+}(MenuGroup || {});
+var MenuItemType = /* @__PURE__ */ function(MenuItemType2) {
+    MenuItemType2[MenuItemType2["BUTTON"] = 0] = "BUTTON";
+    MenuItemType2[MenuItemType2["SELECTOR"] = 1] = "SELECTOR";
+    MenuItemType2[MenuItemType2["BUTTON_SELECTOR"] = 2] = "BUTTON_SELECTOR";
+    MenuItemType2[MenuItemType2["SUBITEMS"] = 3] = "SUBITEMS";
+    return MenuItemType2;
+}(MenuItemType || {});
+// src/services/menu/menu.service.ts
+import { Disposable as Disposable2, toDisposable as toDisposable4 } from "@univerjs/core";
+import { createIdentifier as createIdentifier3 } from "@wendellhu/redi";
+import { BehaviorSubject } from "rxjs";
+// src/services/shortcut/shortcut.service.ts
+import { Disposable, ICommandService, IContextService, toDisposable as toDisposable3 } from "@univerjs/core";
+import { createIdentifier as createIdentifier2 } from "@wendellhu/redi";
+import { Subject } from "rxjs";
+// src/common/lifecycle.ts
+import { toDisposable as toDisposable2 } from "@univerjs/core";
+function fromDocumentEvent(type, listener, options) {
+    document.addEventListener(type, listener, options);
+    return toDisposable2(function() {
+        return document.removeEventListener(type, listener, options);
+    });
+}
+// src/services/platform/platform.service.ts
+import { createIdentifier } from "@wendellhu/redi";
+var IPlatformService = createIdentifier("univer.platform-service");
+var DesktopPlatformService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopPlatformService() {
+        _class_call_check(this, DesktopPlatformService);
+    }
+    _create_class(DesktopPlatformService, [
+        {
+            key: "isMac",
+            get: function get() {
+                return /Mac/.test(navigator.appVersion);
+            }
+        },
+        {
+            key: "isWindows",
+            get: function get() {
+                return /Windows/.test(navigator.appVersion);
+            }
+        },
+        {
+            key: "isLinux",
+            get: function get() {
+                return /Linux/.test(navigator.appVersion);
+            }
+        }
+    ]);
+    return DesktopPlatformService;
+}();
+var _obj;
+// src/services/shortcut/keycode.ts
+var KeyCodeToChar = (_obj = {}, _define_property(_obj, 8 /* BACKSPACE */ , "Backspace"), _define_property(_obj, 9 /* TAB */ , "Tab"), _define_property(_obj, 13 /* ENTER */ , "Enter"), _define_property(_obj, 46 /* DELETE */ , "Del"), _define_property(_obj, 27 /* ESC */ , "Esc"), _define_property(_obj, 32 /* SPACE */ , "Space"), _define_property(_obj, 37 /* ARROW_LEFT */ , "←"), _define_property(_obj, 39 /* ARROW_RIGHT */ , "→"), _define_property(_obj, 38 /* ARROW_UP */ , "↑"), _define_property(_obj, 40 /* ARROW_DOWN */ , "↓"), _define_property(_obj, 48 /* Digit0 */ , "0"), _define_property(_obj, 49 /* Digit1 */ , "1"), _define_property(_obj, 50 /* Digit2 */ , "2"), _define_property(_obj, 51 /* Digit3 */ , "3"), _define_property(_obj, 52 /* Digit4 */ , "4"), _define_property(_obj, 53 /* Digit5 */ , "5"), _define_property(_obj, 54 /* Digit6 */ , "6"), _define_property(_obj, 55 /* Digit7 */ , "7"), _define_property(_obj, 56 /* Digit8 */ , "8"), _define_property(_obj, 57 /* Digit9 */ , "9"), _define_property(_obj, 65 /* A */ , "A"), _define_property(_obj, 66 /* B */ , "B"), _define_property(_obj, 67 /* C */ , "C"), _define_property(_obj, 68 /* D */ , "D"), _define_property(_obj, 69 /* E */ , "E"), _define_property(_obj, 70 /* F */ , "F"), _define_property(_obj, 71 /* G */ , "G"), _define_property(_obj, 72 /* H */ , "H"), _define_property(_obj, 73 /* I */ , "I"), _define_property(_obj, 74 /* J */ , "J"), _define_property(_obj, 75 /* K */ , "K"), _define_property(_obj, 76 /* L */ , "L"), _define_property(_obj, 77 /* M */ , "M"), _define_property(_obj, 78 /* N */ , "N"), _define_property(_obj, 79 /* O */ , "O"), _define_property(_obj, 80 /* P */ , "P"), _define_property(_obj, 81 /* Q */ , "Q"), _define_property(_obj, 82 /* R */ , "R"), _define_property(_obj, 83 /* S */ , "S"), _define_property(_obj, 84 /* T */ , "T"), _define_property(_obj, 85 /* U */ , "U"), _define_property(_obj, 86 /* V */ , "V"), _define_property(_obj, 87 /* W */ , "W"), _define_property(_obj, 88 /* X */ , "X"), _define_property(_obj, 89 /* Y */ , "Y"), _define_property(_obj, 90 /* Z */ , "Z"), _define_property(_obj, 189 /* MINUS */ , "-"), _define_property(_obj, 187 /* EQUAL */ , "="), _obj);
+var KeyCode = /* @__PURE__ */ function(KeyCode2) {
+    KeyCode2[KeyCode2["UNKNOWN"] = 0] = "UNKNOWN";
+    KeyCode2[KeyCode2["BACKSPACE"] = 8] = "BACKSPACE";
+    KeyCode2[KeyCode2["TAB"] = 9] = "TAB";
+    KeyCode2[KeyCode2["ENTER"] = 13] = "ENTER";
+    KeyCode2[KeyCode2["ESC"] = 27] = "ESC";
+    KeyCode2[KeyCode2["SPACE"] = 32] = "SPACE";
+    KeyCode2[KeyCode2["ARROW_LEFT"] = 37] = "ARROW_LEFT";
+    KeyCode2[KeyCode2["ARROW_UP"] = 38] = "ARROW_UP";
+    KeyCode2[KeyCode2["ARROW_RIGHT"] = 39] = "ARROW_RIGHT";
+    KeyCode2[KeyCode2["ARROW_DOWN"] = 40] = "ARROW_DOWN";
+    KeyCode2[KeyCode2["INSERT"] = 45] = "INSERT";
+    KeyCode2[KeyCode2["DELETE"] = 46] = "DELETE";
+    KeyCode2[KeyCode2["Digit0"] = 48] = "Digit0";
+    KeyCode2[KeyCode2["Digit1"] = 49] = "Digit1";
+    KeyCode2[KeyCode2["Digit2"] = 50] = "Digit2";
+    KeyCode2[KeyCode2["Digit3"] = 51] = "Digit3";
+    KeyCode2[KeyCode2["Digit4"] = 52] = "Digit4";
+    KeyCode2[KeyCode2["Digit5"] = 53] = "Digit5";
+    KeyCode2[KeyCode2["Digit6"] = 54] = "Digit6";
+    KeyCode2[KeyCode2["Digit7"] = 55] = "Digit7";
+    KeyCode2[KeyCode2["Digit8"] = 56] = "Digit8";
+    KeyCode2[KeyCode2["Digit9"] = 57] = "Digit9";
+    KeyCode2[KeyCode2["A"] = 65] = "A";
+    KeyCode2[KeyCode2["B"] = 66] = "B";
+    KeyCode2[KeyCode2["C"] = 67] = "C";
+    KeyCode2[KeyCode2["D"] = 68] = "D";
+    KeyCode2[KeyCode2["E"] = 69] = "E";
+    KeyCode2[KeyCode2["F"] = 70] = "F";
+    KeyCode2[KeyCode2["G"] = 71] = "G";
+    KeyCode2[KeyCode2["H"] = 72] = "H";
+    KeyCode2[KeyCode2["I"] = 73] = "I";
+    KeyCode2[KeyCode2["J"] = 74] = "J";
+    KeyCode2[KeyCode2["K"] = 75] = "K";
+    KeyCode2[KeyCode2["L"] = 76] = "L";
+    KeyCode2[KeyCode2["M"] = 77] = "M";
+    KeyCode2[KeyCode2["N"] = 78] = "N";
+    KeyCode2[KeyCode2["O"] = 79] = "O";
+    KeyCode2[KeyCode2["P"] = 80] = "P";
+    KeyCode2[KeyCode2["Q"] = 81] = "Q";
+    KeyCode2[KeyCode2["R"] = 82] = "R";
+    KeyCode2[KeyCode2["S"] = 83] = "S";
+    KeyCode2[KeyCode2["T"] = 84] = "T";
+    KeyCode2[KeyCode2["U"] = 85] = "U";
+    KeyCode2[KeyCode2["V"] = 86] = "V";
+    KeyCode2[KeyCode2["W"] = 87] = "W";
+    KeyCode2[KeyCode2["X"] = 88] = "X";
+    KeyCode2[KeyCode2["Y"] = 89] = "Y";
+    KeyCode2[KeyCode2["Z"] = 90] = "Z";
+    KeyCode2[KeyCode2["F1"] = 112] = "F1";
+    KeyCode2[KeyCode2["F2"] = 113] = "F2";
+    KeyCode2[KeyCode2["F3"] = 114] = "F3";
+    KeyCode2[KeyCode2["F4"] = 115] = "F4";
+    KeyCode2[KeyCode2["F5"] = 116] = "F5";
+    KeyCode2[KeyCode2["F6"] = 117] = "F6";
+    KeyCode2[KeyCode2["F7"] = 118] = "F7";
+    KeyCode2[KeyCode2["F8"] = 119] = "F8";
+    KeyCode2[KeyCode2["F9"] = 120] = "F9";
+    KeyCode2[KeyCode2["F10"] = 121] = "F10";
+    KeyCode2[KeyCode2["F11"] = 122] = "F11";
+    KeyCode2[KeyCode2["F12"] = 123] = "F12";
+    KeyCode2[KeyCode2["NUM_LOCK"] = 144] = "NUM_LOCK";
+    KeyCode2[KeyCode2["SCROLL_LOCK"] = 145] = "SCROLL_LOCK";
+    KeyCode2[KeyCode2["MINUS"] = 189] = "MINUS";
+    KeyCode2[KeyCode2["EQUAL"] = 187] = "EQUAL";
+    return KeyCode2;
+}(KeyCode || {});
+var MetaKeys = /* @__PURE__ */ function(MetaKeys2) {
+    MetaKeys2[MetaKeys2["SHIFT"] = 1024] = "SHIFT";
+    MetaKeys2[MetaKeys2["ALT"] = 2048] = "ALT";
+    MetaKeys2[MetaKeys2["CTRL_COMMAND"] = 4096] = "CTRL_COMMAND";
+    MetaKeys2[MetaKeys2["MAC_CTRL"] = 8192] = "MAC_CTRL";
+    return MetaKeys2;
+}(MetaKeys || {});
+// src/services/shortcut/shortcut.service.ts
+var IShortcutService = createIdentifier2("univer.shortcut");
+var DesktopShortcutService = /*#__PURE__*/ function(Disposable) {
+    "use strict";
+    _inherits(DesktopShortcutService, Disposable);
+    var _super = _create_super(DesktopShortcutService);
+    function DesktopShortcutService(_commandService, _platformService, _contextService) {
+        _class_call_check(this, DesktopShortcutService);
+        var _this;
+        _this = _super.call(this);
+        _define_property(_assert_this_initialized(_this), "_shortCutMapping", /* @__PURE__ */ new Map());
+        _define_property(_assert_this_initialized(_this), "_commandIDMapping", /* @__PURE__ */ new Map());
+        _define_property(_assert_this_initialized(_this), "_shortcutChanged$", new Subject());
+        _define_property(_assert_this_initialized(_this), "shortcutChanged$", _this._shortcutChanged$.asObservable());
+        _define_property(_assert_this_initialized(_this), "_forceEscaped", false);
+        _this._commandService = _commandService;
+        _this._platformService = _platformService;
+        _this._contextService = _contextService;
+        _this.disposeWithMe(fromDocumentEvent("keydown", function(e) {
+            _this._resolveKeyboardEvent(e);
+        }));
+        return _this;
+    }
+    _create_class(DesktopShortcutService, [
+        {
+            key: "getAllShortcuts",
+            value: function getAllShortcuts() {
+                return Array.from(this._shortCutMapping.values()).map(function(v) {
+                    return Array.from(v.values());
+                }).flat();
+            }
+        },
+        {
+            key: "registerShortcut",
+            value: function registerShortcut(shortcut) {
+                var _this = this;
+                var binding = this._getBindingFromItem(shortcut);
+                var bindingSet = this._shortCutMapping.get(binding);
+                if (bindingSet) {
+                    bindingSet.add(shortcut);
+                } else {
+                    this._shortCutMapping.set(binding, /* @__PURE__ */ new Set([
+                        shortcut
+                    ]));
+                }
+                var commandID = shortcut.id;
+                var commandIDSet = this._commandIDMapping.get(commandID);
+                if (commandIDSet) {
+                    commandIDSet.add(shortcut);
+                } else {
+                    this._commandIDMapping.set(commandID, /* @__PURE__ */ new Set([
+                        shortcut
+                    ]));
+                }
+                this._emitShortcutChanged();
+                return toDisposable3(function() {
+                    var _this__shortCutMapping_get, _this__shortCutMapping_get1, _this__commandIDMapping_get, _this__commandIDMapping_get1;
+                    (_this__shortCutMapping_get = _this._shortCutMapping.get(binding)) === null || _this__shortCutMapping_get === void 0 ? void 0 : _this__shortCutMapping_get.delete(shortcut);
+                    if (((_this__shortCutMapping_get1 = _this._shortCutMapping.get(binding)) === null || _this__shortCutMapping_get1 === void 0 ? void 0 : _this__shortCutMapping_get1.size) === 0) {
+                        _this._shortCutMapping.delete(binding);
+                    }
+                    (_this__commandIDMapping_get = _this._commandIDMapping.get(commandID)) === null || _this__commandIDMapping_get === void 0 ? void 0 : _this__commandIDMapping_get.delete(shortcut);
+                    if (((_this__commandIDMapping_get1 = _this._commandIDMapping.get(commandID)) === null || _this__commandIDMapping_get1 === void 0 ? void 0 : _this__commandIDMapping_get1.size) === 0) {
+                        _this._commandIDMapping.delete(commandID);
+                    }
+                    _this._emitShortcutChanged();
+                });
+            }
+        },
+        {
+            key: "getShortcutDisplayOfCommand",
+            value: function getShortcutDisplayOfCommand(id) {
+                var set = this._commandIDMapping.get(id);
+                if (!set) {
+                    return null;
+                }
+                return this.getShortcutDisplay(set.values().next().value);
+            }
+        },
+        {
+            key: "getShortcutDisplay",
+            value: function getShortcutDisplay(shortcut) {
+                var binding = this._getBindingFromItem(shortcut);
+                var ctrlKey = binding & 4096 /* CTRL_COMMAND */ ;
+                var shiftKey = binding & 1024 /* SHIFT */ ;
+                var altKey = binding & 2048 /* ALT */ ;
+                var macCtrl = binding & 8192 /* MAC_CTRL */ ;
+                var _KeyCodeToChar_;
+                var body = (_KeyCodeToChar_ = KeyCodeToChar[binding & 255]) !== null && _KeyCodeToChar_ !== void 0 ? _KeyCodeToChar_ : "<->";
+                if (this._platformService.isMac) {
+                    return "".concat(ctrlKey ? "⌘" : "").concat(shiftKey ? "⇧" : "").concat(altKey ? "⌥" : "").concat(macCtrl ? "⌃" : "").concat(body);
+                }
+                return "".concat(ctrlKey ? "Ctrl+" : "").concat(shiftKey ? "Shift+" : "").concat(altKey ? "Alt+" : "").concat(body);
+            }
+        },
+        {
+            key: "_emitShortcutChanged",
+            value: function _emitShortcutChanged() {
+                this._shortcutChanged$.next();
+            }
+        },
+        {
+            key: "forceEscape",
+            value: function forceEscape() {
+                var _this = this;
+                this._forceEscaped = true;
+                return toDisposable3(function() {
+                    return _this._forceEscaped = false;
+                });
+            }
+        },
+        {
+            key: "_resolveKeyboardEvent",
+            value: function _resolveKeyboardEvent(e) {
+                if (this._forceEscaped) {
+                    return;
+                }
+                var shouldPreventDefault = this._dispatch(e);
+                if (shouldPreventDefault) {
+                    e.preventDefault();
+                }
+            }
+        },
+        {
+            key: "_dispatch",
+            value: function _dispatch(e) {
+                var _this = this;
+                var binding = this._deriveBindingFromEvent(e);
+                if (binding === null) {
+                    return false;
+                }
+                var shortcuts = this._shortCutMapping.get(binding);
+                if (shortcuts === void 0) {
+                    return false;
+                }
+                var shouldTrigger = Array.from(shortcuts).sort(function(s1, s2) {
+                    var _s2_priority, _s1_priority;
+                    return ((_s2_priority = s2.priority) !== null && _s2_priority !== void 0 ? _s2_priority : 0) - ((_s1_priority = s1.priority) !== null && _s1_priority !== void 0 ? _s1_priority : 0);
+                }).find(function(s) {
+                    var _s_preconditions;
+                    var _s_preconditions1;
+                    return (_s_preconditions1 = (_s_preconditions = s.preconditions) === null || _s_preconditions === void 0 ? void 0 : _s_preconditions.call(s, _this._contextService)) !== null && _s_preconditions1 !== void 0 ? _s_preconditions1 : true;
+                });
+                if (shouldTrigger) {
+                    this._commandService.executeCommand(shouldTrigger.id, shouldTrigger.staticParameters);
+                    return true;
+                }
+                return false;
+            }
+        },
+        {
+            key: "_getBindingFromItem",
+            value: function _getBindingFromItem(item) {
+                if (this._platformService.isMac && item.mac) {
+                    return item.mac;
+                }
+                if (this._platformService.isWindows && item.win) {
+                    return item.win;
+                }
+                if (this._platformService.isLinux && item.linux) {
+                    return item.linux;
+                }
+                return item.binding;
+            }
+        },
+        {
+            key: "_deriveBindingFromEvent",
+            value: function _deriveBindingFromEvent(e) {
+                var shiftKey = e.shiftKey, metaKey = e.metaKey, altKey = e.altKey, keyCode = e.keyCode;
+                var binding = keyCode;
+                if (shiftKey) {
+                    binding |= 1024 /* SHIFT */ ;
+                }
+                if (altKey) {
+                    binding |= 2048 /* ALT */ ;
+                }
+                var ctrlKey = this._platformService.isMac ? metaKey : e.ctrlKey;
+                if (ctrlKey) {
+                    binding |= 4096 /* CTRL_COMMAND */ ;
+                }
+                if (this._platformService.isMac && e.ctrlKey) {
+                    binding |= 8192 /* MAC_CTRL */ ;
+                }
+                return binding;
+            }
+        }
+    ]);
+    return DesktopShortcutService;
+}(Disposable);
+DesktopShortcutService = __decorateClass([
+    __decorateParam(0, ICommandService),
+    __decorateParam(1, IPlatformService),
+    __decorateParam(2, IContextService)
+], DesktopShortcutService);
+// src/services/menu/menu.service.ts
+var IMenuService = createIdentifier3("univer.menu-service");
+var DesktopMenuService = /*#__PURE__*/ function(Disposable2) {
+    "use strict";
+    _inherits(DesktopMenuService, Disposable2);
+    var _super = _create_super(DesktopMenuService);
+    function DesktopMenuService(_shortcutService) {
+        _class_call_check(this, DesktopMenuService);
+        var _this;
+        _this = _super.call(this);
+        _define_property(_assert_this_initialized(_this), "_menuItemMap", /* @__PURE__ */ new Map());
+        _define_property(_assert_this_initialized(_this), "_menuByPositions", /* @__PURE__ */ new Map());
+        _define_property(_assert_this_initialized(_this), "_menuChanged$", new BehaviorSubject(void 0));
+        _define_property(_assert_this_initialized(_this), "menuChanged$", _this._menuChanged$.asObservable());
+        _this._shortcutService = _shortcutService;
+        return _this;
+    }
+    _create_class(DesktopMenuService, [
+        {
+            key: "dispose",
+            value: function dispose() {
+                this._menuItemMap.clear();
+                this._menuChanged$.complete();
+            }
+        },
+        {
+            key: "addMenuItem",
+            value: function addMenuItem(item) {
+                var _this = this;
+                if (this._menuItemMap.has(item.id)) {
+                    throw new Error("Menu item with the same id ".concat(item.id, " has already been added!"));
+                }
+                this._menuItemMap.set(item.id, item);
+                if (Array.isArray(item.positions)) {
+                    item.positions.forEach(function(menu) {
+                        return _this.appendMenuToPosition(item, menu);
+                    });
+                } else {
+                    this.appendMenuToPosition(item, item.positions);
+                }
+                this._menuChanged$.next();
+                return toDisposable4(function() {
+                    _this._menuItemMap.delete(item.id);
+                    if (Array.isArray(item.positions)) {
+                        item.positions.forEach(function(menu) {
+                            var menus = _this._menuByPositions.get(menu);
+                            if (!menus) {
+                                return;
+                            }
+                            var index = menus.findIndex(function(m) {
+                                return m[0] === item.id;
+                            });
+                            if (index > -1) {
+                                menus.splice(index, 1);
+                            }
+                        });
+                    } else {
+                        var menus = _this._menuByPositions.get(item.positions);
+                        if (!menus) {
+                            return;
+                        }
+                        var index = menus.findIndex(function(m) {
+                            return m[0] === item.id;
+                        });
+                        if (index > -1) {
+                            menus.splice(index, 1);
+                        }
+                    }
+                    _this._menuChanged$.next();
+                });
+            }
+        },
+        {
+            key: "getMenuItems",
+            value: function getMenuItems(positions2) {
+                var _this = this;
+                if (this._menuByPositions.has(positions2)) {
+                    var menuItems = this._menuByPositions.get(positions2);
+                    if (menuItems) {
+                        return _to_consumable_array(menuItems.values()).map(function(menu) {
+                            return _this.getDisplayMenuItems(menu[1]);
+                        });
+                    }
+                }
+                return [];
+            }
+        },
+        {
+            key: "getMenuItem",
+            value: function getMenuItem(id) {
+                if (this._menuItemMap.has(id)) {
+                    return this._menuItemMap.get(id);
+                }
+                return null;
+            }
+        },
+        {
+            key: "getDisplayMenuItems",
+            value: function getDisplayMenuItems(menuItem) {
+                var shortcut = this._shortcutService.getShortcutDisplayOfCommand(menuItem.id);
+                if (!shortcut) {
+                    return menuItem;
+                }
+                return _object_spread_props(_object_spread({}, menuItem), {
+                    shortcut: shortcut
+                });
+            }
+        },
+        {
+            key: "appendMenuToPosition",
+            value: function appendMenuToPosition(menu, position) {
+                if (!this._menuByPositions.has(position)) {
+                    this._menuByPositions.set(position, []);
+                }
+                var menuList = this._menuByPositions.get(position);
+                if (menuList.findIndex(function(m) {
+                    return m[0] === menu.id;
+                }) > -1) {
+                    throw new Error("Menu item with the same id ".concat(menu.id, " has already been added!"));
+                }
+                menuList.push([
+                    menu.id,
+                    menu
+                ]);
+            }
+        }
+    ]);
+    return DesktopMenuService;
+}(Disposable2);
+DesktopMenuService = __decorateClass([
+    __decorateParam(0, IShortcutService)
+], DesktopMenuService);
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/components/menu/index.module.less
+var index_module_default = {
+    "menuItemNoHover": "univer-menu-item-no-hover",
+    "menuItemContent": "univer-menu-item-content",
+    "menuItemSelectable": "univer-menu-item-selectable",
+    "menuItemSelectableIcon": "univer-menu-item-selectable-icon",
+    "menuItemMoreIcon": "univer-menu-item-more-icon"
+};
+// src/components/menu/Menu.tsx
+function MenuWrapper(props) {
+    var menuType = props.menuType, onOptionSelect = props.onOptionSelect;
+    var menuService = useDependency2(IMenuService);
+    if (!menuType) return;
+    if (Array.isArray(menuType)) {
+        var menuTypes = menuType.map(function(type) {
+            return menuService.getMenuItems(type);
+        });
+        var group = menuTypes.map(function(menuItems2) {
+            return menuItems2.reduce(function(acc, item) {
+                if (item.group) {
+                    var _acc_item_group;
+                    acc[item.group] = (_acc_item_group = acc[item.group]) !== null && _acc_item_group !== void 0 ? _acc_item_group : [];
+                    acc[item.group].push(item);
+                } else {
+                    var _acc_;
+                    acc[10 /* CONTEXT_MENU_OTHERS */ ] = (_acc_ = acc[10 /* CONTEXT_MENU_OTHERS */ ]) !== null && _acc_ !== void 0 ? _acc_ : [];
+                    acc[10 /* CONTEXT_MENU_OTHERS */ ].push(item);
+                }
+                return acc;
+            }, {});
+        });
+        return /* @__PURE__ */ React2.createElement(React2.Fragment, null, group.map(function(groupItem) {
+            return Object.keys(groupItem).map(function(groupKey) {
+                return /* @__PURE__ */ React2.createElement(DesignMenuItemGroup, {
+                    key: groupKey,
+                    eventKey: groupKey
+                }, groupItem[groupKey].map(function(item) {
+                    return /* @__PURE__ */ React2.createElement(MenuItem, {
+                        key: item.id,
+                        menuItem: item,
+                        onClick: function(object) {
+                            onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(_object_spread({
+                                value: "",
+                                label: item.id
+                            }, object));
+                        }
+                    });
+                }));
+            });
+        }));
+    }
+    var menuItems = menuService.getMenuItems(menuType);
+    return menuItems.map(function(item) {
+        return /* @__PURE__ */ React2.createElement(MenuItem, {
+            key: item.id,
+            menuItem: item,
+            onClick: function(object) {
+                onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(_object_spread({
+                    value: "",
+                    label: item.id
+                }, object));
+            }
+        });
+    });
+}
+function MenuOptionsWrapper(props) {
+    var options = props.options, value = props.value, onOptionSelect = props.onOptionSelect, parentKey = props.parentKey;
+    var _options_map;
+    return (_options_map = options === null || options === void 0 ? void 0 : options.map(function(option, index) {
+        var _option_label, _option_label1;
+        var _option_label2;
+        var key = "".concat(parentKey, "-").concat((_option_label2 = option.label) !== null && _option_label2 !== void 0 ? _option_label2 : option.id, "-").concat(index);
+        var onChange = function(v) {
+            onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect({
+                value: v,
+                label: option === null || option === void 0 ? void 0 : option.label
+            });
+        };
+        var handleClick = function() {
+            if (typeof option.value === "undefined") return;
+            onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(_object_spread({}, option));
+        };
+        var _className = clsx(_define_property({}, index_module_default.menuItemNoHover, typeof option.label !== "string" && !((_option_label = option.label) === null || _option_label === void 0 ? void 0 : _option_label.hoverable)));
+        return /* @__PURE__ */ React2.createElement(DesignMenuItem, {
+            key: key,
+            eventKey: key,
+            className: _className,
+            onClick: handleClick
+        }, /* @__PURE__ */ React2.createElement("span", {
+            className: clsx(index_module_default.menuItemContent, _define_property({}, index_module_default.menuItemSelectable, !(typeof option.label !== "string" && !((_option_label1 = option.label) === null || _option_label1 === void 0 ? void 0 : _option_label1.hoverable))))
+        }, typeof value !== "undefined" && String(value) === String(option.value) && /* @__PURE__ */ React2.createElement("span", {
+            className: index_module_default.menuItemSelectableIcon
+        }, /* @__PURE__ */ React2.createElement(CheckMarkSingle, {
+            style: {
+                color: "rgb(var(--success-color))"
+            }
+        })), /* @__PURE__ */ React2.createElement(CustomLabel, {
+            value$: option.value$,
+            value: option.value,
+            label: option.label,
+            icon: option.icon,
+            onChange: onChange
+        })));
+    })) !== null && _options_map !== void 0 ? _options_map : /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+}
+var Menu = function(props) {
+    return /* @__PURE__ */ React2.createElement(DesignMenu, {
+        selectable: false
+    }, /* @__PURE__ */ React2.createElement(MenuOptionsWrapper, _object_spread({}, props)), /* @__PURE__ */ React2.createElement(MenuWrapper, _object_spread({}, props)));
+};
+function MenuItem(param) {
+    var menuItem = param.menuItem, onClick = param.onClick;
+    var menuService = useDependency2(IMenuService);
+    var menuItems = menuItem.id ? menuService.getMenuItems(menuItem.id) : [];
+    var disabled = useObservable(menuItem.disabled$ || of(false), false, true);
+    var hidden = useObservable(menuItem.hidden$ || of(false), false, true);
+    var value = useObservable(menuItem.value$ || of(void 0), void 0, true);
+    var _useState2 = _sliced_to_array(useState2(value), 2), inputValue = _useState2[0], setInputValue = _useState2[1];
+    var onChange = function(v) {
+        var newValue = isRealNum(v) && typeof v === "string" ? parseInt(v) : v;
+        setInputValue(newValue);
+    };
+    var renderButtonType = function() {
+        var item = menuItem;
+        var title = item.title, label = item.label;
+        return /* @__PURE__ */ React2.createElement(DesignMenuItem, {
+            key: item.id,
+            eventKey: item.id,
+            disabled: disabled,
+            onClick: function() {
+                onClick({
+                    value: inputValue,
+                    id: item.id
+                });
+            }
+        }, /* @__PURE__ */ React2.createElement("span", {
+            className: index_module_default.menuItemContent
+        }, /* @__PURE__ */ React2.createElement(CustomLabel, {
+            value: value,
+            title: title,
+            label: label,
+            icon: item.icon,
+            onChange: onChange
+        })));
+    };
+    var renderSelectorType = function() {
+        var item = menuItem;
+        var selections;
+        if (isObservable2(item.selections)) {
+            selections = useObservable(item.selections || of([]), [], true);
+        } else {
+            selections = item.selections || [];
+        }
+        if (selections.length > 0) {
+            return /* @__PURE__ */ React2.createElement(DesignSubMenu, {
+                key: item.id,
+                eventKey: item.id,
+                popupOffset: [
+                    18,
+                    0
+                ],
+                title: /* @__PURE__ */ React2.createElement("span", {
+                    className: index_module_default.menuItemContent
+                }, /* @__PURE__ */ React2.createElement(CustomLabel, {
+                    title: item.title,
+                    value: inputValue,
+                    onChange: onChange,
+                    icon: item.icon,
+                    label: item.label
+                }), item.shortcut && " (".concat(item.shortcut, ")")),
+                expandIcon: /* @__PURE__ */ React2.createElement(MoreSingle, {
+                    className: index_module_default.menuItemMoreIcon
+                })
+            }, selections.length > 0 && /* @__PURE__ */ React2.createElement(MenuOptionsWrapper, {
+                parentKey: item.id,
+                menuType: item.id,
+                options: selections,
+                onOptionSelect: function(v) {
+                    onClick({
+                        value: v.value,
+                        id: item.id
+                    });
+                }
+            }));
+        }
+        return /* @__PURE__ */ React2.createElement(DesignMenuItem, {
+            key: item.id,
+            eventKey: item.id
+        }, /* @__PURE__ */ React2.createElement("span", {
+            className: index_module_default.menuItemContent
+        }, /* @__PURE__ */ React2.createElement(CustomLabel, {
+            title: item.title,
+            value: inputValue,
+            icon: item.icon,
+            label: item.label,
+            onChange: onChange
+        }), item.shortcut && " (".concat(item.shortcut, ")")));
+    };
+    var renderSubItemsType = function() {
+        var item = menuItem;
+        return /* @__PURE__ */ React2.createElement(DesignSubMenu, {
+            key: item.id,
+            eventKey: item.id,
+            popupOffset: [
+                18,
+                0
+            ],
+            title: /* @__PURE__ */ React2.createElement("span", {
+                className: index_module_default.menuItemContent
+            }, /* @__PURE__ */ React2.createElement(CustomLabel, {
+                title: item.title,
+                icon: item.icon,
+                label: item.label,
+                onChange: onChange
+            })),
+            expandIcon: /* @__PURE__ */ React2.createElement(MoreSingle, {
+                className: index_module_default.menuItemMoreIcon
+            })
+        }, menuItems.length && /* @__PURE__ */ React2.createElement(MenuWrapper, {
+            menuType: item.id,
+            parentKey: item.id,
+            onOptionSelect: onClick
+        }));
+    };
+    if (hidden) {
+        return null;
+    }
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, menuItem.type === 1 /* SELECTOR */  && renderSelectorType(), menuItem.type === 3 /* SUBITEMS */  && renderSubItemsType(), menuItem.type === 0 /* BUTTON */  && renderButtonType());
+}
+// src/controllers/shared-shortcut.controller.ts
+import { Disposable as Disposable3, ICommandService as ICommandService2, LifecycleStages, OnLifecycle, RedoCommand as RedoCommand2, UndoCommand as UndoCommand2 } from "@univerjs/core";
+import { Inject, Injector } from "@wendellhu/redi";
+// src/services/clipboard/clipboard.command.ts
+import { CommandType } from "@univerjs/core";
+var CopyCommandName = "univer.command.copy";
+var CopyCommand = {
+    id: CopyCommandName,
+    name: CopyCommandName,
+    multi: true,
+    priority: 0,
+    type: CommandType.COMMAND,
+    preconditions: function() {
+        return false;
+    },
+    handler: /*#__PURE__*/ _async_to_generator(function() {
+        return _ts_generator(this, function(_state) {
+            return [
+                2,
+                true
+            ];
+        });
+    })
+};
+var CutCommandName = "univer.command.cut";
+var CutCommand = {
+    id: CutCommandName,
+    name: CutCommandName,
+    multi: true,
+    priority: 0,
+    type: CommandType.COMMAND,
+    preconditions: function() {
+        return false;
+    },
+    handler: /*#__PURE__*/ _async_to_generator(function() {
+        return _ts_generator(this, function(_state) {
+            return [
+                2,
+                true
+            ];
+        });
+    })
+};
+var PasteCommandName = "univer.command.paste";
+var PasteCommand = {
+    id: PasteCommandName,
+    name: PasteCommandName,
+    multi: true,
+    priority: 0,
+    type: CommandType.COMMAND,
+    preconditions: function() {
+        return false;
+    },
+    handler: /*#__PURE__*/ _async_to_generator(function() {
+        return _ts_generator(this, function(_state) {
+            return [
+                2,
+                true
+            ];
+        });
+    })
+};
+// src/controllers/menus/menus.ts
+import { IUndoRedoService, RedoCommand, UndoCommand } from "@univerjs/core";
+import { map } from "rxjs/operators";
+function UndoMenuItemFactory(accessor) {
+    var undoRedoService = accessor.get(IUndoRedoService);
+    return {
+        id: UndoCommand.id,
+        group: 0 /* TOOLBAR_HISTORY */ ,
+        type: 0 /* BUTTON */ ,
+        icon: "UndoSingle",
+        title: "Undo",
+        tooltip: "toolbar.undo",
+        positions: [
+            "uiToolbar.start" /* TOOLBAR_START */ 
+        ],
+        disabled$: undoRedoService.undoRedoStatus$.pipe(map(function(v) {
+            return v.undos <= 0;
+        }))
+    };
+}
+function RedoMenuItemFactory(accessor) {
+    var undoRedoService = accessor.get(IUndoRedoService);
+    return {
+        id: RedoCommand.id,
+        group: 0 /* TOOLBAR_HISTORY */ ,
+        type: 0 /* BUTTON */ ,
+        icon: "RedoSingle",
+        title: "Redo",
+        tooltip: "toolbar.redo",
+        positions: [
+            "uiToolbar.start" /* TOOLBAR_START */ 
+        ],
+        disabled$: undoRedoService.undoRedoStatus$.pipe(map(function(v) {
+            return v.redos <= 0;
+        }))
+    };
+}
+// src/controllers/shared-shortcut.controller.ts
+var CopyShortcutItem = {
+    id: CopyCommand.id,
+    description: "shortcut.copy",
+    group: "1_common-edit",
+    binding: 67 /* C */  | 4096 /* CTRL_COMMAND */ 
+};
+var CutShortcutItem = {
+    id: CutCommand.id,
+    description: "shortcut.cut",
+    group: "1_common-edit",
+    binding: 88 /* X */  | 4096 /* CTRL_COMMAND */ 
+};
+var PasteShortcutItem = {
+    id: PasteCommand.id,
+    description: "shortcut.paste",
+    group: "1_common-edit",
+    binding: 86 /* V */  | 4096 /* CTRL_COMMAND */ 
+};
+var UndoShortcutItem = {
+    id: UndoCommand2.id,
+    description: "shortcut.undo",
+    group: "1_common-edit",
+    binding: 90 /* Z */  | 4096 /* CTRL_COMMAND */ 
+};
+var RedoShortcutItem = {
+    id: RedoCommand2.id,
+    description: "shortcut.redo",
+    group: "1_common-edit",
+    binding: 89 /* Y */  | 4096 /* CTRL_COMMAND */ 
+};
+var SharedController = /*#__PURE__*/ function(Disposable3) {
+    "use strict";
+    _inherits(SharedController, Disposable3);
+    var _super = _create_super(SharedController);
+    function SharedController(_injector, _menuService, _shortcutService, _commandService) {
+        _class_call_check(this, SharedController);
+        var _this;
+        _this = _super.call(this);
+        _this._injector = _injector;
+        _this._menuService = _menuService;
+        _this._shortcutService = _shortcutService;
+        _this._commandService = _commandService;
+        _this.initialize();
+        return _this;
+    }
+    _create_class(SharedController, [
+        {
+            key: "initialize",
+            value: function initialize() {
+                this._registerCommands();
+                this._registerShortcuts();
+                this._registerMenus();
+            }
+        },
+        {
+            key: "_registerMenus",
+            value: function _registerMenus() {
+                var _this = this;
+                [
+                    UndoMenuItemFactory,
+                    RedoMenuItemFactory
+                ].forEach(function(factory) {
+                    _this.disposeWithMe(_this._menuService.addMenuItem(_this._injector.invoke(factory)));
+                });
+            }
+        },
+        {
+            key: "_registerCommands",
+            value: function _registerCommands() {
+                var _this = this;
+                [
+                    CutCommand,
+                    CopyCommand,
+                    PasteCommand
+                ].forEach(function(command) {
+                    return _this.disposeWithMe(_this._commandService.registerAsMultipleCommand(command));
+                });
+            }
+        },
+        {
+            key: "_registerShortcuts",
+            value: function _registerShortcuts() {
+                var _this = this;
+                [
+                    UndoShortcutItem,
+                    RedoShortcutItem,
+                    CutShortcutItem,
+                    CopyShortcutItem,
+                    PasteShortcutItem
+                ].forEach(function(shortcut) {
+                    return _this.disposeWithMe(_this._shortcutService.registerShortcut(shortcut));
+                });
+            }
+        }
+    ]);
+    return SharedController;
+}(Disposable3);
+SharedController = __decorateClass([
+    OnLifecycle(LifecycleStages.Ready, SharedController),
+    __decorateParam(0, Inject(Injector)),
+    __decorateParam(1, IMenuService),
+    __decorateParam(2, IShortcutService),
+    __decorateParam(3, ICommandService2)
+], SharedController);
+// src/controllers/ui/ui.controller.ts
+import { createIdentifier as createIdentifier4 } from "@wendellhu/redi";
+var IUIController = createIdentifier4("univer.ui-controller");
+// src/controllers/ui/ui-desktop.controller.tsx
+import { Disposable as Disposable6, LifecycleService, LifecycleStages as LifecycleStages3, toDisposable as toDisposable7 } from "@univerjs/core";
+import { IRenderManagerService } from "@univerjs/engine-render";
+import { Inject as Inject2, Injector as Injector2 } from "@wendellhu/redi";
+import { connectInjector } from "@wendellhu/redi/react-bindings";
+import { render as createRoot, unmount } from "rc-util/lib/React/render";
+import React14 from "react";
+import { Subject as Subject3 } from "rxjs";
+// src/services/focus/focus.service.ts
+import { Disposable as Disposable4, IContextService as IContextService2, LifecycleStages as LifecycleStages2, OnLifecycle as OnLifecycle2, toDisposable as toDisposable5 } from "@univerjs/core";
+import { createIdentifier as createIdentifier5 } from "@wendellhu/redi";
+import { fromEvent } from "rxjs";
+var IFocusService = createIdentifier5("univer.focus-service");
+var FOCUSING_UNIVER = "FOCUSING_UNIVER";
+var DesktopFocusService = /*#__PURE__*/ function(Disposable4) {
+    "use strict";
+    _inherits(DesktopFocusService, Disposable4);
+    var _super = _create_super(DesktopFocusService);
+    function DesktopFocusService(_contextService) {
+        _class_call_check(this, DesktopFocusService);
+        var _this;
+        _this = _super.call(this);
+        _define_property(_assert_this_initialized(_this), "_containerElement", null);
+        _define_property(_assert_this_initialized(_this), "_isUniverFocused", true);
+        _this._contextService = _contextService;
+        _this._initFocusListener();
+        return _this;
+    }
+    _create_class(DesktopFocusService, [
+        {
+            key: "isFocused",
+            get: function get() {
+                return this._isUniverFocused;
+            }
+        },
+        {
+            key: "dispose",
+            value: function dispose() {
+                _get(_get_prototype_of(DesktopFocusService.prototype), "dispose", this).call(this);
+                this._containerElement = null;
+            }
+        },
+        {
+            key: "setContainerElement",
+            value: function setContainerElement(container) {
+                this._containerElement = container;
+            }
+        },
+        {
+            key: "_initFocusListener",
+            value: function _initFocusListener() {
+                var _this = this;
+                this.disposeWithMe(toDisposable5(fromEvent(window, "focusin").subscribe(function(event) {
+                    var _this__containerElement;
+                    if (event.target && ((_this__containerElement = _this._containerElement) === null || _this__containerElement === void 0 ? void 0 : _this__containerElement.contains(event.target))) {
+                        _this._isUniverFocused = true;
+                    } else {
+                        _this._isUniverFocused = false;
+                    }
+                    _this._contextService.setContextValue(FOCUSING_UNIVER, _this._isUniverFocused);
+                })));
+            }
+        }
+    ]);
+    return DesktopFocusService;
+}(Disposable4);
+DesktopFocusService = __decorateClass([
+    OnLifecycle2(LifecycleStages2.Ready, IFocusService),
+    __decorateParam(0, IContextService2)
+], DesktopFocusService);
+// src/views/App.tsx
+import { LocaleService as LocaleService4, ThemeService } from "@univerjs/core";
+import { ConfigProvider, defaultTheme, themeInstance } from "@univerjs/design";
+import { useDependency as useDependency10 } from "@wendellhu/redi/react-bindings";
+import React13, { useEffect as useEffect9, useMemo as useMemo2, useRef as useRef3, useState as useState10 } from "react";
+// src/services/message/message.service.ts
+import { createIdentifier as createIdentifier6 } from "@wendellhu/redi";
+var IMessageService = createIdentifier6("univer.message-service");
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/views/app.module.less
+var app_module_default = {
+    "appLayout": "univer-app-layout",
+    "appContainer": "univer-app-container",
+    "appContainerHeader": "univer-app-container-header",
+    "appContainerWrapper": "univer-app-container-wrapper",
+    "appContainerContent": "univer-app-container-content",
+    "appContainerCanvas": "univer-app-container-canvas",
+    "appContainerSidebar": "univer-app-container-sidebar"
+};
+// src/views/components/ComponentContainer.tsx
+import React3 from "react";
+function ComponentContainer(props) {
+    var components = props.components;
+    if (!components) return null;
+    return Array.from(components.values()).map(function(component, index) {
+        return React3.createElement(component(), {
+            key: "".concat(index)
+        });
+    });
+}
+// src/views/components/doc-bars/MenuBar.tsx
+import { LocaleService as LocaleService2 } from "@univerjs/core";
+import { useDependency as useDependency3 } from "@wendellhu/redi/react-bindings";
+import clsx2 from "clsx";
+import React4, { useEffect, useState as useState3 } from "react";
+// src/views/components/doc-bars/hooks/menu.ts
+import { BehaviorSubject as BehaviorSubject2 } from "rxjs";
+var positions = [
+    "uiToolbar.start" /* TOOLBAR_START */ ,
+    "uiToolbar.insert" /* TOOLBAR_INSERT */ ,
+    "uiToolbar.formulas" /* TOOLBAR_FORMULAS */ ,
+    "uiToolbar.data" /* TOOLBAR_DATA */ ,
+    "uiToolbar.view" /* TOOLBAR_VIEW */ ,
+    "uiToolbar.others" /* TOOLBAR_OTHERS */ 
+];
+var positionSubject = new BehaviorSubject2("uiToolbar.start" /* TOOLBAR_START */ );
+var position$ = positionSubject.asObservable();
+function setPosition(position) {
+    positionSubject.next(position);
+}
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/views/components/doc-bars/index.module.less
+var index_module_default2 = {
+    "headerbar": "univer-headerbar",
+    "headerMenu": "univer-header-menu",
+    "menubar": "univer-menubar",
+    "menubarItem": "univer-menubar-item",
+    "menubarItemActive": "univer-menubar-item-active",
+    "toolbar": "univer-toolbar",
+    "toolbarContainer": "univer-toolbar-container",
+    "toolbarGroup": "univer-toolbar-group",
+    "toolbarItemSelectButton": "univer-toolbar-item-select-button",
+    "toolbarItemSelectButtonLabel": "univer-toolbar-item-select-button-label",
+    "toolbarItemSelectButtonArrow": "univer-toolbar-item-select-button-arrow",
+    "toolbarItemSelect": "univer-toolbar-item-select",
+    "toolbarItemSelectArrow": "univer-toolbar-item-select-arrow"
+};
+// src/views/components/doc-bars/MenuBar.tsx
+function MenuBar(props) {
+    var headerMenuComponents = props.headerMenuComponents;
+    var localeService = useDependency3(LocaleService2);
+    var menuService = useDependency3(IMenuService);
+    var _useState3 = _sliced_to_array(useState3([]), 2), group = _useState3[0], setGroup = _useState3[1];
+    useEffect(function() {
+        var listener = menuService.menuChanged$.subscribe(function() {
+            var group2 = [];
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = positions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var position2 = _step.value;
+                    var menuItems = menuService.getMenuItems(position2);
+                    if (menuItems.length) {
+                        group2.push({
+                            name: position2,
+                            menuItems: menuItems
+                        });
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            setGroup(group2);
+        });
+        return function() {
+            listener.unsubscribe();
+        };
+    }, []);
+    var position = useObservable(position$, "uiToolbar.start" /* TOOLBAR_START */ , true);
+    return /* @__PURE__ */ React4.createElement("header", {
+        className: index_module_default2.headerbar
+    }, /* @__PURE__ */ React4.createElement("div", {
+        className: index_module_default2.menubar
+    }, group.length > 1 && group.map(function(item, index) {
+        return /* @__PURE__ */ React4.createElement("a", {
+            key: index,
+            className: clsx2(index_module_default2.menubarItem, _define_property({}, index_module_default2.menubarItemActive, item.name === position)),
+            onClick: function() {
+                return setPosition(item.name);
+            }
+        }, localeService.t(item.name));
+    })), /* @__PURE__ */ React4.createElement("div", {
+        className: index_module_default2.headerMenu
+    }, /* @__PURE__ */ React4.createElement(ComponentContainer, {
+        components: headerMenuComponents
+    })));
+}
+// src/views/components/doc-bars/Toolbar.tsx
+import { useDependency as useDependency5 } from "@wendellhu/redi/react-bindings";
+import React7, { useEffect as useEffect3, useState as useState5 } from "react";
+// src/views/components/doc-bars/ToolbarItem.tsx
+import { ICommandService as ICommandService3, LocaleService as LocaleService3 } from "@univerjs/core";
+import { Dropdown, Tooltip } from "@univerjs/design";
+import { MoreDownSingle } from "@univerjs/icons";
+import { useDependency as useDependency4 } from "@wendellhu/redi/react-bindings";
+import React6, { useEffect as useEffect2, useState as useState4 } from "react";
+import { isObservable as isObservable3 } from "rxjs";
+// src/views/components/doc-bars/Button/ToolbarButton.tsx
+import clsx3 from "clsx";
+import React5 from "react";
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/views/components/doc-bars/Button/index.module.less
+var index_module_default3 = {
+    "toolbarBtn": "univer-toolbar-btn",
+    "toolbarBtnActive": "univer-toolbar-btn-active"
+};
+// src/views/components/doc-bars/Button/ToolbarButton.tsx
+function ToolbarButton(props) {
+    var children = props.children, className = props.className, style = props.style, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, _props_active = props.active, active = _props_active === void 0 ? false : _props_active, onClick = props.onClick, onDoubleClick = props.onDoubleClick, restProps = _object_without_properties(props, [
+        "children",
+        "className",
+        "style",
+        "disabled",
+        "active",
+        "onClick",
+        "onDoubleClick"
+    ]);
+    var handleClick = function(e) {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick && onClick(e);
+    };
+    var handleDoubleClick = function(e) {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onDoubleClick && onDoubleClick(e);
+    };
+    var _className = clsx3(index_module_default3.toolbarBtn, _define_property({}, "".concat(index_module_default3.toolbarBtn, "-active"), active), className);
+    return /* @__PURE__ */ React5.createElement("button", _object_spread({
+        className: _className,
+        style: style,
+        disabled: disabled,
+        onClick: handleClick,
+        onDoubleClick: handleDoubleClick
+    }, restProps), children);
+}
+// src/views/components/doc-bars/ToolbarItem.tsx
+function ToolbarItem(props) {
+    var localeService = useDependency4(LocaleService3);
+    var commandService = useDependency4(ICommandService3);
+    var _useState4 = _sliced_to_array(useState4(), 2), value = _useState4[0], setValue = _useState4[1];
+    var _useState41 = _sliced_to_array(useState4(false), 2), disabled = _useState41[0], setDisabled = _useState41[1];
+    var _useState42 = _sliced_to_array(useState4(false), 2), activated = _useState42[0], setActivated = _useState42[1];
+    useEffect2(function() {
+        var subscriptions = [];
+        props.disabled$ && subscriptions.push(props.disabled$.subscribe(function(disabled2) {
+            setDisabled(disabled2);
+        }));
+        if (props.type === 0 /* BUTTON */ ) {
+            props.activated$ && subscriptions.push(props.activated$.subscribe(function(activated2) {
+                setActivated(activated2);
+            }));
+        }
+        props.value$ && subscriptions.push(props.value$.subscribe(function(value2) {
+            setValue(value2);
+        }));
+        return function() {
+            subscriptions.forEach(function(subscription) {
+                subscription.unsubscribe();
+            });
+        };
+    }, []);
+    var tooltip = props.tooltip, shortcut = props.shortcut, icon = props.icon, title = props.title, label = props.label, id = props.id;
+    var tooltipTitle = localeService.t(tooltip !== null && tooltip !== void 0 ? tooltip : "") + (shortcut ? " (".concat(shortcut, ")") : "");
+    function renderSelectorType(menuType) {
+        var selections = props.selections;
+        var options = selections;
+        var iconToDisplay = icon;
+        if (isObservable3(icon)) {
+            iconToDisplay = useObservable(icon, void 0, true);
+        } else {
+            var _options_find;
+            var _options_find_icon;
+            iconToDisplay = (_options_find_icon = options === null || options === void 0 ? void 0 : (_options_find = options.find(function(o) {
+                return o.value === value;
+            })) === null || _options_find === void 0 ? void 0 : _options_find.icon) !== null && _options_find_icon !== void 0 ? _options_find_icon : icon;
+        }
+        function handleSelect(option) {
+            var commandId = id;
+            var value2 = option;
+            if (option.id) {
+                commandId = option.id;
+            }
+            commandService.executeCommand(commandId, value2);
+        }
+        function handleChange(value2) {
+            var commandId = id;
+            commandService.executeCommand(commandId, {
+                value: value2
+            });
+        }
+        function handleClick() {
+            if (menuType === 2 /* BUTTON_SELECTOR */ ) {
+                var commandId = id;
+                commandService.executeCommand(commandId, {
+                    value: value
+                });
+            }
+        }
+        return menuType === 2 /* BUTTON_SELECTOR */  ? /* @__PURE__ */ React6.createElement("div", {
+            className: index_module_default2.toolbarItemSelectButton
+        }, /* @__PURE__ */ React6.createElement("div", {
+            className: index_module_default2.toolbarItemSelectButtonLabel,
+            onClick: handleClick
+        }, /* @__PURE__ */ React6.createElement(CustomLabel, {
+            icon: iconToDisplay,
+            title: title,
+            value: value,
+            label: label,
+            onChange: handleChange
+        })), /* @__PURE__ */ React6.createElement(Dropdown, {
+            overlay: /* @__PURE__ */ React6.createElement(Menu, {
+                menuType: id,
+                options: options,
+                onOptionSelect: handleSelect,
+                value: value
+            })
+        }, /* @__PURE__ */ React6.createElement("div", {
+            className: index_module_default2.toolbarItemSelectButtonArrow
+        }, /* @__PURE__ */ React6.createElement(MoreDownSingle, null)))) : /* @__PURE__ */ React6.createElement(Dropdown, {
+            overlay: /* @__PURE__ */ React6.createElement(Menu, {
+                menuType: id,
+                options: options,
+                onOptionSelect: handleSelect,
+                value: value
+            })
+        }, /* @__PURE__ */ React6.createElement("div", {
+            className: index_module_default2.toolbarItemSelect
+        }, /* @__PURE__ */ React6.createElement(CustomLabel, {
+            icon: iconToDisplay,
+            title: title,
+            value: value,
+            label: label,
+            onChange: handleChange
+        }), /* @__PURE__ */ React6.createElement("div", {
+            className: index_module_default2.toolbarItemSelectArrow
+        }, /* @__PURE__ */ React6.createElement(MoreDownSingle, null))));
+    }
+    function renderButtonType() {
+        var componentManager = useDependency4(ComponentManager);
+        var _label_name;
+        var isCustomComponent = componentManager.get(typeof label === "string" ? label : (_label_name = label === null || label === void 0 ? void 0 : label.name) !== null && _label_name !== void 0 ? _label_name : "");
+        return /* @__PURE__ */ React6.createElement(ToolbarButton, {
+            className: index_module_default2.toolbarItemTextButton,
+            active: activated,
+            disabled: disabled,
+            onClick: function() {
+                return commandService.executeCommand(props.id);
+            },
+            onDoubleClick: function() {
+                return props.subId && commandService.executeCommand(props.subId);
+            }
+        }, isCustomComponent ? /* @__PURE__ */ React6.createElement(CustomLabel, {
+            title: title,
+            value: value,
+            label: label
+        }) : /* @__PURE__ */ React6.createElement(CustomLabel, {
+            icon: icon
+        }));
+    }
+    function renderItem() {
+        switch(props.type){
+            case 2 /* BUTTON_SELECTOR */ :
+            case 1 /* SELECTOR */ :
+            case 3 /* SUBITEMS */ :
+                return renderSelectorType(props.type);
+            case 0 /* BUTTON */ :
+            default:
+                return renderButtonType();
+        }
+    }
+    return /* @__PURE__ */ React6.createElement(Tooltip, {
+        title: tooltipTitle,
+        placement: "bottom"
+    }, renderItem());
+}
+// src/views/components/doc-bars/Toolbar.tsx
+function Toolbar() {
+    var menuService = useDependency5(IMenuService);
+    var _useState5 = _sliced_to_array(useState5([]), 2), group = _useState5[0], setGroup = _useState5[1];
+    var position = useObservable(position$, "uiToolbar.start" /* TOOLBAR_START */ , true);
+    useEffect3(function() {
+        var listener = menuService.menuChanged$.subscribe(function() {
+            var group2 = [];
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = positions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var position2 = _step.value;
+                    var menuItems = menuService.getMenuItems(position2);
+                    if (menuItems.length) {
+                        group2.push({
+                            name: position2,
+                            menuItems: menuItems
+                        });
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+            setGroup(group2);
+        });
+        return function() {
+            listener.unsubscribe();
+        };
+    }, []);
+    var activeMenuGroup = group.find(function(g) {
+        return g.name === position;
+    });
+    var _activeMenuGroup_menuItems_reduce;
+    var toolbarGroups = (_activeMenuGroup_menuItems_reduce = activeMenuGroup === null || activeMenuGroup === void 0 ? void 0 : activeMenuGroup.menuItems.reduce(function(acc, item) {
+        var _item_group;
+        var key = (_item_group = item.group) !== null && _item_group !== void 0 ? _item_group : 6 /* TOOLBAR_OTHERS */ ;
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(item);
+        return acc;
+    }, {})) !== null && _activeMenuGroup_menuItems_reduce !== void 0 ? _activeMenuGroup_menuItems_reduce : {};
+    return /* @__PURE__ */ React7.createElement("div", {
+        className: index_module_default2.toolbar
+    }, /* @__PURE__ */ React7.createElement("div", {
+        className: index_module_default2.toolbarContainer
+    }, Object.entries(toolbarGroups).map(function(param) {
+        var _param = _sliced_to_array(param, 2), key = _param[0], item = _param[1];
+        return /* @__PURE__ */ React7.createElement("div", {
+            key: key,
+            className: index_module_default2.toolbarGroup
+        }, item.map(function(subItem) {
+            return /* @__PURE__ */ React7.createElement(ToolbarItem, _object_spread({
+                key: subItem.id
+            }, subItem));
+        }));
+    })));
+}
+// src/views/components/sidebar/Sidebar.tsx
+import { CloseSingle } from "@univerjs/icons";
+import { useDependency as useDependency6 } from "@wendellhu/redi/react-bindings";
+import clsx4 from "clsx";
+import React8, { useEffect as useEffect4, useMemo, useState as useState6 } from "react";
+// src/services/sidebar/sidebar.service.ts
+import { createIdentifier as createIdentifier7 } from "@wendellhu/redi";
+var ISidebarService = createIdentifier7("univer.sidebar-service");
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/views/components/sidebar/index.module.less
+var index_module_default4 = {
+    "sidebar": "univer-sidebar",
+    "sidebarOpen": "univer-sidebar-open",
+    "sidebarContainer": "univer-sidebar-container",
+    "sidebarHeader": "univer-sidebar-header",
+    "sidebarHeaderClose": "univer-sidebar-header-close",
+    "sidebarBody": "univer-sidebar-body",
+    "sidebarFooter": "univer-sidebar-footer"
+};
+// src/views/components/sidebar/Sidebar.tsx
+function Sidebar() {
+    var sidebarService = useDependency6(ISidebarService);
+    var _useState6 = _sliced_to_array(useState6({}), 2), sidebarOptions = _useState6[0], setSidebarOptions = _useState6[1];
+    useEffect4(function() {
+        var sidebar$ = sidebarService.getObservableSidebar();
+        var subscribtion = sidebar$.subscribe(function(options2) {
+            setSidebarOptions(options2);
+        });
+        return function() {
+            subscribtion.unsubscribe();
+        };
+    }, []);
+    var options = sidebarOptions;
+    for(var _i = 0, _iter = [
+        "children",
+        "header",
+        "footer"
+    ]; _i < _iter.length; _i++){
+        var key = _iter[_i];
+        var k = key;
+        if (sidebarOptions[k]) {
+            var props = sidebarOptions[k];
+            if (props) {
+                options[k] = /* @__PURE__ */ React8.createElement(CustomLabel, _object_spread({}, props));
+            }
+        }
+    }
+    var _className = clsx4(index_module_default4.sidebar, _define_property({}, index_module_default4.sidebarOpen, options.visible));
+    var width = useMemo(function() {
+        if (!options.visible) return 0;
+        if (typeof options.width === "number") {
+            return "".concat(options.width, "px");
+        }
+        return options.width;
+    }, [
+        options
+    ]);
+    function handleClose() {
+        var _options2_onClose;
+        var options2 = _object_spread_props(_object_spread({}, sidebarOptions), {
+            visible: false
+        });
+        setSidebarOptions(options2);
+        var sidebar$ = sidebarService.getObservableSidebar();
+        sidebar$.next(options2);
+        options2 === null || options2 === void 0 ? void 0 : (_options2_onClose = options2.onClose) === null || _options2_onClose === void 0 ? void 0 : _options2_onClose.call(options2);
+    }
+    return /* @__PURE__ */ React8.createElement("section", {
+        className: _className,
+        style: {
+            width: width
+        }
+    }, /* @__PURE__ */ React8.createElement("section", {
+        className: index_module_default4.sidebarContainer
+    }, /* @__PURE__ */ React8.createElement("header", {
+        className: index_module_default4.sidebarHeader
+    }, options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ React8.createElement("a", {
+        className: index_module_default4.sidebarHeaderClose,
+        onClick: handleClose
+    }, /* @__PURE__ */ React8.createElement(CloseSingle, null))), /* @__PURE__ */ React8.createElement("section", {
+        className: index_module_default4.sidebarBody
+    }, options === null || options === void 0 ? void 0 : options.children), (options === null || options === void 0 ? void 0 : options.footer) && /* @__PURE__ */ React8.createElement("footer", {
+        className: index_module_default4.sidebarFooter
+    }, options.footer)));
+}
+// src/components/notification/Notification.tsx
+import { ConfigContext } from "@univerjs/design";
+import { CloseSingle as CloseSingle2, ErrorSingle, SuccessSingle, WarningSingle } from "@univerjs/icons";
+import clsx5 from "clsx";
+import { useNotification } from "rc-notification";
+import React9, { useContext, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { Subject as Subject2 } from "rxjs";
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/components/notification/index.module.less
+var index_module_default5 = {
+    "notification": "univer-notification",
+    "notificationNotice": "univer-notification-notice",
+    "notificationNoticeWrapper": "univer-notification-notice-wrapper",
+    "notificationNoticeContent": "univer-notification-notice-content",
+    "notificationNoticeClose": "univer-notification-notice-close",
+    "notificationIcon": "univer-notification-icon",
+    "notificationIconSuccess": "univer-notification-icon-success",
+    "notificationIconInfo": "univer-notification-icon-info",
+    "notificationIconWarning": "univer-notification-icon-warning",
+    "notificationIconError": "univer-notification-icon-error",
+    "notificationContentContainer": "univer-notification-content-container",
+    "notificationTitle": "univer-notification-title",
+    "notificationContent": "univer-notification-content",
+    "notificationContentEllipsis": "univer-notification-content-ellipsis",
+    "notificationTop": "univer-notification-top",
+    "notificationTopLeft": "univer-notification-topLeft",
+    "notificationTopRight": "univer-notification-topRight",
+    "notificationBottom": "univer-notification-bottom",
+    "notificationBottomRight": "univer-notification-bottomRight",
+    "notificationBottomLeft": "univer-notification-bottomLeft",
+    "notificationFade": "univer-notification-fade",
+    "notificationFadeAppearPrepare": "univer-notification-fade-appear-prepare",
+    "notificationFadeAppearStart": "univer-notification-fade-appear-start",
+    "notificationFadeAppearActive": "univer-notification-fade-appear-active",
+    "notificationFadeAppear": "univer-notification-fade-appear",
+    "notificationFadeEnter": "univer-notification-fade-enter",
+    "notificationFadeLeave": "univer-notification-fade-leave",
+    "notificationFadeEnterActive": "univer-notification-fade-enter-active",
+    "notificationFadeIn": "univer-notification-fade-in",
+    "notificationFadeLeaveActive": "univer-notification-fade-leave-active",
+    "notificationFadeOut": "univer-notification-fade-out"
+};
+// src/components/notification/Notification.tsx
+var iconMap = {
+    success: /* @__PURE__ */ React9.createElement(SuccessSingle, {
+        className: index_module_default5.notificationIconSuccess
+    }),
+    info: /* @__PURE__ */ React9.createElement(WarningSingle, {
+        className: index_module_default5.notificationIconInfo
+    }),
+    warning: /* @__PURE__ */ React9.createElement(WarningSingle, {
+        className: index_module_default5.notificationIconWarning
+    }),
+    error: /* @__PURE__ */ React9.createElement(ErrorSingle, {
+        className: index_module_default5.notificationIconError
+    })
+};
+var notificationObserver = new Subject2();
+var PureContent = function(props) {
+    var type = props.type, content = props.content, title = props.title, _props_lines = props.lines, lines = _props_lines === void 0 ? 0 : _props_lines;
+    var contentClassName = clsx5(index_module_default5.notificationContent, _define_property({}, index_module_default5.notificationContentEllipsis, lines !== 0));
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", {
+        className: index_module_default5.notificationIcon
+    }, iconMap[type]), /* @__PURE__ */ React9.createElement("div", {
+        className: index_module_default5.notificationContentContainer
+    }, /* @__PURE__ */ React9.createElement("span", {
+        className: index_module_default5.notificationTitle
+    }, title), /* @__PURE__ */ React9.createElement("span", {
+        className: contentClassName,
+        style: {
+            WebkitLineClamp: lines
+        }
+    }, content)));
+};
+function Notification() {
+    var mountContainer = useContext(ConfigContext).mountContainer;
+    var _useNotification = _sliced_to_array(useNotification({
+        prefixCls: index_module_default5.notification,
+        maxCount: 3,
+        closeIcon: /* @__PURE__ */ React9.createElement(CloseSingle2, null),
+        getContainer: function() {
+            return mountContainer;
+        },
+        motion: {
+            motionName: index_module_default5.notificationFade,
+            motionAppear: true,
+            motionEnter: true,
+            motionLeave: true
+        }
+    }), 2), api = _useNotification[0], contextHolder = _useNotification[1];
+    var observerRef = useRef2(notificationObserver);
+    useEffect5(function() {
+        var subscription = observerRef.current.subscribe(function(options) {
+            var _options_placement, _options_duration, _options_closable;
+            api.open({
+                content: /* @__PURE__ */ React9.createElement(PureContent, {
+                    content: options.content,
+                    type: options.type,
+                    title: options.title,
+                    lines: options.lines
+                }),
+                placement: (_options_placement = options.placement) !== null && _options_placement !== void 0 ? _options_placement : "topRight",
+                duration: (_options_duration = options.duration) !== null && _options_duration !== void 0 ? _options_duration : 4.5,
+                closable: (_options_closable = options.closable) !== null && _options_closable !== void 0 ? _options_closable : true
+            });
+        });
+        return function() {
+            subscription.unsubscribe();
+        };
+    }, []);
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, contextHolder);
+}
+var notification = {
+    show: function(options) {
+        notificationObserver.next(options);
+    }
+};
+// src/views/components/confirm-part/ConfirmPart.tsx
+import { Confirm } from "@univerjs/design";
+import { useDependency as useDependency7 } from "@wendellhu/redi/react-bindings";
+import React10, { useEffect as useEffect6, useState as useState7 } from "react";
+// src/services/confirm/confirm.service.ts
+import { createIdentifier as createIdentifier8 } from "@wendellhu/redi";
+var IConfirmService = createIdentifier8("univer.confirm-service");
+// src/views/components/confirm-part/ConfirmPart.tsx
+function ConfirmPart() {
+    var confirmService = useDependency7(IConfirmService);
+    var _useState7 = _sliced_to_array(useState7([]), 2), confirmOptions = _useState7[0], setConfirmOptions = _useState7[1];
+    useEffect6(function() {
+        var confirm$ = confirmService.getObservableConfirm();
+        var subscribtion = confirm$.subscribe(function(options) {
+            setConfirmOptions(options);
+        });
+        return function() {
+            subscribtion.unsubscribe();
+        };
+    }, []);
+    var props = confirmOptions.map(function(options) {
+        var children = options.children, title = options.title, restProps = _object_without_properties(options, [
+            "children",
+            "title"
+        ]);
+        var confirmProps = restProps;
+        for(var _i = 0, _iter = [
+            "children",
+            "title"
+        ]; _i < _iter.length; _i++){
+            var key = _iter[_i];
+            var k = key;
+            var props2 = options[k];
+            if (props2) {
+                confirmProps[k] = /* @__PURE__ */ React10.createElement(CustomLabel, _object_spread({}, props2));
+            }
+        }
+        return confirmProps;
+    });
+    return props === null || props === void 0 ? void 0 : props.map(function(options, index) {
+        return /* @__PURE__ */ React10.createElement(Confirm, _object_spread({
+            key: index
+        }, options));
+    });
+}
+// src/views/components/context-menu/ContextMenu.tsx
+import { ICommandService as ICommandService4 } from "@univerjs/core";
+import { Popup } from "@univerjs/design";
+import { useDependency as useDependency8 } from "@wendellhu/redi/react-bindings";
+import React11, { useEffect as useEffect7, useState as useState8 } from "react";
+// src/services/contextmenu/contextmenu.service.ts
+import { Disposable as Disposable5, toDisposable as toDisposable6 } from "@univerjs/core";
+import { createIdentifier as createIdentifier9 } from "@wendellhu/redi";
+var IContextMenuService = createIdentifier9("univer.context-menu-service");
+var DesktopContextMenuService = /*#__PURE__*/ function(Disposable5) {
+    "use strict";
+    _inherits(DesktopContextMenuService, Disposable5);
+    var _super = _create_super(DesktopContextMenuService);
+    function DesktopContextMenuService() {
+        _class_call_check(this, DesktopContextMenuService);
+        var _this;
+        _this = _super.apply(this, arguments);
+        _define_property(_assert_this_initialized(_this), "_currentHandler", null);
+        return _this;
+    }
+    _create_class(DesktopContextMenuService, [
+        {
+            key: "triggerContextMenu",
+            value: function triggerContextMenu(event, menuType) {
+                var _this__currentHandler;
+                event.stopPropagation();
+                (_this__currentHandler = this._currentHandler) === null || _this__currentHandler === void 0 ? void 0 : _this__currentHandler.handleContextMenu(event, menuType);
+            }
+        },
+        {
+            key: "registerContextMenuHandler",
+            value: function registerContextMenuHandler(handler) {
+                var _this = this;
+                if (this._currentHandler) {
+                    throw new Error("There is already a context menu handler!");
+                }
+                this._currentHandler = handler;
+                return toDisposable6(function() {
+                    _this._currentHandler = null;
+                });
+            }
+        }
+    ]);
+    return DesktopContextMenuService;
+}(Disposable5);
+// src/views/components/context-menu/ContextMenu.tsx
+function ContextMenu() {
+    var _useState8 = _sliced_to_array(useState8(false), 2), visible = _useState8[0], setVisible = _useState8[1];
+    var _useState81 = _sliced_to_array(useState8(""), 2), menuType = _useState81[0], setMenuType = _useState81[1];
+    var _useState82 = _sliced_to_array(useState8([
+        0,
+        0
+    ]), 2), offset = _useState82[0], setOffset = _useState82[1];
+    var contextMenuService = useDependency8(IContextMenuService);
+    var commandService = useDependency8(ICommandService4);
+    useEffect7(function() {
+        var disposables = contextMenuService.registerContextMenuHandler({
+            handleContextMenu: handleContextMenu
+        });
+        document.addEventListener("pointerdown", handleClose);
+        document.addEventListener("wheel", handleClose);
+        return function() {
+            document.removeEventListener("pointerdown", handleClose);
+            document.removeEventListener("wheel", handleClose);
+            disposables.dispose();
+        };
+    }, []);
+    function handleContextMenu(event, menuType2) {
+        setMenuType(menuType2);
+        setOffset([
+            event.clientX,
+            event.clientY
+        ]);
+        setVisible(true);
+    }
+    function handleClose() {
+        setVisible(false);
+    }
+    return /* @__PURE__ */ React11.createElement(Popup, {
+        visible: visible,
+        offset: offset
+    }, /* @__PURE__ */ React11.createElement("section", {
+        onPointerDown: function(e) {
+            return e.stopPropagation();
+        }
+    }, /* @__PURE__ */ React11.createElement(Menu, {
+        menuType: [
+            menuType
+        ],
+        onOptionSelect: function(params) {
+            var commandId = params.label, value = params.value;
+            commandService && commandService.executeCommand(commandId, {
+                value: value
+            });
+            setVisible(false);
+        }
+    })));
+}
+// src/views/components/dialog-part/DialogPart.tsx
+import { Dialog } from "@univerjs/design";
+import { useDependency as useDependency9 } from "@wendellhu/redi/react-bindings";
+import React12, { useEffect as useEffect8, useState as useState9 } from "react";
+// src/services/dialog/dialog.service.ts
+import { createIdentifier as createIdentifier10 } from "@wendellhu/redi";
+var IDialogService = createIdentifier10("univer.dialog-service");
+// src/views/components/dialog-part/DialogPart.tsx
+function DialogPart() {
+    var dialogService = useDependency9(IDialogService);
+    var _useState9 = _sliced_to_array(useState9([]), 2), dialogOptions = _useState9[0], setDialogOptions = _useState9[1];
+    useEffect8(function() {
+        var dialog$ = dialogService.getObservableDialog();
+        var subscribtion = dialog$.subscribe(function(options) {
+            setDialogOptions(options);
+        });
+        return function() {
+            subscribtion.unsubscribe();
+        };
+    }, []);
+    var props = dialogOptions.map(function(options) {
+        var children = options.children, title = options.title, closeIcon = options.closeIcon, footer = options.footer, restProps = _object_without_properties(options, [
+            "children",
+            "title",
+            "closeIcon",
+            "footer"
+        ]);
+        var dialogProps = restProps;
+        for(var _i = 0, _iter = [
+            "children",
+            "title",
+            "closeIcon",
+            "footer"
+        ]; _i < _iter.length; _i++){
+            var key = _iter[_i];
+            var k = key;
+            var props2 = options[k];
+            if (props2) {
+                dialogProps[k] = /* @__PURE__ */ React12.createElement(CustomLabel, _object_spread({}, props2));
+            }
+        }
+        return dialogProps;
+    });
+    return /* @__PURE__ */ React12.createElement(React12.Fragment, null, props === null || props === void 0 ? void 0 : props.map(function(options) {
+        return /* @__PURE__ */ React12.createElement(Dialog, _object_spread({
+            key: options.id
+        }, options));
+    }));
+}
+// src/views/parts.ts
+var globalComponents = /* @__PURE__ */ new Set([
+    function() {
+        return DialogPart;
+    },
+    function() {
+        return ConfirmPart;
+    },
+    function() {
+        return Notification;
+    },
+    function() {
+        return ContextMenu;
+    }
+]);
+// src/views/App.tsx
+function App(props) {
+    var localeService = useDependency10(LocaleService4);
+    var themeService = useDependency10(ThemeService);
+    var messageService = useDependency10(IMessageService);
+    var contentRef = useRef3(null);
+    var mountContainer = props.mountContainer, headerComponents = props.headerComponents, headerMenuComponents = props.headerMenuComponents, contentComponents = props.contentComponents, footerComponents = props.footerComponents, // sidebarComponents,
+    onRendered = props.onRendered;
+    useEffect9(function() {
+        if (!themeService.getCurrentTheme()) {
+            themeService.setTheme(defaultTheme);
+        }
+    }, []);
+    useEffect9(function() {
+        if (contentRef.current) {
+            onRendered === null || onRendered === void 0 ? void 0 : onRendered(contentRef.current);
+        }
+    }, [
+        onRendered
+    ]);
+    var _useState10 = _sliced_to_array(useState10(localeService.getLocales()), 2), locale = _useState10[0], setLocale = _useState10[1];
+    var portalContainer = useMemo2(function() {
+        return document.createElement("div");
+    }, []);
+    useEffect9(function() {
+        document.body.appendChild(portalContainer);
+        messageService.setContainer(portalContainer);
+        var subscriptions = [
+            localeService.localeChanged$.subscribe(function() {
+                setLocale(localeService.getLocales());
+            }),
+            themeService.currentTheme$.subscribe(function(theme) {
+                themeInstance.setTheme(mountContainer, theme);
+                portalContainer && themeInstance.setTheme(portalContainer, theme);
+            })
+        ];
+        return function() {
+            subscriptions.forEach(function(subscription) {
+                return subscription.unsubscribe();
+            });
+        };
+    }, [
+        portalContainer
+    ]);
+    return /* @__PURE__ */ React13.createElement(ConfigProvider, {
+        locale: locale,
+        mountContainer: portalContainer
+    }, /* @__PURE__ */ React13.createElement("section", {
+        className: app_module_default.appLayout
+    }, props.toolbar && /* @__PURE__ */ React13.createElement(MenuBar, {
+        headerMenuComponents: headerMenuComponents
+    }), /* @__PURE__ */ React13.createElement("section", {
+        className: app_module_default.appContainer
+    }, /* @__PURE__ */ React13.createElement("header", {
+        className: app_module_default.appContainerHeader
+    }, props.toolbar && /* @__PURE__ */ React13.createElement(Toolbar, null)), /* @__PURE__ */ React13.createElement("section", {
+        className: app_module_default.appContainerWrapper
+    }, /* @__PURE__ */ React13.createElement("section", {
+        className: app_module_default.appContainerContent
+    }, /* @__PURE__ */ React13.createElement("header", null, /* @__PURE__ */ React13.createElement(ComponentContainer, {
+        components: headerComponents
+    })), /* @__PURE__ */ React13.createElement("section", {
+        className: app_module_default.appContainerCanvas,
+        ref: contentRef,
+        "data-range-selector": true,
+        onContextMenu: function(e) {
+            return e.preventDefault();
+        }
+    }, /* @__PURE__ */ React13.createElement(ComponentContainer, {
+        components: contentComponents
+    }))), /* @__PURE__ */ React13.createElement("aside", {
+        className: app_module_default.appContainerSidebar
+    }, /* @__PURE__ */ React13.createElement(Sidebar, null)))), /* @__PURE__ */ React13.createElement("footer", {
+        className: app_module_default.appFooter
+    }, /* @__PURE__ */ React13.createElement(ComponentContainer, {
+        components: footerComponents
+    }))), /* @__PURE__ */ React13.createElement(ComponentContainer, {
+        components: globalComponents
+    }));
+}
+// src/controllers/ui/ui-desktop.controller.tsx
+var DesktopUIPart = /* @__PURE__ */ function(DesktopUIPart2) {
+    DesktopUIPart2["HEADER"] = "header";
+    DesktopUIPart2["HEADER_MENU"] = "header-menu";
+    DesktopUIPart2["CONTENT"] = "content";
+    DesktopUIPart2["FOOTER"] = "footer";
+    return DesktopUIPart2;
+}(DesktopUIPart || {});
+var STEADY_TIMEOUT = 3e3;
+var DesktopUIController = /*#__PURE__*/ function(Disposable6) {
+    "use strict";
+    _inherits(DesktopUIController, Disposable6);
+    var _super = _create_super(DesktopUIController);
+    function DesktopUIController(_injector, _lifecycleService, _renderManagerService, _focusService) {
+        _class_call_check(this, DesktopUIController);
+        var _this;
+        _this = _super.call(this);
+        _define_property(_assert_this_initialized(_this), "_headerComponents", /* @__PURE__ */ new Set());
+        _define_property(_assert_this_initialized(_this), "_headerMenuComponents", /* @__PURE__ */ new Set());
+        _define_property(_assert_this_initialized(_this), "_contentComponents", /* @__PURE__ */ new Set());
+        _define_property(_assert_this_initialized(_this), "_footerComponents", /* @__PURE__ */ new Set());
+        // private _sidebarComponents: Set<() => ComponentType> = new Set();
+        _define_property(_assert_this_initialized(_this), "_componentRegistered$", new Subject3());
+        _define_property(_assert_this_initialized(_this), "componentRegistered$", _this._componentRegistered$.asObservable());
+        _this._injector = _injector;
+        _this._lifecycleService = _lifecycleService;
+        _this._renderManagerService = _renderManagerService;
+        _this._focusService = _focusService;
+        return _this;
+    }
+    _create_class(DesktopUIController, [
+        {
+            key: "bootstrapWorkbench",
+            value: function bootstrapWorkbench(options) {
+                var _this = this;
+                this.disposeWithMe(bootStrap(this._injector, options, function(canvasElement, containerElement) {
+                    _this._initializeEngine(canvasElement);
+                    _this._lifecycleService.stage = LifecycleStages3.Rendered;
+                    _this._focusService.setContainerElement(containerElement);
+                    setTimeout(function() {
+                        return _this._lifecycleService.stage = LifecycleStages3.Steady;
+                    }, STEADY_TIMEOUT);
+                }));
+            }
+        },
+        {
+            key: "_initializeEngine",
+            value: function _initializeEngine(element) {
+                var engine = this._renderManagerService.getCurrent().engine;
+                engine.setContainer(element);
+            }
+        },
+        {
+            key: "registerComponent",
+            value: function registerComponent(part, component) {
+                switch(part){
+                    case "header" /* HEADER */ :
+                        return this.registerHeaderComponent(component);
+                    case "content" /* CONTENT */ :
+                        return this.registerContentComponent(component);
+                    case "footer" /* FOOTER */ :
+                        return this.registerFooterComponent(component);
+                    case "header-menu" /* HEADER_MENU */ :
+                        return this.registerHeaderMenuComponent(component);
+                    default:
+                        throw new Error("[DesktopUIController] Unknown part type: ".concat(part, "."));
+                }
+            }
+        },
+        {
+            key: "registerHeaderMenuComponent",
+            value: function registerHeaderMenuComponent(component) {
+                var _this = this;
+                this._headerMenuComponents.add(component);
+                this._componentRegistered$.next();
+                return toDisposable7(function() {
+                    return _this._headerMenuComponents.delete(component);
+                });
+            }
+        },
+        {
+            key: "getHeaderMenuComponents",
+            value: function getHeaderMenuComponents() {
+                return /* @__PURE__ */ new Set(_to_consumable_array(this._headerMenuComponents));
+            }
+        },
+        {
+            key: "registerHeaderComponent",
+            value: function registerHeaderComponent(component) {
+                var _this = this;
+                this._headerComponents.add(component);
+                this._componentRegistered$.next();
+                return toDisposable7(function() {
+                    return _this._headerComponents.delete(component);
+                });
+            }
+        },
+        {
+            key: "getHeaderComponents",
+            value: function getHeaderComponents() {
+                return /* @__PURE__ */ new Set(_to_consumable_array(this._headerComponents));
+            }
+        },
+        {
+            key: "registerContentComponent",
+            value: function registerContentComponent(component) {
+                var _this = this;
+                this._contentComponents.add(component);
+                this._componentRegistered$.next();
+                return toDisposable7(function() {
+                    return _this._contentComponents.delete(component);
+                });
+            }
+        },
+        {
+            key: "getContentComponents",
+            value: function getContentComponents() {
+                return /* @__PURE__ */ new Set(_to_consumable_array(this._contentComponents));
+            }
+        },
+        {
+            key: "registerFooterComponent",
+            value: function registerFooterComponent(component) {
+                var _this = this;
+                this._footerComponents.add(component);
+                this._componentRegistered$.next();
+                return toDisposable7(function() {
+                    return _this._footerComponents.delete(component);
+                });
+            }
+        },
+        {
+            key: "getFooterComponents",
+            value: function getFooterComponents() {
+                return /* @__PURE__ */ new Set(_to_consumable_array(this._footerComponents));
+            }
+        }
+    ]);
+    return DesktopUIController;
+}(Disposable6);
+DesktopUIController = __decorateClass([
+    __decorateParam(0, Inject2(Injector2)),
+    __decorateParam(1, Inject2(LifecycleService)),
+    __decorateParam(2, IRenderManagerService),
+    __decorateParam(3, IFocusService)
+], DesktopUIController);
+function bootStrap(injector, options, callback) {
+    var mountContainer;
+    var container = options.container;
+    if (typeof container === "string") {
+        var containerElement = document.getElementById(container);
+        if (!containerElement) {
+            mountContainer = createContainer(container);
+        } else {
+            mountContainer = containerElement;
+        }
+    } else if (_instanceof(container, HTMLElement)) {
+        mountContainer = container;
+    } else {
+        mountContainer = createContainer("univer");
+    }
+    var ConnectedApp = connectInjector(App, injector);
+    var desktopUIController = injector.get(IUIController);
+    var onRendered = function(canvasElement) {
+        return callback(canvasElement, mountContainer);
+    };
+    function render() {
+        var headerComponents = desktopUIController.getHeaderComponents();
+        var contentComponents = desktopUIController.getContentComponents();
+        var footerComponents = desktopUIController.getFooterComponents();
+        var headerMenuComponents = desktopUIController.getHeaderMenuComponents();
+        createRoot(/* @__PURE__ */ React14.createElement(ConnectedApp, _object_spread_props(_object_spread({}, options), {
+            mountContainer: mountContainer,
+            headerComponents: headerComponents,
+            headerMenuComponents: headerMenuComponents,
+            contentComponents: contentComponents,
+            onRendered: onRendered,
+            footerComponents: footerComponents
+        })), mountContainer);
+    }
+    var updateSubscription = desktopUIController.componentRegistered$.subscribe(render);
+    render();
+    return toDisposable7(function() {
+        unmount(mountContainer);
+        updateSubscription.unsubscribe();
+    });
+}
+function createContainer(id) {
+    var element = document.createElement("div");
+    element.id = id;
+    return element;
+}
+// src/services/before-close/before-close.service.ts
+import { createIdentifier as createIdentifier12 } from "@wendellhu/redi";
+// src/services/notification/notification.service.ts
+import { createIdentifier as createIdentifier11 } from "@wendellhu/redi";
+var INotificationService = createIdentifier11("univer.notification-service");
+// src/services/before-close/before-close.service.ts
+var IBeforeCloseService = createIdentifier12("univer.ui.before-close-service");
+var DesktopBeforeCloseService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopBeforeCloseService(_notificationService) {
+        _class_call_check(this, DesktopBeforeCloseService);
+        _define_property(this, "_callbacks", []);
+        this._notificationService = _notificationService;
+        this._init();
+    }
+    _create_class(DesktopBeforeCloseService, [
+        {
+            key: "registerBeforeClose",
+            value: function registerBeforeClose(callback) {
+                var _this = this;
+                this._callbacks.push(callback);
+                return {
+                    dispose: function() {
+                        _this._callbacks = _this._callbacks.filter(function(cb) {
+                            return cb !== callback;
+                        });
+                    }
+                };
+            }
+        },
+        {
+            key: "_init",
+            value: function _init() {
+                var _this = this;
+                window.onbeforeunload = function(event) {
+                    var message = _this._callbacks.map(function(callback) {
+                        return callback();
+                    }).filter(function(m) {
+                        return !!m;
+                    }).join("\n");
+                    if (message) {
+                        _this._notificationService.show({
+                            type: "error",
+                            title: "Some changes are not saved",
+                            content: message
+                        });
+                        if (typeof event === "undefined") {
+                            event = window.event;
+                        }
+                        event.returnValue = message;
+                        return message;
+                    }
+                };
+            }
+        }
+    ]);
+    return DesktopBeforeCloseService;
+}();
+DesktopBeforeCloseService = __decorateClass([
+    __decorateParam(0, INotificationService)
+], DesktopBeforeCloseService);
+// src/services/clipboard/clipboard-interface.service.ts
+import { Disposable as Disposable7 } from "@univerjs/core";
+import { createIdentifier as createIdentifier13 } from "@wendellhu/redi";
+var PLAIN_TEXT_CLIPBOARD_MIME_TYPE = "text/plain";
+var HTML_CLIPBOARD_MIME_TYPE = "text/html";
+var IClipboardInterfaceService = createIdentifier13("univer.clipboard-interface-service");
+var BrowserClipboardService = /*#__PURE__*/ function(Disposable7) {
+    "use strict";
+    _inherits(BrowserClipboardService, Disposable7);
+    var _super = _create_super(BrowserClipboardService);
+    function BrowserClipboardService() {
+        _class_call_check(this, BrowserClipboardService);
+        return _super.apply(this, arguments);
+    }
+    _create_class(BrowserClipboardService, [
+        {
+            key: "write",
+            value: function write(text, html) {
+                return _async_to_generator(function() {
+                    var _obj, error;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                _state.trys.push([
+                                    0,
+                                    2,
+                                    ,
+                                    3
+                                ]);
+                                return [
+                                    4,
+                                    navigator.clipboard.write([
+                                        new ClipboardItem((_obj = {}, _define_property(_obj, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, new Blob([
+                                            text
+                                        ], {
+                                            type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE
+                                        })), _define_property(_obj, HTML_CLIPBOARD_MIME_TYPE, new Blob([
+                                            html
+                                        ], {
+                                            type: HTML_CLIPBOARD_MIME_TYPE
+                                        })), _obj))
+                                    ])
+                                ];
+                            case 1:
+                                return [
+                                    2,
+                                    _state.sent()
+                                ];
+                            case 2:
+                                error = _state.sent();
+                                console.error(error);
+                                return [
+                                    3,
+                                    3
+                                ];
+                            case 3:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            }
+        },
+        {
+            key: "writeText",
+            value: function writeText(text) {
+                return _async_to_generator(function() {
+                    var error, activeElement, container;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                _state.trys.push([
+                                    0,
+                                    2,
+                                    ,
+                                    3
+                                ]);
+                                return [
+                                    4,
+                                    navigator.clipboard.writeText(text)
+                                ];
+                            case 1:
+                                return [
+                                    2,
+                                    _state.sent()
+                                ];
+                            case 2:
+                                error = _state.sent();
+                                console.error(error);
+                                return [
+                                    3,
+                                    3
+                                ];
+                            case 3:
+                                activeElement = document.activeElement;
+                                container = createCopyPasteContainer();
+                                container.value = text;
+                                container.focus();
+                                container.select();
+                                document.body.appendChild(container);
+                                document.execCommand("copy");
+                                if (_instanceof(activeElement, HTMLElement)) {
+                                    activeElement.focus();
+                                }
+                                document.removeChild(container);
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            }
+        },
+        {
+            key: "read",
+            value: function read() {
+                return _async_to_generator(function() {
+                    return _ts_generator(this, function(_state) {
+                        return [
+                            2,
+                            navigator.clipboard.read()
+                        ];
+                    });
+                })();
+            }
+        },
+        {
+            key: "readText",
+            value: function readText() {
+                return _async_to_generator(function() {
+                    var e;
+                    return _ts_generator(this, function(_state) {
+                        switch(_state.label){
+                            case 0:
+                                _state.trys.push([
+                                    0,
+                                    2,
+                                    ,
+                                    3
+                                ]);
+                                return [
+                                    4,
+                                    navigator.clipboard.readText()
+                                ];
+                            case 1:
+                                return [
+                                    2,
+                                    _state.sent()
+                                ];
+                            case 2:
+                                e = _state.sent();
+                                console.error(e);
+                                return [
+                                    2,
+                                    ""
+                                ];
+                            case 3:
+                                return [
+                                    2
+                                ];
+                        }
+                    });
+                })();
+            }
+        }
+    ]);
+    return BrowserClipboardService;
+}(Disposable7);
+function createCopyPasteContainer() {
+    var textArea = document.createElement("textarea");
+    textArea.style.position = "absolute";
+    textArea.style.height = "1px";
+    textArea.style.width = "1px";
+    return textArea;
+}
+// src/services/confirm/desktop-confirm.service.ts
+import { toDisposable as toDisposable8 } from "@univerjs/core";
+import { Subject as Subject4 } from "rxjs";
+var DesktopConfirmService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopConfirmService() {
+        _class_call_check(this, DesktopConfirmService);
+        _define_property(this, "confirmOptions", []);
+        _define_property(this, "confirmOptions$", new Subject4());
+    }
+    _create_class(DesktopConfirmService, [
+        {
+            key: "open",
+            value: function open(option) {
+                var _this = this;
+                if (this.confirmOptions.find(function(item) {
+                    return item.id === option.id;
+                })) {
+                    this.confirmOptions = this.confirmOptions.map(function(item) {
+                        return _object_spread_props(_object_spread({}, item.id === option.id ? option : item), {
+                            visible: true
+                        });
+                    });
+                } else {
+                    this.confirmOptions.push(_object_spread_props(_object_spread({}, option), {
+                        visible: true
+                    }));
+                }
+                this.confirmOptions$.next(this.confirmOptions);
+                return toDisposable8(function() {
+                    _this.confirmOptions = [];
+                    _this.confirmOptions$.next([]);
+                });
+            }
+        },
+        {
+            key: "close",
+            value: function close(id) {
+                this.confirmOptions = this.confirmOptions.map(function(item) {
+                    return _object_spread_props(_object_spread({}, item), {
+                        visible: item.id === id ? false : item.visible
+                    });
+                });
+                this.confirmOptions$.next(_to_consumable_array(this.confirmOptions));
+            }
+        },
+        {
+            key: "getObservableConfirm",
+            value: function getObservableConfirm() {
+                return this.confirmOptions$;
+            }
+        }
+    ]);
+    return DesktopConfirmService;
+}();
+// src/services/dialog/desktop-dialog.service.ts
+import { toDisposable as toDisposable9 } from "@univerjs/core";
+import { Subject as Subject5 } from "rxjs";
+var DesktopDialogService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopDialogService() {
+        _class_call_check(this, DesktopDialogService);
+        _define_property(this, "dialogOptions", []);
+        _define_property(this, "dialogOptions$", new Subject5());
+    }
+    _create_class(DesktopDialogService, [
+        {
+            key: "open",
+            value: function open(option) {
+                var _this = this;
+                if (this.dialogOptions.find(function(item) {
+                    return item.id === option.id;
+                })) {
+                    this.dialogOptions = this.dialogOptions.map(function(item) {
+                        return _object_spread_props(_object_spread({}, item.id === option.id ? option : item), {
+                            visible: true
+                        });
+                    });
+                } else {
+                    this.dialogOptions.push(_object_spread_props(_object_spread({}, option), {
+                        visible: true
+                    }));
+                }
+                this.dialogOptions$.next(this.dialogOptions);
+                return toDisposable9(function() {
+                    _this.dialogOptions = [];
+                    _this.dialogOptions$.next([]);
+                });
+            }
+        },
+        {
+            key: "close",
+            value: function close(id) {
+                this.dialogOptions = this.dialogOptions.map(function(item) {
+                    return _object_spread_props(_object_spread({}, item), {
+                        visible: item.id === id ? false : item.visible
+                    });
+                });
+                this.dialogOptions$.next(_to_consumable_array(this.dialogOptions));
+            }
+        },
+        {
+            key: "getObservableDialog",
+            value: function getObservableDialog() {
+                return this.dialogOptions$;
+            }
+        }
+    ]);
+    return DesktopDialogService;
+}();
+// src/services/message/desktop-message.service.ts
+import { toDisposable as toDisposable10 } from "@univerjs/core";
+import { Message } from "@univerjs/design";
+var DesktopMessageService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopMessageService() {
+        _class_call_check(this, DesktopMessageService);
+        _define_property(this, "portalContainer", document.body);
+        _define_property(this, "message", void 0);
+    }
+    _create_class(DesktopMessageService, [
+        {
+            key: "setContainer",
+            value: function setContainer(container) {
+                this.portalContainer = container;
+                this.message = new Message(container);
+            }
+        },
+        {
+            key: "show",
+            value: function show(options) {
+                var type = options.type, rest = _object_without_properties(options, [
+                    "type"
+                ]);
+                this.message && this.message[type](rest);
+                return toDisposable10(function() {});
+            }
+        }
+    ]);
+    return DesktopMessageService;
+}();
+// src/services/notification/desktop-notification.service.ts
+import { toDisposable as toDisposable11 } from "@univerjs/core";
+var DesktopNotificationService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopNotificationService() {
+        _class_call_check(this, DesktopNotificationService);
+    }
+    _create_class(DesktopNotificationService, [
+        {
+            key: "show",
+            value: function show(params) {
+                notification.show(params);
+                return toDisposable11(function() {});
+            }
+        }
+    ]);
+    return DesktopNotificationService;
+}();
+// src/services/shortcut/shortcut-experience.service.ts
+import { IUniverInstanceService, LocaleService as LocaleService5 } from "@univerjs/core";
+import { Inject as Inject3 } from "@wendellhu/redi";
+var ShortcutExperienceService = /*#__PURE__*/ function() {
+    "use strict";
+    function ShortcutExperienceService(_currentUniverService, _localeService) {
+        _class_call_check(this, ShortcutExperienceService);
+        _define_property(this, "_current", null);
+        _define_property(this, "_shortcutParam", []);
+        this._currentUniverService = _currentUniverService;
+        this._localeService = _localeService;
+    }
+    _create_class(ShortcutExperienceService, [
+        {
+            key: "dispose",
+            value: function dispose() {
+                this._shortcutParam = [];
+            }
+        },
+        {
+            key: "getCurrentBySearch",
+            value: function getCurrentBySearch(searchParm) {
+                return this._getCurrentBySearch(searchParm);
+            }
+        },
+        {
+            key: "getCurrent",
+            value: function getCurrent() {
+                return this._getCurrentBySearch(this._current);
+            }
+        },
+        {
+            key: "addOrUpdate",
+            value: function addOrUpdate(insertParam) {
+                var param = this._getCurrentBySearch({
+                    unitId: insertParam.unitId,
+                    sheetId: insertParam.sheetId,
+                    keycode: insertParam.keycode
+                });
+                if (param != null) {
+                    var index = this._shortcutParam.indexOf(param);
+                    this._shortcutParam.splice(index, 1);
+                }
+                this._shortcutParam.push(insertParam);
+                return param;
+            }
+        },
+        {
+            key: "remove",
+            value: function remove(searchParm) {
+                if (searchParm == null) {
+                    return;
+                }
+                var param = this._getCurrentBySearch(searchParm);
+                if (param == null) {
+                    return;
+                }
+                var index = this._shortcutParam.indexOf(param);
+                return this._shortcutParam.splice(index, 1)[0];
+            }
+        },
+        {
+            key: "_getCurrentBySearch",
+            value: function _getCurrentBySearch(searchParm) {
+                if (searchParm == null) {
+                    return;
+                }
+                var item = this._shortcutParam.find(function(param) {
+                    return param.unitId === searchParm.unitId && param.sheetId === searchParm.sheetId && param.keycode === searchParm.keycode;
+                });
+                return item;
+            }
+        }
+    ]);
+    return ShortcutExperienceService;
+}();
+ShortcutExperienceService = __decorateClass([
+    __decorateParam(0, IUniverInstanceService),
+    __decorateParam(1, Inject3(LocaleService5))
+], ShortcutExperienceService);
+// src/services/sidebar/desktop-sidebar.service.ts
+import { toDisposable as toDisposable12 } from "@univerjs/core";
+import { Subject as Subject6 } from "rxjs";
+var DesktopSidebarService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopSidebarService() {
+        _class_call_check(this, DesktopSidebarService);
+        _define_property(this, "sidebarOptions", {});
+        _define_property(this, "sidebarOptions$", new Subject6());
+    }
+    _create_class(DesktopSidebarService, [
+        {
+            key: "open",
+            value: function open(option) {
+                var _this = this;
+                this.sidebarOptions = _object_spread_props(_object_spread({}, option), {
+                    visible: true
+                });
+                this.sidebarOptions$.next(this.sidebarOptions);
+                return toDisposable12(function() {
+                    _this.sidebarOptions$.next({});
+                });
+            }
+        },
+        {
+            key: "close",
+            value: function close() {
+                this.sidebarOptions = _object_spread_props(_object_spread({}, this.sidebarOptions), {
+                    visible: false
+                });
+                this.sidebarOptions$.next(this.sidebarOptions);
+                this.sidebarOptions.onClose && this.sidebarOptions.onClose();
+            }
+        },
+        {
+            key: "getObservableSidebar",
+            value: function getObservableSidebar() {
+                return this.sidebarOptions$;
+            }
+        }
+    ]);
+    return DesktopSidebarService;
+}();
+// src/ui-plugin.ts
+import { ILocalStorageService, LocaleService as LocaleService7, Plugin, PluginType } from "@univerjs/core";
+import { Inject as Inject6, Injector as Injector3 } from "@wendellhu/redi";
+// src/controllers/error/error.controller.ts
+import { Disposable as Disposable8, ErrorService, LifecycleStages as LifecycleStages4, OnLifecycle as OnLifecycle3, toDisposable as toDisposable13 } from "@univerjs/core";
+import { MessageType } from "@univerjs/design";
+import { Inject as Inject4 } from "@wendellhu/redi";
+var ErrorController = /*#__PURE__*/ function(Disposable8) {
+    "use strict";
+    _inherits(ErrorController, Disposable8);
+    var _super = _create_super(ErrorController);
+    function ErrorController(_errorService, _messageService) {
+        _class_call_check(this, ErrorController);
+        var _this;
+        _this = _super.call(this);
+        _this._errorService = _errorService;
+        _this._messageService = _messageService;
+        _this.disposeWithMe(toDisposable13(_this._errorService.error$.subscribe(function(error) {
+            _this._messageService.show({
+                content: error.errorKey,
+                type: MessageType.Error
+            });
+        })));
+        return _this;
+    }
+    return ErrorController;
+}(Disposable8);
+ErrorController = __decorateClass([
+    OnLifecycle3(LifecycleStages4.Starting, ErrorController),
+    __decorateParam(0, Inject4(ErrorService)),
+    __decorateParam(1, IMessageService)
+], ErrorController);
+// src/controllers/shortcut-display/shortcut-panel.controller.ts
+import { Disposable as Disposable10, ICommandService as ICommandService5, LifecycleStages as LifecycleStages5, OnLifecycle as OnLifecycle4 } from "@univerjs/core";
+import { Inject as Inject5 } from "@wendellhu/redi";
+// src/commands/operations/toggle-shortcut-panel.operation.ts
+import { CommandType as CommandType2 } from "@univerjs/core";
+// src/services/shortcut/shortcut-panel.service.ts
+import { Disposable as Disposable9 } from "@univerjs/core";
+import { BehaviorSubject as BehaviorSubject3, distinctUntilChanged } from "rxjs";
+var ShortcutPanelService = /*#__PURE__*/ function(Disposable9) {
+    "use strict";
+    _inherits(ShortcutPanelService, Disposable9);
+    var _super = _create_super(ShortcutPanelService);
+    function ShortcutPanelService() {
+        _class_call_check(this, ShortcutPanelService);
+        var _this;
+        _this = _super.apply(this, arguments);
+        _define_property(_assert_this_initialized(_this), "_open$", new BehaviorSubject3(false));
+        _define_property(_assert_this_initialized(_this), "open$", _this._open$.pipe(distinctUntilChanged()));
+        return _this;
+    }
+    _create_class(ShortcutPanelService, [
+        {
+            key: "isOpen",
+            get: function get() {
+                return this._open$.getValue();
+            }
+        },
+        {
+            key: "dispose",
+            value: function dispose() {
+                this._open$.next(false);
+                this._open$.complete();
+            }
+        },
+        {
+            key: "open",
+            value: function open() {
+                this._open$.next(true);
+            }
+        },
+        {
+            key: "close",
+            value: function close() {
+                this._open$.next(false);
+            }
+        }
+    ]);
+    return ShortcutPanelService;
+}(Disposable9);
+// src/commands/operations/toggle-shortcut-panel.operation.ts
+var ShortcutPanelComponentName = "ShortcutPanel";
+var ToggleShortcutPanelOperation = {
+    id: "base-ui.operation.toggle-shortcut-panel",
+    type: CommandType2.OPERATION,
+    handler: function(accessor) {
+        var shortcutPanelService = accessor.get(ShortcutPanelService);
+        var sidebarService = accessor.get(ISidebarService);
+        var isOpen = shortcutPanelService.isOpen;
+        if (isOpen) {
+            shortcutPanelService.close();
+            sidebarService.close();
+        } else {
+            shortcutPanelService.open();
+            sidebarService.open({
+                header: {
+                    title: "shortcut-panel.title"
+                },
+                children: {
+                    label: ShortcutPanelComponentName
+                }
+            });
+        }
+        return true;
+    }
+};
+// src/views/components/shortcut-panel/ShortcutPanel.tsx
+import { LocaleService as LocaleService6 } from "@univerjs/core";
+import { useDependency as useDependency11 } from "@wendellhu/redi/react-bindings";
+import React15, { useCallback, useEffect as useEffect10 } from "react";
+// stylePlugin:/Users/jikkaixiao/dev/univer/packages/ui/src/views/components/shortcut-panel/index.module.less
+var index_module_default6 = {
+    "shortcutPanelGroupTitle": "univer-shortcut-panel-group-title",
+    "shortcutPanelItem": "univer-shortcut-panel-item",
+    "shortcutPanelItemTitle": "univer-shortcut-panel-item-title",
+    "shortcutPanelItemShortcut": "univer-shortcut-panel-item-shortcut"
+};
+// src/views/components/shortcut-panel/ShortcutPanel.tsx
+function ShortcutPanel() {
+    var shortcutService = useDependency11(IShortcutService);
+    var localeService = useDependency11(LocaleService6);
+    var _React15_useState = _sliced_to_array(React15.useState([]), 2), shortcutItems = _React15_useState[0], setShortcutItems = _React15_useState[1];
+    var updateShortcuts = useCallback(function() {
+        var shortcutGroups = /* @__PURE__ */ new Map();
+        var shortcuts = shortcutService.getAllShortcuts().filter(function(item) {
+            return !!item.group;
+        });
+        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+        try {
+            for(var _iterator = shortcuts[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                var shortcut = _step.value;
+                var group = shortcut.group;
+                var _shortcut_description;
+                var shortcutItem = {
+                    title: localeService.t((_shortcut_description = shortcut.description) !== null && _shortcut_description !== void 0 ? _shortcut_description : shortcut.id),
+                    shortcut: shortcutService.getShortcutDisplay(shortcut)
+                };
+                if (!/\d+_[a-zA-Z0-9]/.test(group)) {
+                    throw new Error("[ShortcutPanel]: Invalid shortcut group: ".concat(group, "!"));
+                }
+                if (!shortcutGroups.has(group)) {
+                    shortcutGroups.set(group, []);
+                }
+                shortcutGroups.get(group).push(shortcutItem);
+            }
+        } catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        } finally{
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return != null) {
+                    _iterator.return();
+                }
+            } finally{
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        var toRender = Array.from(shortcutGroups.entries()).map(function(param) {
+            var _param = _sliced_to_array(param, 2), name = _param[0], items = _param[1];
+            var groupSequence = name.split("_")[0];
+            var groupName = name.slice(groupSequence.length + 1);
+            return {
+                sequence: +groupSequence,
+                name: localeService.t(groupName),
+                items: items
+            };
+        }).sort(function(a, b) {
+            return a.sequence - b.sequence;
+        });
+        setShortcutItems(toRender);
+    }, [
+        shortcutService,
+        localeService
+    ]);
+    useEffect10(function() {
+        updateShortcuts();
+        var subscription = shortcutService.shortcutChanged$.subscribe(function() {
+            return updateShortcuts();
+        });
+        return function() {
+            return subscription.unsubscribe();
+        };
+    }, [
+        shortcutService
+    ]);
+    return /* @__PURE__ */ React15.createElement("div", {
+        className: index_module_default6.shortcutPanel
+    }, shortcutItems.map(function(group) {
+        return /* @__PURE__ */ React15.createElement("div", {
+            className: index_module_default6.shortcutPanelGroup,
+            key: group.name
+        }, /* @__PURE__ */ React15.createElement("div", {
+            className: index_module_default6.shortcutPanelGroupTitle
+        }, group.name), group.items.map(function(item, index) {
+            return /* @__PURE__ */ React15.createElement("div", {
+                className: index_module_default6.shortcutPanelItem,
+                key: index
+            }, /* @__PURE__ */ React15.createElement("span", {
+                className: index_module_default6.shortcutPanelItemTitle
+            }, item.title), /* @__PURE__ */ React15.createElement("span", {
+                className: index_module_default6.shortcutPanelItemShortcut
+            }, item.shortcut));
+        }));
+    }));
+}
+// src/controllers/shortcut-display/menu.ts
+function ShortcutPanelMenuItemFactory() {
+    return {
+        id: ToggleShortcutPanelOperation.id,
+        title: "toggle-shortcut-panel",
+        tooltip: "toggle-shortcut-panel",
+        icon: "KeyboardSingle",
+        type: 0 /* BUTTON */ ,
+        positions: [
+            "uiToolbar.others" /* TOOLBAR_OTHERS */ 
+        ]
+    };
+}
+// src/controllers/shortcut-display/shortcut-panel.controller.ts
+var ShortcutPanelController = /*#__PURE__*/ function(Disposable10) {
+    "use strict";
+    _inherits(ShortcutPanelController, Disposable10);
+    var _super = _create_super(ShortcutPanelController);
+    function ShortcutPanelController(menuService, commandService, componentManager) {
+        _class_call_check(this, ShortcutPanelController);
+        var _this;
+        _this = _super.call(this);
+        _this.disposeWithMe(menuService.addMenuItem(ShortcutPanelMenuItemFactory()));
+        _this.disposeWithMe(componentManager.register(ShortcutPanelComponentName, ShortcutPanel));
+        _this.disposeWithMe(commandService.registerCommand(ToggleShortcutPanelOperation));
+        return _this;
+    }
+    return ShortcutPanelController;
+}(Disposable10);
+ShortcutPanelController = __decorateClass([
+    OnLifecycle4(LifecycleStages5.Steady, ShortcutPanelController),
+    __decorateParam(0, IMenuService),
+    __decorateParam(1, ICommandService5),
+    __decorateParam(2, Inject5(ComponentManager))
+], ShortcutPanelController);
+// src/locale/en-US.ts
+var en_US_default = {
+    uiToolbar: {
+        start: "Start",
+        insert: "Insert",
+        formulas: "Formulas",
+        data: "Data",
+        view: "View",
+        others: "Others"
+    },
+    "shortcut-panel": {
+        title: "Shortcuts"
+    },
+    shortcut: {
+        undo: "Undo",
+        redo: "Redo",
+        cut: "Cut",
+        copy: "Copy",
+        paste: "Paste"
+    },
+    "common-edit": "Common Editing Shortcuts"
+};
+// src/services/local-storage/local-storage.service.ts
+import localforage from "localforage";
+var DesktopLocalStorageService = /*#__PURE__*/ function() {
+    "use strict";
+    function DesktopLocalStorageService() {
+        _class_call_check(this, DesktopLocalStorageService);
+    }
+    _create_class(DesktopLocalStorageService, [
+        {
+            key: "getItem",
+            value: function getItem(key) {
+                return localforage.getItem(key);
+            }
+        },
+        {
+            key: "setItem",
+            value: function setItem(key, value) {
+                return localforage.setItem(key, value);
+            }
+        },
+        {
+            key: "removeItem",
+            value: function removeItem(key) {
+                return localforage.removeItem(key);
+            }
+        },
+        {
+            key: "clear",
+            value: function clear() {
+                return localforage.clear();
+            }
+        },
+        {
+            key: "key",
+            value: function key(index) {
+                return localforage.key(index);
+            }
+        },
+        {
+            key: "keys",
+            value: function keys() {
+                return localforage.keys();
+            }
+        },
+        {
+            key: "iterate",
+            value: function iterate(iteratee) {
+                return localforage.iterate(iteratee);
+            }
+        }
+    ]);
+    return DesktopLocalStorageService;
+}();
+// src/ui-plugin.ts
+var PLUGIN_NAME = "ui";
+var DEFAULT_SLIDE_PLUGIN_DATA = {};
+var UIPlugin = (_class = /*#__PURE__*/ function(Plugin) {
+    "use strict";
+    _inherits(_class, Plugin);
+    var _super = _create_super(_class);
+    function _class() {
+        var config = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, _injector = arguments.length > 1 ? arguments[1] : void 0, _localeService = arguments.length > 2 ? arguments[2] : void 0;
+        _class_call_check(this, _class);
+        var _this;
+        _this = _super.call(this, PLUGIN_NAME);
+        _define_property(_assert_this_initialized(_this), "_config", void 0);
+        _this._injector = _injector;
+        _this._localeService = _localeService;
+        _this._config = Object.assign(DEFAULT_SLIDE_PLUGIN_DATA, config);
+        _this._localeService.load({
+            enUS: en_US_default
+        });
+        return _this;
+    }
+    _create_class(_class, [
+        {
+            key: "onStarting",
+            value: function onStarting(_injector) {
+                this._initDependencies(_injector);
+            }
+        },
+        {
+            key: "onReady",
+            value: function onReady() {
+                this._initUI();
+            }
+        },
+        {
+            key: "_initDependencies",
+            value: function _initDependencies(injector) {
+                var dependencies = [
+                    // legacy managers - deprecated
+                    [
+                        ComponentManager
+                    ],
+                    [
+                        ZIndexManager
+                    ],
+                    // services
+                    [
+                        ShortcutExperienceService
+                    ],
+                    [
+                        ShortcutPanelService
+                    ],
+                    [
+                        IShortcutService,
+                        {
+                            useClass: DesktopShortcutService
+                        }
+                    ],
+                    [
+                        IPlatformService,
+                        {
+                            useClass: DesktopPlatformService
+                        }
+                    ],
+                    [
+                        IMenuService,
+                        {
+                            useClass: DesktopMenuService
+                        }
+                    ],
+                    [
+                        IContextMenuService,
+                        {
+                            useClass: DesktopContextMenuService
+                        }
+                    ],
+                    [
+                        IClipboardInterfaceService,
+                        {
+                            useClass: BrowserClipboardService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        INotificationService,
+                        {
+                            useClass: DesktopNotificationService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        IDialogService,
+                        {
+                            useClass: DesktopDialogService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        IConfirmService,
+                        {
+                            useClass: DesktopConfirmService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        ISidebarService,
+                        {
+                            useClass: DesktopSidebarService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        IMessageService,
+                        {
+                            useClass: DesktopMessageService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        ILocalStorageService,
+                        {
+                            useClass: DesktopLocalStorageService,
+                            lazy: true
+                        }
+                    ],
+                    [
+                        IBeforeCloseService,
+                        {
+                            useClass: DesktopBeforeCloseService
+                        }
+                    ],
+                    // controllers
+                    [
+                        IFocusService,
+                        {
+                            useClass: DesktopFocusService
+                        }
+                    ],
+                    [
+                        IUIController,
+                        {
+                            useClass: DesktopUIController
+                        }
+                    ],
+                    [
+                        SharedController
+                    ],
+                    [
+                        ErrorController
+                    ],
+                    [
+                        ShortcutPanelController
+                    ]
+                ];
+                dependencies.forEach(function(dependency) {
+                    return injector.add(dependency);
+                });
+            }
+        },
+        {
+            key: "_initUI",
+            value: function _initUI() {
+                var _this = this;
+                Promise.resolve().then(function() {
+                    return _this._injector.get(IUIController).bootstrapWorkbench(_this._config);
+                });
+            }
+        }
+    ]);
+    return _class;
+}(_wrap_native_super(Plugin)), _define_property(_class, "type", PluginType.Univer), _class);
+UIPlugin = __decorateClass([
+    __decorateParam(1, Inject6(Injector3)),
+    __decorateParam(2, Inject6(LocaleService7))
+], UIPlugin);
+// src/utils/cell.ts
+import { getBorderStyleType, Tools } from "@univerjs/core";
+import { ptToPx, pxToPt } from "@univerjs/engine-render";
+// src/utils/util.ts
+function textTrim(x) {
+    if (x.length === 0) {
+        return x;
+    }
+    return x.replace(/^\s+|\s+$/gm, "");
+}
+// src/utils/cell.ts
+function handleDomToJson($dom) {
+    var _loop = function(i) {
+        var span = nodeList["".concat(i)];
+        var str = void 0;
+        if (span.nodeName === "#text") {
+            var _span_textContent;
+            str = (_span_textContent = span.textContent) !== null && _span_textContent !== void 0 ? _span_textContent : "";
+            span = span.parentElement;
+        } else {
+            str = span.innerText;
+        }
+        var textStyle = handleStringToStyle(span);
+        var spanTexts = splitSpanText(str);
+        spanTexts.forEach(function(item) {
+            var length = item.length;
+            ed += length;
+            st = ed - length;
+            var sId = Tools.generateRandomId(6);
+            textRuns.push({
+                sId: sId,
+                st: st,
+                ed: ed - 1,
+                ts: textStyle
+            });
+        });
+    };
+    var nodeList = $dom.childNodes;
+    if (nodeList.length === 0) {
+        return $dom.textContent;
+    }
+    if (nodeList[0].nodeName === "DIV") {
+        nodeList = nodeList[0].childNodes;
+    }
+    if (nodeList.length === 1 && nodeList[0].nodeName === "#text") {
+        return nodeList[0].textContent;
+    }
+    var textRuns = [];
+    var st = 0;
+    var ed = 0;
+    var dataStream = $dom.textContent || "";
+    dataStream += "\r\n";
+    for(var i = 0; i < nodeList.length; i++)_loop(i);
+    var blockId = Tools.generateRandomId(6);
+    var p = {
+        id: Tools.generateRandomId(6),
+        body: {
+            dataStream: dataStream,
+            textRuns: textRuns
+        },
+        documentStyle: {}
+    };
+    return p;
+}
+function handleStringToStyle($dom) {
+    var cssStyle = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+    var _$dom_style;
+    var _$dom_style_cssText;
+    var cssText = (_$dom_style_cssText = $dom === null || $dom === void 0 ? void 0 : (_$dom_style = $dom.style) === null || _$dom_style === void 0 ? void 0 : _$dom_style.cssText) !== null && _$dom_style_cssText !== void 0 ? _$dom_style_cssText : "";
+    cssText += cssStyle;
+    if (cssText.length === 0) {
+        return {};
+    }
+    var cssTextArray = cssText.split(";");
+    var styleList = {};
+    var borderInfo = {
+        t: "",
+        r: "",
+        b: "",
+        l: ""
+    };
+    cssTextArray.forEach(function(s) {
+        s = s.toLowerCase();
+        var key = textTrim(s.substr(0, s.indexOf(":")));
+        var value = textTrim(s.substr(s.indexOf(":") + 1));
+        if (key === "font-weight") {
+            if (value === "bold") {
+                styleList.bl = 1;
+            } else {
+                styleList.bl = 0;
+            }
+        } else if (key === "font-style") {
+            if (value === "italic") {
+                styleList.it = 1;
+            } else {
+                styleList.it = 0;
+            }
+        } else if (key === "font-family") {
+            styleList.ff = value;
+        } else if (key === "font-size") {
+            var fs = parseInt(value);
+            if (cssText.indexOf("vertical-align") > -1 && (cssText.indexOf("sub") > -1 || cssText.indexOf("sup") > -1)) {
+                fs *= 2;
+            }
+            if (value.indexOf("px") !== -1) {
+                fs = pxToPt(parseInt(value));
+            }
+            styleList.fs = fs;
+        } else if (key === "color") {
+            styleList.cl = {
+                rgb: value
+            };
+        } else if (key === "background" || key === "background-color") {
+            styleList.bg = {
+                rgb: value
+            };
+        } else if (key === "text-decoration-line") {
+            if (value === "underline") {
+                if (!styleList.ul) {
+                    styleList.ul = {
+                        s: 1
+                    };
+                }
+                styleList.ul.s = 1;
+            } else if (value === "line-through") {
+                if (!styleList.st) {
+                    styleList.st = {
+                        s: 1
+                    };
+                }
+                styleList.st.s = 1;
+            } else if (value === "overline") {
+                if (!styleList.ol) {
+                    styleList.ol = {
+                        s: 1
+                    };
+                }
+                styleList.ol.s = 1;
+            }
+        } else if (key === "text-decoration-color") {
+            if (styleList.hasOwnProperty("ul")) {
+                if (!styleList.ul) {
+                    styleList.ul = {
+                        s: 1,
+                        cl: {
+                            rgb: value
+                        }
+                    };
+                }
+                styleList.ul.cl = {
+                    rgb: value
+                };
+            }
+            if (styleList.hasOwnProperty("st")) {
+                if (!styleList.st) {
+                    styleList.st = {
+                        s: 1,
+                        cl: {
+                            rgb: value
+                        }
+                    };
+                }
+                styleList.st.cl = {
+                    rgb: value
+                };
+            }
+            if (styleList.hasOwnProperty("ol")) {
+                if (!styleList.ol) {
+                    styleList.ol = {
+                        s: 1,
+                        cl: {
+                            rgb: value
+                        }
+                    };
+                }
+                styleList.ol.cl = {
+                    rgb: value
+                };
+            }
+        } else if (key === "text-decoration-style") {
+            if (styleList.hasOwnProperty("ul")) {
+                if (!styleList.ul) {
+                    styleList.ul = {
+                        s: 1,
+                        t: Number(value)
+                    };
+                }
+                styleList.ul.t = Number(value);
+            }
+            if (styleList.hasOwnProperty("st")) {
+                if (!styleList.st) {
+                    styleList.st = {
+                        s: 1,
+                        t: Number(value)
+                    };
+                }
+                styleList.st.t = Number(value);
+            }
+            if (styleList.hasOwnProperty("ol")) {
+                if (!styleList.ol) {
+                    styleList.ol = {
+                        s: 1,
+                        t: Number(value)
+                    };
+                }
+                styleList.ol.t = Number(value);
+            }
+        } else if (key === "text-decoration" || key === "univer-strike") {
+            styleList.st = {
+                s: 1
+            };
+        }
+        if (key === "univer-underline") {
+            styleList.ul = {
+                s: 1
+            };
+        }
+        if (key === "vertical-align") {
+            if (value === "sub") {
+                styleList.va = 1;
+            } else if (value === "super") {
+                styleList.va = 2;
+            } else if (value === "top") {
+                styleList.vt = 1;
+            } else if (value === "middle") {
+                styleList.vt = 2;
+            } else if (value === "bottom") {
+                styleList.vt = 3;
+            } else {
+                styleList.va = 0;
+            }
+        }
+        if (key === "transform") {
+            var values = value.split(")");
+            var index = values.findIndex(function(item) {
+                return item.includes("rotate");
+            });
+            if (index > -1) {
+                var match = values[index].match(/\d+/g);
+                var angle = 0;
+                var ver = 0;
+                if (match === null || match === void 0 ? void 0 : match.length) {
+                    angle = +match[0];
+                }
+                if ($dom === null || $dom === void 0 ? void 0 : $dom.dataset.vertical) {
+                    ver = +$dom.dataset.vertical;
+                }
+                styleList.tr = {
+                    a: angle,
+                    v: ver
+                };
+            }
+        }
+        if (key === "text-align") {
+            if (value === "left") {
+                styleList.ht = 1;
+            } else if (value === "center") {
+                styleList.ht = 2;
+            } else if (value === "right") {
+                styleList.ht = 3;
+            } else if (value === "justify") {
+                styleList.ht = 4;
+            } else {
+                styleList.ht = 0;
+            }
+        }
+        if (key === "overflow-wrap" || key === "word-wrap") {
+            if (value === "break-word") {
+                styleList.tb = 3;
+            }
+        } else if (key === "text-overflow") {
+            if (value === "clip") {
+                styleList.tb = 2;
+            }
+        } else if (key === "text-break") {
+            if (value === "overflow") {
+                styleList.tb = 1;
+            }
+        }
+        if (key === "border-color") {
+            var colors = handleBorder(value, ")");
+            if (!styleList.bd) {
+                styleList.bd = {
+                    b: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: 0
+                    },
+                    t: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: 0
+                    },
+                    l: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: 0
+                    },
+                    r: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: 0
+                    }
+                };
+                for(var k in colors){
+                    styleList.bd[k].cl.rgb = colors[k];
+                }
+            } else {
+                for(var k1 in colors){
+                    styleList.bd[k1].cl.rgb = colors[k1];
+                }
+            }
+        }
+        if (key === "border-width" || key === "border-style") {
+            var width = handleBorder(value, " ");
+            for(var k2 in width){
+                borderInfo[k2] += " ".concat(width[k2]);
+            }
+            if (!styleList.bd) {
+                styleList.bd = {
+                    b: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: getBorderStyleType(borderInfo.b)
+                    },
+                    t: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: getBorderStyleType(borderInfo.t)
+                    },
+                    l: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: getBorderStyleType(borderInfo.l)
+                    },
+                    r: {
+                        cl: {
+                            rgb: "#000"
+                        },
+                        s: getBorderStyleType(borderInfo.r)
+                    }
+                };
+            } else {
+                styleList.bd.b.s = getBorderStyleType(borderInfo.b);
+                styleList.bd.t.s = getBorderStyleType(borderInfo.t);
+                styleList.bd.l.s = getBorderStyleType(borderInfo.l);
+                styleList.bd.r.s = getBorderStyleType(borderInfo.r);
+            }
+        }
+        if (key === "border-bottom" || key === "border-top" || key === "border-left" || key === "border-right" || key === "border") {
+            if (!styleList.bd) {
+                styleList.bd = {};
+            }
+            var arr = value.split(" ");
+            var type = "".concat(arr[0], " ").concat(arr[1]);
+            arr.splice(0, 2);
+            var color = arr.join("");
+            var obj = {
+                cl: {
+                    rgb: color
+                },
+                s: getBorderStyleType(type)
+            };
+            if (key === "border-bottom") {
+                styleList.bd.b = value === "none" ? null : obj;
+            } else if (key === "border-top") {
+                styleList.bd.t = value === "none" ? null : obj;
+            } else if (key === "border-left") {
+                styleList.bd.l = value === "none" ? null : obj;
+            } else if (key === "border-right") {
+                styleList.bd.r = value === "none" ? null : obj;
+            } else if (key === "border") {
+                styleList.bd = {
+                    r: value === "none" ? null : obj,
+                    t: value === "none" ? null : obj,
+                    b: value === "none" ? null : obj,
+                    l: value === "none" ? null : obj
+                };
+            }
+        }
+    });
+    return styleList;
+}
+function handleBorder(border, param) {
+    var arr;
+    if (param === " ") {
+        arr = border.trim().split(param);
+    } else {
+        arr = border.trim().split(param).slice(0, -1);
+    }
+    arr.forEach(function(item) {
+        return "".concat(item.trim(), ")");
+    });
+    var obj = {};
+    if (arr.length === 1) {
+        obj = {
+            t: arr[0],
+            r: arr[0],
+            b: arr[0],
+            l: arr[0]
+        };
+    } else if (arr.length === 2) {
+        obj = {
+            t: arr[0],
+            r: arr[1],
+            b: arr[0],
+            l: arr[1]
+        };
+    } else if (arr.length === 3) {
+        obj = {
+            t: arr[0],
+            r: arr[1],
+            b: arr[2],
+            l: arr[1]
+        };
+    } else if (arr.length === 4) {
+        obj = {
+            t: arr[0],
+            r: arr[1],
+            b: arr[2],
+            l: arr[3]
+        };
+    }
+    return obj;
+}
+function splitSpanText(text) {
+    if (text === "") return [
+        text
+    ];
+    var regex = /(?:(\n+.+)|(.+))/g;
+    var arr = text.match(regex);
+    var arr1 = arr.map(function(item) {
+        return item.replace(/\n/g, "\r\n");
+    });
+    return arr1;
+}
+function handleTableColgroup(table) {
+    var content = document.createElement("DIV");
+    var data = [];
+    content.innerHTML = table;
+    var colgroup = content.querySelectorAll("table col");
+    if (!colgroup.length) return [];
+    for(var i = 0; i < colgroup.length; i++){
+        var col = colgroup[i];
+        var colSpan = col.getAttribute("span");
+        if (colSpan && +colSpan > 1) {
+            for(var j = 0; j < +colSpan; j++){
+                var width = getTdHeight(col.getAttribute("width"), 72);
+                data.push(width);
+            }
+        } else {
+            var width1 = getTdHeight(col.getAttribute("width"), 72);
+            data.push(width1);
+        }
+    }
+    return data;
+}
+function getTdHeight(height, defaultHeight) {
+    if (!height) return defaultHeight;
+    var firstHeight;
+    if (height.includes("pt")) {
+        firstHeight = ptToPx(parseFloat(height));
+    } else if (height.includes("px")) {
+        firstHeight = parseFloat(height);
+    } else {
+        firstHeight = parseFloat(height) * 72 / 96;
+    }
+    return firstHeight;
+}
+function handleTableRowGroup(table) {
+    var content = document.createElement("DIV");
+    var data = [];
+    content.innerHTML = table;
+    var rowGroup = content.querySelectorAll("table tr");
+    if (!rowGroup.length) return [];
+    for(var i = 0; i < rowGroup.length; i++){
+        var row = rowGroup[i];
+        var tds = row.querySelectorAll("td");
+        var firstHeight = getTdHeight(tds[0].style.height, 19);
+        for(var k = 0; k < tds.length; k++){
+            var rowSpan = tds[k].getAttribute("rowSpan");
+            if (rowSpan && +rowSpan > 1) {
+                continue;
+            }
+            firstHeight = getTdHeight(tds[k].style.height, 19);
+            break;
+        }
+        data.push(firstHeight);
+    }
+    return data;
+}
+function handelTableToJson(table) {
+    var data = [];
+    var content = document.createElement("DIV");
+    content.innerHTML = table;
+    data = new Array(content.querySelectorAll("table tr").length);
+    if (!data.length) return [];
+    var colLen = 0;
+    var trs = content.querySelectorAll("table tr");
+    var firstTds = trs[0].querySelectorAll("td");
+    firstTds.forEach(function(item) {
+        var colSpan = 0;
+        var attr = item.getAttribute("colSpan");
+        if (attr !== null) {
+            colSpan = +attr;
+        } else {
+            colSpan = 1;
+        }
+        colLen += colSpan;
+    });
+    for(var i = 0; i < data.length; i++){
+        data[i] = new Array(colLen);
+    }
+    var r = 0;
+    trs.forEach(function(item) {
+        var c = 0;
+        item.querySelectorAll("td").forEach(function(td) {
+            var cell = {};
+            if (td.querySelectorAll("span").length || td.querySelectorAll("font").length) {
+                var spanStyle = handleDomToJson(td);
+                if (typeof spanStyle !== "string") {
+                    cell.p = spanStyle;
+                }
+            }
+            var txt = td.innerText;
+            if (txt.trim().length === 0) {
+                cell.v = "";
+                cell.m = "";
+            } else {
+                cell.v = txt;
+                cell.m = txt;
+            }
+            var style = handleStringToStyle(td);
+            if (Tools.isPlainObject(style)) {
+                cell.s = style;
+            }
+            while(c < colLen && data[r][c] != null){
+                c++;
+            }
+            if (c === colLen) {
+                return;
+            }
+            if (data[r][c] == null) {
+                data[r][c] = cell;
+                var _Number;
+                var rowSpan = (_Number = Number(td.getAttribute("rowSpan"))) !== null && _Number !== void 0 ? _Number : 1;
+                var _Number1;
+                var colSpan = (_Number1 = Number(td.getAttribute("colSpan"))) !== null && _Number1 !== void 0 ? _Number1 : 1;
+                if (rowSpan > 1 || colSpan > 1) {
+                    var first = {
+                        rs: +rowSpan - 1,
+                        cs: +colSpan - 1,
+                        r: r,
+                        c: c
+                    };
+                    data[r][c].mc = first;
+                    for(var rp = 0; rp < rowSpan; rp++){
+                        for(var cp = 0; cp < colSpan; cp++){
+                            if (rp === 0 && cp === 0) {
+                                continue;
+                            }
+                            data[r + rp][c + cp] = {
+                                mc: null
+                            };
+                        }
+                    }
+                }
+            }
+            c++;
+        });
+        r++;
+    });
+    return data;
+}
+function handlePlainToJson(plain) {
+    var data = [];
+    var content = document.createElement("DIV");
+    content.innerHTML = plain;
+    var dataChe = plain.replace(/\r/g, "");
+    var che = dataChe.split("\n");
+    var colCheLen = che[0].split("	").length;
+    for(var i = 0; i < che.length; i++){
+        if (che[i].split("	").length < colCheLen) {
+            continue;
+        }
+        data.push(che[i].split("	"));
+    }
+    for(var i1 = 0; i1 < data.length; i1++){
+        for(var j = 0; j < data[i1].length; j++){
+            if (data[i1][j].length) {
+                data[i1][j] = {
+                    v: data[i1][j] || "",
+                    m: data[i1][j] || ""
+                };
+            } else {
+                data[i1][j] = null;
+            }
+        }
+    }
+    return data;
+}
+function handleTableMergeData(data, selection) {
+    var copyH = data.length;
+    var copyC = data[0].length;
+    var minH = 0;
+    var maxH = minH + copyH - 1;
+    var minC = 0;
+    var maxC = minC + copyC - 1;
+    if (selection) {
+        minH = selection.startRow;
+        maxH = minH + copyH - 1;
+        minC = selection.startColumn;
+        maxC = minC + copyC - 1;
+    }
+    var mergeData = [];
+    for(var i = 0; i < data.length; i++){
+        for(var j = 0; j < data[i].length; j++){
+            if (data[i][j] && typeof data[i][j] === "object" && "mc" in data[i][j]) {
+                if (data[i][j].mc) {
+                    var mc = data[i][j].mc;
+                    var startRow = mc.r + minH;
+                    var endRow = startRow + mc.rs;
+                    var startColumn = mc.c + minC;
+                    var endColumn = startColumn + mc.cs;
+                    mergeData.push({
+                        startRow: startRow,
+                        endRow: endRow,
+                        startColumn: startColumn,
+                        endColumn: endColumn
+                    });
+                    delete data[i][j].mc;
+                } else {
+                    data[i][j] = null;
+                }
+            }
+        }
+    }
+    return {
+        data: data,
+        mergeData: mergeData
+    };
+}
+function handelExcelToJson(html) {
+    var _content_querySelector;
+    var data = [];
+    var content = document.createElement("html");
+    content.innerHTML = html;
+    var styleText = (_content_querySelector = content.querySelector("style")) === null || _content_querySelector === void 0 ? void 0 : _content_querySelector.innerText;
+    if (!styleText) return;
+    var excelStyle = getStyles(styleText);
+    data = new Array(content.querySelectorAll("table tr").length);
+    if (!data.length) return [];
+    var colLen = 0;
+    var trs = content.querySelectorAll("table tr");
+    var firstTds = trs[0].querySelectorAll("td");
+    firstTds.forEach(function(item) {
+        var colSpan = 0;
+        var attr = item.getAttribute("colSpan");
+        if (attr !== null) {
+            colSpan = +attr;
+        } else {
+            colSpan = 1;
+        }
+        colLen += colSpan;
+    });
+    for(var i = 0; i < data.length; i++){
+        data[i] = new Array(colLen);
+    }
+    var r = 0;
+    trs.forEach(function(item) {
+        var c = 0;
+        item.querySelectorAll("td").forEach(function(td) {
+            var cell = {};
+            if (td.querySelectorAll("span").length || td.querySelectorAll("font").length) {
+                var spanStyle = handleDomToJson(td);
+                if (typeof spanStyle !== "string") {
+                    cell.p = spanStyle;
+                }
+            }
+            var txt = td.innerText;
+            if (txt.trim().length === 0) {
+                cell.v = "";
+                cell.m = "";
+            } else {
+                cell.v = txt;
+                cell.m = txt;
+            }
+            var cssText = "";
+            for(var attr in excelStyle){
+                if (td.classList.contains(attr)) {
+                    cssText += excelStyle[attr];
+                }
+            }
+            var style = handleStringToStyle(td, cssText);
+            if (Tools.isPlainObject(style)) {
+                cell.s = style;
+            }
+            while(c < colLen && data[r][c] != null){
+                c++;
+            }
+            if (c === colLen) {
+                return;
+            }
+            if (data[r][c] == null) {
+                data[r][c] = cell;
+                var _Number;
+                var rowSpan = (_Number = Number(td.getAttribute("rowSpan"))) !== null && _Number !== void 0 ? _Number : 1;
+                var _Number1;
+                var colSpan = (_Number1 = Number(td.getAttribute("colSpan"))) !== null && _Number1 !== void 0 ? _Number1 : 1;
+                if (rowSpan > 1 || colSpan > 1) {
+                    var first = {
+                        rs: +rowSpan - 1,
+                        cs: +colSpan - 1,
+                        r: r,
+                        c: c
+                    };
+                    data[r][c].mc = first;
+                    for(var rp = 0; rp < rowSpan; rp++){
+                        for(var cp = 0; cp < colSpan; cp++){
+                            if (rp === 0 && cp === 0) {
+                                continue;
+                            }
+                            data[r + rp][c + cp] = {
+                                mc: null
+                            };
+                        }
+                    }
+                }
+            }
+            c++;
+        });
+        r++;
+    });
+    return data;
+}
+function getStyles(styleText) {
+    var output = {};
+    var string = styleText.replaceAll("<!--", "").replaceAll("-->", "").trim();
+    var style = string === null || string === void 0 ? void 0 : string.replaceAll("	", "").replaceAll("\n", "").split("}");
+    for(var i = 0; i < style.length; i++){
+        if (!style[i]) continue;
+        var attr = style[i].split("{")[0].trim();
+        if (attr.includes(".")) {
+            attr = attr.slice(1);
+        }
+        var value = style[i].split("{")[1].trim();
+        output[attr] = value;
+    }
+    return output;
+}
+export { BrowserClipboardService, ComponentManager, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DesktopBeforeCloseService, DesktopConfirmService, DesktopContextMenuService, DesktopDialogService, DesktopMenuService, DesktopMessageService, DesktopNotificationService, DesktopPlatformService, DesktopShortcutService, DesktopSidebarService, DesktopUIPart, HTML_CLIPBOARD_MIME_TYPE, IBeforeCloseService, IClipboardInterfaceService, IConfirmService, IContextMenuService, IDialogService, IMenuService, IMessageService, INotificationService, IPlatformService, IShortcutService, ISidebarService, IUIController, KeyCode, Menu, MenuGroup, MenuItemType, MenuPosition, MetaKeys, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PasteShortcutItem, RedoShortcutItem, SharedController, ShortcutExperienceService, UIPlugin, UndoShortcutItem, ZIndexManager, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, splitSpanText, textTrim, useObservable };