@bigbluebutton/tldraw 2.0.0-alpha.19

package/dist-esm/lib/ui/components/PageMenu/PageItemSubmenu.mjs

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MAX_PAGES, PageRecordType, track, useEditor } from "@bigbluebutton/editor";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { useCallback } from "react";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import * as M from "../primitives/DropdownMenu.mjs";
+import { onMovePage } from "./edit-pages-shared.mjs";
+const PageItemSubmenu = track(function PageItemSubmenu2({
+  index,
+  listSize,
+  item,
+  onRename
+}) {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const pages = editor.getPages();
+  const onDuplicate = useCallback(() => {
+    editor.mark("creating page");
+    const newId = PageRecordType.createId();
+    editor.duplicatePage(item.id, newId);
+  }, [editor, item]);
+  const onMoveUp = useCallback(() => {
+    onMovePage(editor, item.id, index, index - 1);
+  }, [editor, item, index]);
+  const onMoveDown = useCallback(() => {
+    onMovePage(editor, item.id, index, index + 1);
+  }, [editor, item, index]);
+  const onDelete = useCallback(() => {
+    editor.mark("deleting page");
+    editor.deletePage(item.id);
+  }, [editor, item]);
+  return /* @__PURE__ */ jsxs(M.Root, { id: `page item submenu ${index}`, children: [
+    /* @__PURE__ */ jsx(M.Trigger, { children: /* @__PURE__ */ jsx(Button, { type: "icon", title: msg("page-menu.submenu.title"), icon: "dots-vertical" }) }),
+    /* @__PURE__ */ jsxs(M.Content, { alignOffset: 0, children: [
+      /* @__PURE__ */ jsxs(M.Group, { children: [
+        onRename && /* @__PURE__ */ jsx(DropdownMenu.Item, { dir: "ltr", onSelect: onRename, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "menu", label: "page-menu.submenu.rename" }) }),
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Item,
+          {
+            dir: "ltr",
+            onSelect: onDuplicate,
+            disabled: pages.length >= MAX_PAGES,
+            asChild: true,
+            children: /* @__PURE__ */ jsx(Button, { type: "menu", label: "page-menu.submenu.duplicate-page" })
+          }
+        ),
+        index > 0 && /* @__PURE__ */ jsx(DropdownMenu.Item, { dir: "ltr", onSelect: onMoveUp, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "menu", label: "page-menu.submenu.move-up" }) }),
+        index < listSize - 1 && /* @__PURE__ */ jsx(DropdownMenu.Item, { dir: "ltr", onSelect: onMoveDown, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "menu", label: "page-menu.submenu.move-down" }) })
+      ] }),
+      listSize > 1 && /* @__PURE__ */ jsx(M.Group, { children: /* @__PURE__ */ jsx(DropdownMenu.Item, { dir: "ltr", onSelect: onDelete, asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "menu", label: "page-menu.submenu.delete" }) }) })
+    ] })
+  ] });
+});
+export {
+  PageItemSubmenu
+};
+//# sourceMappingURL=PageItemSubmenu.mjs.map

