@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog.js

@@ -0,0 +1,74 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var KeyboardShortcutsDialog_exports = {};
+__export(KeyboardShortcutsDialog_exports, {
+  KeyboardShortcutsDialog: () => KeyboardShortcutsDialog
+});
+module.exports = __toCommonJS(KeyboardShortcutsDialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_useKeyboardShortcutsSchema = require("../hooks/useKeyboardShortcutsSchema");
+var import_useReadonly = require("../hooks/useReadonly");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var Dialog = __toESM(require("./primitives/Dialog"));
+var import_Kbd = require("./primitives/Kbd");
+const KeyboardShortcutsDialog = () => {
+  const msg = (0, import_useTranslation.useTranslation)();
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  const shortcutsItems = (0, import_useKeyboardShortcutsSchema.useKeyboardShortcutsSchema)();
+  function getKeyboardShortcutItem(item) {
+    if (!item)
+      return null;
+    if (isReadonly && !item.readonlyOk)
+      return null;
+    switch (item.type) {
+      case "group": {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-shortcuts-dialog__group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "tlui-shortcuts-dialog__group__title", children: msg(item.id) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-shortcuts-dialog__group__content", children: item.children.filter((item2) => item2 && item2.type === "item" && item2.actionItem.kbd).map(getKeyboardShortcutItem) })
+        ] }, item.id);
+      }
+      case "item": {
+        const { id, label, shortcutsLabel, kbd } = item.actionItem;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-shortcuts-dialog__key-pair", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-shortcuts-dialog__key-pair__key", children: msg(shortcutsLabel ?? label) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-shortcuts-dialog__key-pair__value", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Kbd.Kbd, { children: kbd }) })
+        ] }, id);
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog.Header, { className: "tlui-shortcuts-dialog__header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Title, { children: msg("shortcuts-dialog.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dialog.Body, { className: "tlui-shortcuts-dialog__body", children: shortcutsItems.map(getKeyboardShortcutItem) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-dialog__scrim" })
+  ] });
+};
+//# sourceMappingURL=KeyboardShortcutsDialog.js.map

package/dist-cjs/lib/ui/components/KeyboardShortcutsDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/KeyboardShortcutsDialog.tsx"],
+  "sourcesContent": ["import { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useKeyboardShortcutsSchema } from '../hooks/useKeyboardShortcutsSchema'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport * as Dialog from './primitives/Dialog'\nimport { Kbd } from './primitives/Kbd'\n\nexport const KeyboardShortcutsDialog = () => {\n\tconst msg = useTranslation()\n\tconst isReadonly = useReadonly()\n\tconst shortcutsItems = useKeyboardShortcutsSchema()\n\n\tfunction getKeyboardShortcutItem(item: TLUiMenuChild) {\n\t\tif (!item) return null\n\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\tswitch (item.type) {\n\t\t\tcase 'group': {\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__group\" key={item.id}>\n\t\t\t\t\t\t<h2 className=\"tlui-shortcuts-dialog__group__title\">\n\t\t\t\t\t\t\t{msg(item.id as TLUiTranslationKey)}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__group__content\">\n\t\t\t\t\t\t\t{item.children\n\t\t\t\t\t\t\t\t.filter((item) => item && item.type === 'item' && item.actionItem.kbd)\n\t\t\t\t\t\t\t\t.map(getKeyboardShortcutItem)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'item': {\n\t\t\t\tconst { id, label, shortcutsLabel, kbd } = item.actionItem\n\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair\" key={id}>\n\t\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__key\">\n\t\t\t\t\t\t\t{msg((shortcutsLabel ?? label)!)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"tlui-shortcuts-dialog__key-pair__value\">\n\t\t\t\t\t\t\t<Kbd>{kbd!}</Kbd>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header className=\"tlui-shortcuts-dialog__header\">\n\t\t\t\t<Dialog.Title>{msg('shortcuts-dialog.title')}</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t<Dialog.Body className=\"tlui-shortcuts-dialog__body\">\n\t\t\t\t{shortcutsItems.map(getKeyboardShortcutItem)}\n\t\t\t</Dialog.Body>\n\t\t\t<div className=\"tlui-dialog__scrim\" />\n\t\t</>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBK;AAnBL,wCAA2C;AAC3C,yBAA4B;AAE5B,4BAA+B;AAC/B,aAAwB;AACxB,iBAAoB;AAEb,MAAM,0BAA0B,MAAM;AAC5C,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,gCAAY;AAC/B,QAAM,qBAAiB,8DAA2B;AAElD,WAAS,wBAAwB,MAAqB;AACrD,QAAI,CAAC;AAAM,aAAO;AAClB,QAAI,cAAc,CAAC,KAAK;AAAY,aAAO;AAE3C,YAAQ,KAAK,MAAM;AAAA,MAClB,KAAK,SAAS;AACb,eACC,6CAAC,SAAI,WAAU,gCACd;AAAA,sDAAC,QAAG,WAAU,uCACZ,cAAI,KAAK,EAAwB,GACnC;AAAA,UACA,4CAAC,SAAI,WAAU,yCACb,eAAK,SACJ,OAAO,CAACA,UAASA,SAAQA,MAAK,SAAS,UAAUA,MAAK,WAAW,GAAG,EACpE,IAAI,uBAAuB,GAC9B;AAAA,aARkD,KAAK,EASxD;AAAA,MAEF;AAAA,MACA,KAAK,QAAQ;AACZ,cAAM,EAAE,IAAI,OAAO,gBAAgB,IAAI,IAAI,KAAK;AAEhD,eACC,6CAAC,SAAI,WAAU,mCACd;AAAA,sDAAC,SAAI,WAAU,wCACb,cAAK,kBAAkB,KAAO,GAChC;AAAA,UACA,4CAAC,SAAI,WAAU,0CACd,sDAAC,kBAAK,eAAK,GACZ;AAAA,aANqD,EAOtD;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAEA,SACC,4EACC;AAAA,iDAAC,OAAO,QAAP,EAAc,WAAU,iCACxB;AAAA,kDAAC,OAAO,OAAP,EAAc,cAAI,wBAAwB,GAAE;AAAA,MAC7C,4CAAC,OAAO,aAAP,EAAmB;AAAA,OACrB;AAAA,IACA,4CAAC,OAAO,MAAP,EAAY,WAAU,+BACrB,yBAAe,IAAI,uBAAuB,GAC5C;AAAA,IACA,4CAAC,SAAI,WAAU,sBAAqB;AAAA,KACrC;AAEF;",
+  "names": ["item"]
+}

