@difizen/libro-common 0.3.4 → 1.0.0

package/es/app/style/index.less

@@ -0,0 +1,181 @@
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable custom-property-pattern */
+
+.app {
+  padding: 0;
+  margin: 0;
+  font-family: var(--mana-ui-font-family);
+}
+
+.mana-input {
+  padding-left: 5px;
+  color: var(--mana-input-foreground);
+  font-size: var(--mana-ui-font-size1);
+  font-family: var(--mana-ui-font-family);
+  line-height: var(--mana-content-line-height);
+  background: var(--mana-input-background);
+  border: var(--mana-border-width) solid var(--mana-input-border);
+}
+
+.mana-input::placeholder {
+  color: var(--mana-input-placeholderForeground);
+}
+
+.mana-maximized {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: 0 !important;
+  z-index: 255 !important;
+  width: auto !important;
+  height: auto !important;
+  background: var(--mana-editor-background);
+}
+
+.mana-visible-menu-maximized {
+  top: var(--mana-private-menubar-height) !important;
+}
+
+.applicationShell {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--mana-editor-background);
+}
+
+.mana-icon {
+  width: 32px;
+  height: 18px;
+  margin: 5px;
+  margin-left: 8px;
+}
+
+.mana-mod-disabled,
+.mana-mod-disabled:focus {
+  opacity: var(--mana-mod-disabled-opacity) !important;
+}
+
+.mana-header {
+  font-weight: 450;
+  font-size: var(--mana-ui-font-size0);
+  text-transform: uppercase;
+}
+
+.p-Widget {
+  font-size: var(--mana-ui-font-size1);
+}
+
+.p-Widget.p-mod-hidden {
+  display: none !important;
+}
+
+.noselect {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+                                   supported by Chrome and Opera */
+}
+
+::selection {
+  background: var(--mana-selection-background);
+}
+
+.p-Widget:focus {
+  border: none;
+  outline: none;
+}
+
+.action-item {
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-item:hover {
+  background-color: rgba(50%, 50%, 50%, 20%);
+}
+
+button.mana-button,
+.mana-button {
+  min-width: 65px;
+  margin-left: calc(var(--mana-ui-padding) * 2);
+  padding: 4px 9px;
+  color: var(--mana-button-foreground);
+  background-color: var(--mana-button-background);
+  border: none;
+  border-radius: 1px;
+  outline: none;
+  box-shadow:
+    0 1px 5px 0 rgba(0, 0, 0, 20%),
+    0 1px 2px 0 rgba(0, 0, 0, 14%),
+    0 1px 1px -2px rgba(0, 0, 0, 12%);
+  cursor: pointer;
+  transition:
+    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
+
+button.mana-button:hover,
+.mana-button:hover,
+.mana-button:focus {
+  background-color: var(--mana-button-hoverBackground);
+}
+
+button.secondary,
+.mana-button.secondary {
+  color: var(--mana-secondaryButton-foreground);
+  background-color: var(--mana-secondaryButton-background);
+}
+
+button.secondary:hover,
+.mana-button.secondary:hover {
+  background-color: var(--mana-secondaryButton-hoverBackground);
+}
+
+button.mana-button[disabled],
+.mana-button[disabled] {
+  color: var(--mana-button-disabledForeground);
+  background-color: var(--mana-button-disabledBackground);
+  cursor: default;
+  opacity: 0.6;
+}
+
+button.secondary[disabled],
+.mana-button.secondary[disabled] {
+  color: var(--mana-secondaryButton-disabledForeground);
+  background-color: var(--mana-secondaryButton-disabledBackground);
+}
+
+.mana-select {
+  color: var(--dropdown-foreground);
+  font-size: var(--mana-ui-font-size1);
+  background: var(--mana-dropdown-background);
+  border: 1px solid var(--mana-dropdown-border);
+  border-radius: 0;
+  outline: none;
+}
+
+.mana-select option {
+  background: var(--mana-dropdown-listBackground);
+}
+
+.mana-transparent-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}
+
+.mana-cursor-no-drop,
+.mana-cursor-no-drop:active {
+  cursor: no-drop;
+}

package/es/app/style/style-protocol.d.ts

@@ -0,0 +1,10 @@
+import type PerfectScrollbar from 'perfect-scrollbar';
+export declare const ACTION_ITEM = "action-item";
+export declare const DISABLED_CLASS = "mana-mod-disabled";
+export declare const EXPANSION_TOGGLE_CLASS = "mana-expansion-toggle";
+export declare const COLLAPSED_CLASS = "mana-mod-collapsed";
+export declare const BUSY_CLASS = "mana-mod-busy";
+export declare const SELECTED_CLASS = "mana-mod-selected";
+export declare const FOCUS_CLASS = "mana-mod-focus";
+export declare const DEFAULT_SCROLL_OPTIONS: PerfectScrollbar.Options;
+//# sourceMappingURL=style-protocol.d.ts.map

package/es/app/style/style-protocol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-protocol.d.ts","sourceRoot":"","sources":["../../../src/app/style/style-protocol.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,mBAAmB,CAAC;AAEtD,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,cAAc,sBAAsB,CAAC;AAClD,eAAO,MAAM,sBAAsB,0BAA0B,CAAC;AAC9D,eAAO,MAAM,eAAe,uBAAuB,CAAC;AACpD,eAAO,MAAM,UAAU,kBAAkB,CAAC;AAC1C,eAAO,MAAM,cAAc,sBAAsB,CAAC;AAClD,eAAO,MAAM,WAAW,mBAAmB,CAAC;AAC5C,eAAO,MAAM,sBAAsB,EAAE,gBAAgB,CAAC,OAGrD,CAAC"}

package/es/app/style/style-protocol.js

@@ -0,0 +1,11 @@
+export var ACTION_ITEM = 'action-item';
+export var DISABLED_CLASS = 'mana-mod-disabled';
+export var EXPANSION_TOGGLE_CLASS = 'mana-expansion-toggle';
+export var COLLAPSED_CLASS = 'mana-mod-collapsed';
+export var BUSY_CLASS = 'mana-mod-busy';
+export var SELECTED_CLASS = 'mana-mod-selected';
+export var FOCUS_CLASS = 'mana-mod-focus';
+export var DEFAULT_SCROLL_OPTIONS = {
+  suppressScrollX: true,
+  minScrollbarLength: 35
+};

package/es/app/toolbar/index.d.ts

@@ -0,0 +1,7 @@
+import { ManaModule } from '../../core/index.js';
+import 'rc-tooltip/assets/bootstrap.css';
+import './index.less';
+export declare const ToolbarModule: ManaModule;
+export * from './toolbar.js';
+export * from './toolbar-render.js';
+//# sourceMappingURL=index.d.ts.map

package/es/app/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjD,OAAO,iCAAiC,CAAC;AACzC,OAAO,cAAc,CAAC;AAEtB,eAAO,MAAM,aAAa,YAUtB,CAAC;AAEL,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/es/app/toolbar/index.js

@@ -0,0 +1,15 @@
+import { ManaModule } from "../../core/index.js";
+import { Toolbar, ToolbarFactory } from "./toolbar.js";
+import 'rc-tooltip/assets/bootstrap.css';
+import "./index.less";
+export var ToolbarModule = ManaModule.create().register(Toolbar).register({
+  token: ToolbarFactory,
+  useDynamic: function useDynamic(ctx) {
+    return function () {
+      var toolbar = ctx.container.get(Toolbar);
+      return toolbar;
+    };
+  }
+});
+export * from "./toolbar.js";
+export * from "./toolbar-render.js";

package/es/app/toolbar/index.less

@@ -0,0 +1,40 @@
+.mana-toolbar {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 0 4px;
+
+  &-item {
+    margin: 0 4px;
+    cursor: pointer;
+  }
+
+  &-item-disabled {
+    cursor: default;
+    opacity: var(--mana-mod-disabled-opacity);
+  }
+
+  &-item-active {
+    background-color: var(--mana-selection-background);
+  }
+
+  &-more {
+    & :hover {
+      background-color: var(--mana-menubar-background);
+    }
+  }
+
+  &-inline-divider {
+    display: block;
+    width: 1px;
+    margin: 2px 4px;
+    background: rgba(150, 150, 150, 20%);
+    pointer-events: none;
+  }
+
+  &-item-label {
+    display: inline-block;
+    margin: 0 4px;
+  }
+}

package/es/app/toolbar/toolbar-item-keeper.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ToolbarItem } from '../../core/index.js';
+import type { Toolbar } from './toolbar.js';
+import type { ToolbarItemData } from './toolbar-protocol.js';
+interface ToolbarItemKeeperProps {
+    data: ToolbarItemData;
+    item: ToolbarItem;
+    toolbar: Toolbar;
+}
+export declare const ToolbarItemKeeper: import("react").MemoExoticComponent<(props: ToolbarItemKeeperProps) => null>;
+export {};
+//# sourceMappingURL=toolbar-item-keeper.d.ts.map