package/dist-esm/lib/ui/components/PageMenu/PageItemSubmenu.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/PageMenu/PageItemSubmenu.tsx"],
+  "sourcesContent": ["import { MAX_PAGES, PageRecordType, TLPageId, track, useEditor } from '@bigbluebutton/editor'\nimport * as DropdownMenu from '@radix-ui/react-dropdown-menu'\nimport { useCallback } from 'react'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport * as M from '../primitives/DropdownMenu'\nimport { onMovePage } from './edit-pages-shared'\n\nexport interface PageItemSubmenuProps {\n\tindex: number\n\titem: { id: string; name: string }\n\tlistSize: number\n\tonRename?: () => void\n}\n\nexport const PageItemSubmenu = track(function PageItemSubmenu({\n\tindex,\n\tlistSize,\n\titem,\n\tonRename,\n}: PageItemSubmenuProps) {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst pages = editor.getPages()\n\n\tconst onDuplicate = useCallback(() => {\n\t\teditor.mark('creating page')\n\t\tconst newId = PageRecordType.createId()\n\t\teditor.duplicatePage(item.id as TLPageId, newId)\n\t}, [editor, item])\n\n\tconst onMoveUp = useCallback(() => {\n\t\tonMovePage(editor, item.id as TLPageId, index, index - 1)\n\t}, [editor, item, index])\n\n\tconst onMoveDown = useCallback(() => {\n\t\tonMovePage(editor, item.id as TLPageId, index, index + 1)\n\t}, [editor, item, index])\n\n\tconst onDelete = useCallback(() => {\n\t\teditor.mark('deleting page')\n\t\teditor.deletePage(item.id as TLPageId)\n\t}, [editor, item])\n\n\treturn (\n\t\t<M.Root id={`page item submenu ${index}`}>\n\t\t\t<M.Trigger>\n\t\t\t\t<Button type=\"icon\" title={msg('page-menu.submenu.title')} icon=\"dots-vertical\" />\n\t\t\t</M.Trigger>\n\t\t\t<M.Content alignOffset={0}>\n\t\t\t\t<M.Group>\n\t\t\t\t\t{onRename && (\n\t\t\t\t\t\t<DropdownMenu.Item dir=\"ltr\" onSelect={onRename} asChild>\n\t\t\t\t\t\t\t<Button type=\"menu\" label=\"page-menu.submenu.rename\" />\n\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t)}\n\t\t\t\t\t<DropdownMenu.Item\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tonSelect={onDuplicate}\n\t\t\t\t\t\tdisabled={pages.length >= MAX_PAGES}\n\t\t\t\t\t\tasChild\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button type=\"menu\" label=\"page-menu.submenu.duplicate-page\" />\n\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t{index > 0 && (\n\t\t\t\t\t\t<DropdownMenu.Item dir=\"ltr\" onSelect={onMoveUp} asChild>\n\t\t\t\t\t\t\t<Button type=\"menu\" label=\"page-menu.submenu.move-up\" />\n\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t)}\n\t\t\t\t\t{index < listSize - 1 && (\n\t\t\t\t\t\t<DropdownMenu.Item dir=\"ltr\" onSelect={onMoveDown} asChild>\n\t\t\t\t\t\t\t<Button type=\"menu\" label=\"page-menu.submenu.move-down\" />\n\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t)}\n\t\t\t\t</M.Group>\n\t\t\t\t{listSize > 1 && (\n\t\t\t\t\t<M.Group>\n\t\t\t\t\t\t<DropdownMenu.Item dir=\"ltr\" onSelect={onDelete} asChild>\n\t\t\t\t\t\t\t<Button type=\"menu\" label=\"page-menu.submenu.delete\" />\n\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t</M.Group>\n\t\t\t\t)}\n\t\t\t</M.Content>\n\t\t</M.Root>\n\t)\n})\n"],
+  "mappings": "AA+CI,cAGA,YAHA;AA/CJ,SAAS,WAAW,gBAA0B,OAAO,iBAAiB;AACtE,YAAY,kBAAkB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,YAAY,OAAO;AACnB,SAAS,kBAAkB;AASpB,MAAM,kBAAkB,MAAM,SAASA,iBAAgB;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,SAAS,UAAU;AACzB,QAAM,MAAM,eAAe;AAC3B,QAAM,QAAQ,OAAO,SAAS;AAE9B,QAAM,cAAc,YAAY,MAAM;AACrC,WAAO,KAAK,eAAe;AAC3B,UAAM,QAAQ,eAAe,SAAS;AACtC,WAAO,cAAc,KAAK,IAAgB,KAAK;AAAA,EAChD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,WAAW,YAAY,MAAM;AAClC,eAAW,QAAQ,KAAK,IAAgB,OAAO,QAAQ,CAAC;AAAA,EACzD,GAAG,CAAC,QAAQ,MAAM,KAAK,CAAC;AAExB,QAAM,aAAa,YAAY,MAAM;AACpC,eAAW,QAAQ,KAAK,IAAgB,OAAO,QAAQ,CAAC;AAAA,EACzD,GAAG,CAAC,QAAQ,MAAM,KAAK,CAAC;AAExB,QAAM,WAAW,YAAY,MAAM;AAClC,WAAO,KAAK,eAAe;AAC3B,WAAO,WAAW,KAAK,EAAc;AAAA,EACtC,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SACC,qBAAC,EAAE,MAAF,EAAO,IAAI,qBAAqB,KAAK,IACrC;AAAA,wBAAC,EAAE,SAAF,EACA,8BAAC,UAAO,MAAK,QAAO,OAAO,IAAI,yBAAyB,GAAG,MAAK,iBAAgB,GACjF;AAAA,IACA,qBAAC,EAAE,SAAF,EAAU,aAAa,GACvB;AAAA,2BAAC,EAAE,OAAF,EACC;AAAA,oBACA,oBAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,UAAU,UAAU,SAAO,MACvD,8BAAC,UAAO,MAAK,QAAO,OAAM,4BAA2B,GACtD;AAAA,QAED;AAAA,UAAC,aAAa;AAAA,UAAb;AAAA,YACA,KAAI;AAAA,YACJ,UAAU;AAAA,YACV,UAAU,MAAM,UAAU;AAAA,YAC1B,SAAO;AAAA,YAEP,8BAAC,UAAO,MAAK,QAAO,OAAM,oCAAmC;AAAA;AAAA,QAC9D;AAAA,QACC,QAAQ,KACR,oBAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,UAAU,UAAU,SAAO,MACvD,8BAAC,UAAO,MAAK,QAAO,OAAM,6BAA4B,GACvD;AAAA,QAEA,QAAQ,WAAW,KACnB,oBAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,UAAU,YAAY,SAAO,MACzD,8BAAC,UAAO,MAAK,QAAO,OAAM,+BAA8B,GACzD;AAAA,SAEF;AAAA,MACC,WAAW,KACX,oBAAC,EAAE,OAAF,EACA,8BAAC,aAAa,MAAb,EAAkB,KAAI,OAAM,UAAU,UAAU,SAAO,MACvD,8BAAC,UAAO,MAAK,QAAO,OAAM,4BAA2B,GACtD,GACD;AAAA,OAEF;AAAA,KACD;AAEF,CAAC;",
+  "names": ["PageItemSubmenu"]
+}

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

