@interopio/groups-ui-react 2.0.0

package/dist/cjs/index.js

@@ -0,0 +1,3256 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('@interopio/react-hooks')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', '@interopio/react-hooks'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["groups-ui-react"] = {}, global.React, global.ReactDOM, global["interopio-hooks"]));
+})(this, (function (exports, React, ReactDOM, reactHooks) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    var TargetType;
+    (function (TargetType) {
+        TargetType["Group"] = "group";
+        TargetType["Frame"] = "frame";
+        TargetType["TabBar"] = "tabBar";
+        TargetType["Tab"] = "tab";
+    })(TargetType || (TargetType = {}));
+    var StandardButtons;
+    (function (StandardButtons) {
+        StandardButtons["Feedback"] = "feedback";
+        StandardButtons["Sticky"] = "sticky";
+        StandardButtons["Extract"] = "extract";
+        StandardButtons["Lock"] = "lock";
+        StandardButtons["Unlock"] = "unlock";
+        StandardButtons["Minimize"] = "minimize";
+        StandardButtons["Maximize"] = "maximize";
+        StandardButtons["Restore"] = "restore";
+        StandardButtons["Close"] = "close";
+    })(StandardButtons || (StandardButtons = {}));
+
+    function createRegistry(options) {
+        if (options && options.errorHandling
+            && typeof options.errorHandling !== "function"
+            && options.errorHandling !== "log"
+            && options.errorHandling !== "silent"
+            && options.errorHandling !== "throw") {
+            throw new Error("Invalid options passed to createRegistry. Prop errorHandling should be [\"log\" | \"silent\" | \"throw\" | (err) => void], but " + typeof options.errorHandling + " was passed");
+        }
+        var _userErrorHandler = options && typeof options.errorHandling === "function" && options.errorHandling;
+        var callbacks = {};
+        function add(key, callback, replayArgumentsArr) {
+            var callbacksForKey = callbacks[key];
+            if (!callbacksForKey) {
+                callbacksForKey = [];
+                callbacks[key] = callbacksForKey;
+            }
+            callbacksForKey.push(callback);
+            if (replayArgumentsArr) {
+                setTimeout(function () {
+                    replayArgumentsArr.forEach(function (replayArgument) {
+                        var _a;
+                        if ((_a = callbacks[key]) === null || _a === void 0 ? void 0 : _a.includes(callback)) {
+                            try {
+                                if (Array.isArray(replayArgument)) {
+                                    callback.apply(undefined, replayArgument);
+                                }
+                                else {
+                                    callback.apply(undefined, [replayArgument]);
+                                }
+                            }
+                            catch (err) {
+                                _handleError(err, key);
+                            }
+                        }
+                    });
+                }, 0);
+            }
+            return function () {
+                var allForKey = callbacks[key];
+                if (!allForKey) {
+                    return;
+                }
+                allForKey = allForKey.reduce(function (acc, element, index) {
+                    if (!(element === callback && acc.length === index)) {
+                        acc.push(element);
+                    }
+                    return acc;
+                }, []);
+                if (allForKey.length === 0) {
+                    delete callbacks[key];
+                }
+                else {
+                    callbacks[key] = allForKey;
+                }
+            };
+        }
+        function execute(key) {
+            var argumentsArr = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                argumentsArr[_i - 1] = arguments[_i];
+            }
+            var callbacksForKey = callbacks[key];
+            if (!callbacksForKey || callbacksForKey.length === 0) {
+                return [];
+            }
+            var results = [];
+            callbacksForKey.forEach(function (callback) {
+                try {
+                    var result = callback.apply(undefined, argumentsArr);
+                    results.push(result);
+                }
+                catch (err) {
+                    results.push(undefined);
+                    _handleError(err, key);
+                }
+            });
+            return results;
+        }
+        function _handleError(exceptionArtifact, key) {
+            var errParam = exceptionArtifact instanceof Error ? exceptionArtifact : new Error(exceptionArtifact);
+            if (_userErrorHandler) {
+                _userErrorHandler(errParam);
+                return;
+            }
+            var msg = "[ERROR] callback-registry: User callback for key \"" + key + "\" failed: " + errParam.stack;
+            if (options) {
+                switch (options.errorHandling) {
+                    case "log":
+                        return console.error(msg);
+                    case "silent":
+                        return;
+                    case "throw":
+                        throw new Error(msg);
+                }
+            }
+            console.error(msg);
+        }
+        function clear() {
+            callbacks = {};
+        }
+        function clearKey(key) {
+            var callbacksForKey = callbacks[key];
+            if (!callbacksForKey) {
+                return;
+            }
+            delete callbacks[key];
+        }
+        return {
+            add: add,
+            execute: execute,
+            clear: clear,
+            clearKey: clearKey
+        };
+    }
+    createRegistry.default = createRegistry;
+    var lib = createRegistry;
+
+    var WebGroupsManagerDecorator = /** @class */ (function () {
+        function WebGroupsManagerDecorator() {
+            this.registry = lib();
+            this.skipFocusStyle = "t42-skip-focus";
+        }
+        WebGroupsManagerDecorator.prototype.init = function (io, componentFactory) {
+            if (window.webGroupsManager) {
+                window.webGroupsManager.init(componentFactory);
+            }
+            else {
+                throw new Error("Could not find the webGroupsManager the groups library should be loaded as a group application");
+            }
+        };
+        WebGroupsManagerDecorator.prototype.getGroupId = function () {
+            return window.webGroupsManager.externalLibraryFactory.groupId;
+        };
+        WebGroupsManagerDecorator.prototype.notifyMoveAreaChanged = function () {
+            window.webGroupsManager.notifyMoveAreaChanged();
+        };
+        WebGroupsManagerDecorator.prototype.registerPopup = function (element) {
+            return window.webGroupsManager.registerPopup(element);
+        };
+        WebGroupsManagerDecorator.prototype.removePopup = function (element) {
+            return window.webGroupsManager.removePopup(element);
+        };
+        WebGroupsManagerDecorator.prototype.removePopupById = function (elementId) {
+            return window.webGroupsManager.removePopupById(elementId);
+        };
+        WebGroupsManagerDecorator.prototype.subscribeForWindowFocused = function (cb) {
+            return window.webGroupsManager.subscribeForWindowFocused(cb);
+        };
+        WebGroupsManagerDecorator.prototype.unmount = function () {
+            return window.webGroupsManager.unmount();
+        };
+        WebGroupsManagerDecorator.prototype.requestPageFocus = function () {
+            return window.webGroupsManager.externalLibraryFactory.focusPage();
+        };
+        WebGroupsManagerDecorator.prototype.requestFrameFocus = function (frameId) {
+            return window.webGroupsManager.externalLibraryFactory.focusFrame(frameId);
+        };
+        WebGroupsManagerDecorator.prototype.requestGroupFocus = function () {
+            return window.webGroupsManager.externalLibraryFactory.focusGroup();
+        };
+        WebGroupsManagerDecorator.prototype.closeFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Close);
+        };
+        WebGroupsManagerDecorator.prototype.restoreFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Restore);
+        };
+        WebGroupsManagerDecorator.prototype.maximizeFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Maximize);
+        };
+        WebGroupsManagerDecorator.prototype.minimizeFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Minimize);
+        };
+        WebGroupsManagerDecorator.prototype.lockFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Lock);
+        };
+        WebGroupsManagerDecorator.prototype.unlockFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Unlock);
+        };
+        WebGroupsManagerDecorator.prototype.feedbackFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Feedback);
+        };
+        WebGroupsManagerDecorator.prototype.stickyFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Sticky);
+        };
+        WebGroupsManagerDecorator.prototype.extractFrame = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Frame, targetId, StandardButtons.Extract);
+        };
+        WebGroupsManagerDecorator.prototype.closeTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Close);
+        };
+        WebGroupsManagerDecorator.prototype.restoreTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Restore);
+        };
+        WebGroupsManagerDecorator.prototype.maximizeTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Maximize);
+        };
+        WebGroupsManagerDecorator.prototype.minimizeTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Minimize);
+        };
+        WebGroupsManagerDecorator.prototype.lockTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Lock);
+        };
+        WebGroupsManagerDecorator.prototype.unlockTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Unlock);
+        };
+        WebGroupsManagerDecorator.prototype.feedbackTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Feedback);
+        };
+        WebGroupsManagerDecorator.prototype.stickyTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Sticky);
+        };
+        WebGroupsManagerDecorator.prototype.extractTabBar = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.TabBar, targetId, StandardButtons.Extract);
+        };
+        WebGroupsManagerDecorator.prototype.closeGroup = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Close);
+        };
+        WebGroupsManagerDecorator.prototype.restoreGroup = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Restore);
+        };
+        WebGroupsManagerDecorator.prototype.maximizeGroup = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Maximize);
+        };
+        WebGroupsManagerDecorator.prototype.minimizeGroup = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onStandardButtonClick(TargetType.Group, targetId, StandardButtons.Minimize);
+        };
+        WebGroupsManagerDecorator.prototype.closeTab = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onTabCloseButtonClick(targetId);
+        };
+        WebGroupsManagerDecorator.prototype.clickCustomButton = function (targetId, buttonId) {
+            window.webGroupsManager.externalLibraryFactory.onCustomButtonClick(TargetType.Frame, targetId, buttonId);
+        };
+        WebGroupsManagerDecorator.prototype.onGroupMoveAreaChanged = function (targetId) {
+            window.webGroupsManager.externalLibraryFactory.onMoveAreaChanged(TargetType.Group, targetId);
+        };
+        WebGroupsManagerDecorator.prototype.onTabChannelSelectorClick = function (targetId, selectorBounds) {
+            window.webGroupsManager.externalLibraryFactory.onTabChannelSelectorClick(targetId, selectorBounds);
+        };
+        WebGroupsManagerDecorator.prototype.onFrameChannelSelectorClick = function (targetId, selectorBounds) {
+            window.webGroupsManager.externalLibraryFactory.onFrameChannelSelectorClick(targetId, selectorBounds);
+        };
+        WebGroupsManagerDecorator.prototype.onCaptionTextBoundsChanged = function (targetType, targetId, bounds) {
+            if (typeof window.webGroupsManager.externalLibraryFactory.onCaptionTextBoundsChanged !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.onCaptionTextBoundsChanged(targetType, targetId, bounds);
+        };
+        WebGroupsManagerDecorator.prototype.onCaptionEditorVisibleChanged = function (targetType, targetId, visible) {
+            if (typeof window.webGroupsManager.externalLibraryFactory.onCaptionEditorVisibleChanged !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.onCaptionEditorVisibleChanged(targetType, targetId, visible);
+        };
+        WebGroupsManagerDecorator.prototype.onCaptionEditorBoundsChanged = function (targetType, targetId, bounds) {
+            if (typeof window.webGroupsManager.externalLibraryFactory.onCaptionEditorBoundsChanged !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.onCaptionEditorBoundsChanged(targetType, targetId, bounds);
+        };
+        WebGroupsManagerDecorator.prototype.commitCaptionEditing = function (targetType, targetId, text) {
+            if (typeof window.webGroupsManager.externalLibraryFactory.commitCaptionEditing !== "function") {
+                // Handling the case when a new library is used with an older version of io.Connect Desktop
+                return;
+            }
+            window.webGroupsManager.externalLibraryFactory.commitCaptionEditing(targetType, targetId, text);
+        };
+        WebGroupsManagerDecorator.prototype.onCommitCaptionEditingRequested = function (targetType, targetId, callback) {
+            return this.registry.add(targetType + "-" + targetId, callback);
+        };
+        WebGroupsManagerDecorator.prototype.requestCommitCaptionEditing = function (targetType, targetId) {
+            this.registry.execute(targetType + "-" + targetId);
+        };
+        return WebGroupsManagerDecorator;
+    }());
+    var webGroupsManager = new WebGroupsManagerDecorator();
+
+    var BaseButton = function (_a) {
+        var outerElement = _a.outerElement, innerElement = _a.innerElement;
+        return React__default["default"].createElement("li", __assign({}, outerElement, { className: webGroupsManager.skipFocusStyle + " " + outerElement.className }),
+            React__default["default"].createElement("div", __assign({}, innerElement)));
+    };
+
+    var CloseButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-close" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-close", title: tooltip, onClick: onClick } });
+    };
+
+    /**
+     * A simple guard function:
+     *
+     * ```js
+     * Math.min(Math.max(low, value), high)
+     * ```
+     */
+    function guard(low, high, value) {
+      return Math.min(Math.max(low, value), high);
+    }
+
+    class ColorError extends Error {
+      constructor(color) {
+        super(`Failed to parse color: "${color}"`);
+      }
+
+    }
+
+    var ColorError$1 = ColorError;
+
+    /**
+     * Parses a color into red, gree, blue, alpha parts
+     *
+     * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color
+     */
+
+    function parseToRgba(color) {
+      if (typeof color !== 'string') throw new ColorError$1(color);
+      if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];
+      let normalizedColor = color.trim();
+      normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;
+      const reducedHexMatch = reducedHexRegex.exec(normalizedColor);
+
+      if (reducedHexMatch) {
+        const arr = Array.from(reducedHexMatch).slice(1);
+        return [...arr.slice(0, 3).map(x => parseInt(r$1(x, 2), 16)), parseInt(r$1(arr[3] || 'f', 2), 16) / 255];
+      }
+
+      const hexMatch = hexRegex.exec(normalizedColor);
+
+      if (hexMatch) {
+        const arr = Array.from(hexMatch).slice(1);
+        return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];
+      }
+
+      const rgbaMatch = rgbaRegex.exec(normalizedColor);
+
+      if (rgbaMatch) {
+        const arr = Array.from(rgbaMatch).slice(1);
+        return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];
+      }
+
+      const hslaMatch = hslaRegex.exec(normalizedColor);
+
+      if (hslaMatch) {
+        const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);
+        if (guard(0, 100, s) !== s) throw new ColorError$1(color);
+        if (guard(0, 100, l) !== l) throw new ColorError$1(color);
+        return [...hslToRgb(h, s, l), a || 1];
+      }
+
+      throw new ColorError$1(color);
+    }
+
+    function hash(str) {
+      let hash = 5381;
+      let i = str.length;
+
+      while (i) {
+        hash = hash * 33 ^ str.charCodeAt(--i);
+      }
+      /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed
+       * integers. Since we want the results to be always positive, convert the
+       * signed int to an unsigned by doing an unsigned bitshift. */
+
+
+      return (hash >>> 0) % 2341;
+    }
+
+    const colorToInt = x => parseInt(x.replace(/_/g, ''), 36);
+
+    const compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {
+      const key = colorToInt(next.substring(0, 3));
+      const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat
+      // https://github.com/ricokahler/color2k/issues/351
+
+      let prefix = '';
+
+      for (let i = 0; i < 6 - hex.length; i++) {
+        prefix += '0';
+      }
+
+      acc[key] = `${prefix}${hex}`;
+      return acc;
+    }, {});
+    /**
+     * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.
+     */
+
+    function nameToHex(color) {
+      const normalizedColorName = color.toLowerCase().trim();
+      const result = compressedColorMap[hash(normalizedColorName)];
+      if (!result) throw new ColorError$1(color);
+      return `#${result}`;
+    }
+
+    const r$1 = (str, amount) => Array.from(Array(amount)).map(() => str).join('');
+
+    const reducedHexRegex = new RegExp(`^#${r$1('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');
+    const hexRegex = new RegExp(`^#${r$1('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');
+    const rgbaRegex = new RegExp(`^rgba?\\(\\s*(\\d+)\\s*${r$1(',\\s*(\\d+)\\s*', 2)}(?:,\\s*([\\d.]+))?\\s*\\)$`, 'i');
+    const hslaRegex = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%(?:\s*,\s*([\d.]+))?\s*\)$/i;
+    const namedColorRegex = /^[a-z]+$/i;
+
+    const roundColor = color => {
+      return Math.round(color * 255);
+    };
+
+    const hslToRgb = (hue, saturation, lightness) => {
+      let l = lightness / 100;
+
+      if (saturation === 0) {
+        // achromatic
+        return [l, l, l].map(roundColor);
+      } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV
+
+
+      const huePrime = (hue % 360 + 360) % 360 / 60;
+      const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);
+      const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+      let red = 0;
+      let green = 0;
+      let blue = 0;
+
+      if (huePrime >= 0 && huePrime < 1) {
+        red = chroma;
+        green = secondComponent;
+      } else if (huePrime >= 1 && huePrime < 2) {
+        red = secondComponent;
+        green = chroma;
+      } else if (huePrime >= 2 && huePrime < 3) {
+        green = chroma;
+        blue = secondComponent;
+      } else if (huePrime >= 3 && huePrime < 4) {
+        green = secondComponent;
+        blue = chroma;
+      } else if (huePrime >= 4 && huePrime < 5) {
+        red = secondComponent;
+        blue = chroma;
+      } else if (huePrime >= 5 && huePrime < 6) {
+        red = chroma;
+        blue = secondComponent;
+      }
+
+      const lightnessModification = l - chroma / 2;
+      const finalRed = red + lightnessModification;
+      const finalGreen = green + lightnessModification;
+      const finalBlue = blue + lightnessModification;
+      return [finalRed, finalGreen, finalBlue].map(roundColor);
+    };
+
+    // https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js
+
+    /**
+     * Returns a number (float) representing the luminance of a color.
+     */
+
+    function getLuminance(color) {
+      if (color === 'transparent') return 0;
+
+      function f(x) {
+        const channel = x / 255;
+        return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+      }
+
+      const [r, g, b] = parseToRgba(color);
+      return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+    }
+
+    /**
+     * An alternative function to `readableColor`. Returns whether or not the 
+     * readable color (i.e. the color to be place on top the input color) should be
+     * black.
+     */
+
+    function readableColorIsBlack(color) {
+      return getLuminance(color) > 0.179;
+    }
+
+    function IsBlackReadable(color) {
+        try {
+            var rgba = parseToRgba(color);
+            var r = rgba[0];
+            var g = rgba[1];
+            var b = rgba[2];
+            var displayGamma = 2.2;
+            var backgroundWeight = 0.2126 * Math.pow(r / 255.0, displayGamma) +
+                0.7152 * Math.pow(g / 255.0, displayGamma) +
+                0.0722 * Math.pow(b / 255.0, displayGamma);
+            return backgroundWeight > Math.pow(0.5, displayGamma);
+        }
+        catch (_a) {
+            // Fallback to other implementation
+        }
+        try {
+            return readableColorIsBlack(color);
+        }
+        catch (error) {
+            // tslint:disable-next-line: no-console
+            console.error("Error while checking readable color for '" + color + "'", error);
+        }
+        return false;
+    }
+
+    var BaseChannelSelector = function (_a) {
+        var outsideClass = _a.outsideClass, contentClass = _a.contentClass, showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+        var ref = React.useRef(null);
+        var wrappedOnClick = function () {
+            if (!ref.current) {
+                return;
+            }
+            var bounds = ref.current.getBoundingClientRect();
+            showSelector({
+                left: bounds.left,
+                top: bounds.top,
+                width: bounds.width,
+                height: bounds.height,
+            });
+        };
+        React.useEffect(function () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", function (e) {
+                e.stopPropagation();
+            });
+        }, [ref]);
+        var className = contentClass;
+        if (selectedChannel && selectedChannelColor) {
+            className = contentClass + " " + (IsBlackReadable(selectedChannelColor) ? "t42-channel-selector-content-dark" : "t42-channel-selector-content-light");
+        }
+        var style = {
+            background: selectedChannelColor
+        };
+        return React__default["default"].createElement("div", { title: selectedChannel !== null && selectedChannel !== void 0 ? selectedChannel : "", ref: ref, style: style, onClick: wrappedOnClick, className: "t42-buttons " + outsideClass },
+            React__default["default"].createElement("div", { className: className }));
+    };
+
+    var FlatChannelSelector = function (_a) {
+        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: "t42-frame-caption-bar-element t42-frame-channel-selector", contentClass: "t42-frame-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    };
+
+    var ExtractButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-extract" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-extract", title: tooltip, onClick: onClick } });
+    };
+
+    var FeedbackButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-feedback" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-feedback", title: tooltip, onClick: onClick } });
+    };
+
+    var StickyButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip, isPressed = _a.isPressed;
+        var outerElementClassName = "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-sticky";
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-sticky" }, outerElement: { className: isPressed ? outerElementClassName + " active" : outerElementClassName, title: tooltip, onClick: onClick } });
+    };
+
+    var LockButton = function (_a) {
+        var tooltip = _a.tooltip, onClick = _a.onClick;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-lock" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-lock", title: tooltip, onClick: onClick } });
+    };
+
+    var MaximizeButton = function (_a) {
+        var tooltip = _a.tooltip, onClick = _a.onClick;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-maximize" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-maximize", title: tooltip, onClick: onClick } });
+    };
+
+    var MinimizeButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-minimize" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-minimize", title: tooltip, onClick: onClick } });
+    };
+
+    var RestoreButton = function (_a) {
+        var tooltip = _a.tooltip, onClick = _a.onClick;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-restore" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-restore", title: tooltip, onClick: onClick } });
+    };
+
+    var UnlockButton = function (_a) {
+        var tooltip = _a.tooltip, onClick = _a.onClick;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-standard-button t42-standard-button-unlock" }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button t42-caption-bar-button-unlock", title: tooltip, onClick: onClick } });
+    };
+
+    var CustomButton = function (_a) {
+        var onClick = _a.onClick, tooltip = _a.tooltip, imageData = _a.imageData;
+        return React__default["default"].createElement(BaseButton, { innerElement: { className: "t42-custom-button", style: { backgroundImage: "url(\"" + imageData + "\")" } }, outerElement: { className: "t42-button t42-caption-bar-button t42-tab-bar-button", title: tooltip, onClick: onClick } });
+    };
+
+    var FlatButtons = function (_a) {
+        var extract = _a.extract, minimize = _a.minimize, maximize = _a.maximize, restore = _a.restore, close = _a.close, lock = _a.lock, unlock = _a.unlock, feedback = _a.feedback, sticky = _a.sticky, customButtons = _a.customButtons;
+        return React__default["default"].createElement("div", { className: "t42-buttons-container t42-frame-caption-bar-element" },
+            React__default["default"].createElement("ul", { className: "t42-buttons t42-tab-bar-element" }, customButtons.map(function (customButton) {
+                return customButton.visible && React__default["default"].createElement(CustomButton, __assign({ key: customButton.buttonId }, customButton));
+            })),
+            React__default["default"].createElement("ul", { className: "t42-buttons t42-frame-caption-bar-element" },
+                (feedback === null || feedback === void 0 ? void 0 : feedback.visible) && React__default["default"].createElement(FeedbackButton, __assign({}, feedback)),
+                (sticky === null || sticky === void 0 ? void 0 : sticky.visible) && React__default["default"].createElement(StickyButton, __assign({}, sticky)),
+                (extract === null || extract === void 0 ? void 0 : extract.visible) && React__default["default"].createElement(ExtractButton, __assign({}, extract)),
+                (lock === null || lock === void 0 ? void 0 : lock.visible) && React__default["default"].createElement(LockButton, __assign({}, lock)),
+                (unlock === null || unlock === void 0 ? void 0 : unlock.visible) && React__default["default"].createElement(UnlockButton, __assign({}, unlock)),
+                (minimize === null || minimize === void 0 ? void 0 : minimize.visible) && React__default["default"].createElement(MinimizeButton, __assign({}, minimize)),
+                (maximize === null || maximize === void 0 ? void 0 : maximize.visible) && React__default["default"].createElement(MaximizeButton, __assign({}, maximize)),
+                (restore === null || restore === void 0 ? void 0 : restore.visible) && React__default["default"].createElement(RestoreButton, __assign({}, restore)),
+                (close === null || close === void 0 ? void 0 : close.visible) && React__default["default"].createElement(CloseButton, __assign({}, close))));
+    };
+
+    var waitForWindow = function (io, windowId) {
+        return new Promise(function (res, rej) {
+            var unsub = io.windows.onWindowAdded(function (w) {
+                if (w.id === windowId) {
+                    res(w);
+                    unsub();
+                }
+            });
+            var windowInCollection = io.windows.list().find(function (w) { return w.id === windowId; });
+            if (windowInCollection) {
+                res(windowInCollection);
+                unsub();
+            }
+        });
+    };
+    var getElementBounds = function (element) {
+        var bounds = element.getBoundingClientRect();
+        return {
+            left: bounds.left,
+            top: bounds.top,
+            width: bounds.width,
+            height: bounds.height
+        };
+    };
+
+    /**
+     * A collection of shims that provide minimal functionality of the ES6 collections.
+     *
+     * These implementations are not meant to be used outside of the ResizeObserver
+     * modules as they cover only a limited range of use cases.
+     */
+    /* eslint-disable require-jsdoc, valid-jsdoc */
+    var MapShim = (function () {
+        if (typeof Map !== 'undefined') {
+            return Map;
+        }
+        /**
+         * Returns index in provided array that matches the specified key.
+         *
+         * @param {Array<Array>} arr
+         * @param {*} key
+         * @returns {number}
+         */
+        function getIndex(arr, key) {
+            var result = -1;
+            arr.some(function (entry, index) {
+                if (entry[0] === key) {
+                    result = index;
+                    return true;
+                }
+                return false;
+            });
+            return result;
+        }
+        return /** @class */ (function () {
+            function class_1() {
+                this.__entries__ = [];
+            }
+            Object.defineProperty(class_1.prototype, "size", {
+                /**
+                 * @returns {boolean}
+                 */
+                get: function () {
+                    return this.__entries__.length;
+                },
+                enumerable: true,
+                configurable: true
+            });
+            /**
+             * @param {*} key
+             * @returns {*}
+             */
+            class_1.prototype.get = function (key) {
+                var index = getIndex(this.__entries__, key);
+                var entry = this.__entries__[index];
+                return entry && entry[1];
+            };
+            /**
+             * @param {*} key
+             * @param {*} value
+             * @returns {void}
+             */
+            class_1.prototype.set = function (key, value) {
+                var index = getIndex(this.__entries__, key);
+                if (~index) {
+                    this.__entries__[index][1] = value;
+                }
+                else {
+                    this.__entries__.push([key, value]);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.delete = function (key) {
+                var entries = this.__entries__;
+                var index = getIndex(entries, key);
+                if (~index) {
+                    entries.splice(index, 1);
+                }
+            };
+            /**
+             * @param {*} key
+             * @returns {void}
+             */
+            class_1.prototype.has = function (key) {
+                return !!~getIndex(this.__entries__, key);
+            };
+            /**
+             * @returns {void}
+             */
+            class_1.prototype.clear = function () {
+                this.__entries__.splice(0);
+            };
+            /**
+             * @param {Function} callback
+             * @param {*} [ctx=null]
+             * @returns {void}
+             */
+            class_1.prototype.forEach = function (callback, ctx) {
+                if (ctx === void 0) { ctx = null; }
+                for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {
+                    var entry = _a[_i];
+                    callback.call(ctx, entry[1], entry[0]);
+                }
+            };
+            return class_1;
+        }());
+    })();
+
+    /**
+     * Detects whether window and document objects are available in current environment.
+     */
+    var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
+
+    // Returns global object of a current environment.
+    var global$1 = (function () {
+        if (typeof global !== 'undefined' && global.Math === Math) {
+            return global;
+        }
+        if (typeof self !== 'undefined' && self.Math === Math) {
+            return self;
+        }
+        if (typeof window !== 'undefined' && window.Math === Math) {
+            return window;
+        }
+        // eslint-disable-next-line no-new-func
+        return Function('return this')();
+    })();
+
+    /**
+     * A shim for the requestAnimationFrame which falls back to the setTimeout if
+     * first one is not supported.
+     *
+     * @returns {number} Requests' identifier.
+     */
+    var requestAnimationFrame$1 = (function () {
+        if (typeof requestAnimationFrame === 'function') {
+            // It's required to use a bounded function because IE sometimes throws
+            // an "Invalid calling object" error if rAF is invoked without the global
+            // object on the left hand side.
+            return requestAnimationFrame.bind(global$1);
+        }
+        return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };
+    })();
+
+    // Defines minimum timeout before adding a trailing call.
+    var trailingTimeout = 2;
+    /**
+     * Creates a wrapper function which ensures that provided callback will be
+     * invoked only once during the specified delay period.
+     *
+     * @param {Function} callback - Function to be invoked after the delay period.
+     * @param {number} delay - Delay after which to invoke callback.
+     * @returns {Function}
+     */
+    function throttle (callback, delay) {
+        var leadingCall = false, trailingCall = false, lastCallTime = 0;
+        /**
+         * Invokes the original callback function and schedules new invocation if
+         * the "proxy" was called during current request.
+         *
+         * @returns {void}
+         */
+        function resolvePending() {
+            if (leadingCall) {
+                leadingCall = false;
+                callback();
+            }
+            if (trailingCall) {
+                proxy();
+            }
+        }
+        /**
+         * Callback invoked after the specified delay. It will further postpone
+         * invocation of the original function delegating it to the
+         * requestAnimationFrame.
+         *
+         * @returns {void}
+         */
+        function timeoutCallback() {
+            requestAnimationFrame$1(resolvePending);
+        }
+        /**
+         * Schedules invocation of the original function.
+         *
+         * @returns {void}
+         */
+        function proxy() {
+            var timeStamp = Date.now();
+            if (leadingCall) {
+                // Reject immediately following calls.
+                if (timeStamp - lastCallTime < trailingTimeout) {
+                    return;
+                }
+                // Schedule new call to be in invoked when the pending one is resolved.
+                // This is important for "transitions" which never actually start
+                // immediately so there is a chance that we might miss one if change
+                // happens amids the pending invocation.
+                trailingCall = true;
+            }
+            else {
+                leadingCall = true;
+                trailingCall = false;
+                setTimeout(timeoutCallback, delay);
+            }
+            lastCallTime = timeStamp;
+        }
+        return proxy;
+    }
+
+    // Minimum delay before invoking the update of observers.
+    var REFRESH_DELAY = 20;
+    // A list of substrings of CSS properties used to find transition events that
+    // might affect dimensions of observed elements.
+    var transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];
+    // Check if MutationObserver is available.
+    var mutationObserverSupported = typeof MutationObserver !== 'undefined';
+    /**
+     * Singleton controller class which handles updates of ResizeObserver instances.
+     */
+    var ResizeObserverController = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserverController.
+         *
+         * @private
+         */
+        function ResizeObserverController() {
+            /**
+             * Indicates whether DOM listeners have been added.
+             *
+             * @private {boolean}
+             */
+            this.connected_ = false;
+            /**
+             * Tells that controller has subscribed for Mutation Events.
+             *
+             * @private {boolean}
+             */
+            this.mutationEventsAdded_ = false;
+            /**
+             * Keeps reference to the instance of MutationObserver.
+             *
+             * @private {MutationObserver}
+             */
+            this.mutationsObserver_ = null;
+            /**
+             * A list of connected observers.
+             *
+             * @private {Array<ResizeObserverSPI>}
+             */
+            this.observers_ = [];
+            this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+            this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+        }
+        /**
+         * Adds observer to observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be added.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.addObserver = function (observer) {
+            if (!~this.observers_.indexOf(observer)) {
+                this.observers_.push(observer);
+            }
+            // Add listeners if they haven't been added yet.
+            if (!this.connected_) {
+                this.connect_();
+            }
+        };
+        /**
+         * Removes observer from observers list.
+         *
+         * @param {ResizeObserverSPI} observer - Observer to be removed.
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.removeObserver = function (observer) {
+            var observers = this.observers_;
+            var index = observers.indexOf(observer);
+            // Remove observer if it's present in registry.
+            if (~index) {
+                observers.splice(index, 1);
+            }
+            // Remove listeners if controller has no connected observers.
+            if (!observers.length && this.connected_) {
+                this.disconnect_();
+            }
+        };
+        /**
+         * Invokes the update of observers. It will continue running updates insofar
+         * it detects changes.
+         *
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.refresh = function () {
+            var changesDetected = this.updateObservers_();
+            // Continue running updates if changes have been detected as there might
+            // be future ones caused by CSS transitions.
+            if (changesDetected) {
+                this.refresh();
+            }
+        };
+        /**
+         * Updates every observer from observers list and notifies them of queued
+         * entries.
+         *
+         * @private
+         * @returns {boolean} Returns "true" if any observer has detected changes in
+         *      dimensions of it's elements.
+         */
+        ResizeObserverController.prototype.updateObservers_ = function () {
+            // Collect observers that have active observations.
+            var activeObservers = this.observers_.filter(function (observer) {
+                return observer.gatherActive(), observer.hasActive();
+            });
+            // Deliver notifications in a separate cycle in order to avoid any
+            // collisions between observers, e.g. when multiple instances of
+            // ResizeObserver are tracking the same element and the callback of one
+            // of them changes content dimensions of the observed target. Sometimes
+            // this may result in notifications being blocked for the rest of observers.
+            activeObservers.forEach(function (observer) { return observer.broadcastActive(); });
+            return activeObservers.length > 0;
+        };
+        /**
+         * Initializes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.connect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already added.
+            if (!isBrowser || this.connected_) {
+                return;
+            }
+            // Subscription to the "Transitionend" event is used as a workaround for
+            // delayed transitions. This way it's possible to capture at least the
+            // final state of an element.
+            document.addEventListener('transitionend', this.onTransitionEnd_);
+            window.addEventListener('resize', this.refresh);
+            if (mutationObserverSupported) {
+                this.mutationsObserver_ = new MutationObserver(this.refresh);
+                this.mutationsObserver_.observe(document, {
+                    attributes: true,
+                    childList: true,
+                    characterData: true,
+                    subtree: true
+                });
+            }
+            else {
+                document.addEventListener('DOMSubtreeModified', this.refresh);
+                this.mutationEventsAdded_ = true;
+            }
+            this.connected_ = true;
+        };
+        /**
+         * Removes DOM listeners.
+         *
+         * @private
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.disconnect_ = function () {
+            // Do nothing if running in a non-browser environment or if listeners
+            // have been already removed.
+            if (!isBrowser || !this.connected_) {
+                return;
+            }
+            document.removeEventListener('transitionend', this.onTransitionEnd_);
+            window.removeEventListener('resize', this.refresh);
+            if (this.mutationsObserver_) {
+                this.mutationsObserver_.disconnect();
+            }
+            if (this.mutationEventsAdded_) {
+                document.removeEventListener('DOMSubtreeModified', this.refresh);
+            }
+            this.mutationsObserver_ = null;
+            this.mutationEventsAdded_ = false;
+            this.connected_ = false;
+        };
+        /**
+         * "Transitionend" event handler.
+         *
+         * @private
+         * @param {TransitionEvent} event
+         * @returns {void}
+         */
+        ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {
+            var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;
+            // Detect whether transition may affect dimensions of an element.
+            var isReflowProperty = transitionKeys.some(function (key) {
+                return !!~propertyName.indexOf(key);
+            });
+            if (isReflowProperty) {
+                this.refresh();
+            }
+        };
+        /**
+         * Returns instance of the ResizeObserverController.
+         *
+         * @returns {ResizeObserverController}
+         */
+        ResizeObserverController.getInstance = function () {
+            if (!this.instance_) {
+                this.instance_ = new ResizeObserverController();
+            }
+            return this.instance_;
+        };
+        /**
+         * Holds reference to the controller's instance.
+         *
+         * @private {ResizeObserverController}
+         */
+        ResizeObserverController.instance_ = null;
+        return ResizeObserverController;
+    }());
+
+    /**
+     * Defines non-writable/enumerable properties of the provided target object.
+     *
+     * @param {Object} target - Object for which to define properties.
+     * @param {Object} props - Properties to be defined.
+     * @returns {Object} Target object.
+     */
+    var defineConfigurable = (function (target, props) {
+        for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
+            var key = _a[_i];
+            Object.defineProperty(target, key, {
+                value: props[key],
+                enumerable: false,
+                writable: false,
+                configurable: true
+            });
+        }
+        return target;
+    });
+
+    /**
+     * Returns the global object associated with provided element.
+     *
+     * @param {Object} target
+     * @returns {Object}
+     */
+    var getWindowOf = (function (target) {
+        // Assume that the element is an instance of Node, which means that it
+        // has the "ownerDocument" property from which we can retrieve a
+        // corresponding global object.
+        var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+        // Return the local global object if it's not possible extract one from
+        // provided element.
+        return ownerGlobal || global$1;
+    });
+
+    // Placeholder of an empty content rectangle.
+    var emptyRect = createRectInit(0, 0, 0, 0);
+    /**
+     * Converts provided string to a number.
+     *
+     * @param {number|string} value
+     * @returns {number}
+     */
+    function toFloat(value) {
+        return parseFloat(value) || 0;
+    }
+    /**
+     * Extracts borders size from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @param {...string} positions - Borders positions (top, right, ...)
+     * @returns {number}
+     */
+    function getBordersSize(styles) {
+        var positions = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            positions[_i - 1] = arguments[_i];
+        }
+        return positions.reduce(function (size, position) {
+            var value = styles['border-' + position + '-width'];
+            return size + toFloat(value);
+        }, 0);
+    }
+    /**
+     * Extracts paddings sizes from provided styles.
+     *
+     * @param {CSSStyleDeclaration} styles
+     * @returns {Object} Paddings box.
+     */
+    function getPaddings(styles) {
+        var positions = ['top', 'right', 'bottom', 'left'];
+        var paddings = {};
+        for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+            var position = positions_1[_i];
+            var value = styles['padding-' + position];
+            paddings[position] = toFloat(value);
+        }
+        return paddings;
+    }
+    /**
+     * Calculates content rectangle of provided SVG element.
+     *
+     * @param {SVGGraphicsElement} target - Element content rectangle of which needs
+     *      to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getSVGContentRect(target) {
+        var bbox = target.getBBox();
+        return createRectInit(0, 0, bbox.width, bbox.height);
+    }
+    /**
+     * Calculates content rectangle of provided HTMLElement.
+     *
+     * @param {HTMLElement} target - Element for which to calculate the content rectangle.
+     * @returns {DOMRectInit}
+     */
+    function getHTMLElementContentRect(target) {
+        // Client width & height properties can't be
+        // used exclusively as they provide rounded values.
+        var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+        // By this condition we can catch all non-replaced inline, hidden and
+        // detached elements. Though elements with width & height properties less
+        // than 0.5 will be discarded as well.
+        //
+        // Without it we would need to implement separate methods for each of
+        // those cases and it's not possible to perform a precise and performance
+        // effective test for hidden elements. E.g. even jQuery's ':visible' filter
+        // gives wrong results for elements with width & height less than 0.5.
+        if (!clientWidth && !clientHeight) {
+            return emptyRect;
+        }
+        var styles = getWindowOf(target).getComputedStyle(target);
+        var paddings = getPaddings(styles);
+        var horizPad = paddings.left + paddings.right;
+        var vertPad = paddings.top + paddings.bottom;
+        // Computed styles of width & height are being used because they are the
+        // only dimensions available to JS that contain non-rounded values. It could
+        // be possible to utilize the getBoundingClientRect if only it's data wasn't
+        // affected by CSS transformations let alone paddings, borders and scroll bars.
+        var width = toFloat(styles.width), height = toFloat(styles.height);
+        // Width & height include paddings and borders when the 'border-box' box
+        // model is applied (except for IE).
+        if (styles.boxSizing === 'border-box') {
+            // Following conditions are required to handle Internet Explorer which
+            // doesn't include paddings and borders to computed CSS dimensions.
+            //
+            // We can say that if CSS dimensions + paddings are equal to the "client"
+            // properties then it's either IE, and thus we don't need to subtract
+            // anything, or an element merely doesn't have paddings/borders styles.
+            if (Math.round(width + horizPad) !== clientWidth) {
+                width -= getBordersSize(styles, 'left', 'right') + horizPad;
+            }
+            if (Math.round(height + vertPad) !== clientHeight) {
+                height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
+            }
+        }
+        // Following steps can't be applied to the document's root element as its
+        // client[Width/Height] properties represent viewport area of the window.
+        // Besides, it's as well not necessary as the <html> itself neither has
+        // rendered scroll bars nor it can be clipped.
+        if (!isDocumentElement(target)) {
+            // In some browsers (only in Firefox, actually) CSS width & height
+            // include scroll bars size which can be removed at this step as scroll
+            // bars are the only difference between rounded dimensions + paddings
+            // and "client" properties, though that is not always true in Chrome.
+            var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+            var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+            // Chrome has a rather weird rounding of "client" properties.
+            // E.g. for an element with content width of 314.2px it sometimes gives
+            // the client width of 315px and for the width of 314.7px it may give
+            // 314px. And it doesn't happen all the time. So just ignore this delta
+            // as a non-relevant.
+            if (Math.abs(vertScrollbar) !== 1) {
+                width -= vertScrollbar;
+            }
+            if (Math.abs(horizScrollbar) !== 1) {
+                height -= horizScrollbar;
+            }
+        }
+        return createRectInit(paddings.left, paddings.top, width, height);
+    }
+    /**
+     * Checks whether provided element is an instance of the SVGGraphicsElement.
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    var isSVGGraphicsElement = (function () {
+        // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement
+        // interface.
+        if (typeof SVGGraphicsElement !== 'undefined') {
+            return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
+        }
+        // If it's so, then check that element is at least an instance of the
+        // SVGElement and that it has the "getBBox" method.
+        // eslint-disable-next-line no-extra-parens
+        return function (target) { return (target instanceof getWindowOf(target).SVGElement &&
+            typeof target.getBBox === 'function'); };
+    })();
+    /**
+     * Checks whether provided element is a document element (<html>).
+     *
+     * @param {Element} target - Element to be checked.
+     * @returns {boolean}
+     */
+    function isDocumentElement(target) {
+        return target === getWindowOf(target).document.documentElement;
+    }
+    /**
+     * Calculates an appropriate content rectangle for provided html or svg element.
+     *
+     * @param {Element} target - Element content rectangle of which needs to be calculated.
+     * @returns {DOMRectInit}
+     */
+    function getContentRect(target) {
+        if (!isBrowser) {
+            return emptyRect;
+        }
+        if (isSVGGraphicsElement(target)) {
+            return getSVGContentRect(target);
+        }
+        return getHTMLElementContentRect(target);
+    }
+    /**
+     * Creates rectangle with an interface of the DOMRectReadOnly.
+     * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly
+     *
+     * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.
+     * @returns {DOMRectReadOnly}
+     */
+    function createReadOnlyRect(_a) {
+        var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+        // If DOMRectReadOnly is available use it as a prototype for the rectangle.
+        var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
+        var rect = Object.create(Constr.prototype);
+        // Rectangle's properties are not writable and non-enumerable.
+        defineConfigurable(rect, {
+            x: x, y: y, width: width, height: height,
+            top: y,
+            right: x + width,
+            bottom: height + y,
+            left: x
+        });
+        return rect;
+    }
+    /**
+     * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.
+     * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit
+     *
+     * @param {number} x - X coordinate.
+     * @param {number} y - Y coordinate.
+     * @param {number} width - Rectangle's width.
+     * @param {number} height - Rectangle's height.
+     * @returns {DOMRectInit}
+     */
+    function createRectInit(x, y, width, height) {
+        return { x: x, y: y, width: width, height: height };
+    }
+
+    /**
+     * Class that is responsible for computations of the content rectangle of
+     * provided DOM element and for keeping track of it's changes.
+     */
+    var ResizeObservation = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObservation.
+         *
+         * @param {Element} target - Element to be observed.
+         */
+        function ResizeObservation(target) {
+            /**
+             * Broadcasted width of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastWidth = 0;
+            /**
+             * Broadcasted height of content rectangle.
+             *
+             * @type {number}
+             */
+            this.broadcastHeight = 0;
+            /**
+             * Reference to the last observed content rectangle.
+             *
+             * @private {DOMRectInit}
+             */
+            this.contentRect_ = createRectInit(0, 0, 0, 0);
+            this.target = target;
+        }
+        /**
+         * Updates content rectangle and tells whether it's width or height properties
+         * have changed since the last broadcast.
+         *
+         * @returns {boolean}
+         */
+        ResizeObservation.prototype.isActive = function () {
+            var rect = getContentRect(this.target);
+            this.contentRect_ = rect;
+            return (rect.width !== this.broadcastWidth ||
+                rect.height !== this.broadcastHeight);
+        };
+        /**
+         * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
+         * from the corresponding properties of the last observed content rectangle.
+         *
+         * @returns {DOMRectInit} Last observed content rectangle.
+         */
+        ResizeObservation.prototype.broadcastRect = function () {
+            var rect = this.contentRect_;
+            this.broadcastWidth = rect.width;
+            this.broadcastHeight = rect.height;
+            return rect;
+        };
+        return ResizeObservation;
+    }());
+
+    var ResizeObserverEntry = /** @class */ (function () {
+        /**
+         * Creates an instance of ResizeObserverEntry.
+         *
+         * @param {Element} target - Element that is being observed.
+         * @param {DOMRectInit} rectInit - Data of the element's content rectangle.
+         */
+        function ResizeObserverEntry(target, rectInit) {
+            var contentRect = createReadOnlyRect(rectInit);
+            // According to the specification following properties are not writable
+            // and are also not enumerable in the native implementation.
+            //
+            // Property accessors are not being used as they'd require to define a
+            // private WeakMap storage which may cause memory leaks in browsers that
+            // don't support this type of collections.
+            defineConfigurable(this, { target: target, contentRect: contentRect });
+        }
+        return ResizeObserverEntry;
+    }());
+
+    var ResizeObserverSPI = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback function that is invoked
+         *      when one of the observed elements changes it's content dimensions.
+         * @param {ResizeObserverController} controller - Controller instance which
+         *      is responsible for the updates of observer.
+         * @param {ResizeObserver} callbackCtx - Reference to the public
+         *      ResizeObserver instance which will be passed to callback function.
+         */
+        function ResizeObserverSPI(callback, controller, callbackCtx) {
+            /**
+             * Collection of resize observations that have detected changes in dimensions
+             * of elements.
+             *
+             * @private {Array<ResizeObservation>}
+             */
+            this.activeObservations_ = [];
+            /**
+             * Registry of the ResizeObservation instances.
+             *
+             * @private {Map<Element, ResizeObservation>}
+             */
+            this.observations_ = new MapShim();
+            if (typeof callback !== 'function') {
+                throw new TypeError('The callback provided as parameter 1 is not a function.');
+            }
+            this.callback_ = callback;
+            this.controller_ = controller;
+            this.callbackCtx_ = callbackCtx;
+        }
+        /**
+         * Starts observing provided element.
+         *
+         * @param {Element} target - Element to be observed.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.observe = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            // Do nothing if element is already being observed.
+            if (observations.has(target)) {
+                return;
+            }
+            observations.set(target, new ResizeObservation(target));
+            this.controller_.addObserver(this);
+            // Force the update of observations.
+            this.controller_.refresh();
+        };
+        /**
+         * Stops observing provided element.
+         *
+         * @param {Element} target - Element to stop observing.
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.unobserve = function (target) {
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            // Do nothing if current environment doesn't have the Element interface.
+            if (typeof Element === 'undefined' || !(Element instanceof Object)) {
+                return;
+            }
+            if (!(target instanceof getWindowOf(target).Element)) {
+                throw new TypeError('parameter 1 is not of type "Element".');
+            }
+            var observations = this.observations_;
+            // Do nothing if element is not being observed.
+            if (!observations.has(target)) {
+                return;
+            }
+            observations.delete(target);
+            if (!observations.size) {
+                this.controller_.removeObserver(this);
+            }
+        };
+        /**
+         * Stops observing all elements.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.disconnect = function () {
+            this.clearActive();
+            this.observations_.clear();
+            this.controller_.removeObserver(this);
+        };
+        /**
+         * Collects observation instances the associated element of which has changed
+         * it's content rectangle.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.gatherActive = function () {
+            var _this = this;
+            this.clearActive();
+            this.observations_.forEach(function (observation) {
+                if (observation.isActive()) {
+                    _this.activeObservations_.push(observation);
+                }
+            });
+        };
+        /**
+         * Invokes initial callback function with a list of ResizeObserverEntry
+         * instances collected from active resize observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.broadcastActive = function () {
+            // Do nothing if observer doesn't have active observations.
+            if (!this.hasActive()) {
+                return;
+            }
+            var ctx = this.callbackCtx_;
+            // Create ResizeObserverEntry instance for every active observation.
+            var entries = this.activeObservations_.map(function (observation) {
+                return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+            });
+            this.callback_.call(ctx, entries, ctx);
+            this.clearActive();
+        };
+        /**
+         * Clears the collection of active observations.
+         *
+         * @returns {void}
+         */
+        ResizeObserverSPI.prototype.clearActive = function () {
+            this.activeObservations_.splice(0);
+        };
+        /**
+         * Tells whether observer has active observations.
+         *
+         * @returns {boolean}
+         */
+        ResizeObserverSPI.prototype.hasActive = function () {
+            return this.activeObservations_.length > 0;
+        };
+        return ResizeObserverSPI;
+    }());
+
+    // Registry of internal observers. If WeakMap is not available use current shim
+    // for the Map collection as it has all required methods and because WeakMap
+    // can't be fully polyfilled anyway.
+    var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();
+    /**
+     * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation
+     * exposing only those methods and properties that are defined in the spec.
+     */
+    var ResizeObserver = /** @class */ (function () {
+        /**
+         * Creates a new instance of ResizeObserver.
+         *
+         * @param {ResizeObserverCallback} callback - Callback that is invoked when
+         *      dimensions of the observed elements change.
+         */
+        function ResizeObserver(callback) {
+            if (!(this instanceof ResizeObserver)) {
+                throw new TypeError('Cannot call a class as a function.');
+            }
+            if (!arguments.length) {
+                throw new TypeError('1 argument required, but only 0 present.');
+            }
+            var controller = ResizeObserverController.getInstance();
+            var observer = new ResizeObserverSPI(callback, controller, this);
+            observers.set(this, observer);
+        }
+        return ResizeObserver;
+    }());
+    // Expose public methods of ResizeObserver.
+    [
+        'observe',
+        'unobserve',
+        'disconnect'
+    ].forEach(function (method) {
+        ResizeObserver.prototype[method] = function () {
+            var _a;
+            return (_a = observers.get(this))[method].apply(_a, arguments);
+        };
+    });
+
+    var index = (function () {
+        // Export existing implementation if available.
+        if (typeof global$1.ResizeObserver !== 'undefined') {
+            return global$1.ResizeObserver;
+        }
+        return ResizeObserver;
+    })();
+
+    function useEditableCaption(ref, options) {
+        React.useLayoutEffect(function () {
+            if (!ref.current) {
+                return;
+            }
+            var observer = new index(function () {
+                if (ref.current && typeof options.notifyBoundsChanged === "function") {
+                    options.notifyBoundsChanged(getElementBounds(ref.current));
+                }
+            });
+            observer.observe(ref.current);
+            if (ref.current && typeof options.notifyBoundsChanged === "function") {
+                options.notifyBoundsChanged(getElementBounds(ref.current));
+            }
+            return function () {
+                observer.disconnect();
+            };
+        }, [ref]);
+    }
+
+    var FlatCaption = function (_a) {
+        var caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
+        var ref = React.useRef(null);
+        useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
+        return React__default["default"].createElement("div", { ref: ref, className: "t42-caption t42-title t42-frame-caption-bar-element" }, caption);
+    };
+
+    function useCaptionEditor(ref, options) {
+        React.useEffect(function () {
+            if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+                return;
+            }
+            options.notifyEditorVisibilityChanged(true);
+            var observer = new index(function () {
+                if (ref.current) {
+                    options.notifyBoundsChanged(getElementBounds(ref.current));
+                }
+            });
+            observer.observe(ref.current);
+            if (ref.current) {
+                options.notifyBoundsChanged(getElementBounds(ref.current));
+            }
+            return function () {
+                options.notifyEditorVisibilityChanged(false);
+                observer.disconnect();
+            };
+        }, [ref]);
+    }
+
+    function useCommitEditingRequested(targetType, targetId, text) {
+        React.useEffect(function () {
+            var unsub = webGroupsManager.onCommitCaptionEditingRequested(targetType, targetId, function () {
+                webGroupsManager.commitCaptionEditing(targetType, targetId, text);
+            });
+            return function () {
+                unsub();
+            };
+        }, [targetType, targetId, text]);
+    }
+
+    var CaptionEditor = function (_a) {
+        var className = _a.className, commitChanges = _a.commitChanges, hideEditor = _a.hideEditor, notifyBoundsChanged = _a.notifyBoundsChanged, caption = _a.caption, notifyEditorVisibilityChanged = _a.notifyEditorVisibilityChanged, targetType = _a.targetType, targetId = _a.targetId;
+        var _b = React.useState(caption), captionInEditor = _b[0], setCaptionInEditor = _b[1];
+        var _c = React.useState(0), inputWidth = _c[0], setInputWidth = _c[1];
+        var ref = React.useRef(null);
+        var measurementRef = React.useRef(null);
+        var onBlur = function () {
+            commitChanges(captionInEditor);
+        };
+        var onChange = function (e) {
+            setCaptionInEditor(e.target.value);
+        };
+        var onKeyDown = function (e) {
+            if (e.key === "Enter") {
+                e.preventDefault();
+            }
+        };
+        var onKeyUp = function (e) {
+            if (e.key === "Escape") {
+                hideEditor();
+            }
+            else if (e.key === "Enter") {
+                commitChanges(captionInEditor);
+                e.preventDefault();
+            }
+        };
+        useCaptionEditor(ref, { notifyBoundsChanged: notifyBoundsChanged, notifyEditorVisibilityChanged: notifyEditorVisibilityChanged });
+        useCommitEditingRequested(targetType, targetId, captionInEditor);
+        React.useEffect(function () {
+            if (!ref.current) {
+                return;
+            }
+            var onMouseDown = function (e) {
+                e.stopPropagation();
+            };
+            var element = ref.current;
+            element.addEventListener("mousedown", onMouseDown);
+            if (ref.current) {
+                // Focus element on the next tick to have properly focused page
+                setTimeout(function () {
+                    element === null || element === void 0 ? void 0 : element.focus();
+                    element === null || element === void 0 ? void 0 : element.select();
+                }, 0);
+            }
+            return function () {
+                element === null || element === void 0 ? void 0 : element.removeEventListener("mousedown", onMouseDown);
+            };
+        }, [ref]);
+        React.useEffect(function () {
+            if (!measurementRef.current) {
+                return;
+            }
+            setInputWidth(measurementRef.current.scrollWidth);
+        }, [measurementRef, captionInEditor]);
+        return React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("input", { ref: ref, style: {
+                    width: inputWidth + "px"
+                }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onChange: onChange, onBlur: onBlur, value: captionInEditor, className: className }),
+            React__default["default"].createElement("span", { ref: measurementRef, style: { visibility: "hidden", position: "absolute", top: -30000, left: -30000 } }, captionInEditor));
+    };
+
+    var FlatCaptionEditor = function (props) {
+        return React__default["default"].createElement(CaptionEditor, __assign({}, props, { targetId: props.frameId, targetType: TargetType.Frame, className: "t42-caption-editor t42-frame-caption-bar-element" }));
+    };
+
+    var FlatMoveArea = function (_a) {
+        var children = _a.children, moveAreaId = _a.moveAreaId;
+        return React__default["default"].createElement("div", { id: moveAreaId, className: "t42-move-area t42-frame-caption-bar-element" }, children);
+    };
+
+    var FlatCaptionBar = function (_a) {
+        var moveAreaId = _a.moveAreaId, caption = _a.caption, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "caption", "channels", "captionEditor", "notifyCaptionBoundsChanged"]);
+        return (React__default["default"].createElement("div", { className: "t42-react-caption-bar" },
+            (channels === null || channels === void 0 ? void 0 : channels.visible) && React__default["default"].createElement(FlatChannelSelector, { showSelector: channels === null || channels === void 0 ? void 0 : channels.showSelector, selectedChannel: channels === null || channels === void 0 ? void 0 : channels.selectedChannel, selectedChannelColor: channels === null || channels === void 0 ? void 0 : channels.selectedChannelColor }),
+            React__default["default"].createElement(FlatMoveArea, { moveAreaId: moveAreaId }, captionEditor.show ? React__default["default"].createElement(FlatCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, frameId: rest.frameId })) : React__default["default"].createElement(FlatCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
+            React__default["default"].createElement(FlatButtons, __assign({}, rest))));
+    };
+
+    var GroupMoveArea = function (_a) {
+        var children = _a.children, moveAreaId = _a.moveAreaId;
+        return React__default["default"].createElement("div", { id: moveAreaId, className: "t42-move-area t42-group-caption-bar-element" }, children);
+    };
+
+    var GroupButtons = function (_a) {
+        var minimize = _a.minimize, restore = _a.restore, maximize = _a.maximize, close = _a.close;
+        return React__default["default"].createElement("div", { className: "t42-buttons-container t42-group-caption-bar-element" },
+            React__default["default"].createElement("ul", { className: "t42-buttons t42-group-caption-bar-element" },
+                (minimize === null || minimize === void 0 ? void 0 : minimize.visible) && React__default["default"].createElement(MinimizeButton, __assign({}, minimize)),
+                (restore === null || restore === void 0 ? void 0 : restore.visible) && React__default["default"].createElement(RestoreButton, __assign({}, restore)),
+                (maximize === null || maximize === void 0 ? void 0 : maximize.visible) && React__default["default"].createElement(MaximizeButton, __assign({}, maximize)),
+                (close === null || close === void 0 ? void 0 : close.visible) && React__default["default"].createElement(CloseButton, __assign({}, close))));
+    };
+
+    var GroupCaption = function (_a) {
+        var caption = _a.caption, notifyBoundsChanged = _a.notifyBoundsChanged;
+        var ref = React.useRef(null);
+        useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
+        return React__default["default"].createElement("div", { ref: ref, className: "t42-caption t42-title t42-group-caption-bar-element" }, caption);
+    };
+
+    var GroupCaptionEditor = function (props) {
+        return React__default["default"].createElement(CaptionEditor, __assign({}, props, { targetId: props.groupId, targetType: TargetType.Group, className: "t42-caption-editor t42-group-caption-bar-element" }));
+    };
+
+    var GroupCaptionBar = function (_a) {
+        var moveAreaId = _a.moveAreaId; _a.targetType; var targetId = _a.targetId, caption = _a.caption, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, rest = __rest(_a, ["moveAreaId", "targetType", "targetId", "caption", "captionEditor", "notifyCaptionBoundsChanged"]);
+        return React__default["default"].createElement("div", { className: "t42-react-caption-bar" },
+            React__default["default"].createElement(GroupMoveArea, { moveAreaId: moveAreaId }, (captionEditor === null || captionEditor === void 0 ? void 0 : captionEditor.show) ?
+                React__default["default"].createElement(GroupCaptionEditor, __assign({}, captionEditor, { groupId: targetId, caption: captionEditor.text })) :
+                React__default["default"].createElement(GroupCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption })),
+            React__default["default"].createElement(GroupButtons, __assign({}, rest)));
+    };
+
+    var TabChannelSelector = function (_a) {
+        var showSelector = _a.showSelector, selectedChannel = _a.selectedChannel, selectedChannelColor = _a.selectedChannelColor;
+        return React__default["default"].createElement(BaseChannelSelector, { outsideClass: "t42-tab-bar-element t42-tab-channel-selector", contentClass: "t42-tab-channel-selector-content", showSelector: showSelector, selectedChannel: selectedChannel, selectedChannelColor: selectedChannelColor });
+    };
+
+    var TabCaption = function (_a) {
+        var caption = _a.caption, selected = _a.selected, notifyBoundsChanged = _a.notifyBoundsChanged;
+        var normalClassName = "t42-caption t42-tab-caption";
+        var selectedClassName = "t42-caption t42-tab-caption t42-selected-tab-caption";
+        var ref = React.useRef(null);
+        useEditableCaption(ref, { notifyBoundsChanged: notifyBoundsChanged });
+        return React__default["default"].createElement("div", { ref: ref, className: selected ? selectedClassName : normalClassName }, caption);
+    };
+
+    var TabCaptionEditor = function (props) {
+        var normalClassName = "t42-caption-editor t42-tab-caption-editor t42-caption t42-tab-caption";
+        var selectedClassName = "t42-caption-editor t42-tab-caption-editor t42-caption t42-tab-caption t42-selected-tab-caption  t42-selected-tab-element";
+        return React__default["default"].createElement(CaptionEditor, __assign({}, props, { targetType: TargetType.Tab, targetId: props.windowId, className: props.selected ? selectedClassName : normalClassName }));
+    };
+
+    var TabCloseButton = function (_a) {
+        var selected = _a.selected, close = _a.close;
+        var normalClassName = "t42-tab-close-button t42-tab-bar-element";
+        var selectedClassName = "t42-tab-close-button t42-tab-bar-element t42-selected-tab-close-button t42-selected-tab-element";
+        var normalContentClassName = "t42-tab-close-button-content";
+        var selectedContentClassName = "t42-tab-close-button-content t42-selected-tab-close-button-content";
+        var ref = React.useRef(null);
+        React.useEffect(function () {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mousedown", function (e) {
+                e.stopPropagation();
+            });
+        }, [ref]);
+        return React__default["default"].createElement("div", { ref: ref, onClick: close, className: selected ? selectedClassName : normalClassName, title: "close" },
+            React__default["default"].createElement("div", { className: selected ? selectedContentClassName : normalContentClassName }));
+    };
+
+    var Tab = function (_a) {
+        var caption = _a.caption, selected = _a.selected, close = _a.close, channels = _a.channels, captionEditor = _a.captionEditor, notifyCaptionBoundsChanged = _a.notifyCaptionBoundsChanged, windowId = _a.windowId;
+        return React__default["default"].createElement("div", { className: "t42-react-tab" },
+            channels.visible && React__default["default"].createElement(TabChannelSelector, __assign({}, channels)),
+            captionEditor.show ?
+                React__default["default"].createElement(TabCaptionEditor, __assign({}, captionEditor, { caption: captionEditor.text, selected: selected, windowId: windowId })) :
+                React__default["default"].createElement(TabCaption, { notifyBoundsChanged: notifyCaptionBoundsChanged, caption: caption, selected: selected }),
+            React__default["default"].createElement(TabCloseButton, { selected: selected, close: close }));
+    };
+
+    var TabHeaderButtons = function (_a) {
+        var extract = _a.extract, minimize = _a.minimize, maximize = _a.maximize, restore = _a.restore, close = _a.close, lock = _a.lock, unlock = _a.unlock, feedback = _a.feedback, sticky = _a.sticky, customButtons = _a.customButtons;
+        return React__default["default"].createElement("div", { className: "t42-buttons-container t42-tab-bar-element" },
+            React__default["default"].createElement("ul", { className: "t42-buttons t42-tab-bar-element" }, customButtons.map(function (customButton) {
+                return customButton.visible && React__default["default"].createElement(CustomButton, __assign({ key: customButton.buttonId }, customButton));
+            })),
+            React__default["default"].createElement("ul", { className: "t42-buttons t42-tab-bar-element" },
+                (feedback === null || feedback === void 0 ? void 0 : feedback.visible) && React__default["default"].createElement(FeedbackButton, __assign({}, feedback)),
+                (sticky === null || sticky === void 0 ? void 0 : sticky.visible) && React__default["default"].createElement(StickyButton, __assign({}, sticky)),
+                (extract === null || extract === void 0 ? void 0 : extract.visible) && React__default["default"].createElement(ExtractButton, __assign({}, extract)),
+                (lock === null || lock === void 0 ? void 0 : lock.visible) && React__default["default"].createElement(LockButton, __assign({}, lock)),
+                (unlock === null || unlock === void 0 ? void 0 : unlock.visible) && React__default["default"].createElement(UnlockButton, __assign({}, unlock)),
+                (minimize === null || minimize === void 0 ? void 0 : minimize.visible) && React__default["default"].createElement(MinimizeButton, __assign({}, minimize)),
+                (restore === null || restore === void 0 ? void 0 : restore.visible) && React__default["default"].createElement(RestoreButton, __assign({}, restore)),
+                (maximize === null || maximize === void 0 ? void 0 : maximize.visible) && React__default["default"].createElement(MaximizeButton, __assign({}, maximize)),
+                (close === null || close === void 0 ? void 0 : close.visible) && React__default["default"].createElement(CloseButton, __assign({}, close))));
+    };
+
+    function createCommonjsModule(fn, basedir, module) {
+    	return module = {
+    		path: basedir,
+    		exports: {},
+    		require: function (path, base) {
+    			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+    		}
+    	}, fn(module, module.exports), module.exports;
+    }
+
+    function commonjsRequire () {
+    	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+    }
+
+    function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=React__default["default"].useState,m=React__default["default"].useEffect,n=React__default["default"].useLayoutEffect,p=React__default["default"].useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c});},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c});})},[a]);p(d);return d}
+    function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return !k(a,d)}catch(f){return !0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;var useSyncExternalStore=void 0!==React__default["default"].useSyncExternalStore?React__default["default"].useSyncExternalStore:u;
+
+    var useSyncExternalStoreShim_production_min = {
+    	useSyncExternalStore: useSyncExternalStore
+    };
+
+    var useSyncExternalStoreShim_development = createCommonjsModule(function (module, exports) {
+
+    if (process.env.NODE_ENV !== "production") {
+      (function() {
+
+    /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+    if (
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+        'function'
+    ) {
+      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+    }
+              var React = React__default["default"];
+
+    var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+    function error(format) {
+      {
+        {
+          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            args[_key2 - 1] = arguments[_key2];
+          }
+
+          printWarning('error', format, args);
+        }
+      }
+    }
+
+    function printWarning(level, format, args) {
+      // When changing this logic, you might want to also
+      // update consoleWithStackDev.www.js as well.
+      {
+        var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
+        var stack = ReactDebugCurrentFrame.getStackAddendum();
+
+        if (stack !== '') {
+          format += '%s';
+          args = args.concat([stack]);
+        } // eslint-disable-next-line react-internal/safe-string-coercion
+
+
+        var argsWithFormat = args.map(function (item) {
+          return String(item);
+        }); // Careful: RN currently depends on this prefix
+
+        argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
+        // breaks IE9: https://github.com/facebook/react/issues/13610
+        // eslint-disable-next-line react-internal/no-production-logging
+
+        Function.prototype.apply.call(console[level], console, argsWithFormat);
+      }
+    }
+
+    /**
+     * inlined Object.is polyfill to avoid requiring consumers ship their own
+     * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+     */
+    function is(x, y) {
+      return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
+      ;
+    }
+
+    var objectIs = typeof Object.is === 'function' ? Object.is : is;
+
+    // dispatch for CommonJS interop named imports.
+
+    var useState = React.useState,
+        useEffect = React.useEffect,
+        useLayoutEffect = React.useLayoutEffect,
+        useDebugValue = React.useDebugValue;
+    var didWarnOld18Alpha = false;
+    var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
+    // because of a very particular set of implementation details and assumptions
+    // -- change any one of them and it will break. The most important assumption
+    // is that updates are always synchronous, because concurrent rendering is
+    // only available in versions of React that also have a built-in
+    // useSyncExternalStore API. And we only use this shim when the built-in API
+    // does not exist.
+    //
+    // Do not assume that the clever hacks used by this hook also work in general.
+    // The point of this shim is to replace the need for hacks by other libraries.
+
+    function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+    // React do not expose a way to check if we're hydrating. So users of the shim
+    // will need to track that themselves and return the correct value
+    // from `getSnapshot`.
+    getServerSnapshot) {
+      {
+        if (!didWarnOld18Alpha) {
+          if (React.startTransition !== undefined) {
+            didWarnOld18Alpha = true;
+
+            error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
+          }
+        }
+      } // Read the current snapshot from the store on every render. Again, this
+      // breaks the rules of React, and only works here because of specific
+      // implementation details, most importantly that updates are
+      // always synchronous.
+
+
+      var value = getSnapshot();
+
+      {
+        if (!didWarnUncachedGetSnapshot) {
+          var cachedValue = getSnapshot();
+
+          if (!objectIs(value, cachedValue)) {
+            error('The result of getSnapshot should be cached to avoid an infinite loop');
+
+            didWarnUncachedGetSnapshot = true;
+          }
+        }
+      } // Because updates are synchronous, we don't queue them. Instead we force a
+      // re-render whenever the subscribed state changes by updating an some
+      // arbitrary useState hook. Then, during render, we call getSnapshot to read
+      // the current value.
+      //
+      // Because we don't actually use the state returned by the useState hook, we
+      // can save a bit of memory by storing other stuff in that slot.
+      //
+      // To implement the early bailout, we need to track some things on a mutable
+      // object. Usually, we would put that in a useRef hook, but we can stash it in
+      // our useState hook instead.
+      //
+      // To force a re-render, we call forceUpdate({inst}). That works because the
+      // new object always fails an equality check.
+
+
+      var _useState = useState({
+        inst: {
+          value: value,
+          getSnapshot: getSnapshot
+        }
+      }),
+          inst = _useState[0].inst,
+          forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
+      // in the layout phase so we can access it during the tearing check that
+      // happens on subscribe.
+
+
+      useLayoutEffect(function () {
+        inst.value = value;
+        inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
+        // commit phase if there was an interleaved mutation. In concurrent mode
+        // this can happen all the time, but even in synchronous mode, an earlier
+        // effect may have mutated the store.
+
+        if (checkIfSnapshotChanged(inst)) {
+          // Force a re-render.
+          forceUpdate({
+            inst: inst
+          });
+        }
+      }, [subscribe, value, getSnapshot]);
+      useEffect(function () {
+        // Check for changes right before subscribing. Subsequent changes will be
+        // detected in the subscription handler.
+        if (checkIfSnapshotChanged(inst)) {
+          // Force a re-render.
+          forceUpdate({
+            inst: inst
+          });
+        }
+
+        var handleStoreChange = function () {
+          // TODO: Because there is no cross-renderer API for batching updates, it's
+          // up to the consumer of this library to wrap their subscription event
+          // with unstable_batchedUpdates. Should we try to detect when this isn't
+          // the case and print a warning in development?
+          // The store changed. Check if the snapshot changed since the last time we
+          // read from the store.
+          if (checkIfSnapshotChanged(inst)) {
+            // Force a re-render.
+            forceUpdate({
+              inst: inst
+            });
+          }
+        }; // Subscribe to the store and return a clean-up function.
+
+
+        return subscribe(handleStoreChange);
+      }, [subscribe]);
+      useDebugValue(value);
+      return value;
+    }
+
+    function checkIfSnapshotChanged(inst) {
+      var latestGetSnapshot = inst.getSnapshot;
+      var prevValue = inst.value;
+
+      try {
+        var nextValue = latestGetSnapshot();
+        return !objectIs(prevValue, nextValue);
+      } catch (error) {
+        return true;
+      }
+    }
+
+    function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
+      // Note: The shim does not use getServerSnapshot, because pre-18 versions of
+      // React do not expose a way to check if we're hydrating. So users of the shim
+      // will need to track that themselves and return the correct value
+      // from `getSnapshot`.
+      return getSnapshot();
+    }
+
+    var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+
+    var isServerEnvironment = !canUseDOM;
+
+    var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
+    var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
+
+    exports.useSyncExternalStore = useSyncExternalStore$2;
+              /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+    if (
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+      typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+        'function'
+    ) {
+      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+    }
+            
+      })();
+    }
+    });
+
+    var shim = createCommonjsModule(function (module) {
+
+    if (process.env.NODE_ENV === 'production') {
+      module.exports = useSyncExternalStoreShim_production_min;
+    } else {
+      module.exports = useSyncExternalStoreShim_development;
+    }
+    });
+
+    var GroupWrapper = /** @class */ (function (_super) {
+        __extends(GroupWrapper, _super);
+        function GroupWrapper() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        GroupWrapper.prototype.componentDidMount = function () {
+            var componentFactory = {
+                createGroupCaptionBar: this.props.onCreateGroupCaptionBarRequested,
+                updateGroupCaptionBar: this.props.onUpdateGroupCaptionBarRequested,
+                createGroupOverlay: this.props.onCreateGroupOverlayRequested,
+                createFrameCaptionBar: this.props.onCreateFrameCaptionBarRequested,
+                updateFrameCaptionBar: this.props.onUpdateFrameCaptionBarRequested,
+                createFrameWindowOverlay: this.props.onCreateFrameWindowOverlayRequested,
+                updateFrameWindowOverlay: this.props.onUpdateFrameWindowOverlayRequested,
+                createAboveWindow: this.props.onCreateAboveWindowRequested,
+                destroyAboveWindow: this.props.onRemoveAboveWindowRequested,
+                createWindowContentOverlay: this.props.onCreateWindowContentOverlayRequested,
+                destroyWindowContentOverlay: this.props.onRemoveWindowContentOverlayRequested,
+                createFrameLoadingAnimation: this.props.onCreateFrameLoadingAnimationRequested,
+                destroyFrameLoadingAnimation: this.props.onRemoveFrameLoadingAnimationRequested,
+                createBelowWindow: this.props.onCreateBelowWindowRequested,
+                destroyBelowWindow: this.props.onRemoveBelowWindowRequested,
+                createAboveTabs: this.props.onCreateAboveTabsRequested,
+                updateAboveTabs: this.props.onUpdateAboveTabsRequested,
+                createBeforeTabs: this.props.onCreateBeforeTabsComponentRequested,
+                updateBeforeTabs: this.props.onUpdateBeforeTabsComponentRequested,
+                createTab: this.props.onCreateTabRequested,
+                updateTab: this.props.onUpdateTabRequested,
+                createAfterTabs: this.props.onCreateAfterTabsComponentRequested,
+                updateAfterTabs: this.props.onUpdateAfterTabsComponentRequested,
+                createTabBarButtonsContainerElement: this.props.onCreateTabHeaderButtonsRequested,
+                createBelowTabs: this.props.onCreateBelowTabsRequested,
+                updateBelowTabs: this.props.onUpdateBelowTabsRequested,
+                updateFrame: this.props.onUpdateFrameRequested,
+                updateStandardButton: this.props.onUpdateStandardButtonRequested,
+                updateCustomButtons: this.props.onUpdateCustomButtonsRequested,
+                destroyFrameCaptionBar: this.props.onRemoveFrameCaptionBarRequested,
+                destroyFrameWindowOverlay: this.props.onRemoveFrameWindowOverlayRequested,
+                destroyAboveTabs: this.props.onRemoveAboveTabsRequested,
+                destroyBeforeTabs: this.props.onRemoveBeforeTabsComponentRequested,
+                destroyTab: this.props.onRemoveTabRequested,
+                destroyAfterTabs: this.props.onRemoveAfterTabsComponentRequested,
+                destroyTabBarButtonsContainerElement: this.props.onRemoveTabHeaderButtonsRequested,
+                destroyBelowTabs: this.props.onRemoveBelowTabsRequested,
+                showCaptionEditor: this.props.onShowCaptionEditorRequested,
+                commitCaptionEditing: this.props.onCommitCaptionEditingRequested,
+                hideCaptionEditor: this.props.onHideCaptionEditorRequested,
+                showLoadingAnimation: this.props.onShowLoadingAnimationRequested,
+                hideLoadingAnimation: this.props.onHideLoadingAnimationRequested,
+            };
+            webGroupsManager.init(undefined, componentFactory);
+        };
+        GroupWrapper.prototype.componentWillUnmount = function () {
+            // TODO
+        };
+        GroupWrapper.prototype.render = function () {
+            var _this = this;
+            return (React__default["default"].createElement("div", { id: "t42-group-container", ref: function (r) { return _this.containerRef = r; } },
+                React__default["default"].createElement("div", { id: "t42-frames-container" })));
+        };
+        return GroupWrapper;
+    }(React__default["default"].Component));
+
+    var Portal = /** @class */ (function (_super) {
+        __extends(Portal, _super);
+        function Portal() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Portal.prototype.render = function () {
+            return ReactDOM__default["default"].createPortal(this.props.children, this.props.parentElement);
+        };
+        return Portal;
+    }(React__default["default"].Component));
+
+    var WebGroupsStore = /** @class */ (function () {
+        function WebGroupsStore() {
+            var _this = this;
+            this.listeners = new Set();
+            this.state = {
+                groupCaptionBar: undefined,
+                groupOverlay: undefined,
+                frameCaptionBars: {},
+                frameWindowOverlays: {},
+                aboveWindowZones: {},
+                windowContentOverlays: {},
+                belowWindowZones: {},
+                aboveTabsZones: {},
+                beforeTabsZones: {},
+                tabElements: {},
+                afterTabsZones: {},
+                tabHeaderButtons: {},
+                belowTabsZones: {},
+                frameLoadingAnimations: {},
+            };
+            this.subscribe = function (cb) {
+                _this.listeners.add(cb);
+                return function () {
+                    _this.listeners["delete"](cb);
+                };
+            };
+            this.getSnapshot = function () {
+                return _this.state;
+            };
+            this.onCreateGroupCaptionBarRequested = function (options) {
+                if (options === _this.state.groupCaptionBar) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    return __assign(__assign({}, s), { groupCaptionBar: options });
+                });
+            };
+            this.onCreateGroupOverlayRequested = function (options) {
+                if (options === _this.state.groupOverlay) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    return __assign(__assign({}, s), { groupOverlay: options });
+                });
+            };
+            this.onCreateFrameCaptionBarRequested = function (options) {
+                if (options === _this.state.frameCaptionBars[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { frameCaptionBars: __assign(__assign({}, s.frameCaptionBars), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateFrameWindowOverlayRequested = function (options) {
+                if (options === _this.state.frameWindowOverlays[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { frameWindowOverlays: __assign(__assign({}, s.frameWindowOverlays), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateAboveWindowRequested = function (options) {
+                if (options === _this.state.aboveWindowZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { aboveWindowZones: __assign(__assign({}, s.aboveWindowZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateWindowContentOverlayRequested = function (options) {
+                if (options === _this.state.windowContentOverlays[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { windowContentOverlays: __assign(__assign({}, s.windowContentOverlays), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateFrameLoadingAnimationRequested = function (options) {
+                if (options === _this.state.frameLoadingAnimations[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { frameLoadingAnimations: __assign(__assign({}, s.frameLoadingAnimations), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateBelowWindowRequested = function (options) {
+                if (options === _this.state.belowWindowZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { belowWindowZones: __assign(__assign({}, s.belowWindowZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateAboveTabsComponentRequested = function (options) {
+                if (options === _this.state.aboveTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { aboveTabsZones: __assign(__assign({}, s.aboveTabsZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateBeforeTabsComponentRequested = function (options) {
+                if (options === _this.state.beforeTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { beforeTabsZones: __assign(__assign({}, s.beforeTabsZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateTabElementRequested = function (options) {
+                if (options === _this.state.tabElements[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var newTabElementsObj = Object.keys(s.tabElements).reduce(function (acc, targetId) {
+                        acc[targetId] = s.tabElements[targetId];
+                        return acc;
+                    }, {});
+                    newTabElementsObj[options.targetId] = options;
+                    return __assign(__assign({}, s), { tabElements: __assign(__assign({}, s.tabElements), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateAfterTabsComponentRequested = function (options) {
+                if (options === _this.state.afterTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { afterTabsZones: __assign(__assign({}, s.afterTabsZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateTabHeaderButtonsRequested = function (options) {
+                if (options === _this.state.tabHeaderButtons[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { tabHeaderButtons: __assign(__assign({}, s.tabHeaderButtons), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onCreateBelowTabsComponentRequested = function (options) {
+                if (options === _this.state.belowTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { belowTabsZones: __assign(__assign({}, s.belowTabsZones), (_a = {}, _a[options.targetId] = options, _a)) });
+                });
+            };
+            this.onUpdateGroupCaptionBarRequested = function (options) {
+                if (options === _this.state.groupCaptionBar) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    return __assign(__assign({}, s), { groupCaptionBar: Object.assign({}, s.groupCaptionBar, options) });
+                });
+            };
+            this.onUpdateFrameCaptionBarRequested = function (options) {
+                if (options === _this.state.frameCaptionBars[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { frameCaptionBars: __assign(__assign({}, s.frameCaptionBars), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.frameCaptionBars[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateFrameWindowOverlayRequested = function (options) {
+                if (options === _this.state.frameWindowOverlays[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { frameWindowOverlays: __assign(__assign({}, s.frameWindowOverlays), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.frameWindowOverlays[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateAboveTabsRequested = function (options) {
+                if (options === _this.state.aboveTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { aboveTabsZones: __assign(__assign({}, s.aboveTabsZones), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.aboveTabsZones[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateBeforeTabsRequested = function (options) {
+                if (options === _this.state.beforeTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { beforeTabsZones: __assign(__assign({}, s.beforeTabsZones), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.beforeTabsZones[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateTabElementRequested = function (options) {
+                if (options === _this.state.tabElements[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { tabElements: __assign(__assign({}, s.tabElements), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.tabElements[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateAfterTabsRequested = function (options) {
+                if (options === _this.state.afterTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { afterTabsZones: __assign(__assign({}, s.afterTabsZones), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.afterTabsZones[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateTabHeaderButtonsRequested = function (options) {
+                if (options === _this.state.tabHeaderButtons[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { tabHeaderButtons: __assign(__assign({}, s.tabHeaderButtons), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.tabHeaderButtons[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateBelowTabsRequested = function (options) {
+                if (options === _this.state.belowTabsZones[options.targetId] || !options) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    return __assign(__assign({}, s), { belowTabsZones: __assign(__assign({}, s.belowTabsZones), (_a = {}, _a[options.targetId] = __assign(__assign({}, s.belowTabsZones[options.targetId]), options), _a)) });
+                });
+            };
+            this.onUpdateFrame = function (options) {
+                _this.setState(function (s) {
+                    var newState = __assign({}, s);
+                    var updateSelectionWindow = function (stateProp, targetId, selectedWindow) {
+                        var _a;
+                        var _b;
+                        if (stateProp === "groupOverlay" || stateProp === "groupCaptionBar" || stateProp === "tabElements") {
+                            return;
+                        }
+                        if (s[stateProp][targetId] && ((_b = s[stateProp][targetId]) === null || _b === void 0 ? void 0 : _b.selectedWindow) !== selectedWindow) {
+                            newState[stateProp] = __assign(__assign({}, s[stateProp]), (_a = {}, _a[targetId] = __assign(__assign({}, s[stateProp][targetId]), { selectedWindow: selectedWindow }), _a));
+                        }
+                    };
+                    updateSelectionWindow("frameCaptionBars", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("frameWindowOverlays", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("windowContentOverlays", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("aboveWindowZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("belowWindowZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("aboveTabsZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("beforeTabsZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("afterTabsZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("tabHeaderButtons", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("belowTabsZones", options.targetId, options.selectedWindow);
+                    updateSelectionWindow("frameLoadingAnimations", options.targetId, options.selectedWindow);
+                    return newState;
+                });
+            };
+            this.onUpdateStandardButton = function (options) {
+                var _a, _b, _c;
+                var isCaptionBar = options.targetType === TargetType.Group; //this.state.groupCaptionBar?.targetId === options.targetId;
+                var isFrame = options.targetType === TargetType.Frame;
+                var isTabHeaderButtons = options.targetType === TargetType.TabBar;
+                if (isCaptionBar) {
+                    var currentState = _this.state.groupCaptionBar || { targetId: options.targetId };
+                    var newOptions = __assign(__assign({}, currentState), (_a = {}, _a[options.buttonId] = __assign({}, options), _a));
+                    _this.onUpdateGroupCaptionBarRequested(newOptions);
+                }
+                else if (isFrame && options.targetType === TargetType.Frame) {
+                    var currentState = _this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId };
+                    var newOptions = __assign(__assign({}, currentState), (_b = {}, _b[options.buttonId] = __assign({}, options), _b));
+                    _this.onUpdateFrameCaptionBarRequested(newOptions);
+                }
+                else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) {
+                    var currentState = _this.state.tabHeaderButtons[options.targetId] || { targetId: options.targetId };
+                    var newOptions = __assign(__assign({}, currentState), (_c = {}, _c[options.buttonId] = __assign({}, options), _c));
+                    _this.onUpdateTabHeaderButtonsRequested(newOptions);
+                }
+            };
+            this.onUpdateCustomButtons = function (options) {
+                var isFrame = options.targetType === TargetType.Frame;
+                var isTabHeaderButtons = options.targetType === TargetType.TabBar;
+                if (isFrame && options.targetType === TargetType.Frame) {
+                    var currentState = _this.state.frameCaptionBars[options.targetId] || { targetId: options.targetId };
+                    var newOptions = __assign(__assign({}, currentState), options);
+                    _this.onUpdateFrameCaptionBarRequested(newOptions);
+                }
+                else if (isTabHeaderButtons && options.targetType === TargetType.TabBar) {
+                    var currentState = _this.state.tabHeaderButtons.customButtons || { customButtons: options.customButtons };
+                    var newOptions = __assign(__assign({}, currentState), options);
+                    _this.onUpdateTabHeaderButtonsRequested(newOptions);
+                }
+            };
+            this.onRemoveFrameCaptionBarRequested = function (options) {
+                if (!_this.state.frameCaptionBars[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newCaptionBarsObj = Object.keys(s.frameCaptionBars).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.frameCaptionBars[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { frameCaptionBars: newCaptionBarsObj });
+                });
+            };
+            this.onRemoveFrameWindowOverlayRequested = function (options) {
+                if (!_this.state.frameWindowOverlays[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newCaptionBarsObj = Object.keys(s.frameWindowOverlays).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.frameWindowOverlays[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { frameWindowOverlays: newCaptionBarsObj });
+                });
+            };
+            this.onRemoveAboveWindowRequested = function (options) {
+                if (!_this.state.aboveWindowZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newCaptionBarsObj = Object.keys(s.aboveWindowZones).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.aboveWindowZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { aboveWindowZones: newCaptionBarsObj });
+                });
+            };
+            this.onRemoveWindowContentOverlayRequested = function (options) {
+                if (!_this.state.windowContentOverlays[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newOverlaysObj = Object.keys(s.windowContentOverlays).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.windowContentOverlays[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { windowContentOverlays: newOverlaysObj });
+                });
+            };
+            this.onRemoveFrameLoadingAnimationRequested = function (options) {
+                if (!_this.state.frameLoadingAnimations[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newLoadingAnimationObj = Object.keys(s.frameLoadingAnimations).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.frameLoadingAnimations[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { frameLoadingAnimation: newLoadingAnimationObj });
+                });
+            };
+            this.onRemoveBelowWindowRequested = function (options) {
+                if (!_this.state.belowWindowZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newCaptionBarsObj = Object.keys(s.belowWindowZones).reduce(function (acc, targetId) {
+                        if (targetId !== options.targetId) {
+                            acc[targetId] = s.belowWindowZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { belowWindowZones: newCaptionBarsObj });
+                });
+            };
+            this.onRemoveAboveTabsRequested = function (options) {
+                if (!_this.state.aboveTabsZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.aboveTabsZones).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.aboveTabsZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { aboveTabsZones: newTabElementsObj });
+                });
+            };
+            this.onRemoveBeforeTabsComponentRequested = function (options) {
+                if (!_this.state.beforeTabsZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.beforeTabsZones).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.beforeTabsZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { beforeTabsZones: newTabElementsObj });
+                });
+            };
+            this.onRemoveTabElementRequested = function (options) {
+                if (!_this.state.tabElements[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.tabElements).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.tabElements[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { tabElements: newTabElementsObj });
+                });
+            };
+            this.onRemoveAfterTabsComponentRequested = function (options) {
+                if (!_this.state.afterTabsZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.afterTabsZones).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.afterTabsZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { afterTabsZones: newTabElementsObj });
+                });
+            };
+            this.onRemoveTabHeaderButtonsRequested = function (options) {
+                if (!_this.state.tabHeaderButtons[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.tabHeaderButtons).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.tabHeaderButtons[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { tabHeaderButtons: newTabElementsObj });
+                });
+            };
+            this.onRemoveBelowTabsRequested = function (options) {
+                if (!_this.state.belowTabsZones[options.targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var newTabElementsObj = Object.keys(s.belowTabsZones).reduce(function (acc, targetId) {
+                        if (targetId != options.targetId) {
+                            acc[targetId] = s.belowTabsZones[targetId];
+                        }
+                        return acc;
+                    }, {});
+                    return __assign(__assign({}, s), { belowTabsZones: newTabElementsObj });
+                });
+            };
+            this.onShowCaptionEditorRequested = function (targetType, targetId, text) {
+                if (targetType === TargetType.Group) {
+                    _this.onShowGroupCaptionEditorRequested(targetId, text);
+                }
+                else if (targetType === TargetType.Frame) {
+                    _this.onShowFlatCaptionEditorRequested(targetId, text);
+                }
+                else if (targetType === TargetType.Tab) {
+                    _this.onShowTabCaptionEditorRequested(targetId, text);
+                }
+            };
+            this.onCommitCaptionEditingRequested = function (targetType, targetId) {
+                webGroupsManager.requestCommitCaptionEditing(targetType, targetId);
+            };
+            this.onHideCaptionEditorRequested = function (targetType, targetId) {
+                if (targetType === TargetType.Group) {
+                    _this.onHideGroupCaptionEditorRequested(targetId);
+                }
+                else if (targetType === TargetType.Frame) {
+                    _this.onHideFlatCaptionEditorRequested(targetId);
+                }
+                else if (targetType === TargetType.Tab) {
+                    _this.onHideTabCaptionEditorRequested(targetId);
+                }
+            };
+            this.onShowLoadingAnimationRequested = function (targetType, targetId) {
+                if (targetType === TargetType.Frame) {
+                    _this.onShowLoadingAnimation(targetId);
+                }
+                else {
+                    console.warn("Loading animation for elements other than Frame are not supported");
+                }
+            };
+            this.onHideLoadingAnimationRequested = function (targetType, targetId) {
+                if (targetType === TargetType.Frame) {
+                    _this.onHideLoadingAnimation(targetId);
+                }
+                else {
+                    console.warn("Loading animation for elements other than Frame are not supported");
+                }
+            };
+            this.onShowGroupCaptionEditorRequested = function (_, text) {
+                if (!_this.state.groupCaptionBar) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var captionEditor = ((_a = s.groupCaptionBar) === null || _a === void 0 ? void 0 : _a.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { groupCaptionBar: __assign(__assign({}, s.groupCaptionBar), { captionEditor: __assign(__assign({}, captionEditor), { show: true, text: text }) }) });
+                    return newState;
+                });
+            };
+            this.onHideGroupCaptionEditorRequested = function (_) {
+                if (!_this.state.groupCaptionBar) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var captionEditor = ((_a = s.groupCaptionBar) === null || _a === void 0 ? void 0 : _a.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { groupCaptionBar: __assign(__assign({}, s.groupCaptionBar), { captionEditor: __assign(__assign({}, captionEditor), { show: false }) }) });
+                    return newState;
+                });
+            };
+            this.onShowFlatCaptionEditorRequested = function (targetId, text) {
+                if (!_this.state.frameCaptionBars[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var _b;
+                    var captionEditor = ((_b = s.frameCaptionBars[targetId]) === null || _b === void 0 ? void 0 : _b.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { frameCaptionBars: __assign(__assign({}, s.frameCaptionBars), (_a = {}, _a[targetId] = __assign(__assign({}, s.frameCaptionBars[targetId]), { captionEditor: __assign(__assign({}, captionEditor), { show: true, text: text }) }), _a)) });
+                    return newState;
+                });
+            };
+            this.onHideFlatCaptionEditorRequested = function (targetId) {
+                if (!_this.state.frameCaptionBars[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var _b;
+                    var captionEditor = ((_b = s.frameCaptionBars[targetId]) === null || _b === void 0 ? void 0 : _b.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { frameCaptionBars: __assign(__assign({}, s.frameCaptionBars), (_a = {}, _a[targetId] = __assign(__assign({}, s.frameCaptionBars[targetId]), { captionEditor: __assign(__assign({}, captionEditor), { show: false }) }), _a)) });
+                    return newState;
+                });
+            };
+            this.onShowTabCaptionEditorRequested = function (targetId, text) {
+                if (!_this.state.tabElements[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var _b;
+                    var captionEditor = ((_b = s.tabElements[targetId]) === null || _b === void 0 ? void 0 : _b.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { tabElements: __assign(__assign({}, s.tabElements), (_a = {}, _a[targetId] = __assign(__assign({}, s.tabElements[targetId]), { captionEditor: __assign(__assign({}, captionEditor), { show: true, text: text }) }), _a)) });
+                    return newState;
+                });
+            };
+            this.onHideTabCaptionEditorRequested = function (targetId) {
+                if (!_this.state.tabElements[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var _b;
+                    var captionEditor = ((_b = s.tabElements[targetId]) === null || _b === void 0 ? void 0 : _b.captionEditor) || {};
+                    var newState = __assign(__assign({}, s), { tabElements: __assign(__assign({}, s.tabElements), (_a = {}, _a[targetId] = __assign(__assign({}, s.tabElements[targetId]), { captionEditor: __assign(__assign({}, captionEditor), { show: false }) }), _a)) });
+                    return newState;
+                });
+            };
+            this.onShowLoadingAnimation = function (targetId) {
+                if (!_this.state.frameLoadingAnimations[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var newState = __assign(__assign({}, s), { frameLoadingAnimations: __assign(__assign({}, s.frameLoadingAnimations), (_a = {}, _a[targetId] = __assign(__assign({}, s.frameLoadingAnimations[targetId]), { show: true }), _a)) });
+                    return newState;
+                });
+            };
+            this.onHideLoadingAnimation = function (targetId) {
+                if (!_this.state.frameLoadingAnimations[targetId]) {
+                    return;
+                }
+                _this.setState(function (s) {
+                    var _a;
+                    var newState = __assign(__assign({}, s), { frameLoadingAnimations: __assign(__assign({}, s.frameLoadingAnimations), (_a = {}, _a[targetId] = __assign(__assign({}, s.frameLoadingAnimations[targetId]), { show: false }), _a)) });
+                    return newState;
+                });
+            };
+            this.setState = function (cb) {
+                _this.state = cb(_this.state);
+                _this.listeners.forEach(function (l) { return l(); });
+            };
+        }
+        return WebGroupsStore;
+    }());
+    var webGroupsStore = new WebGroupsStore();
+
+    var GroupElementCreationWrapper = function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        var components = _a.components;
+        var state = shim.useSyncExternalStore(webGroupsStore.subscribe, webGroupsStore.getSnapshot);
+        var renderGroupCaptionBar = function () {
+            var _a;
+            var GroupCaptionBarCustomElement = (_a = components === null || components === void 0 ? void 0 : components.group) === null || _a === void 0 ? void 0 : _a.CaptionBar;
+            if (!GroupCaptionBarCustomElement || (!state.groupCaptionBar || !state.groupCaptionBar.parentElement)) {
+                return;
+            }
+            var _b = state.groupCaptionBar, parentElement = _b.parentElement, options = __rest(_b, ["parentElement"]);
+            var minimize = __assign({ onClick: function () {
+                    webGroupsManager.minimizeGroup(options.targetId);
+                } }, options.minimize);
+            var restore = __assign({ onClick: function () {
+                    webGroupsManager.restoreGroup(options.targetId);
+                } }, options.restore);
+            var maximize = __assign({ onClick: function () {
+                    webGroupsManager.maximizeGroup(options.targetId);
+                } }, options.maximize);
+            var close = __assign({ onClick: function () {
+                    webGroupsManager.closeGroup(options.targetId);
+                } }, options.close);
+            var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
+                    webGroupsManager.commitCaptionEditing(TargetType.Group, options.targetId, text);
+                }, hideEditor: function () {
+                    webGroupsStore.onHideCaptionEditorRequested(TargetType.Group, options.targetId);
+                }, notifyBoundsChanged: function (bounds) {
+                    webGroupsManager.onCaptionEditorBoundsChanged(TargetType.Group, options.targetId, bounds);
+                }, notifyEditorVisibilityChanged: function (visible) {
+                    webGroupsManager.onCaptionEditorVisibleChanged(TargetType.Group, options.targetId, visible);
+                } });
+            var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Group, options.targetId, bounds); };
+            return (React__default["default"].createElement(Portal, { parentElement: parentElement },
+                React__default["default"].createElement(GroupCaptionBarCustomElement, __assign({}, options, { minimize: minimize, maximize: maximize, restore: restore, close: close, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged }))));
+        };
+        var renderGroupOverlay = function () {
+            var _a;
+            var GroupOverlayCustomElement = (_a = components === null || components === void 0 ? void 0 : components.group) === null || _a === void 0 ? void 0 : _a.Overlay;
+            if (!GroupOverlayCustomElement || (!state.groupOverlay || !state.groupOverlay.parentElement)) {
+                return;
+            }
+            var _b = state.groupOverlay, parentElement = _b.parentElement, options = __rest(_b, ["parentElement"]);
+            return React__default["default"].createElement(Portal, { parentElement: parentElement },
+                React__default["default"].createElement(GroupOverlayCustomElement, __assign({}, options)));
+        };
+        var renderFrameCaptionBar = function () {
+            var _a;
+            var FrameCaptionBarCustomElement = (_a = components === null || components === void 0 ? void 0 : components.flat) === null || _a === void 0 ? void 0 : _a.CaptionBar;
+            return Object.values(state.frameCaptionBars).map(function (fcb) {
+                if (!FrameCaptionBarCustomElement || !fcb.parentElement) {
+                    return;
+                }
+                var parentElement = fcb.parentElement, options = __rest(fcb, ["parentElement"]);
+                var feedback = __assign({ onClick: function () {
+                        webGroupsManager.feedbackFrame(options.targetId);
+                    } }, options.feedback);
+                var sticky = __assign({ onClick: function () {
+                        webGroupsManager.stickyFrame(options.targetId);
+                    } }, options.sticky);
+                var extract = __assign({ onClick: function () {
+                        webGroupsManager.extractFrame(options.targetId);
+                    } }, options.extract);
+                var lock = __assign({ onClick: function () {
+                        webGroupsManager.lockFrame(options.targetId);
+                    } }, options.lock);
+                var unlock = __assign({ onClick: function () {
+                        webGroupsManager.unlockFrame(options.targetId);
+                    } }, options.unlock);
+                var minimize = __assign({ onClick: function () {
+                        webGroupsManager.minimizeFrame(options.targetId);
+                    } }, options.minimize);
+                var restore = __assign({ onClick: function () {
+                        webGroupsManager.restoreFrame(options.targetId);
+                    } }, options.restore);
+                var maximize = __assign({ onClick: function () {
+                        webGroupsManager.maximizeFrame(options.targetId);
+                    } }, options.maximize);
+                var close = __assign({ onClick: function () {
+                        webGroupsManager.closeFrame(options.targetId);
+                    } }, options.close);
+                var customButtonsProps = new Array();
+                if (options.customButtons) {
+                    customButtonsProps = options.customButtons.map(function (cButton) {
+                        return {
+                            onClick: function () {
+                                webGroupsManager.clickCustomButton(options.targetId, cButton.buttonId);
+                            },
+                            visible: true,
+                            imageData: cButton.imageData,
+                            tooltip: cButton.tooltip,
+                            buttonId: cButton.buttonId
+                        };
+                    });
+                }
+                var showSelector = function (bounds) {
+                    webGroupsManager.onFrameChannelSelectorClick(options.targetId, bounds);
+                };
+                var channels = {
+                    showSelector: showSelector,
+                    visible: options.channelSelectorVisible,
+                    selectedChannel: options.selectedChannel,
+                    selectedChannelColor: options.selectedChannelColor
+                };
+                var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
+                        webGroupsManager.commitCaptionEditing(TargetType.Frame, options.targetId, text);
+                    }, hideEditor: function () {
+                        webGroupsStore.onHideCaptionEditorRequested(TargetType.Frame, options.targetId);
+                    }, notifyBoundsChanged: function (bounds) {
+                        webGroupsManager.onCaptionEditorBoundsChanged(TargetType.Frame, options.targetId, bounds);
+                    }, notifyEditorVisibilityChanged: function (visible) {
+                        webGroupsManager.onCaptionEditorVisibleChanged(TargetType.Frame, options.targetId, visible);
+                    } });
+                var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Frame, options.targetId, bounds); };
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(FrameCaptionBarCustomElement, __assign({}, options, { feedback: feedback, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, channels: channels, customButtons: customButtonsProps, frameId: options.targetId, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged })));
+            });
+        };
+        var renderFrameWindowOverlay = function () {
+            var _a;
+            var FrameWindowOverlayCustomElement = (_a = components === null || components === void 0 ? void 0 : components.frame) === null || _a === void 0 ? void 0 : _a.Overlay;
+            return Object.values(state.frameWindowOverlays).map(function (fcb) {
+                if (!FrameWindowOverlayCustomElement || !fcb.parentElement) {
+                    return;
+                }
+                var parentElement = fcb.parentElement, options = __rest(fcb, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(FrameWindowOverlayCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderAboveWindow = function () {
+            var _a;
+            var AboveWindowCustomElement = (_a = components === null || components === void 0 ? void 0 : components.frame) === null || _a === void 0 ? void 0 : _a.AboveWindow;
+            return Object.values(state.aboveWindowZones).map(function (awz) {
+                if (!AboveWindowCustomElement || !awz.parentElement) {
+                    return;
+                }
+                var parentElement = awz.parentElement, options = __rest(awz, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(AboveWindowCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderWindowContentOverlays = function () {
+            var _a;
+            var WindowContentCustomElement = (_a = components === null || components === void 0 ? void 0 : components.frame) === null || _a === void 0 ? void 0 : _a.WindowContentOverlay;
+            return Object.values(state.windowContentOverlays).map(function (wco) {
+                if (!WindowContentCustomElement || !wco.parentElement) {
+                    return;
+                }
+                var parentElement = wco.parentElement, options = __rest(wco, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(WindowContentCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderFrameLoadingAnimations = function () {
+            var _a;
+            var LoadingAnimationCustomElement = (_a = components === null || components === void 0 ? void 0 : components.frame) === null || _a === void 0 ? void 0 : _a.LoadingAnimation;
+            return Object.values(state.frameLoadingAnimations).map(function (wla) {
+                if (!LoadingAnimationCustomElement || !wla.parentElement) {
+                    return;
+                }
+                var parentElement = wla.parentElement, options = __rest(wla, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(LoadingAnimationCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderBelowWindow = function () {
+            var _a;
+            var BelowWindowCustomElement = (_a = components === null || components === void 0 ? void 0 : components.frame) === null || _a === void 0 ? void 0 : _a.BelowWindow;
+            return Object.values(state.belowWindowZones).map(function (bwz) {
+                if (!BelowWindowCustomElement || !bwz.parentElement) {
+                    return;
+                }
+                var parentElement = bwz.parentElement, options = __rest(bwz, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(BelowWindowCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderAboveTabs = function () {
+            var _a;
+            var AboveTabsCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Above;
+            return Object.values(state.aboveTabsZones).map(function (te) {
+                if (!AboveTabsCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(AboveTabsCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderBeforeTabsZones = function () {
+            var _a;
+            var BeforeTabsCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Before;
+            return Object.values(state.beforeTabsZones).map(function (te) {
+                if (!BeforeTabsCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(BeforeTabsCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderTabElements = function () {
+            var _a;
+            var TabCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Element;
+            return Object.values(state.tabElements).map(function (te) {
+                var _a;
+                if (!TabCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                var onCloseClick = function () {
+                    webGroupsManager.closeTab(options.targetId);
+                };
+                var showSelector = function (bounds) {
+                    webGroupsManager.onTabChannelSelectorClick(options.targetId, bounds);
+                };
+                var channels = {
+                    showSelector: showSelector,
+                    visible: options.channelSelectorVisible,
+                    selectedChannel: options.selectedChannel,
+                    selectedChannelColor: (_a = options.selectedChannelColor) !== null && _a !== void 0 ? _a : options.selectedChannel // TODO remove the null check when the variable has been added
+                };
+                var captionEditor = __assign(__assign({}, options.captionEditor), { commitChanges: function (text) {
+                        webGroupsManager.commitCaptionEditing(TargetType.Tab, options.targetId, text);
+                    }, hideEditor: function () {
+                        webGroupsStore.onHideCaptionEditorRequested(TargetType.Tab, options.targetId);
+                    }, notifyBoundsChanged: function (bounds) {
+                        webGroupsManager.onCaptionEditorBoundsChanged(TargetType.Tab, options.targetId, bounds);
+                    }, notifyEditorVisibilityChanged: function (visible) {
+                        webGroupsManager.onCaptionEditorVisibleChanged(TargetType.Tab, options.targetId, visible);
+                    } });
+                var notifyCaptionBoundsChanged = function (bounds) { return webGroupsManager.onCaptionTextBoundsChanged(TargetType.Tab, options.targetId, bounds); };
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(TabCustomElement, __assign({}, options, { close: onCloseClick, channels: channels, windowId: options.targetId, captionEditor: captionEditor, notifyCaptionBoundsChanged: notifyCaptionBoundsChanged })));
+            });
+        };
+        var renderAfterTabsZones = function () {
+            var _a;
+            var AfterTabsCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.After;
+            return Object.values(state.afterTabsZones).map(function (te) {
+                if (!AfterTabsCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(AfterTabsCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        var renderTabHeaderButtons = function () {
+            var _a;
+            var TabButtonsCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Buttons;
+            return Object.values(state.tabHeaderButtons).map(function (te) {
+                if (!TabButtonsCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                var feedback = __assign({ onClick: function () {
+                        webGroupsManager.feedbackTabBar(options.targetId);
+                    } }, options.feedback);
+                var sticky = __assign({ onClick: function () {
+                        webGroupsManager.stickyTabBar(options.targetId);
+                    } }, options.sticky);
+                var extract = __assign({ onClick: function () {
+                        webGroupsManager.extractTabBar(options.targetId);
+                    } }, options.extract);
+                var lock = __assign({ onClick: function () {
+                        webGroupsManager.lockTabBar(options.targetId);
+                    } }, options.lock);
+                var unlock = __assign({ onClick: function () {
+                        webGroupsManager.unlockTabBar(options.targetId);
+                    } }, options.unlock);
+                var minimize = __assign({ onClick: function () {
+                        webGroupsManager.minimizeTabBar(options.targetId);
+                    } }, options.minimize);
+                var restore = __assign({ onClick: function () {
+                        webGroupsManager.restoreTabBar(options.targetId);
+                    } }, options.restore);
+                var maximize = __assign({ onClick: function () {
+                        webGroupsManager.maximizeTabBar(options.targetId);
+                    } }, options.maximize);
+                var close = __assign({ onClick: function () {
+                        webGroupsManager.closeTabBar(options.targetId);
+                    } }, options.close);
+                var customButtonsProps = new Array();
+                if (options.customButtons) {
+                    customButtonsProps = options.customButtons.map(function (cButton) {
+                        return {
+                            onClick: function () {
+                                webGroupsManager.clickCustomButton(options.targetId, cButton.buttonId);
+                            },
+                            visible: true,
+                            imageData: cButton.imageData,
+                            tooltip: cButton.tooltip,
+                            buttonId: cButton.buttonId
+                        };
+                    });
+                }
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(TabButtonsCustomElement, __assign({}, options, { feedback: feedback, sticky: sticky, extract: extract, lock: lock, unlock: unlock, minimize: minimize, maximize: maximize, restore: restore, close: close, customButtons: customButtonsProps, frameId: options.targetId })));
+            });
+        };
+        var renderBelowTabs = function () {
+            var _a;
+            var BelowTabsCustomElement = (_a = components === null || components === void 0 ? void 0 : components.tabs) === null || _a === void 0 ? void 0 : _a.Below;
+            return Object.values(state.belowTabsZones).map(function (te) {
+                if (!BelowTabsCustomElement || !te.parentElement) {
+                    return;
+                }
+                var parentElement = te.parentElement, options = __rest(te, ["parentElement"]);
+                return React__default["default"].createElement(Portal, { key: options.targetId, parentElement: parentElement },
+                    React__default["default"].createElement(BelowTabsCustomElement, __assign({}, options, { frameId: options.targetId })));
+            });
+        };
+        return React__default["default"].createElement(React__default["default"].Fragment, null,
+            renderGroupCaptionBar(),
+            renderGroupOverlay(),
+            renderFrameCaptionBar(),
+            renderFrameWindowOverlay(),
+            renderAboveWindow(),
+            renderWindowContentOverlays(),
+            renderFrameLoadingAnimations(),
+            renderBelowWindow(),
+            renderAboveTabs(),
+            renderBeforeTabsZones(),
+            renderTabElements(),
+            renderAfterTabsZones(),
+            renderTabHeaderButtons(),
+            renderBelowTabs(),
+            React__default["default"].createElement(GroupWrapper, { onCreateGroupCaptionBarRequested: ((_b = components === null || components === void 0 ? void 0 : components.group) === null || _b === void 0 ? void 0 : _b.CaptionBar) ? webGroupsStore.onCreateGroupCaptionBarRequested : undefined, onCreateGroupOverlayRequested: ((_c = components === null || components === void 0 ? void 0 : components.group) === null || _c === void 0 ? void 0 : _c.Overlay) ? webGroupsStore.onCreateGroupOverlayRequested : undefined, onCreateFrameCaptionBarRequested: ((_d = components === null || components === void 0 ? void 0 : components.flat) === null || _d === void 0 ? void 0 : _d.CaptionBar) ? webGroupsStore.onCreateFrameCaptionBarRequested : undefined, onCreateFrameWindowOverlayRequested: ((_e = components === null || components === void 0 ? void 0 : components.frame) === null || _e === void 0 ? void 0 : _e.Overlay) ? webGroupsStore.onCreateFrameWindowOverlayRequested : undefined, onCreateAboveWindowRequested: ((_f = components === null || components === void 0 ? void 0 : components.frame) === null || _f === void 0 ? void 0 : _f.AboveWindow) ? webGroupsStore.onCreateAboveWindowRequested : undefined, onCreateWindowContentOverlayRequested: ((_g = components === null || components === void 0 ? void 0 : components.frame) === null || _g === void 0 ? void 0 : _g.WindowContentOverlay) ? webGroupsStore.onCreateWindowContentOverlayRequested : undefined, onCreateFrameLoadingAnimationRequested: ((_h = components === null || components === void 0 ? void 0 : components.frame) === null || _h === void 0 ? void 0 : _h.LoadingAnimation) ? webGroupsStore.onCreateFrameLoadingAnimationRequested : undefined, onCreateBelowWindowRequested: ((_j = components === null || components === void 0 ? void 0 : components.frame) === null || _j === void 0 ? void 0 : _j.BelowWindow) ? webGroupsStore.onCreateBelowWindowRequested : undefined, onCreateAboveTabsRequested: ((_k = components === null || components === void 0 ? void 0 : components.tabs) === null || _k === void 0 ? void 0 : _k.Above) ? webGroupsStore.onCreateAboveTabsComponentRequested : undefined, onCreateBeforeTabsComponentRequested: ((_l = components === null || components === void 0 ? void 0 : components.tabs) === null || _l === void 0 ? void 0 : _l.Before) ? webGroupsStore.onCreateBeforeTabsComponentRequested : undefined, onCreateTabRequested: ((_m = components === null || components === void 0 ? void 0 : components.tabs) === null || _m === void 0 ? void 0 : _m.Element) ? webGroupsStore.onCreateTabElementRequested : undefined, onCreateAfterTabsComponentRequested: ((_o = components === null || components === void 0 ? void 0 : components.tabs) === null || _o === void 0 ? void 0 : _o.After) ? webGroupsStore.onCreateAfterTabsComponentRequested : undefined, onCreateTabHeaderButtonsRequested: ((_p = components === null || components === void 0 ? void 0 : components.tabs) === null || _p === void 0 ? void 0 : _p.Buttons) ? webGroupsStore.onCreateTabHeaderButtonsRequested : undefined, onCreateBelowTabsRequested: ((_q = components === null || components === void 0 ? void 0 : components.tabs) === null || _q === void 0 ? void 0 : _q.Below) ? webGroupsStore.onCreateBelowTabsComponentRequested : undefined, onUpdateGroupCaptionBarRequested: ((_r = components === null || components === void 0 ? void 0 : components.group) === null || _r === void 0 ? void 0 : _r.CaptionBar) ? webGroupsStore.onUpdateGroupCaptionBarRequested : undefined, onUpdateFrameWindowOverlayRequested: ((_s = components === null || components === void 0 ? void 0 : components.group) === null || _s === void 0 ? void 0 : _s.Overlay) ? webGroupsStore.onUpdateFrameWindowOverlayRequested : undefined, onUpdateFrameCaptionBarRequested: ((_t = components === null || components === void 0 ? void 0 : components.flat) === null || _t === void 0 ? void 0 : _t.CaptionBar) ? webGroupsStore.onUpdateFrameCaptionBarRequested : undefined, onUpdateFrameRequested: webGroupsStore.onUpdateFrame, onUpdateStandardButtonRequested: webGroupsStore.onUpdateStandardButton, onUpdateCustomButtonsRequested: webGroupsStore.onUpdateCustomButtons, onUpdateAboveTabsRequested: ((_u = components === null || components === void 0 ? void 0 : components.tabs) === null || _u === void 0 ? void 0 : _u.Above) ? webGroupsStore.onUpdateAboveTabsRequested : undefined, onUpdateBeforeTabsComponentRequested: ((_v = components === null || components === void 0 ? void 0 : components.tabs) === null || _v === void 0 ? void 0 : _v.Before) ? webGroupsStore.onUpdateBeforeTabsRequested : undefined, onUpdateTabRequested: ((_w = components === null || components === void 0 ? void 0 : components.tabs) === null || _w === void 0 ? void 0 : _w.Element) ? webGroupsStore.onUpdateTabElementRequested : undefined, onUpdateAfterTabsComponentRequested: ((_x = components === null || components === void 0 ? void 0 : components.tabs) === null || _x === void 0 ? void 0 : _x.After) ? webGroupsStore.onUpdateAfterTabsRequested : undefined, onUpdateBelowTabsRequested: ((_y = components === null || components === void 0 ? void 0 : components.tabs) === null || _y === void 0 ? void 0 : _y.Below) ? webGroupsStore.onUpdateBelowTabsRequested : undefined, onRemoveFrameCaptionBarRequested: webGroupsStore.onRemoveFrameCaptionBarRequested, onRemoveFrameWindowOverlayRequested: webGroupsStore.onRemoveFrameWindowOverlayRequested, onRemoveAboveWindowRequested: webGroupsStore.onRemoveAboveWindowRequested, onRemoveWindowContentOverlayRequested: webGroupsStore.onRemoveWindowContentOverlayRequested, onRemoveFrameLoadingAnimationRequested: webGroupsStore.onRemoveFrameLoadingAnimationRequested, onRemoveBelowWindowRequested: webGroupsStore.onRemoveBelowWindowRequested, onRemoveAboveTabsRequested: webGroupsStore.onRemoveAboveTabsRequested, onRemoveBeforeTabsComponentRequested: webGroupsStore.onRemoveBeforeTabsComponentRequested, onRemoveTabRequested: webGroupsStore.onRemoveTabElementRequested, onRemoveAfterTabsComponentRequested: webGroupsStore.onRemoveAfterTabsComponentRequested, onRemoveTabHeaderButtonsRequested: webGroupsStore.onRemoveTabHeaderButtonsRequested, onRemoveBelowTabsRequested: webGroupsStore.onRemoveBelowTabsRequested, onShowCaptionEditorRequested: webGroupsStore.onShowCaptionEditorRequested, onCommitCaptionEditingRequested: webGroupsStore.onCommitCaptionEditingRequested, onHideCaptionEditorRequested: webGroupsStore.onHideCaptionEditorRequested, onShowLoadingAnimationRequested: webGroupsStore.onShowLoadingAnimationRequested, onHideLoadingAnimationRequested: webGroupsStore.onHideLoadingAnimationRequested }));
+    };
+
+    function useIOConnectWindow(windowId) {
+        var _a = React.useState(undefined), IOConnectWindow = _a[0], setIOConnectWindow = _a[1];
+        var io = window.io || React.useContext(reactHooks.IOConnectContext);
+        React.useEffect(function () {
+            var unsub = io.windows.onWindowAdded(function (w) {
+                if (w.id === windowId) {
+                    setIOConnectWindow(w);
+                    unsub();
+                }
+            });
+            var windowInCollection = io.windows.list().find(function (w) { return w.id === windowId; });
+            if (windowInCollection) {
+                setIOConnectWindow(windowInCollection);
+                unsub();
+            }
+            return unsub;
+        }, [windowId]);
+        return IOConnectWindow;
+    }
+
+    function useGroupComponentVisibility() {
+        var _a;
+        var state = shim.useSyncExternalStore(webGroupsStore.subscribe, webGroupsStore.getSnapshot);
+        return {
+            groupCaptionBarVisible: (_a = state.groupCaptionBar) === null || _a === void 0 ? void 0 : _a.visible
+        };
+    }
+
+    function useCommitTabCaptionEditingRequested(targetId, text) {
+        useCommitEditingRequested(TargetType.Tab, targetId, text);
+    }
+
+    function useCommitGroupCaptionEditingRequested(targetId, text) {
+        useCommitEditingRequested(TargetType.Group, targetId, text);
+    }
+
+    function useCommitFlatCaptionEditingRequested(targetId, text) {
+        useCommitEditingRequested(TargetType.Frame, targetId, text);
+    }
+
+    var FrameLoadingAnimation = function (_a) {
+        var show = _a.show;
+        return (show ?
+            (React__default["default"].createElement("div", { className: "loader-wraper active" },
+                React__default["default"].createElement("div", { className: "loader" }),
+                React__default["default"].createElement("div", { className: "loader-text" }, "Loading..."))) : React__default["default"].createElement(React__default["default"].Fragment, null));
+    };
+
+    var getGroupId = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.getGroupId(); };
+    var requestPageFocus = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestPageFocus(); };
+    var requestFrameFocus = function (frameId) { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestFrameFocus(frameId); };
+    var requestGroupFocus = function () { return webGroupsManager === null || webGroupsManager === void 0 ? void 0 : webGroupsManager.requestGroupFocus(); };
+    var onCommitGroupCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Group, targetId, cb); };
+    var onCommitFlatCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Frame, targetId, cb); };
+    var onCommitTabCaptionEditingRequested = function (targetId, cb) { return webGroupsManager.onCommitCaptionEditingRequested(TargetType.Tab, targetId, cb); };
+
+    exports.CloseButton = CloseButton;
+    exports.CustomButton = CustomButton;
+    exports.ExtractButton = ExtractButton;
+    exports.FeedbackButton = FeedbackButton;
+    exports.FlatButtons = FlatButtons;
+    exports.FlatCaption = FlatCaption;
+    exports.FlatCaptionBar = FlatCaptionBar;
+    exports.FlatCaptionEditor = FlatCaptionEditor;
+    exports.FlatChannelSelector = FlatChannelSelector;
+    exports.FlatMoveArea = FlatMoveArea;
+    exports.FrameLoadingAnimation = FrameLoadingAnimation;
+    exports.GroupButtons = GroupButtons;
+    exports.GroupCaption = GroupCaption;
+    exports.GroupCaptionBar = GroupCaptionBar;
+    exports.GroupCaptionEditor = GroupCaptionEditor;
+    exports.GroupMoveArea = GroupMoveArea;
+    exports.LockButton = LockButton;
+    exports.MaximizeButton = MaximizeButton;
+    exports.MinimizeButton = MinimizeButton;
+    exports.RestoreButton = RestoreButton;
+    exports.StickyButton = StickyButton;
+    exports.Tab = Tab;
+    exports.TabCaption = TabCaption;
+    exports.TabCaptionEditor = TabCaptionEditor;
+    exports.TabChannelSelector = TabChannelSelector;
+    exports.TabCloseButton = TabCloseButton;
+    exports.TabHeaderButtons = TabHeaderButtons;
+    exports.UnlockButton = UnlockButton;
+    exports["default"] = GroupElementCreationWrapper;
+    exports.getGroupId = getGroupId;
+    exports.onCommitFlatCaptionEditingRequested = onCommitFlatCaptionEditingRequested;
+    exports.onCommitGroupCaptionEditingRequested = onCommitGroupCaptionEditingRequested;
+    exports.onCommitTabCaptionEditingRequested = onCommitTabCaptionEditingRequested;
+    exports.requestFrameFocus = requestFrameFocus;
+    exports.requestGroupFocus = requestGroupFocus;
+    exports.requestPageFocus = requestPageFocus;
+    exports.useCaptionEditor = useCaptionEditor;
+    exports.useCommitFlatCaptionEditingRequested = useCommitFlatCaptionEditingRequested;
+    exports.useCommitGroupCaptionEditingRequested = useCommitGroupCaptionEditingRequested;
+    exports.useCommitTabCaptionEditingRequested = useCommitTabCaptionEditingRequested;
+    exports.useEditableCaption = useEditableCaption;
+    exports.useGroupComponentVisibility = useGroupComponentVisibility;
+    exports.useIOConnectWindow = useIOConnectWindow;
+    exports.waitForWindow = waitForWindow;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
+//# sourceMappingURL=index.js.map