package/es/app/toolbar/toolbar-item-keeper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-item-keeper.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar-item-keeper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAoB,MAAM,uBAAuB,CAAC;AAE/E,UAAU,sBAAsB;IAC9B,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;CAClB;AAgCD,eAAO,MAAM,iBAAiB,8CA/BS,sBAAsB,UA+BA,CAAC"}

package/es/app/toolbar/toolbar-item-keeper.js

@@ -0,0 +1,49 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(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; }
+import { CommandRegistry } from "../../core/index.js";
+import { observable, useObserve } from "../../observable/index.js";
+import { useInject } from "../../observable/index.js";
+import { memo } from 'react';
+var ToolbarItemKeeperInner = function ToolbarItemKeeperInner(props) {
+  var commands = useInject(CommandRegistry);
+  var item = useObserve(props.item);
+  var toolbar = useObserve(props.toolbar);
+  var handleState = function handleState() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var visible = commands.isVisibleByHandler.apply(commands, [item, item.command].concat(args));
+    var enable = false;
+    var active = false;
+    if (visible) {
+      enable = commands.isEnabledByHandler.apply(commands, [item, item.command].concat(args));
+      active = commands.isActiveByHandler.apply(commands, [item, item.command].concat(args));
+    }
+    return {
+      id: item.id,
+      visible: visible,
+      enable: enable,
+      active: active
+    };
+  };
+  var data = useObserve(props.data);
+  if (!Array.isArray(data)) {
+    data = [data];
+  }
+  var newState = handleState.apply(void 0, _toConsumableArray(data));
+  var currentState = toolbar.getState(item);
+  if (currentState) {
+    var observableState = observable(currentState);
+    observableState.visible = !!(newState !== null && newState !== void 0 && newState.visible);
+    observableState.enable = !!(newState !== null && newState !== void 0 && newState.enable);
+    observableState.active = !!(newState !== null && newState !== void 0 && newState.active);
+  } else {
+    toolbar.setState(newState);
+  }
+  return null;
+};
+export var ToolbarItemKeeper = /*#__PURE__*/memo(ToolbarItemKeeperInner);

