@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/EmbedDialog.mjs

@@ -0,0 +1,122 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EMBED_DEFINITIONS, track, useEditor } from "@bigbluebutton/editor";
+import { useRef, useState } from "react";
+import { getEmbedInfo } from "../../utils/embeds/embeds.mjs";
+import { useAssetUrls } from "../hooks/useAssetUrls.mjs";
+import { untranslated, useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import * as Dialog from "./primitives/Dialog.mjs";
+import { Icon } from "./primitives/Icon.mjs";
+import { Input } from "./primitives/Input.mjs";
+const EmbedDialog = track(function EmbedDialog2({ onClose }) {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const assetUrls = useAssetUrls();
+  const [embedDefinition, setEmbedDefinition] = useState(null);
+  const [url, setUrl] = useState("");
+  const [embedInfoForUrl, setEmbedInfoForUrl] = useState(null);
+  const [showError, setShowError] = useState(false);
+  const rShowErrorTimeout = useRef(-1);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: embedDefinition ? `${msg("embed-dialog.title")} \u2014 ${embedDefinition.title}` : msg("embed-dialog.title") }),
+      /* @__PURE__ */ jsx(Dialog.CloseButton, {})
+    ] }),
+    embedDefinition ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Dialog.Body, { className: "tlui-embed-dialog__enter", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: "tlui-embed-dialog__input",
+            label: "embed-dialog.url",
+            placeholder: "http://example.com",
+            autofocus: true,
+            onValueChange: (value) => {
+              setUrl(value);
+              const embedInfo = getEmbedInfo(value);
+              setEmbedInfoForUrl(
+                embedInfo && embedInfo.definition.type === embedDefinition.type ? embedInfo : null
+              );
+              setShowError(false);
+              clearTimeout(rShowErrorTimeout.current);
+              rShowErrorTimeout.current = setTimeout(() => setShowError(!embedInfo), 320);
+            }
+          }
+        ),
+        url === "" ? /* @__PURE__ */ jsxs("div", { className: "tlui-embed-dialog__instruction", children: [
+          /* @__PURE__ */ jsx("span", { children: msg("embed-dialog.instruction") }),
+          " ",
+          embedDefinition.instructionLink && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              target: "_blank",
+              rel: "noopener noreferrer",
+              href: embedDefinition.instructionLink,
+              className: "tlui-embed-dialog__instruction__link",
+              children: [
+                "Learn more.",
+                /* @__PURE__ */ jsx(Icon, { icon: "external-link", small: true })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("div", { className: "tlui-embed-dialog__warning", children: showError ? msg("embed-dialog.invalid-url") : "\xA0" })
+      ] }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { className: "tlui-dialog__footer__actions", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "normal",
+            onClick: () => {
+              setEmbedDefinition(null);
+              setEmbedInfoForUrl(null);
+              setUrl("");
+            },
+            label: "embed-dialog.back"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "tlui-embed__spacer" }),
+        /* @__PURE__ */ jsx(Button, { type: "normal", label: "embed-dialog.cancel", onClick: onClose }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "primary",
+            disabled: !embedInfoForUrl,
+            label: "embed-dialog.create",
+            onClick: () => {
+              if (!embedInfoForUrl)
+                return;
+              editor.putExternalContent({
+                type: "embed",
+                url,
+                point: editor.getViewportPageCenter(),
+                embed: embedInfoForUrl.definition
+              });
+              onClose();
+            }
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Dialog.Body, { className: "tlui-embed-dialog__list", children: EMBED_DEFINITIONS.map((def) => {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "menu",
+          onClick: () => setEmbedDefinition(def),
+          label: untranslated(def.title),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "tlui-embed-dialog__item__image",
+              style: { backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }
+            }
+          )
+        },
+        def.type
+      );
+    }) }) })
+  ] });
+});
+export {
+  EmbedDialog
+};
+//# sourceMappingURL=EmbedDialog.mjs.map