package/dist-cjs/lib/ui/components/LanguageMenu.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LanguageMenu_exports = {};
+__export(LanguageMenu_exports, {
+  LanguageMenu: () => LanguageMenu
+});
+module.exports = __toCommonJS(LanguageMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_useLanguages = require("../hooks/useTranslation/useLanguages");
+var D = __toESM(require("./primitives/DropdownMenu"));
+function LanguageMenu() {
+  const editor = (0, import_editor.useEditor)();
+  const { languages, currentLanguage } = (0, import_useLanguages.useLanguages)();
+  const handleLanguageSelect = (0, import_react.useCallback)(
+    (locale) => editor.user.updateUserPreferences({ locale }),
+    [editor]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(D.Sub, { id: "help menu language", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(D.SubTrigger, { label: "menu.language", "data-direction": "left" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(D.SubContent, { sideOffset: -4, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(D.Group, { children: languages.map(({ locale, label }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      D.RadioItem,
+      {
+        title: locale,
+        checked: locale === currentLanguage,
+        onSelect: () => handleLanguageSelect(locale),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-button__label", children: label })
+      },
+      locale
+    )) }) })
+  ] });
+}
+//# sourceMappingURL=LanguageMenu.js.map

package/dist-cjs/lib/ui/components/LanguageMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/LanguageMenu.tsx"],
+  "sourcesContent": ["import { useEditor } from '@bigbluebutton/editor'\nimport { useCallback } from 'react'\nimport { TLUiTranslation } from '../hooks/useTranslation/translations'\nimport { useLanguages } from '../hooks/useTranslation/useLanguages'\nimport * as D from './primitives/DropdownMenu'\n\nexport function LanguageMenu() {\n\tconst editor = useEditor()\n\tconst { languages, currentLanguage } = useLanguages()\n\n\tconst handleLanguageSelect = useCallback(\n\t\t(locale: TLUiTranslation['locale']) => editor.user.updateUserPreferences({ locale }),\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<D.Sub id=\"help menu language\">\n\t\t\t<D.SubTrigger label=\"menu.language\" data-direction=\"left\" />\n\t\t\t<D.SubContent sideOffset={-4}>\n\t\t\t\t<D.Group>\n\t\t\t\t\t{languages.map(({ locale, label }) => (\n\t\t\t\t\t\t<D.RadioItem\n\t\t\t\t\t\t\tkey={locale}\n\t\t\t\t\t\t\ttitle={locale}\n\t\t\t\t\t\t\tchecked={locale === currentLanguage}\n\t\t\t\t\t\t\tonSelect={() => handleLanguageSelect(locale)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"tlui-button__label\">{label}</span>\n\t\t\t\t\t\t</D.RadioItem>\n\t\t\t\t\t))}\n\t\t\t\t</D.Group>\n\t\t\t\t{/* <DropdownMenu.Group>\n\t\t\t\t\t<Button label=\"translation-link\" icon=\"external\" />\n\t\t\t\t</DropdownMenu.Group> */}\n\t\t\t</D.SubContent>\n\t\t</D.Sub>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBE;AAhBF,oBAA0B;AAC1B,mBAA4B;AAE5B,0BAA6B;AAC7B,QAAmB;AAEZ,SAAS,eAAe;AAC9B,QAAM,aAAS,yBAAU;AACzB,QAAM,EAAE,WAAW,gBAAgB,QAAI,kCAAa;AAEpD,QAAM,2BAAuB;AAAA,IAC5B,CAAC,WAAsC,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC;AAAA,IACnF,CAAC,MAAM;AAAA,EACR;AAEA,SACC,6CAAC,EAAE,KAAF,EAAM,IAAG,sBACT;AAAA,gDAAC,EAAE,YAAF,EAAa,OAAM,iBAAgB,kBAAe,QAAO;AAAA,IAC1D,4CAAC,EAAE,YAAF,EAAa,YAAY,IACzB,sDAAC,EAAE,OAAF,EACC,oBAAU,IAAI,CAAC,EAAE,QAAQ,MAAM,MAC/B;AAAA,MAAC,EAAE;AAAA,MAAF;AAAA,QAEA,OAAO;AAAA,QACP,SAAS,WAAW;AAAA,QACpB,UAAU,MAAM,qBAAqB,MAAM;AAAA,QAE3C,sDAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA;AAAA,MALvC;AAAA,IAMN,CACA,GACF,GAID;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/Menu.js

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Menu_exports = {};
+__export(Menu_exports, {
+  Menu: () => Menu
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var React = __toESM(require("react"));
+var import_useBreakpoint = require("../hooks/useBreakpoint");
+var import_useMenuSchema = require("../hooks/useMenuSchema");
+var import_useReadonly = require("../hooks/useReadonly");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_LanguageMenu = require("./LanguageMenu");
+var import_Button = require("./primitives/Button");
+var M = __toESM(require("./primitives/DropdownMenu"));
+var import_Kbd = require("./primitives/Kbd");
+const Menu = React.memo(function Menu2() {
+  const msg = (0, import_useTranslation.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(M.Root, { id: "main menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        type: "icon",
+        className: "tlui-menu__trigger",
+        "data-testid": "main.menu",
+        title: msg("menu.title"),
+        icon: "menu",
+        smallIcon: true
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.Content, { alignOffset: 0, sideOffset: 6, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContent, {}) })
+  ] });
+});
+function MenuContent() {
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const menuSchema = (0, import_useMenuSchema.useMenuSchema)();
+  const breakpoint = (0, import_useBreakpoint.useBreakpoint)();
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  function getMenuItem(editor2, item, parent, depth) {
+    if (!item)
+      return null;
+    switch (item.type) {
+      case "custom": {
+        if (isReadonly && !item.readonlyOk)
+          return null;
+        if (item.id === "LANGUAGE_MENU") {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LanguageMenu.LanguageMenu, {}, "item");
+        }
+        return null;
+      }
+      case "group": {
+        if (isReadonly && !item.readonlyOk)
+          return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          M.Group,
+          {
+            size: depth <= 1 ? "medium" : breakpoint < 3 || parent?.type === "submenu" && depth > 2 ? "tiny" : "medium",
+            children: item.children.map((child) => getMenuItem(editor2, child, item, depth + 1))
+          },
+          item.id
+        );
+      }
+      case "submenu": {
+        if (isReadonly && !item.readonlyOk)
+          return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(M.Sub, { id: `main menu ${parent ? parent.id + " " : ""}${item.id}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.SubTrigger, { label: item.label, "data-testid": `menu-item.${item.id}` }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(M.SubContent, { sideOffset: -4, alignOffset: -1, children: item.children.map((child) => getMenuItem(editor2, child, item, depth + 1)) })
+        ] }, item.id);
+      }
+      case "item": {
+        if (isReadonly && !item.readonlyOk)
+          return null;
+        const { id, checkbox, menuLabel, label, onSelect, kbd } = item.actionItem;
+        const labelToUse = menuLabel ?? label;
+        const labelStr = labelToUse ? msg(labelToUse) : void 0;
+        if (checkbox) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            M.CheckboxItem,
+            {
+              onSelect: () => onSelect("menu"),
+              title: labelStr ? labelStr : "",
+              checked: item.checked,
+              disabled: item.disabled,
+              children: [
+                labelStr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-button__label", children: labelStr }),
+                kbd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Kbd.Kbd, { children: kbd })
+              ]
+            },
+            id
+          );
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          M.Item,
+          {
+            type: "menu",
+            "data-testid": `menu-item.${item.id}`,
+            kbd,
+            label: labelToUse,
+            onClick: () => onSelect("menu"),
+            disabled: item.disabled
+          },
+          id
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: menuSchema.map((item) => getMenuItem(editor, item, null, 0)) });
+}
+//# sourceMappingURL=Menu.js.map

package/dist-cjs/lib/ui/components/Menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/Menu.tsx"],
+  "sourcesContent": ["import { Editor, useEditor } from '@bigbluebutton/editor'\nimport * as React from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useMenuSchema } from '../hooks/useMenuSchema'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { LanguageMenu } from './LanguageMenu'\nimport { Button } from './primitives/Button'\nimport * as M from './primitives/DropdownMenu'\nimport { Kbd } from './primitives/Kbd'\n\nexport const Menu = React.memo(function Menu() {\n\tconst msg = useTranslation()\n\n\treturn (\n\t\t<M.Root id=\"main menu\">\n\t\t\t<M.Trigger>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\tclassName=\"tlui-menu__trigger\"\n\t\t\t\t\tdata-testid=\"main.menu\"\n\t\t\t\t\ttitle={msg('menu.title')}\n\t\t\t\t\ticon=\"menu\"\n\t\t\t\t\tsmallIcon\n\t\t\t\t/>\n\t\t\t</M.Trigger>\n\t\t\t<M.Content alignOffset={0} sideOffset={6}>\n\t\t\t\t<MenuContent />\n\t\t\t</M.Content>\n\t\t</M.Root>\n\t)\n})\n\nfunction MenuContent() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst menuSchema = useMenuSchema()\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonly = useReadonly()\n\n\tfunction getMenuItem(\n\t\teditor: Editor,\n\t\titem: TLUiMenuChild,\n\t\tparent: TLUiMenuChild | null,\n\t\tdepth: number\n\t) {\n\t\tif (!item) return null\n\t\tswitch (item.type) {\n\t\t\tcase 'custom': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\tif (item.id === 'LANGUAGE_MENU') {\n\t\t\t\t\treturn <LanguageMenu key=\"item\" />\n\t\t\t\t}\n\n\t\t\t\treturn null\n\t\t\t}\n\t\t\tcase 'group': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\treturn (\n\t\t\t\t\t<M.Group\n\t\t\t\t\t\tsize={\n\t\t\t\t\t\t\tdepth <= 1\n\t\t\t\t\t\t\t\t? 'medium'\n\t\t\t\t\t\t\t\t: breakpoint < 3 || (parent?.type === 'submenu' && depth > 2)\n\t\t\t\t\t\t\t\t? 'tiny'\n\t\t\t\t\t\t\t\t: 'medium'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.children.map((child) => getMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t</M.Group>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'submenu': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\treturn (\n\t\t\t\t\t<M.Sub id={`main menu ${parent ? parent.id + ' ' : ''}${item.id}`} key={item.id}>\n\t\t\t\t\t\t<M.SubTrigger label={item.label} data-testid={`menu-item.${item.id}`} />\n\t\t\t\t\t\t<M.SubContent sideOffset={-4} alignOffset={-1}>\n\t\t\t\t\t\t\t{item.children.map((child) => getMenuItem(editor, child, item, depth + 1))}\n\t\t\t\t\t\t</M.SubContent>\n\t\t\t\t\t</M.Sub>\n\t\t\t\t)\n\t\t\t}\n\t\t\tcase 'item': {\n\t\t\t\tif (isReadonly && !item.readonlyOk) return null\n\n\t\t\t\tconst { id, checkbox, menuLabel, label, onSelect, kbd } = item.actionItem\n\t\t\t\tconst labelToUse = menuLabel ?? label\n\t\t\t\tconst labelStr = labelToUse ? msg(labelToUse) : undefined\n\n\t\t\t\tif (checkbox) {\n\t\t\t\t\t// Item is in a checkbox group\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<M.CheckboxItem\n\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\tonSelect={() => onSelect('menu')}\n\t\t\t\t\t\t\ttitle={labelStr ? labelStr : ''}\n\t\t\t\t\t\t\tchecked={item.checked}\n\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{labelStr && <span className=\"tlui-button__label\">{labelStr}</span>}\n\t\t\t\t\t\t\t{kbd && <Kbd>{kbd}</Kbd>}\n\t\t\t\t\t\t</M.CheckboxItem>\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\t// Item is a button\n\t\t\t\treturn (\n\t\t\t\t\t<M.Item\n\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\tdata-testid={`menu-item.${item.id}`}\n\t\t\t\t\t\tkbd={kbd}\n\t\t\t\t\t\tlabel={labelToUse}\n\t\t\t\t\t\tonClick={() => onSelect('menu')}\n\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t/>\n\t\t\t\t)\n\t\t\t}\n\t\t}\n\t}\n\n\treturn <>{menuSchema.map((item) => getMenuItem(editor, item, null, 0))}</>\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBE;AAhBF,oBAAkC;AAClC,YAAuB;AAEvB,2BAA8B;AAC9B,2BAA8B;AAC9B,yBAA4B;AAC5B,4BAA+B;AAC/B,0BAA6B;AAC7B,oBAAuB;AACvB,QAAmB;AACnB,iBAAoB;AAEb,MAAM,OAAO,MAAM,KAAK,SAASA,QAAO;AAC9C,QAAM,UAAM,sCAAe;AAE3B,SACC,6CAAC,EAAE,MAAF,EAAO,IAAG,aACV;AAAA,gDAAC,EAAE,SAAF,EACA;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAO,IAAI,YAAY;AAAA,QACvB,MAAK;AAAA,QACL,WAAS;AAAA;AAAA,IACV,GACD;AAAA,IACA,4CAAC,EAAE,SAAF,EAAU,aAAa,GAAG,YAAY,GACtC,sDAAC,eAAY,GACd;AAAA,KACD;AAEF,CAAC;AAED,SAAS,cAAc;AACtB,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAC3B,QAAM,iBAAa,oCAAc;AACjC,QAAM,iBAAa,oCAAc;AACjC,QAAM,iBAAa,gCAAY;AAE/B,WAAS,YACRC,SACA,MACA,QACA,OACC;AACD,QAAI,CAAC;AAAM,aAAO;AAClB,YAAQ,KAAK,MAAM;AAAA,MAClB,KAAK,UAAU;AACd,YAAI,cAAc,CAAC,KAAK;AAAY,iBAAO;AAE3C,YAAI,KAAK,OAAO,iBAAiB;AAChC,iBAAO,4CAAC,sCAAiB,MAAO;AAAA,QACjC;AAEA,eAAO;AAAA,MACR;AAAA,MACA,KAAK,SAAS;AACb,YAAI,cAAc,CAAC,KAAK;AAAY,iBAAO;AAE3C,eACC;AAAA,UAAC,EAAE;AAAA,UAAF;AAAA,YACA,MACC,SAAS,IACN,WACA,aAAa,KAAM,QAAQ,SAAS,aAAa,QAAQ,IACzD,SACA;AAAA,YAIH,eAAK,SAAS,IAAI,CAAC,UAAU,YAAYA,SAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC;AAAA;AAAA,UAFpE,KAAK;AAAA,QAGX;AAAA,MAEF;AAAA,MACA,KAAK,WAAW;AACf,YAAI,cAAc,CAAC,KAAK;AAAY,iBAAO;AAE3C,eACC,6CAAC,EAAE,KAAF,EAAM,IAAI,aAAa,SAAS,OAAO,KAAK,MAAM,EAAE,GAAG,KAAK,EAAE,IAC9D;AAAA,sDAAC,EAAE,YAAF,EAAa,OAAO,KAAK,OAAO,eAAa,aAAa,KAAK,EAAE,IAAI;AAAA,UACtE,4CAAC,EAAE,YAAF,EAAa,YAAY,IAAI,aAAa,IACzC,eAAK,SAAS,IAAI,CAAC,UAAU,YAAYA,SAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC,GAC1E;AAAA,aAJuE,KAAK,EAK7E;AAAA,MAEF;AAAA,MACA,KAAK,QAAQ;AACZ,YAAI,cAAc,CAAC,KAAK;AAAY,iBAAO;AAE3C,cAAM,EAAE,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,IAAI,KAAK;AAC/D,cAAM,aAAa,aAAa;AAChC,cAAM,WAAW,aAAa,IAAI,UAAU,IAAI;AAEhD,YAAI,UAAU;AAEb,iBACC;AAAA,YAAC,EAAE;AAAA,YAAF;AAAA,cAEA,UAAU,MAAM,SAAS,MAAM;AAAA,cAC/B,OAAO,WAAW,WAAW;AAAA,cAC7B,SAAS,KAAK;AAAA,cACd,UAAU,KAAK;AAAA,cAEd;AAAA,4BAAY,4CAAC,UAAK,WAAU,sBAAsB,oBAAS;AAAA,gBAC3D,OAAO,4CAAC,kBAAK,eAAI;AAAA;AAAA;AAAA,YAPb;AAAA,UAQN;AAAA,QAEF;AAGA,eACC;AAAA,UAAC,EAAE;AAAA,UAAF;AAAA,YACA,MAAK;AAAA,YAEL,eAAa,aAAa,KAAK,EAAE;AAAA,YACjC;AAAA,YACA,OAAO;AAAA,YACP,SAAS,MAAM,SAAS,MAAM;AAAA,YAC9B,UAAU,KAAK;AAAA;AAAA,UALV;AAAA,QAMN;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAEA,SAAO,2EAAG,qBAAW,IAAI,CAAC,SAAS,YAAY,QAAQ,MAAM,MAAM,CAAC,CAAC,GAAE;AACxE;",
+  "names": ["Menu", "editor"]
+}

package/dist-cjs/lib/ui/components/MenuZone.js

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MenuZone_exports = {};
+__export(MenuZone_exports, {
+  MenuZone: () => MenuZone
+});
+module.exports = __toCommonJS(MenuZone_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_useBreakpoint = require("../hooks/useBreakpoint");
+var import_useReadonly = require("../hooks/useReadonly");
+var import_ActionsMenu = require("./ActionsMenu");
+var import_DuplicateButton = require("./DuplicateButton");
+var import_Menu = require("./Menu");
+var import_PageMenu = require("./PageMenu/PageMenu");
+var import_RedoButton = require("./RedoButton");
+var import_TrashButton = require("./TrashButton");
+var import_UndoButton = require("./UndoButton");
+const MenuZone = (0, import_editor.track)(function MenuZone2() {
+  const editor = (0, import_editor.useEditor)();
+  const breakpoint = (0, import_useBreakpoint.useBreakpoint)();
+  const isReadonly = (0, import_useReadonly.useReadonly)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tlui-buttons__horizontal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Menu.Menu, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PageMenu.PageMenu, {}),
+    breakpoint >= 6 && !isReadonly && !editor.isInAny("hand", "zoom") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_UndoButton.UndoButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RedoButton.RedoButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TrashButton.TrashButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DuplicateButton.DuplicateButton, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ActionsMenu.ActionsMenu, {})
+    ] })
+  ] }) });
+});
+//# sourceMappingURL=MenuZone.js.map

package/dist-cjs/lib/ui/components/MenuZone.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/MenuZone.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useBreakpoint } from '../hooks/useBreakpoint'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { ActionsMenu } from './ActionsMenu'\nimport { DuplicateButton } from './DuplicateButton'\nimport { Menu } from './Menu'\nimport { PageMenu } from './PageMenu/PageMenu'\nimport { RedoButton } from './RedoButton'\nimport { TrashButton } from './TrashButton'\nimport { UndoButton } from './UndoButton'\n\nexport const MenuZone = track(function MenuZone() {\n\tconst editor = useEditor()\n\n\tconst breakpoint = useBreakpoint()\n\tconst isReadonly = useReadonly()\n\n\treturn (\n\t\t<div className=\"tlui-menu-zone\">\n\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t<Menu />\n\t\t\t\t<PageMenu />\n\t\t\t\t{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<UndoButton />\n\t\t\t\t\t\t<RedoButton />\n\t\t\t\t\t\t<TrashButton />\n\t\t\t\t\t\t<DuplicateButton />\n\t\t\t\t\t\t<ActionsMenu />\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBI;AApBJ,oBAAiC;AACjC,2BAA8B;AAC9B,yBAA4B;AAC5B,yBAA4B;AAC5B,6BAAgC;AAChC,kBAAqB;AACrB,sBAAyB;AACzB,wBAA2B;AAC3B,yBAA4B;AAC5B,wBAA2B;AAEpB,MAAM,eAAW,qBAAM,SAASA,YAAW;AACjD,QAAM,aAAS,yBAAU;AAEzB,QAAM,iBAAa,oCAAc;AACjC,QAAM,iBAAa,gCAAY;AAE/B,SACC,4CAAC,SAAI,WAAU,kBACd,uDAAC,SAAI,WAAU,4BACd;AAAA,gDAAC,oBAAK;AAAA,IACN,4CAAC,4BAAS;AAAA,IACT,cAAc,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,QAAQ,MAAM,KAChE,4EACC;AAAA,kDAAC,gCAAW;AAAA,MACZ,4CAAC,gCAAW;AAAA,MACZ,4CAAC,kCAAY;AAAA,MACb,4CAAC,0CAAgB;AAAA,MACjB,4CAAC,kCAAY;AAAA,OACd;AAAA,KAEF,GACD;AAEF,CAAC;",
+  "names": ["MenuZone"]
+}

package/dist-cjs/lib/ui/components/MobileStylePanel.js

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MobileStylePanel_exports = {};
+__export(MobileStylePanel_exports, {
+  MobileStylePanel: () => MobileStylePanel
+});
+module.exports = __toCommonJS(MobileStylePanel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var import_react = require("react");
+var import_useRevelantStyles = require("../hooks/useRevelantStyles");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_StylePanel = require("./StylePanel/StylePanel");
+var import_Button = require("./primitives/Button");
+var import_Icon = require("./primitives/Icon");
+var import_Popover = require("./primitives/Popover");
+function MobileStylePanel() {
+  const editor = (0, import_editor.useEditor)();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const relevantStyles = (0, import_useRevelantStyles.useRelevantStyles)();
+  const color = relevantStyles?.styles.get(import_editor.DefaultColorStyle);
+  const theme = (0, import_editor.getDefaultColorTheme)({ isDarkMode: editor.user.getIsDarkMode() });
+  const currentColor = (color?.type === "shared" ? theme[color.value] : theme.black).solid;
+  const disableStylePanel = (0, import_editor.useValue)(
+    "isHandOrEraserToolActive",
+    () => editor.isInAny("hand", "zoom", "eraser", "laser"),
+    [editor]
+  );
+  const handleStylesOpenChange = (0, import_react.useCallback)(
+    (isOpen) => {
+      if (!isOpen) {
+        editor.updateInstanceState({ isChangingStyle: false });
+      }
+    },
+    [editor]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Popover.Popover, { id: "style menu", onOpenChange: handleStylesOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.PopoverTrigger, { disabled: disableStylePanel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        type: "tool",
+        "data-testid": "mobile.styles",
+        style: {
+          color: disableStylePanel ? "var(--color-muted-1)" : currentColor
+        },
+        title: msg("style-panel.title"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { icon: disableStylePanel ? "blob" : color?.type === "mixed" ? "mixed" : "blob" })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Popover.PopoverContent, { side: "top", align: "end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_StylePanel.StylePanel, { isMobile: true }) })
+  ] });
+}
+//# sourceMappingURL=MobileStylePanel.js.map

package/dist-cjs/lib/ui/components/MobileStylePanel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/MobileStylePanel.tsx"],
+  "sourcesContent": ["import {\n\tDefaultColorStyle,\n\tTLDefaultColorStyle,\n\tgetDefaultColorTheme,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport { useCallback } from 'react'\nimport { useRelevantStyles } from '../hooks/useRevelantStyles'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { StylePanel } from './StylePanel/StylePanel'\nimport { Button } from './primitives/Button'\nimport { Icon } from './primitives/Icon'\nimport { Popover, PopoverContent, PopoverTrigger } from './primitives/Popover'\n\nexport function MobileStylePanel() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\n\tconst relevantStyles = useRelevantStyles()\n\tconst color = relevantStyles?.styles.get(DefaultColorStyle)\n\tconst theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })\n\tconst currentColor = (\n\t\tcolor?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black\n\t).solid\n\n\tconst disableStylePanel = useValue(\n\t\t'isHandOrEraserToolActive',\n\t\t() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),\n\t\t[editor]\n\t)\n\n\tconst handleStylesOpenChange = useCallback(\n\t\t(isOpen: boolean) => {\n\t\t\tif (!isOpen) {\n\t\t\t\teditor.updateInstanceState({ isChangingStyle: false })\n\t\t\t}\n\t\t},\n\t\t[editor]\n\t)\n\n\treturn (\n\t\t<Popover id=\"style menu\" onOpenChange={handleStylesOpenChange}>\n\t\t\t<PopoverTrigger disabled={disableStylePanel}>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\tdata-testid=\"mobile.styles\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: disableStylePanel ? 'var(--color-muted-1)' : currentColor,\n\t\t\t\t\t}}\n\t\t\t\t\ttitle={msg('style-panel.title')}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent side=\"top\" align=\"end\">\n\t\t\t\t<StylePanel isMobile />\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CE;AA1CF,oBAMO;AACP,mBAA4B;AAC5B,+BAAkC;AAClC,4BAA+B;AAC/B,wBAA2B;AAC3B,oBAAuB;AACvB,kBAAqB;AACrB,qBAAwD;AAEjD,SAAS,mBAAmB;AAClC,QAAM,aAAS,yBAAU;AACzB,QAAM,UAAM,sCAAe;AAE3B,QAAM,qBAAiB,4CAAkB;AACzC,QAAM,QAAQ,gBAAgB,OAAO,IAAI,+BAAiB;AAC1D,QAAM,YAAQ,oCAAqB,EAAE,YAAY,OAAO,KAAK,cAAc,EAAE,CAAC;AAC9E,QAAM,gBACL,OAAO,SAAS,WAAW,MAAM,MAAM,KAA4B,IAAI,MAAM,OAC5E;AAEF,QAAM,wBAAoB;AAAA,IACzB;AAAA,IACA,MAAM,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO;AAAA,IACtD,CAAC,MAAM;AAAA,EACR;AAEA,QAAM,6BAAyB;AAAA,IAC9B,CAAC,WAAoB;AACpB,UAAI,CAAC,QAAQ;AACZ,eAAO,oBAAoB,EAAE,iBAAiB,MAAM,CAAC;AAAA,MACtD;AAAA,IACD;AAAA,IACA,CAAC,MAAM;AAAA,EACR;AAEA,SACC,6CAAC,0BAAQ,IAAG,cAAa,cAAc,wBACtC;AAAA,gDAAC,iCAAe,UAAU,mBACzB;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QACZ,OAAO;AAAA,UACN,OAAO,oBAAoB,yBAAyB;AAAA,QACrD;AAAA,QACA,OAAO,IAAI,mBAAmB;AAAA,QAE9B,sDAAC,oBAAK,MAAM,oBAAoB,SAAS,OAAO,SAAS,UAAU,UAAU,QAAQ;AAAA;AAAA,IACtF,GACD;AAAA,IACA,4CAAC,iCAAe,MAAK,OAAM,OAAM,OAChC,sDAAC,gCAAW,UAAQ,MAAC,GACtB;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-cjs/lib/ui/components/MoveToPageMenu.js

@@ -0,0 +1,142 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var MoveToPageMenu_exports = {};
+__export(MoveToPageMenu_exports, {
+  MoveToPageMenu: () => MoveToPageMenu
+});
+module.exports = __toCommonJS(MoveToPageMenu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@bigbluebutton/editor");
+var _ContextMenu = __toESM(require("@radix-ui/react-context-menu"));
+var import_useToastsProvider = require("../hooks/useToastsProvider");
+var import_useTranslation = require("../hooks/useTranslation/useTranslation");
+var import_Button = require("./primitives/Button");
+const MoveToPageMenu = (0, import_editor.track)(function MoveToPageMenu2() {
+  const editor = (0, import_editor.useEditor)();
+  const container = (0, import_editor.useContainer)();
+  const pages = editor.getPages();
+  const currentPageId = editor.getCurrentPageId();
+  const msg = (0, import_useTranslation.useTranslation)();
+  const { addToast } = (0, import_useToastsProvider.useToasts)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(_ContextMenu.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_ContextMenu.SubTrigger, { dir: "ltr", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        type: "menu",
+        label: "context-menu.move-to-page",
+        "data-testid": "menu-item.move-to-page",
+        icon: "chevron-right"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(_ContextMenu.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(_ContextMenu.SubContent, { className: "tlui-menu", sideOffset: -4, collisionPadding: 4, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        _ContextMenu.Group,
+        {
+          dir: "ltr",
+          className: "tlui-menu__group",
+          "data-testid": `menu-item.pages`,
+          children: pages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            _ContextMenu.Item,
+            {
+              disabled: currentPageId === page.id,
+              onSelect: () => {
+                editor.mark("move_shapes_to_page");
+                editor.moveShapesToPage(editor.getSelectedShapeIds(), page.id);
+                const toPage = editor.getPage(page.id);
+                if (toPage) {
+                  addToast({
+                    title: "Changed Page",
+                    description: `Moved to ${toPage.name}.`,
+                    actions: [
+                      {
+                        label: "Go Back",
+                        type: "primary",
+                        onClick: () => {
+                          editor.mark("change-page");
+                          editor.setCurrentPage(currentPageId);
+                        }
+                      }
+                    ]
+                  });
+                }
+              },
+              asChild: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Button.Button,
+                {
+                  type: "menu",
+                  title: page.name,
+                  className: "tlui-context-menu__move-to-page__name",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-button__label", children: page.name })
+                }
+              )
+            },
+            page.id
+          ))
+        },
+        "pages"
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        _ContextMenu.Group,
+        {
+          dir: "ltr",
+          className: "tlui-menu__group",
+          "data-testid": `menu-item.new-page`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            _ContextMenu.Item,
+            {
+              onSelect: () => {
+                const newPageId = import_editor.PageRecordType.createId();
+                const ids = editor.getSelectedShapeIds();
+                editor.batch(() => {
+                  editor.mark("move_shapes_to_page");
+                  editor.createPage({ name: msg("page-menu.new-page-initial-name"), id: newPageId });
+                  editor.moveShapesToPage(ids, newPageId);
+                });
+              },
+              asChild: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Button.Button,
+                {
+                  type: "menu",
+                  title: msg("context.pages.new-page"),
+                  className: "tlui-context-menu__move-to-page__name",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tlui-button__label", children: msg("context.pages.new-page") })
+                }
+              )
+            },
+            "new-page"
+          )
+        },
+        "new-page"
+      )
+    ] }) })
+  ] });
+});
+//# sourceMappingURL=MoveToPageMenu.js.map

package/dist-cjs/lib/ui/components/MoveToPageMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/MoveToPageMenu.tsx"],
+  "sourcesContent": ["import { PageRecordType, TLPageId, track, useContainer, useEditor } from '@bigbluebutton/editor'\nimport * as _ContextMenu from '@radix-ui/react-context-menu'\nimport { useToasts } from '../hooks/useToastsProvider'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\n\nexport const MoveToPageMenu = track(function MoveToPageMenu() {\n\tconst editor = useEditor()\n\tconst container = useContainer()\n\tconst pages = editor.getPages()\n\tconst currentPageId = editor.getCurrentPageId()\n\tconst msg = useTranslation()\n\tconst { addToast } = useToasts()\n\n\treturn (\n\t\t<_ContextMenu.Sub>\n\t\t\t<_ContextMenu.SubTrigger dir=\"ltr\" asChild>\n\t\t\t\t<Button\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\tlabel=\"context-menu.move-to-page\"\n\t\t\t\t\tdata-testid=\"menu-item.move-to-page\"\n\t\t\t\t\ticon=\"chevron-right\"\n\t\t\t\t/>\n\t\t\t</_ContextMenu.SubTrigger>\n\t\t\t<_ContextMenu.Portal container={container}>\n\t\t\t\t<_ContextMenu.SubContent className=\"tlui-menu\" sideOffset={-4} collisionPadding={4}>\n\t\t\t\t\t<_ContextMenu.Group\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tclassName={'tlui-menu__group'}\n\t\t\t\t\t\tdata-testid={`menu-item.pages`}\n\t\t\t\t\t\tkey=\"pages\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page) => (\n\t\t\t\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\tdisabled={currentPageId === page.id}\n\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\teditor.mark('move_shapes_to_page')\n\t\t\t\t\t\t\t\t\teditor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)\n\n\t\t\t\t\t\t\t\t\tconst toPage = editor.getPage(page.id)\n\n\t\t\t\t\t\t\t\t\tif (toPage) {\n\t\t\t\t\t\t\t\t\t\taddToast({\n\t\t\t\t\t\t\t\t\t\t\ttitle: 'Changed Page',\n\t\t\t\t\t\t\t\t\t\t\tdescription: `Moved to ${toPage.name}.`,\n\t\t\t\t\t\t\t\t\t\t\tactions: [\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: 'Go Back',\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype: 'primary',\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teditor.mark('change-page')\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(currentPageId)\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\t\t\ttitle={page.name}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-context-menu__move-to-page__name\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"tlui-button__label\">{page.name}</span>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</_ContextMenu.Item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</_ContextMenu.Group>\n\t\t\t\t\t<_ContextMenu.Group\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tclassName={'tlui-menu__group'}\n\t\t\t\t\t\tdata-testid={`menu-item.new-page`}\n\t\t\t\t\t\tkey=\"new-page\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<_ContextMenu.Item\n\t\t\t\t\t\t\tkey=\"new-page\"\n\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\t\t\t\t\t\tconst ids = editor.getSelectedShapeIds()\n\t\t\t\t\t\t\t\teditor.batch(() => {\n\t\t\t\t\t\t\t\t\teditor.mark('move_shapes_to_page')\n\t\t\t\t\t\t\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\t\t\t\t\t\t\teditor.moveShapesToPage(ids, newPageId)\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\t\t\t\ttitle={msg('context.pages.new-page')}\n\t\t\t\t\t\t\t\tclassName=\"tlui-context-menu__move-to-page__name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"tlui-button__label\">{msg('context.pages.new-page')}</span>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</_ContextMenu.Item>\n\t\t\t\t\t</_ContextMenu.Group>\n\t\t\t\t</_ContextMenu.SubContent>\n\t\t\t</_ContextMenu.Portal>\n\t\t</_ContextMenu.Sub>\n\t)\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBI;AAjBJ,oBAAyE;AACzE,mBAA8B;AAC9B,+BAA0B;AAC1B,4BAA+B;AAC/B,oBAAuB;AAEhB,MAAM,qBAAiB,qBAAM,SAASA,kBAAiB;AAC7D,QAAM,aAAS,yBAAU;AACzB,QAAM,gBAAY,4BAAa;AAC/B,QAAM,QAAQ,OAAO,SAAS;AAC9B,QAAM,gBAAgB,OAAO,iBAAiB;AAC9C,QAAM,UAAM,sCAAe;AAC3B,QAAM,EAAE,SAAS,QAAI,oCAAU;AAE/B,SACC,6CAAC,aAAa,KAAb,EACA;AAAA,gDAAC,aAAa,YAAb,EAAwB,KAAI,OAAM,SAAO,MACzC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,MAAK;AAAA;AAAA,IACN,GACD;AAAA,IACA,4CAAC,aAAa,QAAb,EAAoB,WACpB,uDAAC,aAAa,YAAb,EAAwB,WAAU,aAAY,YAAY,IAAI,kBAAkB,GAChF;AAAA;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,KAAI;AAAA,UACJ,WAAW;AAAA,UACX,eAAa;AAAA,UAGZ,gBAAM,IAAI,CAAC,SACX;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cAEA,UAAU,kBAAkB,KAAK;AAAA,cACjC,UAAU,MAAM;AACf,uBAAO,KAAK,qBAAqB;AACjC,uBAAO,iBAAiB,OAAO,oBAAoB,GAAG,KAAK,EAAc;AAEzE,sBAAM,SAAS,OAAO,QAAQ,KAAK,EAAE;AAErC,oBAAI,QAAQ;AACX,2BAAS;AAAA,oBACR,OAAO;AAAA,oBACP,aAAa,YAAY,OAAO,IAAI;AAAA,oBACpC,SAAS;AAAA,sBACR;AAAA,wBACC,OAAO;AAAA,wBACP,MAAM;AAAA,wBACN,SAAS,MAAM;AACd,iCAAO,KAAK,aAAa;AACzB,iCAAO,eAAe,aAAa;AAAA,wBACpC;AAAA,sBACD;AAAA,oBACD;AAAA,kBACD,CAAC;AAAA,gBACF;AAAA,cACD;AAAA,cACA,SAAO;AAAA,cAEP;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,OAAO,KAAK;AAAA,kBACZ,WAAU;AAAA,kBAEV,sDAAC,UAAK,WAAU,sBAAsB,eAAK,MAAK;AAAA;AAAA,cACjD;AAAA;AAAA,YAjCK,KAAK;AAAA,UAkCX,CACA;AAAA;AAAA,QAvCG;AAAA,MAwCL;AAAA,MACA;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,KAAI;AAAA,UACJ,WAAW;AAAA,UACX,eAAa;AAAA,UAGb;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cAEA,UAAU,MAAM;AACf,sBAAM,YAAY,6BAAe,SAAS;AAC1C,sBAAM,MAAM,OAAO,oBAAoB;AACvC,uBAAO,MAAM,MAAM;AAClB,yBAAO,KAAK,qBAAqB;AACjC,yBAAO,WAAW,EAAE,MAAM,IAAI,iCAAiC,GAAG,IAAI,UAAU,CAAC;AACjF,yBAAO,iBAAiB,KAAK,SAAS;AAAA,gBACvC,CAAC;AAAA,cACF;AAAA,cACA,SAAO;AAAA,cAEP;AAAA,gBAAC;AAAA;AAAA,kBACA,MAAK;AAAA,kBACL,OAAO,IAAI,wBAAwB;AAAA,kBACnC,WAAU;AAAA,kBAEV,sDAAC,UAAK,WAAU,sBAAsB,cAAI,wBAAwB,GAAE;AAAA;AAAA,cACrE;AAAA;AAAA,YAlBI;AAAA,UAmBL;AAAA;AAAA,QAtBI;AAAA,MAuBL;AAAA,OACD,GACD;AAAA,KACD;AAEF,CAAC;",
+  "names": ["MoveToPageMenu"]
+}