package/es/app/toolbar/toolbar-item-render.d.ts

@@ -0,0 +1,13 @@
+import type { ToolbarItem } from '../../core/index.js';
+import type { FC } from 'react';
+import type { Toolbar } from './toolbar.js';
+import type { ToolbarItemState } from './toolbar-protocol.js';
+interface ToolbarItemRenderProps {
+    data: any;
+    item: ToolbarItem;
+    toolbar: Toolbar;
+    state: ToolbarItemState;
+}
+export declare const ToolbarItemRender: FC<ToolbarItemRenderProps>;
+export {};
+//# sourceMappingURL=toolbar-item-render.d.ts.map

package/es/app/toolbar/toolbar-item-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-item-render.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar-item-render.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,UAAU,sBAAsB;IAC9B,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,gBAAgB,CAAC;CACzB;AAQD,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAC3B,CAAC"}

package/es/app/toolbar/toolbar-item-render.js

@@ -0,0 +1,14 @@
+import { useObserve } from "../../observable/index.js";
+import { memo } from 'react';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ToolbarItemRenderInner(props) {
+  var data = useObserve(props.data);
+  var item = useObserve(props.item);
+  var toolbar = useObserve(props.toolbar);
+  var state = useObserve(props.state);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: toolbar.renderItem(data, item, state)
+  });
+}
+export var ToolbarItemRender = /*#__PURE__*/memo(ToolbarItemRenderInner);