package/dist-esm/lib/ui/components/EmbedDialog.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/EmbedDialog.tsx"],
+  "sourcesContent": ["import { EMBED_DEFINITIONS, EmbedDefinition, track, useEditor } from '@bigbluebutton/editor'\nimport { useRef, useState } from 'react'\nimport { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'\nimport { useAssetUrls } from '../hooks/useAssetUrls'\nimport { TLUiDialogProps } from '../hooks/useDialogsProvider'\nimport { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport * as Dialog from './primitives/Dialog'\nimport { Icon } from './primitives/Icon'\nimport { Input } from './primitives/Input'\n\nexport const EmbedDialog = track(function EmbedDialog({ onClose }: TLUiDialogProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst assetUrls = useAssetUrls()\n\n\t// The embed definition for the user's selected embed (set by the user clicking on an embed in stage 1)\n\tconst [embedDefinition, setEmbedDefinition] = useState<null | EmbedDefinition>(null)\n\n\t// The URL that the user has typed into (in stage 2)\n\tconst [url, setUrl] = useState<string>('')\n\n\t// The embed info for the user's selected embed (based on the URL they've entered in stage 2)\n\tconst [embedInfoForUrl, setEmbedInfoForUrl] = useState<null | TLEmbedResult>(null)\n\n\t// Should we show the \"invalid URL\" error message?\n\tconst [showError, setShowError] = useState(false)\n\tconst rShowErrorTimeout = useRef<any>(-1)\n\n\treturn (\n\t\t<>\n\t\t\t<Dialog.Header>\n\t\t\t\t<Dialog.Title>\n\t\t\t\t\t{embedDefinition\n\t\t\t\t\t\t? `${msg('embed-dialog.title')} \u2014 ${embedDefinition.title}`\n\t\t\t\t\t\t: msg('embed-dialog.title')}\n\t\t\t\t</Dialog.Title>\n\t\t\t\t<Dialog.CloseButton />\n\t\t\t</Dialog.Header>\n\t\t\t{embedDefinition ? (\n\t\t\t\t<>\n\t\t\t\t\t<Dialog.Body className=\"tlui-embed-dialog__enter\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__input\"\n\t\t\t\t\t\t\tlabel=\"embed-dialog.url\"\n\t\t\t\t\t\t\tplaceholder=\"http://example.com\"\n\t\t\t\t\t\t\tautofocus\n\t\t\t\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\t\t\t\t// Set the url that the user has typed into the input\n\t\t\t\t\t\t\t\tsetUrl(value)\n\n\t\t\t\t\t\t\t\t// Set the embed info to either the embed info for the URL (if\n\t\t\t\t\t\t\t\t// that embed info can be found and of a type that matches the\n\t\t\t\t\t\t\t\t// user's selected definition type)\n\t\t\t\t\t\t\t\tconst embedInfo = getEmbedInfo(value)\n\t\t\t\t\t\t\t\tsetEmbedInfoForUrl(\n\t\t\t\t\t\t\t\t\tembedInfo && embedInfo.definition.type === embedDefinition.type ? embedInfo : null\n\t\t\t\t\t\t\t\t)\n\n\t\t\t\t\t\t\t\t// We want to hide the error when the user enters text,\n\t\t\t\t\t\t\t\t// and then show an error after a short delay if the user\n\t\t\t\t\t\t\t\t// has not yet entered a valid URL.\n\t\t\t\t\t\t\t\tsetShowError(false)\n\t\t\t\t\t\t\t\tclearTimeout(rShowErrorTimeout.current)\n\t\t\t\t\t\t\t\trShowErrorTimeout.current = setTimeout(() => setShowError(!embedInfo), 320)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{url === '' ? (\n\t\t\t\t\t\t\t<div className=\"tlui-embed-dialog__instruction\">\n\t\t\t\t\t\t\t\t<span>{msg('embed-dialog.instruction')}</span>{' '}\n\t\t\t\t\t\t\t\t{embedDefinition.instructionLink && (\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\thref={embedDefinition.instructionLink}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__instruction__link\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tLearn more.\n\t\t\t\t\t\t\t\t\t\t<Icon icon=\"external-link\" small />\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"tlui-embed-dialog__warning\">\n\t\t\t\t\t\t\t\t{showError ? msg('embed-dialog.invalid-url') : '\\xa0'}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Dialog.Body>\n\t\t\t\t\t<Dialog.Footer className=\"tlui-dialog__footer__actions\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tsetEmbedDefinition(null)\n\t\t\t\t\t\t\t\tsetEmbedInfoForUrl(null)\n\t\t\t\t\t\t\t\tsetUrl('')\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tlabel=\"embed-dialog.back\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"tlui-embed__spacer\" />\n\t\t\t\t\t\t<Button type=\"normal\" label=\"embed-dialog.cancel\" onClick={onClose} />\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\t\t\tdisabled={!embedInfoForUrl}\n\t\t\t\t\t\t\tlabel=\"embed-dialog.create\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (!embedInfoForUrl) return\n\n\t\t\t\t\t\t\t\teditor.putExternalContent({\n\t\t\t\t\t\t\t\t\ttype: 'embed',\n\t\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t\t\tpoint: editor.getViewportPageCenter(),\n\t\t\t\t\t\t\t\t\tembed: embedInfoForUrl.definition,\n\t\t\t\t\t\t\t\t})\n\n\t\t\t\t\t\t\t\tonClose()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Dialog.Footer>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Dialog.Body className=\"tlui-embed-dialog__list\">\n\t\t\t\t\t\t{EMBED_DEFINITIONS.map((def) => {\n\t\t\t\t\t\t\treturn (\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\tkey={def.type}\n\t\t\t\t\t\t\t\t\tonClick={() => setEmbedDefinition(def)}\n\t\t\t\t\t\t\t\t\tlabel={untranslated(def.title)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-embed-dialog__item__image\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ backgroundImage: `url(${assetUrls.embedIcons[def.type]})` }}\n\t\t\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)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</Dialog.Body>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t)\n})\n"],
+  "mappings": "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",
+  "names": ["EmbedDialog"]
+}