@@ -0,0 +1,381 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  MAX_PAGES,
+  PageRecordType,
+  releasePointerCapture,
+  setPointerCapture,
+  useEditor,
+  useValue
+} from "@bigbluebutton/editor";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useBreakpoint } from "../../hooks/useBreakpoint.mjs";
+import { useMenuIsOpen } from "../../hooks/useMenuIsOpen.mjs";
+import { useReadonly } from "../../hooks/useReadonly.mjs";
+import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "../primitives/Button.mjs";
+import { Icon } from "../primitives/Icon.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover.mjs";
+import { PageItemInput } from "./PageItemInput.mjs";
+import { PageItemSubmenu } from "./PageItemSubmenu.mjs";
+import { onMovePage } from "./edit-pages-shared.mjs";
+const PageMenu = function PageMenu2() {
+  const editor = useEditor();
+  const msg = useTranslation();
+  const breakpoint = useBreakpoint();
+  const handleOpenChange = useCallback(() => setIsEditing(false), []);
+  const [isOpen, onOpenChange] = useMenuIsOpen("page-menu", handleOpenChange);
+  const ITEM_HEIGHT = 36;
+  const rSortableContainer = useRef(null);
+  const pages = useValue("pages", () => editor.getPages(), [editor]);
+  const currentPage = useValue("currentPage", () => editor.getCurrentPage(), [editor]);
+  const currentPageId = useValue("currentPageId", () => editor.getCurrentPageId(), [editor]);
+  const isReadonlyMode = useReadonly();
+  const maxPageCountReached = useValue(
+    "maxPageCountReached",
+    () => editor.getPages().length >= MAX_PAGES,
+    [editor]
+  );
+  const isCoarsePointer = useValue(
+    "isCoarsePointer",
+    () => editor.getInstanceState().isCoarsePointer,
+    [editor]
+  );
+  const [isEditing, setIsEditing] = useState(false);
+  const toggleEditing = useCallback(() => {
+    if (isReadonlyMode)
+      return;
+    setIsEditing((s) => !s);
+  }, [isReadonlyMode]);
+  const rMutables = useRef({
+    isPointing: false,
+    status: "idle",
+    pointing: null,
+    startY: 0,
+    startIndex: 0,
+    dragIndex: 0
+  });
+  const [sortablePositionItems, setSortablePositionItems] = useState(
+    Object.fromEntries(
+      pages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])
+    )
+  );
+  useLayoutEffect(() => {
+    setSortablePositionItems(
+      Object.fromEntries(
+        pages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])
+      )
+    );
+  }, [ITEM_HEIGHT, pages]);
+  useEffect(() => {
+    if (!isOpen)
+      return;
+    requestAnimationFrame(() => {
+      const elm = document.querySelector(
+        `[data-testid="page-menu-item-${currentPageId}"]`
+      );
+      if (elm) {
+        const container = rSortableContainer.current;
+        if (!container)
+          return;
+        const elmTopPosition = elm.offsetTop;
+        const containerScrollTopPosition = container.scrollTop;
+        if (elmTopPosition < containerScrollTopPosition) {
+          container.scrollTo({ top: elmTopPosition });
+        }
+        const elmBottomPosition = elmTopPosition + ITEM_HEIGHT;
+        const containerScrollBottomPosition = container.scrollTop + container.offsetHeight;
+        if (elmBottomPosition > containerScrollBottomPosition) {
+          container.scrollTo({ top: elmBottomPosition - container.offsetHeight });
+        }
+      }
+    });
+  }, [ITEM_HEIGHT, currentPageId, isOpen]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      const { clientY, currentTarget } = e;
+      const {
+        dataset: { id, index }
+      } = currentTarget;
+      if (!id || !index)
+        return;
+      const mut = rMutables.current;
+      setPointerCapture(e.currentTarget, e);
+      mut.status = "pointing";
+      mut.pointing = { id, index: +index };
+      const current = sortablePositionItems[id];
+      const dragY = current.y;
+      mut.startY = clientY;
+      mut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1));
+    },
+    [ITEM_HEIGHT, pages.length, sortablePositionItems]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      const mut = rMutables.current;
+      if (mut.status === "pointing") {
+        const { clientY } = e;
+        const offset = clientY - mut.startY;
+        if (Math.abs(offset) > 5) {
+          mut.status = "dragging";
+        }
+      }
+      if (mut.status === "dragging") {
+        const { clientY } = e;
+        const offsetY = clientY - mut.startY;
+        const current = sortablePositionItems[mut.pointing.id];
+        const { startIndex, pointing } = mut;
+        const dragY = current.y + offsetY;
+        const dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1));
+        const next = { ...sortablePositionItems };
+        next[pointing.id] = {
+          y: current.y,
+          offsetY,
+          isSelected: true
+        };
+        if (dragIndex !== mut.dragIndex) {
+          mut.dragIndex = dragIndex;
+          for (let i = 0; i < pages.length; i++) {
+            const item = pages[i];
+            if (item.id === mut.pointing.id) {
+              continue;
+            }
+            let { y } = next[item.id];
+            if (dragIndex === startIndex) {
+              y = i * ITEM_HEIGHT;
+            } else if (dragIndex < startIndex) {
+              if (dragIndex <= i && i < startIndex) {
+                y = (i + 1) * ITEM_HEIGHT;
+              } else {
+                y = i * ITEM_HEIGHT;
+              }
+            } else if (dragIndex > startIndex) {
+              if (dragIndex >= i && i > startIndex) {
+                y = (i - 1) * ITEM_HEIGHT;
+              } else {
+                y = i * ITEM_HEIGHT;
+              }
+            }
+            if (y !== next[item.id].y) {
+              next[item.id] = { y, offsetY: 0, isSelected: true };
+            }
+          }
+        }
+        setSortablePositionItems(next);
+      }
+    },
+    [ITEM_HEIGHT, pages, sortablePositionItems]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      const mut = rMutables.current;
+      if (mut.status === "dragging") {
+        const { id, index } = mut.pointing;
+        onMovePage(editor, id, index, mut.dragIndex);
+      }
+      releasePointerCapture(e.currentTarget, e);
+      mut.status = "idle";
+    },
+    [editor]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      const mut = rMutables.current;
+      if (e.key === "Escape") {
+        if (mut.status === "dragging") {
+          setSortablePositionItems(
+            Object.fromEntries(
+              pages.map((page, i) => [
+                page.id,
+                { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }
+              ])
+            )
+          );
+        }
+        mut.status = "idle";
+      }
+    },
+    [ITEM_HEIGHT, pages]
+  );
+  const handleCreatePageClick = useCallback(() => {
+    if (isReadonlyMode)
+      return;
+    editor.batch(() => {
+      editor.mark("creating page");
+      const newPageId = PageRecordType.createId();
+      editor.createPage({ name: msg("page-menu.new-page-initial-name"), id: newPageId });
+      editor.setCurrentPage(newPageId);
+      setIsEditing(true);
+    });
+  }, [editor, msg, isReadonlyMode]);
+  return (
+    /* @__PURE__ */ jsxs(Popover, { id: "pages", onOpenChange, open: isOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "tlui-page-menu__trigger tlui-menu__trigger",
+          "data-testid": "main.page-menu",
+          icon: "chevron-down",
+          type: "menu",
+          title: currentPage.name,
+          children: /* @__PURE__ */ jsx("div", { className: "tlui-page-menu__name", children: currentPage.name })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", align: "start", sideOffset: 6, children: /* @__PURE__ */ jsxs("div", { className: "tlui-page-menu__wrapper", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tlui-page-menu__header", children: [
+          /* @__PURE__ */ jsx("div", { className: "tlui-page-menu__header__title", children: msg("page-menu.title") }),
+          !isReadonlyMode && /* @__PURE__ */ jsxs("div", { className: "tlui-buttons__horizontal", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "icon",
+                "data-testid": "page-menu.edit",
+                title: msg(isEditing ? "page-menu.edit-done" : "page-menu.edit-start"),
+                icon: isEditing ? "check" : "edit",
+                onClick: toggleEditing
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "icon",
+                "data-testid": "page-menu.create",
+                icon: "plus",
+                title: msg(
+                  maxPageCountReached ? "page-menu.max-page-count-reached" : "page-menu.create-new-page"
+                ),
+                disabled: maxPageCountReached,
+                onClick: handleCreatePageClick
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "tlui-page-menu__list tlui-menu__group",
+            style: { height: ITEM_HEIGHT * pages.length + 4 },
+            ref: rSortableContainer,
+            children: pages.map((page, index) => {
+              const position = sortablePositionItems[page.id] ?? {
+                position: index * 40,
+                offsetY: 0
+              };
+              return isEditing ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": `page-menu-item-${page.id}`,
+                  className: "tlui-page_menu__item__sortable",
+                  style: {
+                    zIndex: page.id === currentPage.id ? 888 : index,
+                    transform: `translate(0px, ${position.y + position.offsetY}px)`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "icon",
+                        tabIndex: -1,
+                        className: "tlui-page_menu__item__sortable__handle",
+                        icon: "drag-handle-dots",
+                        onPointerDown: handlePointerDown,
+                        onPointerUp: handlePointerUp,
+                        onPointerMove: handlePointerMove,
+                        onKeyDown: handleKeyDown,
+                        "data-id": page.id,
+                        "data-index": index
+                      }
+                    ),
+                    breakpoint < 5 && isCoarsePointer ? (
+                      // sigh, this is a workaround for iOS Safari
+                      // because the device and the radix popover seem
+                      // to be fighting over scroll position. Nothing
+                      // else seems to work!
+                      /* @__PURE__ */ (jsx(Button, {
+                      type: "normal",
+                      className: "tlui-page-menu__item__button",
+                      onClick: () => {
+                        const name = window.prompt("Rename page", page.name);
+                        if (name && name !== page.name) {
+                          editor.renamePage(page.id, name);
+                        }
+                      },
+                      onDoubleClick: toggleEditing,
+                      isChecked: page.id === currentPage.id,
+                      children: /* @__PURE__ */ jsx("span", { children: page.name })
+                    }))
+                    ) : /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "tlui-page_menu__item__sortable__title",
+                        style: { height: ITEM_HEIGHT },
+                        children: /* @__PURE__ */ jsx(
+                          PageItemInput,
+                          {
+                            id: page.id,
+                            name: page.name,
+                            isCurrentPage: page.id === currentPage.id
+                          }
+                        )
+                      }
+                    ),
+                    !isReadonlyMode && /* @__PURE__ */ jsx("div", { className: "tlui-page_menu__item__submenu", "data-isediting": isEditing, children: /* @__PURE__ */ jsx(PageItemSubmenu, { index, item: page, listSize: pages.length }) })
+                  ]
+                },
+                page.id + "_editing"
+              ) : /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": `page-menu-item-${page.id}`,
+                  className: "tlui-page-menu__item",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        type: "icon",
+                        className: "tlui-page-menu__item__button tlui-page-menu__item__button__checkbox",
+                        onClick: () => editor.setCurrentPage(page.id),
+                        onDoubleClick: toggleEditing,
+                        isChecked: page.id === currentPage.id,
+                        title: msg("page-menu.go-to-page"),
+                        children: [
+                          /* @__PURE__ */ jsx("div", { className: "tlui-page-menu__item__button__check", children: page.id === currentPage.id && /* @__PURE__ */ jsx(Icon, { icon: "check" }) }),
+                          /* @__PURE__ */ jsx("span", { children: page.name })
+                        ]
+                      }
+                    ),
+                    !isReadonlyMode && /* @__PURE__ */ jsx("div", { className: "tlui-page_menu__item__submenu", children: /* @__PURE__ */ jsx(
+                      PageItemSubmenu,
+                      {
+                        index,
+                        item: page,
+                        listSize: pages.length,
+                        onRename: () => {
+                          if (editor.environment.isIos) {
+                            const name = window.prompt("Rename page", page.name);
+                            if (name && name !== page.name) {
+                              editor.renamePage(page.id, name);
+                            }
+                          } else {
+                            editor.batch(() => {
+                              setIsEditing(true);
+                              editor.setCurrentPage(page.id);
+                            });
+                          }
+                        }
+                      }
+                    ) })
+                  ]
+                },
+                page.id
+              );
+            })
+          }
+        )
+      ] }) })
+    ] })
+  );
+};
+export {
+  PageMenu
+};
+//# sourceMappingURL=PageMenu.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/PageMenu/PageMenu.tsx"],
+  "sourcesContent": ["import {\n\tMAX_PAGES,\n\tPageRecordType,\n\tTLPageId,\n\treleasePointerCapture,\n\tsetPointerCapture,\n\tuseEditor,\n\tuseValue,\n} from '@bigbluebutton/editor'\nimport { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { useBreakpoint } from '../../hooks/useBreakpoint'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\nimport { useReadonly } from '../../hooks/useReadonly'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { Button } from '../primitives/Button'\nimport { Icon } from '../primitives/Icon'\nimport { Popover, PopoverContent, PopoverTrigger } from '../primitives/Popover'\nimport { PageItemInput } from './PageItemInput'\nimport { PageItemSubmenu } from './PageItemSubmenu'\nimport { onMovePage } from './edit-pages-shared'\n\nexport const PageMenu = function PageMenu() {\n\tconst editor = useEditor()\n\tconst msg = useTranslation()\n\tconst breakpoint = useBreakpoint()\n\n\tconst handleOpenChange = useCallback(() => setIsEditing(false), [])\n\n\tconst [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)\n\n\tconst ITEM_HEIGHT = 36\n\n\tconst rSortableContainer = useRef<HTMLDivElement>(null)\n\n\tconst pages = useValue('pages', () => editor.getPages(), [editor])\n\tconst currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])\n\tconst currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])\n\n\t// When in readonly mode, we don't allow a user to edit the pages\n\tconst isReadonlyMode = useReadonly()\n\n\t// If the user has reached the max page count, we disable the \"add page\" button\n\tconst maxPageCountReached = useValue(\n\t\t'maxPageCountReached',\n\t\t() => editor.getPages().length >= MAX_PAGES,\n\t\t[editor]\n\t)\n\n\tconst isCoarsePointer = useValue(\n\t\t'isCoarsePointer',\n\t\t() => editor.getInstanceState().isCoarsePointer,\n\t\t[editor]\n\t)\n\n\t// The component has an \"editing state\" that may be toggled to expose additional controls\n\tconst [isEditing, setIsEditing] = useState(false)\n\n\tconst toggleEditing = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\t\tsetIsEditing((s) => !s)\n\t}, [isReadonlyMode])\n\n\tconst rMutables = useRef({\n\t\tisPointing: false,\n\t\tstatus: 'idle' as 'idle' | 'pointing' | 'dragging',\n\t\tpointing: null as { id: string; index: number } | null,\n\t\tstartY: 0,\n\t\tstartIndex: 0,\n\t\tdragIndex: 0,\n\t})\n\n\tconst [sortablePositionItems, setSortablePositionItems] = useState(\n\t\tObject.fromEntries(\n\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t)\n\t)\n\n\t// Update the sortable position items when the pages change\n\tuseLayoutEffect(() => {\n\t\tsetSortablePositionItems(\n\t\t\tObject.fromEntries(\n\t\t\t\tpages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])\n\t\t\t)\n\t\t)\n\t}, [ITEM_HEIGHT, pages])\n\n\t// Scroll the current page into view when the menu opens / when current page changes\n\tuseEffect(() => {\n\t\tif (!isOpen) return\n\t\trequestAnimationFrame(() => {\n\t\t\tconst elm = document.querySelector(\n\t\t\t\t`[data-testid=\"page-menu-item-${currentPageId}\"]`\n\t\t\t) as HTMLDivElement\n\n\t\t\tif (elm) {\n\t\t\t\tconst container = rSortableContainer.current\n\t\t\t\tif (!container) return\n\t\t\t\t// Scroll into view is slightly borked on iOS Safari\n\n\t\t\t\t// if top of less than top cuttoff, scroll into view at top\n\t\t\t\tconst elmTopPosition = elm.offsetTop\n\t\t\t\tconst containerScrollTopPosition = container.scrollTop\n\t\t\t\tif (elmTopPosition < containerScrollTopPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmTopPosition })\n\t\t\t\t}\n\t\t\t\t// if bottom position is greater than bottom cutoff, scroll into view at bottom\n\t\t\t\tconst elmBottomPosition = elmTopPosition + ITEM_HEIGHT\n\t\t\t\tconst containerScrollBottomPosition = container.scrollTop + container.offsetHeight\n\t\t\t\tif (elmBottomPosition > containerScrollBottomPosition) {\n\t\t\t\t\tcontainer.scrollTo({ top: elmBottomPosition - container.offsetHeight })\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}, [ITEM_HEIGHT, currentPageId, isOpen])\n\n\tconst handlePointerDown = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst { clientY, currentTarget } = e\n\t\t\tconst {\n\t\t\t\tdataset: { id, index },\n\t\t\t} = currentTarget\n\n\t\t\tif (!id || !index) return\n\n\t\t\tconst mut = rMutables.current\n\n\t\t\tsetPointerCapture(e.currentTarget, e)\n\n\t\t\tmut.status = 'pointing'\n\t\t\tmut.pointing = { id, index: +index! }\n\t\t\tconst current = sortablePositionItems[id]\n\t\t\tconst dragY = current.y\n\n\t\t\tmut.startY = clientY\n\t\t\tmut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\t\t},\n\t\t[ITEM_HEIGHT, pages.length, sortablePositionItems]\n\t)\n\n\tconst handlePointerMove = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\tif (mut.status === 'pointing') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offset = clientY - mut.startY\n\t\t\t\tif (Math.abs(offset) > 5) {\n\t\t\t\t\tmut.status = 'dragging'\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { clientY } = e\n\t\t\t\tconst offsetY = clientY - mut.startY\n\t\t\t\tconst current = sortablePositionItems[mut.pointing!.id]\n\n\t\t\t\tconst { startIndex, pointing } = mut\n\t\t\t\tconst dragY = current.y + offsetY\n\t\t\t\tconst dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))\n\n\t\t\t\tconst next = { ...sortablePositionItems }\n\t\t\t\tnext[pointing!.id] = {\n\t\t\t\t\ty: current.y,\n\t\t\t\t\toffsetY,\n\t\t\t\t\tisSelected: true,\n\t\t\t\t}\n\n\t\t\t\tif (dragIndex !== mut.dragIndex) {\n\t\t\t\t\tmut.dragIndex = dragIndex\n\n\t\t\t\t\tfor (let i = 0; i < pages.length; i++) {\n\t\t\t\t\t\tconst item = pages[i]\n\t\t\t\t\t\tif (item.id === mut.pointing!.id) {\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tlet { y } = next[item.id]\n\n\t\t\t\t\t\tif (dragIndex === startIndex) {\n\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t} else if (dragIndex < startIndex) {\n\t\t\t\t\t\t\tif (dragIndex <= i && i < startIndex) {\n\t\t\t\t\t\t\t\ty = (i + 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else if (dragIndex > startIndex) {\n\t\t\t\t\t\t\tif (dragIndex >= i && i > startIndex) {\n\t\t\t\t\t\t\t\ty = (i - 1) * ITEM_HEIGHT\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\ty = i * ITEM_HEIGHT\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (y !== next[item.id].y) {\n\t\t\t\t\t\t\tnext[item.id] = { y, offsetY: 0, isSelected: true }\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tsetSortablePositionItems(next)\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages, sortablePositionItems]\n\t)\n\n\tconst handlePointerUp = useCallback(\n\t\t(e: React.PointerEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\n\t\t\tif (mut.status === 'dragging') {\n\t\t\t\tconst { id, index } = mut.pointing!\n\t\t\t\tonMovePage(editor, id as TLPageId, index, mut.dragIndex)\n\t\t\t}\n\n\t\t\treleasePointerCapture(e.currentTarget, e)\n\t\t\tmut.status = 'idle'\n\t\t},\n\t\t[editor]\n\t)\n\n\tconst handleKeyDown = useCallback(\n\t\t(e: React.KeyboardEvent<HTMLButtonElement>) => {\n\t\t\tconst mut = rMutables.current\n\t\t\t// bail on escape\n\t\t\tif (e.key === 'Escape') {\n\t\t\t\tif (mut.status === 'dragging') {\n\t\t\t\t\tsetSortablePositionItems(\n\t\t\t\t\t\tObject.fromEntries(\n\t\t\t\t\t\t\tpages.map((page, i) => [\n\t\t\t\t\t\t\t\tpage.id,\n\t\t\t\t\t\t\t\t{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t)\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\tmut.status = 'idle'\n\t\t\t}\n\t\t},\n\t\t[ITEM_HEIGHT, pages]\n\t)\n\n\tconst handleCreatePageClick = useCallback(() => {\n\t\tif (isReadonlyMode) return\n\n\t\teditor.batch(() => {\n\t\t\teditor.mark('creating page')\n\t\t\tconst newPageId = PageRecordType.createId()\n\t\t\teditor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })\n\t\t\teditor.setCurrentPage(newPageId)\n\t\t\tsetIsEditing(true)\n\t\t})\n\t}, [editor, msg, isReadonlyMode])\n\n\treturn (\n\t\t<Popover id=\"pages\" onOpenChange={onOpenChange} open={isOpen}>\n\t\t\t<PopoverTrigger>\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"tlui-page-menu__trigger tlui-menu__trigger\"\n\t\t\t\t\tdata-testid=\"main.page-menu\"\n\t\t\t\t\ticon=\"chevron-down\"\n\t\t\t\t\ttype=\"menu\"\n\t\t\t\t\ttitle={currentPage.name}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"tlui-page-menu__name\">{currentPage.name}</div>\n\t\t\t\t</Button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent side=\"bottom\" align=\"start\" sideOffset={6}>\n\t\t\t\t<div className=\"tlui-page-menu__wrapper\">\n\t\t\t\t\t<div className=\"tlui-page-menu__header\">\n\t\t\t\t\t\t<div className=\"tlui-page-menu__header__title\">{msg('page-menu.title')}</div>\n\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t<div className=\"tlui-buttons__horizontal\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.edit\"\n\t\t\t\t\t\t\t\t\ttitle={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}\n\t\t\t\t\t\t\t\t\ticon={isEditing ? 'check' : 'edit'}\n\t\t\t\t\t\t\t\t\tonClick={toggleEditing}\n\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\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"page-menu.create\"\n\t\t\t\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\t\t\t\ttitle={msg(\n\t\t\t\t\t\t\t\t\t\tmaxPageCountReached\n\t\t\t\t\t\t\t\t\t\t\t? 'page-menu.max-page-count-reached'\n\t\t\t\t\t\t\t\t\t\t\t: 'page-menu.create-new-page'\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={maxPageCountReached}\n\t\t\t\t\t\t\t\t\tonClick={handleCreatePageClick}\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</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"tlui-page-menu__list tlui-menu__group\"\n\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT * pages.length + 4 }}\n\t\t\t\t\t\tref={rSortableContainer}\n\t\t\t\t\t>\n\t\t\t\t\t\t{pages.map((page, index) => {\n\t\t\t\t\t\t\tconst position = sortablePositionItems[page.id] ?? {\n\t\t\t\t\t\t\t\tposition: index * 40,\n\t\t\t\t\t\t\t\toffsetY: 0,\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn isEditing ? (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id + '_editing'}\n\t\t\t\t\t\t\t\t\tdata-testid={`page-menu-item-${page.id}`}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tzIndex: page.id === currentPage.id ? 888 : index,\n\t\t\t\t\t\t\t\t\t\ttransform: `translate(0px, ${position.y + position.offsetY}px)`,\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\t\t<Button\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__handle\"\n\t\t\t\t\t\t\t\t\t\ticon=\"drag-handle-dots\"\n\t\t\t\t\t\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\t\t\t\t\t\tonPointerUp={handlePointerUp}\n\t\t\t\t\t\t\t\t\t\tonPointerMove={handlePointerMove}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={handleKeyDown}\n\t\t\t\t\t\t\t\t\t\tdata-id={page.id}\n\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{breakpoint < 5 && isCoarsePointer ? (\n\t\t\t\t\t\t\t\t\t\t// sigh, this is a workaround for iOS Safari\n\t\t\t\t\t\t\t\t\t\t// because the device and the radix popover seem\n\t\t\t\t\t\t\t\t\t\t// to be fighting over scroll position. Nothing\n\t\t\t\t\t\t\t\t\t\t// else seems to work!\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"normal\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\teditor.renamePage(page.id, name)\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\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\t\tisChecked={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span>{page.name}</span>\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page_menu__item__sortable__title\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ height: ITEM_HEIGHT }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemInput\n\t\t\t\t\t\t\t\t\t\t\t\tid={page.id}\n\t\t\t\t\t\t\t\t\t\t\t\tname={page.name}\n\t\t\t\t\t\t\t\t\t\t\t\tisCurrentPage={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\" data-isediting={isEditing}>\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu index={index} item={page} listSize={pages.length} />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={page.id}\n\t\t\t\t\t\t\t\t\tdata-testid={`page-menu-item-${page.id}`}\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ttype=\"icon\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"tlui-page-menu__item__button tlui-page-menu__item__button__checkbox\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => editor.setCurrentPage(page.id)}\n\t\t\t\t\t\t\t\t\t\tonDoubleClick={toggleEditing}\n\t\t\t\t\t\t\t\t\t\tisChecked={page.id === currentPage.id}\n\t\t\t\t\t\t\t\t\t\ttitle={msg('page-menu.go-to-page')}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page-menu__item__button__check\">\n\t\t\t\t\t\t\t\t\t\t\t{page.id === currentPage.id && <Icon icon=\"check\" />}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<span>{page.name}</span>\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t{!isReadonlyMode && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"tlui-page_menu__item__submenu\">\n\t\t\t\t\t\t\t\t\t\t\t<PageItemSubmenu\n\t\t\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\t\t\titem={page}\n\t\t\t\t\t\t\t\t\t\t\t\tlistSize={pages.length}\n\t\t\t\t\t\t\t\t\t\t\t\tonRename={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (editor.environment.isIos) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst name = window.prompt('Rename page', page.name)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tif (name && name !== page.name) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\teditor.renamePage(page.id, name)\n\t\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\t} else {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teditor.batch(() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsEditing(true)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\teditor.setCurrentPage(page.id)\n\t\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\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</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t)\n}\n"],
+  "mappings": "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",
+  "names": ["PageMenu"]
+}