package/es/app/toolbar/toolbar-protocol.d.ts

@@ -0,0 +1,9 @@
+export declare const ToolbarArgs: unique symbol;
+export type ToolbarItemData = any | any[];
+export interface ToolbarItemState {
+    id: string;
+    enable: boolean;
+    visible: boolean;
+    active: boolean;
+}
+//# sourceMappingURL=toolbar-protocol.d.ts.map

package/es/app/toolbar/toolbar-protocol.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-protocol.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar-protocol.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,eAAwB,CAAC;AAEjD,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB"}

package/es/app/toolbar/toolbar-protocol.js

@@ -0,0 +1 @@
+export var ToolbarArgs = Symbol('ToolbarArgs');

package/es/app/toolbar/toolbar-render.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import type { Toolbar } from './toolbar.js';
+import { ToolbarFactory } from './toolbar.js';
+export interface ToolbarRenderProps {
+    /**
+     * 参数
+     * @description       toolbar 传递的参数
+     */
+    data: any | any[];
+    /**
+     * 工厂函数
+     * @description       获取 toolbar 实例的工厂函数，用于自定义
+     */
+    factory?: ToolbarFactory;
+    /**
+     * toolbar 实例
+     * @description       可以传递已经存在的 toolbar 实例
+     */
+    toolbar?: Toolbar;
+    /**
+     * tooltip 设置
+     * @description       设置 tooltip 的属性
+     */
+    tooltip?: {
+        placement: string;
+    };
+}
+export declare const ToolbarRender: import("react").NamedExoticComponent<ToolbarRenderProps>;
+//# sourceMappingURL=toolbar-render.d.ts.map

package/es/app/toolbar/toolbar-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-render.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar-render.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CACjC;AACD,eAAO,MAAM,aAAa,0DAmExB,CAAC"}

package/es/app/toolbar/toolbar-render.js