package/dist-esm/lib/ui/components/FollowingIndicator.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useEditor, usePresence, useValue } from "@bigbluebutton/editor";
+function FollowingIndicator() {
+  const editor = useEditor();
+  const followingUserId = useValue("follow", () => editor.getInstanceState().followingUserId, [
+    editor
+  ]);
+  if (!followingUserId)
+    return null;
+  return /* @__PURE__ */ jsx(FollowingIndicatorInner, { userId: followingUserId });
+}
+function FollowingIndicatorInner({ userId }) {
+  const presence = usePresence(userId);
+  if (!presence)
+    return null;
+  return /* @__PURE__ */ jsx("div", { className: "tlui-following-indicator", style: { borderColor: presence.color } });
+}
+export {
+  FollowingIndicator
+};
+//# sourceMappingURL=FollowingIndicator.mjs.map

package/dist-esm/lib/ui/components/FollowingIndicator.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/FollowingIndicator.tsx"],
+  "sourcesContent": ["import { useEditor, usePresence, useValue } from '@bigbluebutton/editor'\n\nexport function FollowingIndicator() {\n\tconst editor = useEditor()\n\tconst followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [\n\t\teditor,\n\t])\n\tif (!followingUserId) return null\n\treturn <FollowingIndicatorInner userId={followingUserId} />\n}\n\nfunction FollowingIndicatorInner({ userId }: { userId: string }) {\n\tconst presence = usePresence(userId)\n\tif (!presence) return null\n\treturn <div className=\"tlui-following-indicator\" style={{ borderColor: presence.color }} />\n}\n"],
+  "mappings": "AAQQ;AARR,SAAS,WAAW,aAAa,gBAAgB;AAE1C,SAAS,qBAAqB;AACpC,QAAM,SAAS,UAAU;AACzB,QAAM,kBAAkB,SAAS,UAAU,MAAM,OAAO,iBAAiB,EAAE,iBAAiB;AAAA,IAC3F;AAAA,EACD,CAAC;AACD,MAAI,CAAC;AAAiB,WAAO;AAC7B,SAAO,oBAAC,2BAAwB,QAAQ,iBAAiB;AAC1D;AAEA,SAAS,wBAAwB,EAAE,OAAO,GAAuB;AAChE,QAAM,WAAW,YAAY,MAAM;AACnC,MAAI,CAAC;AAAU,WAAO;AACtB,SAAO,oBAAC,SAAI,WAAU,4BAA2B,OAAO,EAAE,aAAa,SAAS,MAAM,GAAG;AAC1F;",
+  "names": []
+}

package/dist-esm/lib/ui/components/HTMLCanvas.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import * as React from "react";
+const HTMLCanvas = track(function HTMLCanvas2() {
+  const editor = useEditor();
+  const rCanvas = React.useRef(null);
+  const camera = editor.getCamera();
+  const shapes = editor.getCurrentPageShapes();
+  if (rCanvas.current) {
+    const cvs = rCanvas.current;
+    const ctx = cvs.getContext("2d");
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, cvs.width, cvs.height);
+    const path = new Path2D();
+    ctx.translate(camera.x, camera.y);
+    for (const shape of shapes) {
+      const bounds = editor.getShapePageBounds(shape);
+      path.rect(bounds.minX, bounds.minY, bounds.width, bounds.height);
+    }
+    ctx.fillStyle = "#cccccc";
+    ctx.fill(path);
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: rCanvas,
+      width: editor.getViewportScreenBounds().width,
+      height: editor.getViewportScreenBounds().height,
+      style: { width: "100%", height: "100%" }
+    }
+  );
+});
+export {
+  HTMLCanvas
+};
+//# sourceMappingURL=HTMLCanvas.mjs.map