package/dist-esm/lib/ui/components/PageMenu/edit-pages-shared.mjs

@@ -0,0 +1,29 @@
+import {
+  getIndexAbove,
+  getIndexBelow,
+  getIndexBetween
+} from "@bigbluebutton/editor";
+const onMovePage = (editor, id, from, to) => {
+  let index;
+  const pages = editor.getPages();
+  const below = from > to ? pages[to - 1] : pages[to];
+  const above = from > to ? pages[to] : pages[to + 1];
+  if (below && !above) {
+    index = getIndexAbove(below.index);
+  } else if (!below && above) {
+    index = getIndexBelow(pages[0].index);
+  } else {
+    index = getIndexBetween(below.index, above.index);
+  }
+  if (index !== pages[from].index) {
+    editor.mark("moving page");
+    editor.updatePage({
+      id,
+      index
+    });
+  }
+};
+export {
+  onMovePage
+};
+//# sourceMappingURL=edit-pages-shared.mjs.map

package/dist-esm/lib/ui/components/PageMenu/edit-pages-shared.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/PageMenu/edit-pages-shared.ts"],
+  "sourcesContent": ["import {\n\tEditor,\n\tgetIndexAbove,\n\tgetIndexBelow,\n\tgetIndexBetween,\n\tTLPageId,\n} from '@bigbluebutton/editor'\n\nexport const onMovePage = (editor: Editor, id: TLPageId, from: number, to: number) => {\n\tlet index: string\n\n\tconst pages = editor.getPages()\n\n\tconst below = from > to ? pages[to - 1] : pages[to]\n\tconst above = from > to ? pages[to] : pages[to + 1]\n\n\tif (below && !above) {\n\t\tindex = getIndexAbove(below.index)\n\t} else if (!below && above) {\n\t\tindex = getIndexBelow(pages[0].index)\n\t} else {\n\t\tindex = getIndexBetween(below.index, above.index)\n\t}\n\n\tif (index !== pages[from].index) {\n\t\teditor.mark('moving page')\n\t\teditor.updatePage({\n\t\t\tid: id as TLPageId,\n\t\t\tindex,\n\t\t})\n\t}\n}\n"],
+  "mappings": "AAAA;AAAA,EAEC;AAAA,EACA;AAAA,EACA;AAAA,OAEM;AAEA,MAAM,aAAa,CAAC,QAAgB,IAAc,MAAc,OAAe;AACrF,MAAI;AAEJ,QAAM,QAAQ,OAAO,SAAS;AAE9B,QAAM,QAAQ,OAAO,KAAK,MAAM,KAAK,CAAC,IAAI,MAAM,EAAE;AAClD,QAAM,QAAQ,OAAO,KAAK,MAAM,EAAE,IAAI,MAAM,KAAK,CAAC;AAElD,MAAI,SAAS,CAAC,OAAO;AACpB,YAAQ,cAAc,MAAM,KAAK;AAAA,EAClC,WAAW,CAAC,SAAS,OAAO;AAC3B,YAAQ,cAAc,MAAM,CAAC,EAAE,KAAK;AAAA,EACrC,OAAO;AACN,YAAQ,gBAAgB,MAAM,OAAO,MAAM,KAAK;AAAA,EACjD;AAEA,MAAI,UAAU,MAAM,IAAI,EAAE,OAAO;AAChC,WAAO,KAAK,aAAa;AACzB,WAAO,WAAW;AAAA,MACjB;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AACD;",
+  "names": []
+}

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

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { track, useEditor } from "@bigbluebutton/editor";
+import { useActions } from "../hooks/useActions.mjs";
+import { Button } from "./primitives/Button.mjs";
+const ExitPenMode = track(function ExitPenMode2() {
+  const editor = useEditor();
+  const isPenMode = editor.getInstanceState().isPenMode;
+  const actions = useActions();
+  if (!isPenMode)
+    return null;
+  const action = actions["exit-pen-mode"];
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "normal",
+      label: action.label,
+      iconLeft: action.icon,
+      onClick: () => action.onSelect("helper-buttons")
+    }
+  );
+});
+export {
+  ExitPenMode
+};
+//# sourceMappingURL=PenModeToggle.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/PenModeToggle.tsx"],
+  "sourcesContent": ["import { track, useEditor } from '@bigbluebutton/editor'\nimport { useActions } from '../hooks/useActions'\nimport { Button } from './primitives/Button'\n\nexport const ExitPenMode = track(function ExitPenMode() {\n\tconst editor = useEditor()\n\n\tconst isPenMode = editor.getInstanceState().isPenMode\n\n\tconst actions = useActions()\n\n\tif (!isPenMode) return null\n\n\tconst action = actions['exit-pen-mode']\n\n\treturn (\n\t\t<Button\n\t\t\ttype=\"normal\"\n\t\t\tlabel={action.label}\n\t\t\ticonLeft={action.icon}\n\t\t\tonClick={() => action.onSelect('helper-buttons')}\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAgBE;AAhBF,SAAS,OAAO,iBAAiB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEhB,MAAM,cAAc,MAAM,SAASA,eAAc;AACvD,QAAM,SAAS,UAAU;AAEzB,QAAM,YAAY,OAAO,iBAAiB,EAAE;AAE5C,QAAM,UAAU,WAAW;AAE3B,MAAI,CAAC;AAAW,WAAO;AAEvB,QAAM,SAAS,QAAQ,eAAe;AAEtC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,SAAS,MAAM,OAAO,SAAS,gBAAgB;AAAA;AAAA,EAChD;AAEF,CAAC;",
+  "names": ["ExitPenMode"]
+}

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

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useActions } from "../hooks/useActions.mjs";
+import { useCanRedo } from "../hooks/useCanRedo.mjs";
+import { useTranslation } from "../hooks/useTranslation/useTranslation.mjs";
+import { Button } from "./primitives/Button.mjs";
+import { kbdStr } from "./primitives/shared.mjs";
+const RedoButton = memo(function RedoButton2() {
+  const msg = useTranslation();
+  const canRedo = useCanRedo();
+  const actions = useActions();
+  const redo = actions["redo"];
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "data-testid": "main.redo",
+      icon: redo.icon,
+      type: "icon",
+      title: `${msg(redo.label)} ${kbdStr(redo.kbd)}`,
+      disabled: !canRedo,
+      onClick: () => redo.onSelect("quick-actions"),
+      smallIcon: true
+    }
+  );
+});
+export {
+  RedoButton
+};
+//# sourceMappingURL=RedoButton.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/lib/ui/components/RedoButton.tsx"],
+  "sourcesContent": ["import { memo } from 'react'\nimport { useActions } from '../hooks/useActions'\nimport { useCanRedo } from '../hooks/useCanRedo'\nimport { useTranslation } from '../hooks/useTranslation/useTranslation'\nimport { Button } from './primitives/Button'\nimport { kbdStr } from './primitives/shared'\n\nexport const RedoButton = memo(function RedoButton() {\n\tconst msg = useTranslation()\n\tconst canRedo = useCanRedo()\n\tconst actions = useActions()\n\n\tconst redo = actions['redo']\n\n\treturn (\n\t\t<Button\n\t\t\tdata-testid=\"main.redo\"\n\t\t\ticon={redo.icon}\n\t\t\ttype=\"icon\"\n\t\t\ttitle={`${msg(redo.label!)} ${kbdStr(redo.kbd!)}`}\n\t\t\tdisabled={!canRedo}\n\t\t\tonClick={() => redo.onSelect('quick-actions')}\n\t\t\tsmallIcon\n\t\t/>\n\t)\n})\n"],
+  "mappings": "AAeE;AAfF,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,cAAc;AAEhB,MAAM,aAAa,KAAK,SAASA,cAAa;AACpD,QAAM,MAAM,eAAe;AAC3B,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,WAAW;AAE3B,QAAM,OAAO,QAAQ,MAAM;AAE3B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,MAAK;AAAA,MACL,OAAO,GAAG,IAAI,KAAK,KAAM,CAAC,IAAI,OAAO,KAAK,GAAI,CAAC;AAAA,MAC/C,UAAU,CAAC;AAAA,MACX,SAAS,MAAM,KAAK,SAAS,eAAe;AAAA,MAC5C,WAAS;AAAA;AAAA,EACV;AAEF,CAAC;",
+  "names": ["RedoButton"]
+}

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

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Spinner(props) {
+  return /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsxs("g", { strokeWidth: 2, fill: "none", fillRule: "evenodd", children: [
+    /* @__PURE__ */ jsx("circle", { strokeOpacity: 0.25, cx: 8, cy: 8, r: 7, stroke: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M15 8c0-4.5-4.5-7-7-7", stroke: "currentColor", children: /* @__PURE__ */ jsx(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 8 8",
+        to: "360 8 8",
+        dur: "1s",
+        repeatCount: "indefinite"
+      }
+    ) })
+  ] }) });
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.mjs.map