@@ -0,0 +1,93 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { 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 _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import { ToolbarRegistry, ToolbarInstance, useUnmount } from "../../core/index.js";
+import { useInject, ObservableContext } from "../../observable/index.js";
+import { useEffect, memo, useState, useContext, useMemo } from 'react';
+import { ToolbarFactory } from "./toolbar.js";
+import { ToolbarItemKeeper } from "./toolbar-item-keeper.js";
+import { ToolbarArgs } from "./toolbar-protocol.js";
+import { ToolbarVisiblesRender } from "./toolbar-visible-render.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ToolbarRender = /*#__PURE__*/memo(function ToolbarRender(props) {
+  var data = props.data,
+    factory = props.factory,
+    tooltip = props.tooltip;
+  var defaultFactory = useInject(ToolbarFactory);
+  var registry = useInject(ToolbarRegistry);
+  var currentFactory = factory || defaultFactory;
+  var _useState = useState(props.toolbar),
+    _useState2 = _slicedToArray(_useState, 2),
+    toolbar = _useState2[0],
+    setToolbar = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contextReady = _useState4[0],
+    setContextReady = _useState4[1];
+  var context = useContext(ObservableContext);
+  var container = context.getContainer();
+  var childContainer = useMemo(function () {
+    return container === null || container === void 0 ? void 0 : container.createChild();
+  }, [container]);
+  useEffect(function () {
+    if (!props.toolbar) {
+      var newToolbar = currentFactory();
+      setToolbar(newToolbar);
+      childContainer.register({
+        token: ToolbarInstance,
+        useValue: newToolbar
+      });
+    } else {
+      setToolbar(undefined);
+    }
+  }, [childContainer, currentFactory, props.toolbar]);
+  useEffect(function () {
+    if (toolbar && !toolbar.disposed) {
+      toolbar.setCurrentArgs(data);
+      toolbar.tooltip = tooltip;
+      if (childContainer) {
+        childContainer.register({
+          token: ToolbarArgs,
+          useValue: data
+        });
+      }
+      setContextReady(true);
+    }
+    return function () {
+      setContextReady(false);
+    };
+  }, [childContainer, data, toolbar, tooltip]);
+  useUnmount(function () {
+    if (toolbar) {
+      toolbar.dispose();
+    }
+  });
+  if (!toolbar || !contextReady) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(ObservableContext.Provider, {
+    value: {
+      getContainer: function getContainer() {
+        return childContainer || context.getContainer();
+      }
+    },
+    children: [_toConsumableArray(registry.items).map(function (item) {
+      return /*#__PURE__*/_jsx(ToolbarItemKeeper, {
+        item: item[1],
+        toolbar: toolbar,
+        data: data
+      }, item[1].id);
+    }), /*#__PURE__*/_jsx(ToolbarVisiblesRender, {
+      toolbar: toolbar
+    })]
+  });
+});

package/es/app/toolbar/toolbar-visible-render.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { Toolbar } from './toolbar.js';
+interface ToolbarVisiblesRenderProps {
+    toolbar: Toolbar;
+}
+export declare const ToolbarVisiblesRender: import("react").NamedExoticComponent<ToolbarVisiblesRenderProps>;
+export {};
+//# sourceMappingURL=toolbar-visible-render.d.ts.map

package/es/app/toolbar/toolbar-visible-render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-visible-render.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar-visible-render.tsx"],"names":[],"mappings":";AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,UAAU,0BAA0B;IAClC,OAAO,EAAE,OAAO,CAAC;CAClB;AACD,eAAO,MAAM,qBAAqB,kEAWhC,CAAC"}

package/es/app/toolbar/toolbar-visible-render.js

@@ -0,0 +1,12 @@
+import { useObserve } from "../../observable/index.js";
+import { memo } from 'react';
+export var ToolbarVisiblesRender = /*#__PURE__*/memo(function ToolbarVisiblesRender(props) {
+  var propsToolbar = props.toolbar;
+  var toolbar = useObserve(propsToolbar);
+  var inlines = [];
+  var more = [];
+  toolbar.visibleItems.forEach(function (item) {
+    return toolbar.isInline(item) ? inlines.push(item) : more.push(item);
+  });
+  return toolbar.renderToolbar(inlines, more);
+});