package/dist-esm/lib/ui/components/HTMLCanvas.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/HTMLCanvas.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport * as React from 'react'\n\n/** @internal */\nexport const HTMLCanvas = track(function HTMLCanvas() {\n\tconst editor = useEditor()\n\tconst rCanvas = React.useRef<HTMLCanvasElement>(null)\n\n\tconst camera = editor.getCamera()\n\tconst shapes = editor.getCurrentPageShapes()\n\tif (rCanvas.current) {\n\t\tconst cvs = rCanvas.current\n\t\tconst ctx = cvs.getContext('2d')!\n\t\tctx.resetTransform()\n\t\tctx.clearRect(0, 0, cvs.width, cvs.height)\n\n\t\tconst path = new Path2D()\n\n\t\tctx.translate(camera.x, camera.y)\n\n\t\tfor (const shape of shapes) {\n\t\t\tconst bounds = editor.getShapePageBounds(shape)!\n\t\t\tpath.rect(bounds.minX, bounds.minY, bounds.width, bounds.height)\n\t\t}\n\n\t\tctx.fillStyle = '#cccccc'\n\t\tctx.fill(path)\n\n\t\t// for (const shape of shapes) {\n\t\t// \tctx.save()\n\t\t// \tconst corners = editor.getPageCorners(shape)\n\t\t// \tcorners.forEach((corner) => dot(ctx, corner.x, corner.y, 'red'))\n\t\t// \tctx.restore()\n\t\t// }\n\t}\n\n\treturn (\n\t\t<canvas\n\t\t\tref={rCanvas}\n\t\t\twidth={editor.getViewportScreenBounds().width}\n\t\t\theight={editor.getViewportScreenBounds().height}\n\t\t\tstyle={{ width: '100%', height: '100%' }}\n\t\t/>\n\t)\n})\n\n// function dot(ctx: CanvasRenderingContext2D, x: number, y: number, color = '#000') {\n// \tctx.save()\n// \tctx.beginPath()\n// \tctx.ellipse(x, y, 4, 4, 0, 0, Math.PI * 2)\n// \tctx.fillStyle = color\n// \tctx.fill()\n// \tctx.restore()\n// }\n"],
+  "mappings": "AAqCE;AArCF,SAAS,OAAO,iBAAiB;AACjC,YAAY,WAAW;AAGhB,MAAM,aAAa,MAAM,SAASA,cAAa;AACrD,QAAM,SAAS,UAAU;AACzB,QAAM,UAAU,MAAM,OAA0B,IAAI;AAEpD,QAAM,SAAS,OAAO,UAAU;AAChC,QAAM,SAAS,OAAO,qBAAqB;AAC3C,MAAI,QAAQ,SAAS;AACpB,UAAM,MAAM,QAAQ;AACpB,UAAM,MAAM,IAAI,WAAW,IAAI;AAC/B,QAAI,eAAe;AACnB,QAAI,UAAU,GAAG,GAAG,IAAI,OAAO,IAAI,MAAM;AAEzC,UAAM,OAAO,IAAI,OAAO;AAExB,QAAI,UAAU,OAAO,GAAG,OAAO,CAAC;AAEhC,eAAW,SAAS,QAAQ;AAC3B,YAAM,SAAS,OAAO,mBAAmB,KAAK;AAC9C,WAAK,KAAK,OAAO,MAAM,OAAO,MAAM,OAAO,OAAO,OAAO,MAAM;AAAA,IAChE;AAEA,QAAI,YAAY;AAChB,QAAI,KAAK,IAAI;AAAA,EAQd;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,OAAO,OAAO,wBAAwB,EAAE;AAAA,MACxC,QAAQ,OAAO,wBAAwB,EAAE;AAAA,MACzC,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEF,CAAC;",
+  "names": ["HTMLCanvas"]
+}

package/dist-esm/lib/ui/components/HelpMenu.mjs

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContainer } from "@bigbluebutton/editor";
+import { Content, Portal, Root, Trigger } from "@radix-ui/react-dropdown-menu";
+import * as React from "react";
+import { useHelpMenuSchema } from "../hooks/useHelpMenuSchema.mjs";
+import { useMenuIsOpen } from "../hooks/useMenuIsOpen.mjs";
+import { useReadonly } from "../hooks/useReadonly.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { LanguageMenu } from "./LanguageMenu.mjs";
+import { Button } from "./primitives/Button.mjs";
+import * as M from "./primitives/DropdownMenu.mjs";
+const HelpMenu = React.memo(function HelpMenu2() {
+  const container = useContainer();
+  const msg = useTranslation();
+  const [isOpen, onOpenChange] = useMenuIsOpen("help menu");
+  return /* @__PURE__ */ jsx("div", { className: "tlui-help-menu", children: /* @__PURE__ */ jsxs(Root, { dir: "ltr", open: isOpen, onOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx(Trigger, { asChild: true, dir: "ltr", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "help",
+        className: "tlui-button",
+        smallIcon: true,
+        title: msg("help-menu.title"),
+        icon: "question-mark"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(
+      Content,
+      {
+        className: "tlui-menu",
+        side: "top",
+        sideOffset: 8,
+        align: "end",
+        alignOffset: 0,
+        collisionPadding: 4,
+        children: /* @__PURE__ */ jsx(HelpMenuContent, {})
+      }
+    ) })
+  ] }) });
+});
+function HelpMenuContent() {
+  const menuSchema = useHelpMenuSchema();
+  const isReadonly = useReadonly();
+  function getHelpMenuItem(item) {
+    if (!item)
+      return null;
+    if (isReadonly && !item.readonlyOk)
+      return null;
+    switch (item.type) {
+      case "custom": {
+        if (item.id === "LANGUAGE_MENU") {
+          return /* @__PURE__ */ jsx(LanguageMenu, {}, "item");
+        }
+        break;
+      }
+      case "group": {
+        return /* @__PURE__ */ jsx(M.Group, { size: "small", children: item.children.map(getHelpMenuItem) }, item.id);
+      }
+      case "submenu": {
+        return /* @__PURE__ */ jsxs(M.Sub, { id: `help menu ${item.id}`, children: [
+          /* @__PURE__ */ jsx(M.SubTrigger, { label: item.label }),
+          /* @__PURE__ */ jsx(M.SubContent, { children: item.children.map(getHelpMenuItem) })
+        ] }, item.id);
+      }
+      case "item": {
+        const { id, kbd, label, onSelect, icon } = item.actionItem;
+        return /* @__PURE__ */ jsx(
+          M.Item,
+          {
+            type: "menu",
+            kbd,
+            label,
+            onClick: () => onSelect("help-menu"),
+            iconLeft: icon
+          },
+          id
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: menuSchema.map(getHelpMenuItem) });
+}
+export {
+  HelpMenu
+};
+//# sourceMappingURL=HelpMenu.mjs.map

package/dist-esm/lib/ui/components/HelpMenu.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/HelpMenu.tsx"],
+  "sourcesContent": ["import { useContainer } from '@bigbluebutton/editor'\nimport { Content, Portal, Root, Trigger } from '@radix-ui/react-dropdown-menu'\nimport * as React from 'react'\nimport { TLUiMenuChild } from '../hooks/menuHelpers'\nimport { useHelpMenuSchema } from '../hooks/useHelpMenuSchema'\nimport { useMenuIsOpen } from '../hooks/useMenuIsOpen'\nimport { useReadonly } from '../hooks/useReadonly'\nimport { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { TLUiIconType } from '../icon-types'\nimport { LanguageMenu } from './LanguageMenu'\nimport { Button } from './primitives/Button'\nimport * as M from './primitives/DropdownMenu'\n\ninterface HelpMenuLink {\n\tlabel: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\turl: string\n}\n\n/** @internal */\nexport interface HelpMenuProps {\n\tlinks?: HelpMenuLink[]\n}\n\n/** @internal */\nexport const HelpMenu = React.memo(function HelpMenu() {\n\tconst container = useContainer()\n\tconst msg = useTranslation()\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('help menu')\n\n\treturn (\n\t\t<div className=\"tlui-help-menu\">\n\t\t\t<Root dir=\"ltr\" open={isOpen} onOpenChange={onOpenChange} modal={false}>\n\t\t\t\t<Trigger asChild dir=\"ltr\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"help\"\n\t\t\t\t\t\tclassName=\"tlui-button\"\n\t\t\t\t\t\tsmallIcon\n\t\t\t\t\t\ttitle={msg('help-menu.title')}\n\t\t\t\t\t\ticon=\"question-mark\"\n\t\t\t\t\t/>\n\t\t\t\t</Trigger>\n\t\t\t\t<Portal container={container}>\n\t\t\t\t\t<Content\n\t\t\t\t\t\tclassName=\"tlui-menu\"\n\t\t\t\t\t\tside=\"top\"\n\t\t\t\t\t\tsideOffset={8}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\talignOffset={0}\n\t\t\t\t\t\tcollisionPadding={4}\n\t\t\t\t\t>\n\t\t\t\t\t\t<HelpMenuContent />\n\t\t\t\t\t</Content>\n\t\t\t\t</Portal>\n\t\t\t</Root>\n\t\t</div>\n\t)\n})\n\nfunction HelpMenuContent() {\n\tconst menuSchema = useHelpMenuSchema()\n\n\tconst isReadonly = useReadonly()\n\n\tfunction getHelpMenuItem(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 'custom': {\n\t\t\t\tif (item.id === 'LANGUAGE_MENU') {\n\t\t\t\t\treturn <LanguageMenu key=\"item\" />\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'group': {\n\t\t\t\treturn (\n\t\t\t\t\t<M.Group size=\"small\" key={item.id}>\n\t\t\t\t\t\t{item.children.map(getHelpMenuItem)}\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\treturn (\n\t\t\t\t\t<M.Sub id={`help menu ${item.id}`} key={item.id}>\n\t\t\t\t\t\t<M.SubTrigger label={item.label} />\n\t\t\t\t\t\t<M.SubContent>{item.children.map(getHelpMenuItem)}</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\tconst { id, kbd, label, onSelect, icon } = item.actionItem\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\tkbd={kbd}\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\tonClick={() => onSelect('help-menu')}\n\t\t\t\t\t\ticonLeft={icon}\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(getHelpMenuItem)}</>\n}\n"],
+  "mappings": "AAiCG,SA0EK,UAxEH,KAFF;AAjCH,SAAS,oBAAoB;AAC7B,SAAS,SAAS,QAAQ,MAAM,eAAe;AAC/C,YAAY,WAAW;AAEvB,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,YAAY,OAAO;AAcZ,MAAM,WAAW,MAAM,KAAK,SAASA,YAAW;AACtD,QAAM,YAAY,aAAa;AAC/B,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,QAAQ,YAAY,IAAI,cAAc,WAAW;AAExD,SACC,oBAAC,SAAI,WAAU,kBACd,+BAAC,QAAK,KAAI,OAAM,MAAM,QAAQ,cAA4B,OAAO,OAChE;AAAA,wBAAC,WAAQ,SAAO,MAAC,KAAI,OACpB;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,WAAU;AAAA,QACV,WAAS;AAAA,QACT,OAAO,IAAI,iBAAiB;AAAA,QAC5B,MAAK;AAAA;AAAA,IACN,GACD;AAAA,IACA,oBAAC,UAAO,WACP;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,MAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAM;AAAA,QACN,aAAa;AAAA,QACb,kBAAkB;AAAA,QAElB,8BAAC,mBAAgB;AAAA;AAAA,IAClB,GACD;AAAA,KACD,GACD;AAEF,CAAC;AAED,SAAS,kBAAkB;AAC1B,QAAM,aAAa,kBAAkB;AAErC,QAAM,aAAa,YAAY;AAE/B,WAAS,gBAAgB,MAAqB;AAC7C,QAAI,CAAC;AAAM,aAAO;AAClB,QAAI,cAAc,CAAC,KAAK;AAAY,aAAO;AAE3C,YAAQ,KAAK,MAAM;AAAA,MAClB,KAAK,UAAU;AACd,YAAI,KAAK,OAAO,iBAAiB;AAChC,iBAAO,oBAAC,kBAAiB,MAAO;AAAA,QACjC;AACA;AAAA,MACD;AAAA,MACA,KAAK,SAAS;AACb,eACC,oBAAC,EAAE,OAAF,EAAQ,MAAK,SACZ,eAAK,SAAS,IAAI,eAAe,KADR,KAAK,EAEhC;AAAA,MAEF;AAAA,MACA,KAAK,WAAW;AACf,eACC,qBAAC,EAAE,KAAF,EAAM,IAAI,aAAa,KAAK,EAAE,IAC9B;AAAA,8BAAC,EAAE,YAAF,EAAa,OAAO,KAAK,OAAO;AAAA,UACjC,oBAAC,EAAE,YAAF,EAAc,eAAK,SAAS,IAAI,eAAe,GAAE;AAAA,aAFX,KAAK,EAG7C;AAAA,MAEF;AAAA,MACA,KAAK,QAAQ;AACZ,cAAM,EAAE,IAAI,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK;AAChD,eACC;AAAA,UAAC,EAAE;AAAA,UAAF;AAAA,YACA,MAAK;AAAA,YAEL;AAAA,YACA;AAAA,YACA,SAAS,MAAM,SAAS,WAAW;AAAA,YACnC,UAAU;AAAA;AAAA,UAJL;AAAA,QAKN;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAEA,SAAO,gCAAG,qBAAW,IAAI,eAAe,GAAE;AAC3C;",
+  "names": ["HelpMenu"]
+}

package/dist-esm/lib/ui/components/KeyboardShortcutsDialog.mjs

@@ -0,0 +1,44 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useKeyboardShortcutsSchema } from "../hooks/useKeyboardShortcutsSchema.mjs";
+import { useReadonly } from "../hooks/useReadonly.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import * as Dialog from "./primitives/Dialog.mjs";
+import { Kbd } from "./primitives/Kbd.mjs";
+const KeyboardShortcutsDialog = () => {
+  const msg = useTranslation();
+  const isReadonly = useReadonly();
+  const shortcutsItems = useKeyboardShortcutsSchema();
+  function getKeyboardShortcutItem(item) {
+    if (!item)
+      return null;
+    if (isReadonly && !item.readonlyOk)
+      return null;
+    switch (item.type) {
+      case "group": {
+        return /* @__PURE__ */ jsxs("div", { className: "tlui-shortcuts-dialog__group", children: [
+          /* @__PURE__ */ jsx("h2", { className: "tlui-shortcuts-dialog__group__title", children: msg(item.id) }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "tlui-shortcuts-dialog__key-pair", children: [
+          /* @__PURE__ */ jsx("div", { className: "tlui-shortcuts-dialog__key-pair__key", children: msg(shortcutsLabel ?? label) }),
+          /* @__PURE__ */ jsx("div", { className: "tlui-shortcuts-dialog__key-pair__value", children: /* @__PURE__ */ jsx(Kbd, { children: kbd }) })
+        ] }, id);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Dialog.Header, { className: "tlui-shortcuts-dialog__header", children: [
+      /* @__PURE__ */ jsx(Dialog.Title, { children: msg("shortcuts-dialog.title") }),
+      /* @__PURE__ */ jsx(Dialog.CloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsx(Dialog.Body, { className: "tlui-shortcuts-dialog__body", children: shortcutsItems.map(getKeyboardShortcutItem) }),
+    /* @__PURE__ */ jsx("div", { className: "tlui-dialog__scrim" })
+  ] });
+};
+export {
+  KeyboardShortcutsDialog
+};
+//# sourceMappingURL=KeyboardShortcutsDialog.mjs.map

package/dist-esm/lib/ui/components/KeyboardShortcutsDialog.mjs.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": "AAoBK,SA8BH,UA7BI,KADD;AAnBL,SAAS,kCAAkC;AAC3C,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,WAAW;AAEb,MAAM,0BAA0B,MAAM;AAC5C,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,YAAY;AAC/B,QAAM,iBAAiB,2BAA2B;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,qBAAC,SAAI,WAAU,gCACd;AAAA,8BAAC,QAAG,WAAU,uCACZ,cAAI,KAAK,EAAwB,GACnC;AAAA,UACA,oBAAC,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,qBAAC,SAAI,WAAU,mCACd;AAAA,8BAAC,SAAI,WAAU,wCACb,cAAK,kBAAkB,KAAO,GAChC;AAAA,UACA,oBAAC,SAAI,WAAU,0CACd,8BAAC,OAAK,eAAK,GACZ;AAAA,aANqD,EAOtD;AAAA,MAEF;AAAA,IACD;AAAA,EACD;AAEA,SACC,iCACC;AAAA,yBAAC,OAAO,QAAP,EAAc,WAAU,iCACxB;AAAA,0BAAC,OAAO,OAAP,EAAc,cAAI,wBAAwB,GAAE;AAAA,MAC7C,oBAAC,OAAO,aAAP,EAAmB;AAAA,OACrB;AAAA,IACA,oBAAC,OAAO,MAAP,EAAY,WAAU,+BACrB,yBAAe,IAAI,uBAAuB,GAC5C;AAAA,IACA,oBAAC,SAAI,WAAU,sBAAqB;AAAA,KACrC;AAEF;",
+  "names": ["item"]
+}

package/dist-esm/lib/ui/components/LanguageMenu.mjs

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditor } from "@bigbluebutton/editor";
+import { useCallback } from "react";
+import { useLanguages } from "../hooks/useTranslation/useLanguages.mjs";
+import * as D from "./primitives/DropdownMenu.mjs";
+function LanguageMenu() {
+  const editor = useEditor();
+  const { languages, currentLanguage } = useLanguages();
+  const handleLanguageSelect = useCallback(
+    (locale) => editor.user.updateUserPreferences({ locale }),
+    [editor]
+  );
+  return /* @__PURE__ */ jsxs(D.Sub, { id: "help menu language", children: [
+    /* @__PURE__ */ jsx(D.SubTrigger, { label: "menu.language", "data-direction": "left" }),
+    /* @__PURE__ */ jsx(D.SubContent, { sideOffset: -4, children: /* @__PURE__ */ jsx(D.Group, { children: languages.map(({ locale, label }) => /* @__PURE__ */ jsx(
+      D.RadioItem,
+      {
+        title: locale,
+        checked: locale === currentLanguage,
+        onSelect: () => handleLanguageSelect(locale),
+        children: /* @__PURE__ */ jsx("span", { className: "tlui-button__label", children: label })
+      },
+      locale
+    )) }) })
+  ] });
+}
+export {
+  LanguageMenu
+};
+//# sourceMappingURL=LanguageMenu.mjs.map

package/dist-esm/lib/ui/components/LanguageMenu.mjs.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": "AAgBE,SACC,KADD;AAhBF,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAC7B,YAAY,OAAO;AAEZ,SAAS,eAAe;AAC9B,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,WAAW,gBAAgB,IAAI,aAAa;AAEpD,QAAM,uBAAuB;AAAA,IAC5B,CAAC,WAAsC,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC;AAAA,IACnF,CAAC,MAAM;AAAA,EACR;AAEA,SACC,qBAAC,EAAE,KAAF,EAAM,IAAG,sBACT;AAAA,wBAAC,EAAE,YAAF,EAAa,OAAM,iBAAgB,kBAAe,QAAO;AAAA,IAC1D,oBAAC,EAAE,YAAF,EAAa,YAAY,IACzB,8BAAC,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,8BAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA;AAAA,MALvC;AAAA,IAMN,CACA,GACF,GAID;AAAA,KACD;AAEF;",
+  "names": []
+}

package/dist-esm/lib/ui/components/Menu.mjs

@@ -0,0 +1,109 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEditor } from "@bigbluebutton/editor";
+import * as React from "react";
+import { useBreakpoint } from "../hooks/useBreakpoint.mjs";
+import { useMenuSchema } from "../hooks/useMenuSchema.mjs";
+import { useReadonly } from "../hooks/useReadonly.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { LanguageMenu } from "./LanguageMenu.mjs";
+import { Button } from "./primitives/Button.mjs";
+import * as M from "./primitives/DropdownMenu.mjs";
+import { Kbd } from "./primitives/Kbd.mjs";
+const Menu = React.memo(function Menu2() {
+  const msg = useTranslation();
+  return /* @__PURE__ */ jsxs(M.Root, { id: "main menu", children: [
+    /* @__PURE__ */ jsx(M.Trigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "icon",
+        className: "tlui-menu__trigger",
+        "data-testid": "main.menu",
+        title: msg("menu.title"),
+        icon: "menu",
+        smallIcon: true
+      }
+    ) }),
+    /* @__PURE__ */ jsx(M.Content, { alignOffset: 0, sideOffset: 6, children: /* @__PURE__ */ jsx(MenuContent, {}) })
+  ] });
+});
+function MenuContent() {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const menuSchema = useMenuSchema();
+  const breakpoint = useBreakpoint();
+  const isReadonly = 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__ */ jsx(LanguageMenu, {}, "item");
+        }
+        return null;
+      }
+      case "group": {
+        if (isReadonly && !item.readonlyOk)
+          return null;
+        return /* @__PURE__ */ 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__ */ jsxs(M.Sub, { id: `main menu ${parent ? parent.id + " " : ""}${item.id}`, children: [
+          /* @__PURE__ */ jsx(M.SubTrigger, { label: item.label, "data-testid": `menu-item.${item.id}` }),
+          /* @__PURE__ */ 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__ */ jsxs(
+            M.CheckboxItem,
+            {
+              onSelect: () => onSelect("menu"),
+              title: labelStr ? labelStr : "",
+              checked: item.checked,
+              disabled: item.disabled,
+              children: [
+                labelStr && /* @__PURE__ */ jsx("span", { className: "tlui-button__label", children: labelStr }),
+                kbd && /* @__PURE__ */ jsx(Kbd, { children: kbd })
+              ]
+            },
+            id
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          M.Item,
+          {
+            type: "menu",
+            "data-testid": `menu-item.${item.id}`,
+            kbd,
+            label: labelToUse,
+            onClick: () => onSelect("menu"),
+            disabled: item.disabled
+          },
+          id
+        );
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: menuSchema.map((item) => getMenuItem(editor, item, null, 0)) });
+}
+export {
+  Menu
+};
+//# sourceMappingURL=Menu.mjs.map

package/dist-esm/lib/ui/components/Menu.mjs.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": "AAgBE,SA+GM,UA7GJ,KAFF;AAhBF,SAAiB,iBAAiB;AAClC,YAAY,WAAW;AAEvB,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,YAAY,OAAO;AACnB,SAAS,WAAW;AAEb,MAAM,OAAO,MAAM,KAAK,SAASA,QAAO;AAC9C,QAAM,MAAM,eAAe;AAE3B,SACC,qBAAC,EAAE,MAAF,EAAO,IAAG,aACV;AAAA,wBAAC,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,oBAAC,EAAE,SAAF,EAAU,aAAa,GAAG,YAAY,GACtC,8BAAC,eAAY,GACd;AAAA,KACD;AAEF,CAAC;AAED,SAAS,cAAc;AACtB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,YAAY;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,oBAAC,kBAAiB,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,qBAAC,EAAE,KAAF,EAAM,IAAI,aAAa,SAAS,OAAO,KAAK,MAAM,EAAE,GAAG,KAAK,EAAE,IAC9D;AAAA,8BAAC,EAAE,YAAF,EAAa,OAAO,KAAK,OAAO,eAAa,aAAa,KAAK,EAAE,IAAI;AAAA,UACtE,oBAAC,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,oBAAC,UAAK,WAAU,sBAAsB,oBAAS;AAAA,gBAC3D,OAAO,oBAAC,OAAK,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,gCAAG,qBAAW,IAAI,CAAC,SAAS,YAAY,QAAQ,MAAM,MAAM,CAAC,CAAC,GAAE;AACxE;",
+  "names": ["Menu", "editor"]
+}

package/dist-esm/lib/ui/components/MenuZone.mjs

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import { useBreakpoint } from "../hooks/useBreakpoint.mjs";
+import { useReadonly } from "../hooks/useReadonly.mjs";
+import { ActionsMenu } from "./ActionsMenu.mjs";
+import { DuplicateButton } from "./DuplicateButton.mjs";
+import { Menu } from "./Menu.mjs";
+import { PageMenu } from "./PageMenu/PageMenu.mjs";
+import { RedoButton } from "./RedoButton.mjs";
+import { TrashButton } from "./TrashButton.mjs";
+import { UndoButton } from "./UndoButton.mjs";
+const MenuZone = track(function MenuZone2() {
+  const editor = useEditor();
+  const breakpoint = useBreakpoint();
+  const isReadonly = useReadonly();
+  return /* @__PURE__ */ jsx("div", { className: "tlui-menu-zone", children: /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
+    /* @__PURE__ */ jsx(Menu, {}),
+    /* @__PURE__ */ jsx(PageMenu, {}),
+    breakpoint >= 6 && !isReadonly && !editor.isInAny("hand", "zoom") && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(UndoButton, {}),
+      /* @__PURE__ */ jsx(RedoButton, {}),
+      /* @__PURE__ */ jsx(TrashButton, {}),
+      /* @__PURE__ */ jsx(DuplicateButton, {}),
+      /* @__PURE__ */ jsx(ActionsMenu, {})
+    ] })
+  ] }) });
+});
+export {
+  MenuZone
+};
+//# sourceMappingURL=MenuZone.mjs.map

package/dist-esm/lib/ui/components/MenuZone.mjs.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": "AAoBI,SAGC,UAHD,KAGC,YAHD;AApBJ,SAAS,OAAO,iBAAiB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAEpB,MAAM,WAAW,MAAM,SAASA,YAAW;AACjD,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,cAAc;AACjC,QAAM,aAAa,YAAY;AAE/B,SACC,oBAAC,SAAI,WAAU,kBACd,+BAAC,SAAI,WAAU,4BACd;AAAA,wBAAC,QAAK;AAAA,IACN,oBAAC,YAAS;AAAA,IACT,cAAc,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,QAAQ,MAAM,KAChE,iCACC;AAAA,0BAAC,cAAW;AAAA,MACZ,oBAAC,cAAW;AAAA,MACZ,oBAAC,eAAY;AAAA,MACb,oBAAC,mBAAgB;AAAA,MACjB,oBAAC,eAAY;AAAA,OACd;AAAA,KAEF,GACD;AAEF,CAAC;",
+  "names": ["MenuZone"]
+}