package/es/app/toolbar/toolbar.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { DisposableCollection } from '../../common/index.js';
+import type { Disposable } from '../../common/index.js';
+import { CommandRegistry, MenuRegistry, ToolbarItem, ToolbarRegistry } from '../../core/index.js';
+import type { ToolbarItemState } from './toolbar-protocol.js';
+/**
+ * Factory for instantiating toolbars.
+ */
+export declare const ToolbarFactory: unique symbol;
+export interface ToolbarFactory {
+    (): Toolbar;
+}
+export interface ToolbarOption {
+    divider?: 'item' | 'group';
+}
+/**
+ * The toolbar manager, a toolbar instance should be created with view.
+ */
+export declare class Toolbar implements Disposable {
+    protected toDispose: DisposableCollection;
+    protected _disposed: boolean;
+    get disposed(): boolean;
+    get onDispose(): import("../../common/event.js").Event<void>;
+    currentArgs: any | any[];
+    states: Map<string, ToolbarItemState>;
+    tooltip?: {
+        placement: string;
+    } | undefined;
+    protected readonly commands: CommandRegistry;
+    protected readonly menus: MenuRegistry;
+    protected readonly toolbarRegistry: ToolbarRegistry;
+    constructor(commands: CommandRegistry, menus: MenuRegistry, toolbarRegistry: ToolbarRegistry);
+    setCurrentArgs(current: any): void;
+    sort(left: ToolbarItem, right: ToolbarItem): number;
+    get visibleItems(): ToolbarItem[];
+    isInline(item: ToolbarItem): boolean;
+    renderToolbar(inlines: ToolbarItem[], more: ToolbarItem[]): import("react/jsx-runtime").JSX.Element;
+    renderMore(items: ToolbarItem[]): React.ReactNode;
+    renderInlineDivider(key: string | undefined): import("react/jsx-runtime").JSX.Element;
+    renderInlines(items: ToolbarItem[]): React.ReactNode;
+    renderItem(data: any, item: ToolbarItem, state: ToolbarItemState): React.ReactNode;
+    protected getItemProps(_data: any, _item: ToolbarItem, state: ToolbarItemState): {
+        className: string;
+    };
+    protected renderItemContent(data: any, item: ToolbarItem, state: ToolbarItemState): import("react/jsx-runtime").JSX.Element;
+    protected execute(item: ToolbarItem, data: any[]): Promise<unknown> | undefined;
+    getState: (item: ToolbarItemState | ToolbarItem) => ToolbarItemState | undefined;
+    setState: (item: ToolbarItemState) => void;
+    dispose(): void;
+}
+//# sourceMappingURL=toolbar.d.ts.map

package/es/app/toolbar/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/app/toolbar/toolbar.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EACL,eAAe,EACf,YAAY,EACZ,WAAW,EACX,eAAe,EAEhB,MAAM,qBAAqB,CAAC;AAM7B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,cAAc,eAA2B,CAAC;AACvD,MAAM,WAAW,cAAc;IAC7B,IAAI,OAAO,CAAC;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,qBACa,OAAQ,YAAW,UAAU;IACxC,SAAS,CAAC,SAAS,uBAA8B;IACjD,SAAS,CAAC,SAAS,UAAS;IAC5B,IAAI,QAAQ,YAEX;IACD,IAAI,SAAS,gDAEZ;IAGD,WAAW,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC;IAGzB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAuC;IAG5E,OAAO,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS,CAAC;IAE5C,SAAS,CAAC,QAAQ,CAAC,QAAQ,EAAE,eAAe,CAAC;IAC7C,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,CAAC;IACvC,SAAS,CAAC,QAAQ,CAAC,eAAe,EAAE,eAAe,CAAC;gBAIlD,QAAQ,EAAE,eAAe,EAGzB,KAAK,EAAE,YAAY,EAGnB,eAAe,EAAE,eAAe;IAelC,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,IAAI;IAIlC,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW;IAY1C,IAAI,YAAY,kBAYf;IACD,QAAQ,CAAC,IAAI,EAAE,WAAW;IAG1B,aAAa,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;IAQzD,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,SAAS;IAejD,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS;IAG3C,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC,SAAS;IAgCpD,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,SAAS;IAkBlF,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB;;;IAQ9E,SAAS,CAAC,iBAAiB,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB;IAiBjF,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,EAAE;IAWhD,QAAQ,SAAU,gBAAgB,GAAG,WAAW,kCAG9C;IAEF,QAAQ,SAAU,gBAAgB,UAEhC;IAEF,OAAO,IAAI,IAAI;CAKhB"}