microboard-ui-temp 0.9.0 → 0.9.2

package/dist/{chunk-jhg35595.js → chunk-sdy0vgy6.js}

@@ -376852,7 +376852,7 @@ function shouldShow(panel) {
 }
 
 // src/features/SidePanelsContainer/SidePanelsContainer.tsx
-var import_react369 = __toESM(require_react(), 1);
+var import_react367 = __toESM(require_react(), 1);
 
 // src/features/AppView/InactiveBoardHidder.tsx
 var import_react308 = __toESM(require_react(), 1);
@@ -437242,7 +437242,7 @@ function ExportDropdown({
   openShareSnapshot
 }) {
   const { t: t11 } = useTranslation();
-  const [position5, setPosition] = import_react320.useState({ top: 0, left: 0 });
+  const [position5, setPosition] = import_react320.useState(null);
   import_react320.useEffect(() => {
     if (buttonRef.current) {
       const rect = buttonRef.current.getBoundingClientRect();
@@ -437252,6 +437252,8 @@ function ExportDropdown({
       });
     }
   }, [buttonRef]);
+  if (!position5)
+    return null;
   return import_react_dom14.createPortal(/* @__PURE__ */ import_react320.default.createElement("div", {
     className: TitlePanel_module_default.exportDropdown,
     style: {
@@ -437900,7 +437902,7 @@ var AIChatPanel = ({ board }) => {
 var AIChatPanel_default = AIChatPanel;
 
 // src/features/ToolsPanel/ToolsPanel.tsx
-var import_react363 = __toESM(require_react(), 1);
+var import_react361 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/AddConnector.tsx
 var import_react324 = __toESM(require_react(), 1);
@@ -439671,157 +439673,8 @@ function Redo() {
   }));
 }
 
-// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
-var import_react353 = __toESM(require_react(), 1);
-
-// src/shared/lib/uiTheme.ts
-var import_react352 = __toESM(require_react(), 1);
-var STORAGE_KEY = "ui-theme";
-function applyTheme(theme2) {
-  document.documentElement.setAttribute("data-theme", theme2);
-  conf.theme = theme2;
-}
-function getInitialTheme() {
-  const stored = localStorage.getItem(STORAGE_KEY);
-  if (stored === "light" || stored === "dark")
-    return stored;
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function initTheme() {
-  applyTheme(getInitialTheme());
-}
-function toggleUITheme() {
-  const current2 = document.documentElement.getAttribute("data-theme");
-  const next5 = current2 === "dark" ? "light" : "dark";
-  localStorage.setItem(STORAGE_KEY, next5);
-  applyTheme(next5);
-  return next5;
-}
-function getCurrentUITheme() {
-  return document.documentElement.getAttribute("data-theme") ?? "light";
-}
-function useUITheme() {
-  const [theme2, setTheme] = import_react352.useState(getCurrentUITheme);
-  const toggle = () => {
-    setTheme(toggleUITheme());
-  };
-  return { theme: theme2, toggle };
-}
-
-// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
-function SunIcon() {
-  return /* @__PURE__ */ import_react353.default.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ import_react353.default.createElement("circle", {
-    cx: "10",
-    cy: "10",
-    r: "3.5",
-    stroke: "currentColor",
-    strokeWidth: "1.5"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "10",
-    y1: "1",
-    x2: "10",
-    y2: "3.5",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "10",
-    y1: "16.5",
-    x2: "10",
-    y2: "19",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "19",
-    y1: "10",
-    x2: "16.5",
-    y2: "10",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "3.5",
-    y1: "10",
-    x2: "1",
-    y2: "10",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "16.07",
-    y1: "3.93",
-    x2: "14.31",
-    y2: "5.69",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "5.69",
-    y1: "14.31",
-    x2: "3.93",
-    y2: "16.07",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "16.07",
-    y1: "16.07",
-    x2: "14.31",
-    y2: "14.31",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /* @__PURE__ */ import_react353.default.createElement("line", {
-    x1: "5.69",
-    y1: "5.69",
-    x2: "3.93",
-    y2: "3.93",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }));
-}
-function MoonIcon() {
-  return /* @__PURE__ */ import_react353.default.createElement("svg", {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ import_react353.default.createElement("path", {
-    d: "M17 12.5A7.5 7.5 0 1 1 7.5 3a5.5 5.5 0 0 0 9.5 9.5z",
-    stroke: "currentColor",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-}
-function ThemeToggle() {
-  const { board } = useAppContext();
-  const { theme: theme2, toggle } = useUITheme();
-  const handleClick = () => {
-    toggle();
-    board.items.subject.publish(board.items);
-  };
-  return /* @__PURE__ */ import_react353.default.createElement(UiButton, {
-    id: "theme-toggle",
-    tooltip: theme2 === "light" ? "Switch to dark theme" : "Switch to light theme",
-    tooltipPosition: "bottom",
-    onClick: handleClick,
-    variant: "secondary",
-    rounded: "none"
-  }, theme2 === "light" ? /* @__PURE__ */ import_react353.default.createElement(MoonIcon, null) : /* @__PURE__ */ import_react353.default.createElement(SunIcon, null));
-}
-
 // src/features/ToolsPanel/Buttons/Select.tsx
-var import_react354 = __toESM(require_react(), 1);
+var import_react352 = __toESM(require_react(), 1);
 function Select3({ rounded = "top" }) {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -439833,7 +439686,7 @@ function Select3({ rounded = "top" }) {
     }
   }
   const isActive = Boolean(board.tools.getSelect());
-  return /* @__PURE__ */ import_react354.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react352.default.createElement(UiButton, {
     id: "tool-select",
     tooltip: isActive ? undefined : t11("toolsPanel.select.tooltip"),
     hotkey: getHotkeyLabel("select"),
@@ -439841,13 +439694,13 @@ function Select3({ rounded = "top" }) {
     active: isActive,
     variant: "secondary",
     rounded
-  }, /* @__PURE__ */ import_react354.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react352.default.createElement(Icon, {
     iconName: "Select"
   }));
 }
 
 // src/features/ToolsPanel/Buttons/Undo.tsx
-var import_react355 = __toESM(require_react(), 1);
+var import_react353 = __toESM(require_react(), 1);
 function Undo() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -439860,7 +439713,7 @@ function Undo() {
     board.events?.undo();
   };
   const canUndo = board.events?.canUndo();
-  return /* @__PURE__ */ import_react355.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react353.default.createElement(UiButton, {
     id: "undo",
     tooltip: t11("toolsPanel.undo.tooltip"),
     hotkey: getHotkeyLabel("undo"),
@@ -439868,7 +439721,7 @@ function Undo() {
     disabled: !canUndo,
     rounded: "top",
     variant: "secondary"
-  }, /* @__PURE__ */ import_react355.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react353.default.createElement(Icon, {
     iconName: "Undo"
   }));
 }
@@ -439884,13 +439737,13 @@ var ToolsPanel_module_default = {
 };
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddGameItem.tsx
-var import_react362 = __toESM(require_react(), 1);
+var import_react360 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddDice.tsx
-var import_react357 = __toESM(require_react(), 1);
+var import_react355 = __toESM(require_react(), 1);
 
 // src/features/GameItems/CreateDiceModal.tsx
-var import_react356 = __toESM(require_react(), 1);
+var import_react354 = __toESM(require_react(), 1);
 
 // src/features/GameItems/Modal.module.css
 var Modal_module_default = {
@@ -439916,14 +439769,14 @@ var MIN_SIDES = 3;
 var MAX_SIDES = 20;
 function CreateDiceModal() {
   const { closeModal: closeModal2 } = useUiModalContext();
-  const [faces, setFaces] = import_react356.useState(Array(MIN_SIDES).fill(null));
-  const [previews, setPreviews] = import_react356.useState(Array(MIN_SIDES).fill(null));
-  const [isLoading, setIsLoading] = import_react356.useState(false);
-  const inputRefs = import_react356.useRef([]);
+  const [faces, setFaces] = import_react354.useState(Array(MIN_SIDES).fill(null));
+  const [previews, setPreviews] = import_react354.useState(Array(MIN_SIDES).fill(null));
+  const [isLoading, setIsLoading] = import_react354.useState(false);
+  const inputRefs = import_react354.useRef([]);
   const { board } = useAppContext();
   const account = useAccount();
   const { t: t11 } = useTranslation();
-  import_react356.useEffect(() => {
+  import_react354.useEffect(() => {
     faces.forEach((file, idx) => {
       if (file) {
         const reader = new FileReader;
@@ -440009,43 +439862,43 @@ function CreateDiceModal() {
     }
     closeModal2();
   };
-  return /* @__PURE__ */ import_react356.default.createElement(UiModal, {
+  return /* @__PURE__ */ import_react354.default.createElement(UiModal, {
     modalId: CREATE_DICE_MODAL,
     closeOnClickOutside: false,
     renderAsPageOnMobile: true
-  }, /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, /* @__PURE__ */ import_react354.default.createElement("div", {
     className: Modal_module_default.modalContent
-  }, /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, /* @__PURE__ */ import_react354.default.createElement("div", {
     className: Modal_module_default.title
-  }, t11("toolsPanel.addGameItem.addDice.title")), /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, t11("toolsPanel.addGameItem.addDice.title")), /* @__PURE__ */ import_react354.default.createElement("div", {
     className: Modal_module_default.cardsRow,
     style: { flexWrap: "wrap", gap: 16 }
-  }, faces.map((face, idx) => /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, faces.map((face, idx) => /* @__PURE__ */ import_react354.default.createElement("div", {
     key: idx,
     className: Modal_module_default.diceFace,
     onClick: () => handleFaceClick(idx)
-  }, previews[idx] ? /* @__PURE__ */ import_react356.default.createElement("img", {
+  }, previews[idx] ? /* @__PURE__ */ import_react354.default.createElement("img", {
     src: previews[idx] || undefined,
     alt: `face-${idx + 1}`,
     className: Modal_module_default.dicePreview
-  }) : /* @__PURE__ */ import_react356.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react354.default.createElement("span", {
     className: Modal_module_default.diceLabel
-  }, idx + 1), /* @__PURE__ */ import_react356.default.createElement("input", {
+  }, idx + 1), /* @__PURE__ */ import_react354.default.createElement("input", {
     type: "file",
     accept: "image/*",
     style: { display: "none" },
     ref: (el2) => inputRefs.current[idx] = el2,
     onChange: (ev) => handleFileChange(idx, ev)
-  }))), faces.length < MAX_SIDES && /* @__PURE__ */ import_react356.default.createElement("div", {
+  }))), faces.length < MAX_SIDES && /* @__PURE__ */ import_react354.default.createElement("div", {
     className: Modal_module_default.addFaceBtn,
     onClick: handleAddFace
-  }, "+")), faces.length > MIN_SIDES && /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, "+")), faces.length > MIN_SIDES && /* @__PURE__ */ import_react354.default.createElement("div", {
     className: Modal_module_default.removeFaceBtnWrapper
-  }, /* @__PURE__ */ import_react356.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react354.default.createElement(UiButton, {
     variant: "secondary",
     onClick: handleRemoveLastFace,
     className: Modal_module_default.removeFaceBtn
-  }, t11("toolsPanel.addGameItem.addDice.removeFace"))), /* @__PURE__ */ import_react356.default.createElement(UiButton, {
+  }, t11("toolsPanel.addGameItem.addDice.removeFace"))), /* @__PURE__ */ import_react354.default.createElement(UiButton, {
     className: Modal_module_default.acceptBtn,
     variant: "primary",
     onClick: handleAccept,
@@ -440060,23 +439913,23 @@ function AddDice2({ rounded }) {
   const handleClick = () => {
     openModal2(CREATE_DICE_MODAL);
   };
-  return /* @__PURE__ */ import_react357.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react355.default.createElement(UiButton, {
     id: "tool-add-dice",
     tooltip: t11("toolsPanel.addGameItem.addDice.tooltip"),
     onClick: handleClick,
     active: false,
     variant: "secondary",
     rounded
-  }, /* @__PURE__ */ import_react357.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react355.default.createElement(Icon, {
     iconName: "Dice"
   }));
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddCard.tsx
-var import_react359 = __toESM(require_react(), 1);
+var import_react357 = __toESM(require_react(), 1);
 
 // src/features/GameItems/CreateCardsModal.tsx
-var import_react358 = __toESM(require_react(), 1);
+var import_react356 = __toESM(require_react(), 1);
 var CREATE_CARDS_MODAL = Symbol("createCardsModal");
 var getImageDimensions = (file) => {
   return new Promise((resolve2) => {
@@ -440095,14 +439948,14 @@ function CreateCardsModal() {
   const { closeModal: closeModal2 } = useUiModalContext();
   const { board } = useAppContext();
   const account = useAccount();
-  const [cover, setCover] = import_react358.default.useState(null);
-  const [coverPreview, setCoverPreview] = import_react358.default.useState(null);
-  const [cards, setCards] = import_react358.default.useState([]);
-  const [cardsPreview, setCardsPreview] = import_react358.default.useState([]);
-  const [loading, setLoading] = import_react358.default.useState(false);
-  const [cardDimensions, setCardDimensions] = import_react358.useState(conf.DEFAULT_GAME_ITEM_DIMENSIONS);
-  const coverInputRef = import_react358.default.useRef(null);
-  const cardsInputRef = import_react358.default.useRef(null);
+  const [cover, setCover] = import_react356.default.useState(null);
+  const [coverPreview, setCoverPreview] = import_react356.default.useState(null);
+  const [cards, setCards] = import_react356.default.useState([]);
+  const [cardsPreview, setCardsPreview] = import_react356.default.useState([]);
+  const [loading, setLoading] = import_react356.default.useState(false);
+  const [cardDimensions, setCardDimensions] = import_react356.useState(conf.DEFAULT_GAME_ITEM_DIMENSIONS);
+  const coverInputRef = import_react356.default.useRef(null);
+  const cardsInputRef = import_react356.default.useRef(null);
   const handleCoverClick = () => coverInputRef.current?.click();
   const handleCardsClick = () => cardsInputRef.current?.click();
   const createDeck2 = (backsideUrl, faceUrls) => {
@@ -440166,17 +440019,17 @@ function CreateCardsModal() {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ import_react358.default.createElement(UiModal, {
+  return /* @__PURE__ */ import_react356.default.createElement(UiModal, {
     modalId: CREATE_CARDS_MODAL,
     closeOnClickOutside: false,
     renderAsPageOnMobile: true
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react356.default.createElement("div", {
     className: Modal_module_default.modalContent
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react356.default.createElement("div", {
     className: Modal_module_default.title
-  }, t11("toolsPanel.addGameItem.addCard.title")), /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, t11("toolsPanel.addGameItem.addCard.title")), /* @__PURE__ */ import_react356.default.createElement("div", {
     className: Modal_module_default.cardsRow
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react356.default.createElement("div", {
     className: Modal_module_default.cardSilhouette,
     onClick: handleCoverClick,
     style: {
@@ -440184,19 +440037,19 @@ function CreateCardsModal() {
       height: cardDimensions.height,
       maxWidth: "80vw"
     }
-  }, coverPreview ? /* @__PURE__ */ import_react358.default.createElement("img", {
+  }, coverPreview ? /* @__PURE__ */ import_react356.default.createElement("img", {
     src: coverPreview,
     alt: "cover",
     className: Modal_module_default.cardPreview
-  }) : /* @__PURE__ */ import_react358.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react356.default.createElement("span", {
     className: Modal_module_default.cardLabel
-  }, t11("toolsPanel.addGameItem.addCard.cover")), /* @__PURE__ */ import_react358.default.createElement("input", {
+  }, t11("toolsPanel.addGameItem.addCard.cover")), /* @__PURE__ */ import_react356.default.createElement("input", {
     type: "file",
     accept: "image/*",
     style: { display: "none" },
     ref: coverInputRef,
     onChange: handleCoverChange
-  })), /* @__PURE__ */ import_react358.default.createElement("div", {
+  })), /* @__PURE__ */ import_react356.default.createElement("div", {
     className: Modal_module_default.cardSilhouette,
     onClick: handleCardsClick,
     style: {
@@ -440204,20 +440057,20 @@ function CreateCardsModal() {
       height: cardDimensions.height,
       maxWidth: "80vw"
     }
-  }, cardsPreview.length > 0 ? /* @__PURE__ */ import_react358.default.createElement("img", {
+  }, cardsPreview.length > 0 ? /* @__PURE__ */ import_react356.default.createElement("img", {
     src: cardsPreview[0],
     alt: "preview",
     className: Modal_module_default.cardPreview
-  }) : /* @__PURE__ */ import_react358.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react356.default.createElement("span", {
     className: Modal_module_default.cardLabel
-  }, t11("toolsPanel.addGameItem.addCard.cards")), /* @__PURE__ */ import_react358.default.createElement("input", {
+  }, t11("toolsPanel.addGameItem.addCard.cards")), /* @__PURE__ */ import_react356.default.createElement("input", {
     type: "file",
     accept: "image/*",
     multiple: true,
     style: { display: "none" },
     ref: cardsInputRef,
     onChange: handleCardsChange
-  }))), /* @__PURE__ */ import_react358.default.createElement(UiButton, {
+  }))), /* @__PURE__ */ import_react356.default.createElement(UiButton, {
     className: Modal_module_default.acceptBtn,
     variant: "primary",
     onClick: handleAccept,
@@ -440232,13 +440085,13 @@ function AddCard({ rounded = "none" }) {
   const handleClick = () => {
     openModal2(CREATE_CARDS_MODAL);
   };
-  return /* @__PURE__ */ import_react359.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react357.default.createElement(UiButton, {
     id: `tool-add-card`,
     tooltip: t11("toolsPanel.addGameItem.addCard.tooltip"),
     onClick: handleClick,
     rounded,
     variant: "secondary"
-  }, /* @__PURE__ */ import_react359.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react357.default.createElement(Icon, {
     iconName: "Card",
     width: 24,
     height: 24
@@ -440246,7 +440099,7 @@ function AddCard({ rounded = "none" }) {
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddScreen.tsx
-var import_react360 = __toESM(require_react(), 1);
+var import_react358 = __toESM(require_react(), 1);
 function AddScreen2() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440254,20 +440107,20 @@ function AddScreen2() {
     board.tools.addRegisteredTool("AddScreen", true);
   };
   const isActive = Boolean(board.tools.getAddRegisteredTool("AddScreen"));
-  return /* @__PURE__ */ import_react360.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react358.default.createElement(UiButton, {
     id: "tool-add-screen",
     tooltip: t11("toolsPanel.addGameItem.addScreen.tooltip"),
     onClick: handleClick,
     variant: "secondary",
     rounded: "none",
     active: isActive
-  }, /* @__PURE__ */ import_react360.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react358.default.createElement(Icon, {
     iconName: "AddScreen"
   }));
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddPouch.tsx
-var import_react361 = __toESM(require_react(), 1);
+var import_react359 = __toESM(require_react(), 1);
 function AddPouch2() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440275,14 +440128,14 @@ function AddPouch2() {
     board.tools.addRegisteredTool("AddPouch", true);
   };
   const isActive = Boolean(board.tools.getAddRegisteredTool("AddPouch"));
-  return /* @__PURE__ */ import_react361.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react359.default.createElement(UiButton, {
     id: "tool-add-pouch",
     tooltip: t11("toolsPanel.addGameItem.addPouch.tooltip"),
     onClick: handleClick,
     variant: "secondary",
     rounded: "none",
     active: isActive
-  }, /* @__PURE__ */ import_react361.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react359.default.createElement(Icon, {
     iconName: "AddPouch",
     width: 24,
     height: 24
@@ -440291,35 +440144,35 @@ function AddPouch2() {
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddGameItem.tsx
 function AddGameItem() {
-  const [isOpen, setIsOpen] = import_react362.useState(false);
+  const [isOpen, setIsOpen] = import_react360.useState(false);
   const { t: t11 } = useTranslation();
   const ref4 = useClickOutside(() => setIsOpen(false), [], true);
-  return /* @__PURE__ */ import_react362.default.createElement(ButtonWithMenu2, {
+  return /* @__PURE__ */ import_react360.default.createElement(ButtonWithMenu2, {
     ref: ref4,
-    button: /* @__PURE__ */ import_react362.default.createElement(UiButton, {
+    button: /* @__PURE__ */ import_react360.default.createElement(UiButton, {
       id: "tool-add-game-item",
       tooltip: t11("toolsPanel.addGameItem.tooltip"),
       active: isOpen,
       variant: "secondary",
       rounded: "top",
       onClick: () => setIsOpen(!isOpen)
-    }, /* @__PURE__ */ import_react362.default.createElement(Icon, {
+    }, /* @__PURE__ */ import_react360.default.createElement(Icon, {
       iconName: "GameItems"
     })),
     isOpen
-  }, /* @__PURE__ */ import_react362.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react360.default.createElement(UiPanel, {
     vertical: true,
     padding: 0
-  }, /* @__PURE__ */ import_react362.default.createElement(AddDice2, {
+  }, /* @__PURE__ */ import_react360.default.createElement(AddDice2, {
     rounded: "top"
-  }), /* @__PURE__ */ import_react362.default.createElement(AddScreen2, null), /* @__PURE__ */ import_react362.default.createElement(AddPouch2, null), /* @__PURE__ */ import_react362.default.createElement(AddCard, {
+  }), /* @__PURE__ */ import_react360.default.createElement(AddScreen2, null), /* @__PURE__ */ import_react360.default.createElement(AddPouch2, null), /* @__PURE__ */ import_react360.default.createElement(AddCard, {
     rounded: "bottom"
   })));
 }
 
 // src/features/ToolsPanel/ToolsPanel.tsx
 function ToolsPanel() {
-  const [openedMenu, setOpenedMenu] = import_react363.useState("None");
+  const [openedMenu, setOpenedMenu] = import_react361.useState("None");
   const toggleMenu = (menu) => setOpenedMenu((prev2) => prev2 === menu ? "None" : menu);
   const { app } = useAppContext();
   const forceUpdate = useForceUpdate();
@@ -440327,31 +440180,31 @@ function ToolsPanel() {
     subjects: ["tools"],
     observer: forceUpdate
   });
-  import_react363.useEffect(() => {}, [window.showDebug]);
-  return /* @__PURE__ */ import_react363.default.createElement(PanelContext2.Provider, {
+  import_react361.useEffect(() => {}, [window.showDebug]);
+  return /* @__PURE__ */ import_react361.default.createElement(PanelContext2.Provider, {
     value: { toggleMenu, openedMenu }
-  }, /* @__PURE__ */ import_react363.default.createElement("div", {
+  }, /* @__PURE__ */ import_react361.default.createElement("div", {
     className: window.location.protocol === "file:" ? ToolsPanel_module_default.localWrapper : ToolsPanel_module_default.wrapper
-  }, /* @__PURE__ */ import_react363.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react361.default.createElement(UiPanel, {
     vertical: true,
     padding: 0,
     zIndex: 20
-  }, /* @__PURE__ */ import_react363.default.createElement(AddGameItem, null), /* @__PURE__ */ import_react363.default.createElement(AddTemplate, null), /* @__PURE__ */ import_react363.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react363.default.createElement(Select3, {
+  }, /* @__PURE__ */ import_react361.default.createElement(AddGameItem, null), /* @__PURE__ */ import_react361.default.createElement(AddTemplate, null), /* @__PURE__ */ import_react361.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react361.default.createElement(Select3, {
     rounded: "none"
-  }), /* @__PURE__ */ import_react363.default.createElement(AddDrawing2, null), /* @__PURE__ */ import_react363.default.createElement(AddText2, null), /* @__PURE__ */ import_react363.default.createElement(AddShape2, null), /* @__PURE__ */ import_react363.default.createElement(AddConnector2, null), /* @__PURE__ */ import_react363.default.createElement(AddSticker2, null), /* @__PURE__ */ import_react363.default.createElement(AddFrame2, null), /* @__PURE__ */ import_react363.default.createElement(AddMedia, null)), /* @__PURE__ */ import_react363.default.createElement(UiPanel, {
+  }), /* @__PURE__ */ import_react361.default.createElement(AddDrawing2, null), /* @__PURE__ */ import_react361.default.createElement(AddText2, null), /* @__PURE__ */ import_react361.default.createElement(AddShape2, null), /* @__PURE__ */ import_react361.default.createElement(AddConnector2, null), /* @__PURE__ */ import_react361.default.createElement(AddSticker2, null), /* @__PURE__ */ import_react361.default.createElement(AddFrame2, null), /* @__PURE__ */ import_react361.default.createElement(AddMedia, null)), /* @__PURE__ */ import_react361.default.createElement(UiPanel, {
     vertical: true,
     padding: 0
-  }, /* @__PURE__ */ import_react363.default.createElement(Undo, null), /* @__PURE__ */ import_react363.default.createElement(Redo, null), /* @__PURE__ */ import_react363.default.createElement(ThemeToggle, null)), /* @__PURE__ */ import_react363.default.createElement("div", {
+  }, /* @__PURE__ */ import_react361.default.createElement(Undo, null), /* @__PURE__ */ import_react361.default.createElement(Redo, null)), /* @__PURE__ */ import_react361.default.createElement("div", {
     className: ToolsPanel_module_default.bottomLeftWrapper
-  }, window.showDebug && /* @__PURE__ */ import_react363.default.createElement(EventList, null), window.enableDiagrams && /* @__PURE__ */ import_react363.default.createElement(AIChatPanel_default, {
+  }, window.showDebug && /* @__PURE__ */ import_react361.default.createElement(EventList, null), window.enableDiagrams && /* @__PURE__ */ import_react361.default.createElement(AIChatPanel_default, {
     board: app.getBoard()
   }))));
 }
 // src/features/ToolsPanel/ViewToolsPanel.tsx
-var import_react365 = __toESM(require_react(), 1);
+var import_react363 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/Grab.tsx
-var import_react364 = __toESM(require_react(), 1);
+var import_react362 = __toESM(require_react(), 1);
 function Grab() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440359,14 +440212,14 @@ function Grab() {
     board.tools.navigate();
   };
   const isActive = Boolean(board.tools.getNavigate());
-  return /* @__PURE__ */ import_react364.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react362.default.createElement(UiButton, {
     id: "tool-select",
     tooltip: isActive ? undefined : t11("toolsPanel.grab.tooltip"),
     onClick: handleClick,
     active: isActive,
     variant: "secondary",
     rounded: "top"
-  }, /* @__PURE__ */ import_react364.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react362.default.createElement(Icon, {
     iconName: "Hand"
   }));
 }
@@ -440378,25 +440231,25 @@ function ViewToolsPanel() {
     subjects: ["tools"],
     observer: forceUpdate
   });
-  import_react365.useEffect(() => {}, [window.showDebug]);
-  return /* @__PURE__ */ import_react365.default.createElement("div", {
+  import_react363.useEffect(() => {}, [window.showDebug]);
+  return /* @__PURE__ */ import_react363.default.createElement("div", {
     className: ToolsPanel_module_default.wrapper
-  }, /* @__PURE__ */ import_react365.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react363.default.createElement(UiPanel, {
     vertical: true,
     padding: 0,
     zIndex: 20
-  }, /* @__PURE__ */ import_react365.default.createElement(Grab, null), /* @__PURE__ */ import_react365.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react365.default.createElement(Select3, {
+  }, /* @__PURE__ */ import_react363.default.createElement(Grab, null), /* @__PURE__ */ import_react363.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react363.default.createElement(Select3, {
     rounded: "bottom"
-  })), window.showDebug && /* @__PURE__ */ import_react365.default.createElement(EventList, null));
+  })), window.showDebug && /* @__PURE__ */ import_react363.default.createElement(EventList, null));
 }
 
 // src/features/BoardItemsPanel/BoardItemsPanel.tsx
-var import_react368 = __toESM(require_react(), 1);
+var import_react366 = __toESM(require_react(), 1);
 
 // src/shared/lib/useHotkey.ts
-var import_react366 = __toESM(require_react(), 1);
+var import_react364 = __toESM(require_react(), 1);
 function useHotkey(code4, callback, options3 = {}) {
-  import_react366.useEffect(() => {
+  import_react364.useEffect(() => {
     const { ctrl = false, shift: shift2 = false, alt = false, meta: meta3 = false } = options3;
     const handler = (event) => {
       const target = event.target;
@@ -440414,7 +440267,7 @@ function useHotkey(code4, callback, options3 = {}) {
 }
 
 // src/features/BoardItemsPanel/BoardItemsPanelContext.tsx
-var import_react367 = __toESM(require_react(), 1);
+var import_react365 = __toESM(require_react(), 1);
 var BoardItemsPanelContext = createStrictContext();
 function useBoardItemsPanelContext() {
   return useStrictContext(BoardItemsPanelContext);
@@ -440422,8 +440275,8 @@ function useBoardItemsPanelContext() {
 function BoardItemsPanelContextProvider({
   children
 }) {
-  const [isOpen, setIsOpen] = import_react367.useState(false);
-  return /* @__PURE__ */ import_react367.default.createElement(BoardItemsPanelContext.Provider, {
+  const [isOpen, setIsOpen] = import_react365.useState(false);
+  return /* @__PURE__ */ import_react365.default.createElement(BoardItemsPanelContext.Provider, {
     value: {
       isOpen,
       openPanel: () => setIsOpen(true),
@@ -440450,49 +440303,49 @@ var BoardItemsPanel_module_default = {
 // src/features/BoardItemsPanel/BoardItemsPanel.tsx
 function BoardItemsPanel() {
   const { isOpen, openPanel, closePanel } = useBoardItemsPanelContext();
-  const [query2, setQuery] = import_react368.useState("");
-  const inputRef = import_react368.useRef(null);
-  const handleOpenSearch = import_react368.useCallback(() => {
+  const [query2, setQuery] = import_react366.useState("");
+  const inputRef = import_react366.useRef(null);
+  const handleOpenSearch = import_react366.useCallback(() => {
     openPanel();
     setTimeout(() => inputRef.current?.focus(), 50);
   }, [openPanel]);
   useHotkey("KeyF", handleOpenSearch, { ctrl: true });
-  return /* @__PURE__ */ import_react368.default.createElement(UiPanel, {
+  return /* @__PURE__ */ import_react366.default.createElement(UiPanel, {
     padding: 0,
     className: clsx_default(BoardItemsPanel_module_default.panel, isOpen && BoardItemsPanel_module_default.open)
-  }, /* @__PURE__ */ import_react368.default.createElement("div", {
+  }, /* @__PURE__ */ import_react366.default.createElement("div", {
     className: BoardItemsPanel_module_default.header
-  }, /* @__PURE__ */ import_react368.default.createElement("h3", {
+  }, /* @__PURE__ */ import_react366.default.createElement("h3", {
     className: BoardItemsPanel_module_default.title
-  }, "Предметы"), /* @__PURE__ */ import_react368.default.createElement(UiButton, {
+  }, "Предметы"), /* @__PURE__ */ import_react366.default.createElement(UiButton, {
     onClick: closePanel,
     variant: "secondary",
     className: BoardItemsPanel_module_default.close
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react366.default.createElement(Icon, {
     iconName: "Close"
-  }))), /* @__PURE__ */ import_react368.default.createElement("div", {
+  }))), /* @__PURE__ */ import_react366.default.createElement("div", {
     className: BoardItemsPanel_module_default.search
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react366.default.createElement(Icon, {
     iconName: "Search",
     width: 14,
     height: 14,
     className: BoardItemsPanel_module_default.searchIcon
-  }), /* @__PURE__ */ import_react368.default.createElement("input", {
+  }), /* @__PURE__ */ import_react366.default.createElement("input", {
     className: BoardItemsPanel_module_default.searchInput,
     placeholder: "Поиск...",
     ref: inputRef,
     value: query2,
     onChange: (e15) => setQuery(e15.target.value)
-  }), query2 && /* @__PURE__ */ import_react368.default.createElement("button", {
+  }), query2 && /* @__PURE__ */ import_react366.default.createElement("button", {
     className: BoardItemsPanel_module_default.searchClear,
     onClick: () => setQuery("")
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react366.default.createElement(Icon, {
     iconName: "Close",
     width: 12,
     height: 12
-  }))), /* @__PURE__ */ import_react368.default.createElement("div", {
+  }))), /* @__PURE__ */ import_react366.default.createElement("div", {
     className: BoardItemsPanel_module_default.content
-  }, /* @__PURE__ */ import_react368.default.createElement(BoardItemsList, {
+  }, /* @__PURE__ */ import_react366.default.createElement(BoardItemsList, {
     query: query2
   })));
 }
@@ -440503,7 +440356,7 @@ var SidePanelsContainer_module_default = {
 };
 
 // src/features/SidePanelsContainer/SidePanelsContainer.tsx
-var SidePanelsContainer = import_react369.memo(({ isBlank }) => {
+var SidePanelsContainer = import_react367.memo(({ isBlank }) => {
   const { toggleSideMenu, isOpen } = useSidePanelContext();
   const { renamingId } = useRenameContext();
   const containerRef = useClickOutside(() => {
@@ -440511,21 +440364,21 @@ var SidePanelsContainer = import_react369.memo(({ isBlank }) => {
       toggleSideMenu();
     }
   });
-  return /* @__PURE__ */ import_react369.default.createElement(BoardItemsPanelContextProvider, null, /* @__PURE__ */ import_react369.default.createElement(ShapesPanelContextProvider, null, /* @__PURE__ */ import_react369.default.createElement("div", {
+  return /* @__PURE__ */ import_react367.default.createElement(BoardItemsPanelContextProvider, null, /* @__PURE__ */ import_react367.default.createElement(ShapesPanelContextProvider, null, /* @__PURE__ */ import_react367.default.createElement("div", {
     ref: containerRef,
     className: SidePanelsContainer_module_default.sidePanels
-  }, (shouldShow("titlePanel") || !isIframe2()) && /* @__PURE__ */ import_react369.default.createElement(TitlePanel, null), /* @__PURE__ */ import_react369.default.createElement(ViewModeGuard, {
+  }, (shouldShow("titlePanel") || !isIframe2()) && /* @__PURE__ */ import_react367.default.createElement(TitlePanel, null), /* @__PURE__ */ import_react367.default.createElement(ViewModeGuard, {
     iframe: true
-  }, /* @__PURE__ */ import_react369.default.createElement("div", {
+  }, /* @__PURE__ */ import_react367.default.createElement("div", {
     className: SidePanelsContainer_module_default.hidingPanels
-  }, /* @__PURE__ */ import_react369.default.createElement(SidePanel, null), /* @__PURE__ */ import_react369.default.createElement(ShapesPanel, null), /* @__PURE__ */ import_react369.default.createElement(BoardItemsPanel, null)), /* @__PURE__ */ import_react369.default.createElement(InactiveBoardHidder, null, /* @__PURE__ */ import_react369.default.createElement(ViewModeGuard, {
+  }, /* @__PURE__ */ import_react367.default.createElement(SidePanel, null), /* @__PURE__ */ import_react367.default.createElement(ShapesPanel, null), /* @__PURE__ */ import_react367.default.createElement(BoardItemsPanel, null)), /* @__PURE__ */ import_react367.default.createElement(InactiveBoardHidder, null, /* @__PURE__ */ import_react367.default.createElement(ViewModeGuard, {
     mode: ["edit", "view"]
   }, (interfaceType) => {
     switch (interfaceType) {
       case "view":
-        return /* @__PURE__ */ import_react369.default.createElement(ViewToolsPanel, null);
+        return /* @__PURE__ */ import_react367.default.createElement(ViewToolsPanel, null);
       case "edit":
-        return /* @__PURE__ */ import_react369.default.createElement(ToolsPanel, null);
+        return /* @__PURE__ */ import_react367.default.createElement(ToolsPanel, null);
       default:
         return null;
     }
@@ -440533,10 +440386,10 @@ var SidePanelsContainer = import_react369.memo(({ isBlank }) => {
 });
 SidePanelsContainer.displayName = "SidePanelsContainer";
 // src/features/TextEditor/TextEditor.tsx
-var import_react372 = __toESM(require_react(), 1);
+var import_react370 = __toESM(require_react(), 1);
 
 // src/features/TextEditor/Leaf.tsx
-var import_react370 = __toESM(require_react(), 1);
+var import_react368 = __toESM(require_react(), 1);
 function Leaf2(props) {
   const { attributes, leaf: leaf3, fontSize, isAutoSize, text: text5 } = props;
   let { children } = props;
@@ -440562,26 +440415,26 @@ function Leaf2(props) {
   for (const style3 of styles2) {
     switch (style3) {
       case "bold":
-        children = /* @__PURE__ */ import_react370.default.createElement("strong", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("strong", null, children);
         break;
       case "italic":
-        children = /* @__PURE__ */ import_react370.default.createElement("em", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("em", null, children);
         break;
       case "underline":
-        children = /* @__PURE__ */ import_react370.default.createElement("u", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("u", null, children);
         break;
       case "line-through":
-        children = /* @__PURE__ */ import_react370.default.createElement("s", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("s", null, children);
         break;
       case "sub":
-        children = /* @__PURE__ */ import_react370.default.createElement("sub", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("sub", null, children);
         break;
       case "super":
-        children = /* @__PURE__ */ import_react370.default.createElement("sup", null, children);
+        children = /* @__PURE__ */ import_react368.default.createElement("sup", null, children);
         break;
     }
   }
-  return /* @__PURE__ */ import_react370.default.createElement("span", {
+  return /* @__PURE__ */ import_react368.default.createElement("span", {
     ...attributes,
     style: {
       color: props.text.fontColor,
@@ -440593,7 +440446,7 @@ function Leaf2(props) {
 }
 
 // src/features/TextEditor/Element.tsx
-var import_react371 = __toESM(require_react(), 1);
+var import_react369 = __toESM(require_react(), 1);
 
 // src/features/TextEditor/TextEditor.module.css
 var TextEditor_module_default = {
@@ -440638,7 +440491,7 @@ function Element4(props) {
   }
   switch (element5.type) {
     case "paragraph":
-      return /* @__PURE__ */ import_react371.default.createElement("p", {
+      return /* @__PURE__ */ import_react369.default.createElement("p", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440648,7 +440501,7 @@ function Element4(props) {
         }
       }, children);
     case "ul_list":
-      return /* @__PURE__ */ import_react371.default.createElement("ul", {
+      return /* @__PURE__ */ import_react369.default.createElement("ul", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440658,7 +440511,7 @@ function Element4(props) {
         }
       }, children);
     case "ol_list":
-      return /* @__PURE__ */ import_react371.default.createElement("ol", {
+      return /* @__PURE__ */ import_react369.default.createElement("ol", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440669,7 +440522,7 @@ function Element4(props) {
         className: getListMarkType2(element5.listLevel || 1)
       }, children);
     case "block-quote":
-      return /* @__PURE__ */ import_react371.default.createElement("blockquote", {
+      return /* @__PURE__ */ import_react369.default.createElement("blockquote", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440678,7 +440531,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_one":
-      return /* @__PURE__ */ import_react371.default.createElement("h1", {
+      return /* @__PURE__ */ import_react369.default.createElement("h1", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440687,7 +440540,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_two":
-      return /* @__PURE__ */ import_react371.default.createElement("h2", {
+      return /* @__PURE__ */ import_react369.default.createElement("h2", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440696,7 +440549,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_three":
-      return /* @__PURE__ */ import_react371.default.createElement("h3", {
+      return /* @__PURE__ */ import_react369.default.createElement("h3", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440705,7 +440558,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_four":
-      return /* @__PURE__ */ import_react371.default.createElement("h4", {
+      return /* @__PURE__ */ import_react369.default.createElement("h4", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440714,7 +440567,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_five":
-      return /* @__PURE__ */ import_react371.default.createElement("h5", {
+      return /* @__PURE__ */ import_react369.default.createElement("h5", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440723,7 +440576,7 @@ function Element4(props) {
         }
       }, children);
     case "code_block":
-      return /* @__PURE__ */ import_react371.default.createElement("code", {
+      return /* @__PURE__ */ import_react369.default.createElement("code", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440733,7 +440586,7 @@ function Element4(props) {
         }
       }, children);
     case "list_item":
-      return /* @__PURE__ */ import_react371.default.createElement("li", {
+      return /* @__PURE__ */ import_react369.default.createElement("li", {
         ...attributes,
         className: TextEditor_module_default.listItem,
         style: {
@@ -440747,7 +440600,7 @@ function Element4(props) {
         }
       }, children);
     default:
-      return /* @__PURE__ */ import_react371.default.createElement("span", {
+      return /* @__PURE__ */ import_react369.default.createElement("span", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440770,7 +440623,7 @@ function verticalAlignmentToFlex(align2) {
 }
 
 // src/features/TextEditor/TextEditor.tsx
-class TextEditors extends import_react372.default.Component {
+class TextEditors extends import_react370.default.Component {
   observer = () => {
     this.forceUpdate();
   };
@@ -440789,7 +440642,7 @@ class TextEditors extends import_react372.default.Component {
     if (!text5) {
       return null;
     }
-    return /* @__PURE__ */ import_react372.default.createElement(TextEditor, {
+    return /* @__PURE__ */ import_react370.default.createElement(TextEditor, {
       app: this.props.app,
       board: this.props.board,
       text: text5,
@@ -440801,7 +440654,7 @@ class TextEditors extends import_react372.default.Component {
   }
 }
 
-class TextEditor extends import_react372.default.Component {
+class TextEditor extends import_react370.default.Component {
   static getDerivedStateFromError(error3) {
     console.error("Text Editor error", error3);
     return { hasError: true };
@@ -440830,8 +440683,8 @@ class TextEditor extends import_react372.default.Component {
     isButtonVisible: false,
     isQuoteBtnTooltipVisible: false
   };
-  containerRef = import_react372.default.createRef();
-  editableRef = import_react372.default.createRef();
+  containerRef = import_react370.default.createRef();
+  editableRef = import_react370.default.createRef();
   updateHyperLinkDataFromSelectionAnchor(editor, isWatchMode) {
     const link2 = editor.getFirstSelectionLink(editor.getSelection());
     if (link2) {
@@ -441012,7 +440865,7 @@ class TextEditor extends import_react372.default.Component {
     const editorMaxWidth = text5.insideOf === "Sticker" ? maxWidth3 : Math.ceil(maxWidth3);
     const showPlaceholder = !text5.editor.includesListNode() && text5.getTextString().length === 0;
     if (this.state.hasError) {
-      return /* @__PURE__ */ import_react372.default.createElement("div", {
+      return /* @__PURE__ */ import_react370.default.createElement("div", {
         id: "TextEditor",
         ref: this.containerRef,
         className: "notranslate",
@@ -441044,7 +440897,7 @@ class TextEditor extends import_react372.default.Component {
         }
       }, "An editor error has occured");
     }
-    return /* @__PURE__ */ import_react372.default.createElement(import_react372.default.Fragment, null, /* @__PURE__ */ import_react372.default.createElement("div", {
+    return /* @__PURE__ */ import_react370.default.createElement(import_react370.default.Fragment, null, /* @__PURE__ */ import_react370.default.createElement("div", {
       id: "TextEditor",
       ref: this.containerRef,
       className: "notranslate",
@@ -441077,7 +440930,7 @@ class TextEditor extends import_react372.default.Component {
         willChange: "transform",
         transform: "translate3d(0,0,0)"
       }
-    }, /* @__PURE__ */ import_react372.default.createElement("div", {
+    }, /* @__PURE__ */ import_react370.default.createElement("div", {
       ref: this.editableRef,
       style: {
         position: "relative",
@@ -441093,14 +440946,14 @@ class TextEditor extends import_react372.default.Component {
       },
       className: clsx_default(TextEditor_module_default.editorContainer, showPlaceholder && TextEditor_module_default.showPlaceholder),
       "data-placeholder": text5.placeholderText
-    }, /* @__PURE__ */ import_react372.default.createElement(Slate, {
+    }, /* @__PURE__ */ import_react370.default.createElement(Slate, {
       editor: text5.editor.editor,
       initialValue: text5.getText(),
       key: text5.rtCounter,
       onChange: this.handleSelectionChange
-    }, /* @__PURE__ */ import_react372.default.createElement(Editable, {
+    }, /* @__PURE__ */ import_react370.default.createElement(Editable, {
       renderElement: Element4,
-      renderLeaf: (props) => /* @__PURE__ */ import_react372.default.createElement(Leaf2, {
+      renderLeaf: (props) => /* @__PURE__ */ import_react370.default.createElement(Leaf2, {
         fontSize: text5.getFontSize(),
         isAutoSize: text5.isAutosize(),
         ...props
@@ -441118,7 +440971,7 @@ class TextEditor extends import_react372.default.Component {
         fontSize: text5.isEmpty() ? `${window.MICROBOARD_CONFIG.DEFAULT_TEXT_STYLES.fontSize}px` : undefined
       },
       autoFocus: this.props.text.getLastClickPoint() ? false : true
-    }))), /* @__PURE__ */ import_react372.default.createElement(Icon, {
+    }))), /* @__PURE__ */ import_react370.default.createElement(Icon, {
       iconName: "TextLimitWarning",
       width: this.editableRef.current?.offsetWidth,
       height: this.editableRef.current?.offsetHeight,
@@ -441126,7 +440979,7 @@ class TextEditor extends import_react372.default.Component {
       style: {
         transform: `translate(0px) scale(${editorScale})`
       }
-    })), isButtonVisible && buttonPosition && text5.insideOf === "AINode" && /* @__PURE__ */ import_react372.default.createElement("button", {
+    })), isButtonVisible && buttonPosition && text5.insideOf === "AINode" && /* @__PURE__ */ import_react370.default.createElement("button", {
       onMouseEnter: () => this.setState({
         isQuoteBtnTooltipVisible: true
       }),
@@ -441140,15 +440993,15 @@ class TextEditor extends import_react372.default.Component {
         top: buttonPosition.top,
         left: buttonPosition.left
       }
-    }, this.state.isQuoteBtnTooltipVisible && /* @__PURE__ */ import_react372.default.createElement("div", {
+    }, this.state.isQuoteBtnTooltipVisible && /* @__PURE__ */ import_react370.default.createElement("div", {
       className: TextEditor_module_default.tooltip
-    }, window.MICROBOARD_CONFIG.i18n.t("AIInput.quoteBtnTooltip")), /* @__PURE__ */ import_react372.default.createElement("svg", {
+    }, window.MICROBOARD_CONFIG.i18n.t("AIInput.quoteBtnTooltip")), /* @__PURE__ */ import_react370.default.createElement("svg", {
       width: "16",
       height: "16",
       viewBox: "0 0 12 10",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
-    }, /* @__PURE__ */ import_react372.default.createElement("path", {
+    }, /* @__PURE__ */ import_react370.default.createElement("path", {
       d: "M10.9485 1.45275C11.6352 2.18208 12.0039 3.00008 12.0039 4.32608C12.0039 6.65942 10.3659 8.75075 7.98385 9.78475L7.38852 8.86608C9.61185 7.66341 10.0465 6.10275 10.2199 5.11875C9.86185 5.30408 9.39319 5.36875 8.93385 5.32608C7.73119 5.21475 6.78319 4.22741 6.78319 3.00008C6.78319 2.38124 7.02902 1.78775 7.4666 1.35017C7.90419 0.912581 8.49768 0.666748 9.11652 0.666748C9.83185 0.666748 10.5159 0.993415 10.9485 1.45275ZM4.28185 1.45275C4.96852 2.18208 5.33719 3.00008 5.33719 4.32608C5.33719 6.65942 3.69919 8.75075 1.31719 9.78475L0.721854 8.86608C2.94519 7.66341 3.37985 6.10275 3.55319 5.11875C3.19519 5.30408 2.72652 5.36875 2.26719 5.32608C1.06452 5.21475 0.117188 4.22741 0.117188 3.00008C0.117188 2.38124 0.36302 1.78775 0.800605 1.35017C1.23819 0.912581 1.83168 0.666748 2.45052 0.666748C3.16585 0.666748 3.84985 0.993415 4.28252 1.45275H4.28185Z",
       fill: "#696B76"
     }))));
@@ -441156,11 +441009,11 @@ class TextEditor extends import_react372.default.Component {
 }
 
 // src/features/ToastProvider.tsx
-var import_react373 = __toESM(require_react(), 1);
+var import_react371 = __toESM(require_react(), 1);
 function ToastProvider() {
   const isPhoneScreenCheck = () => matchMedia("screen and (max-width: 640px)").matches;
-  const [isPhoneScreen, setIsPhoneScreen] = import_react373.useState(isPhoneScreenCheck);
-  import_react373.useEffect(() => {
+  const [isPhoneScreen, setIsPhoneScreen] = import_react371.useState(isPhoneScreenCheck);
+  import_react371.useEffect(() => {
     const setScreen = () => {
       setIsPhoneScreen(isPhoneScreenCheck());
     };
@@ -441169,7 +441022,7 @@ function ToastProvider() {
       window.removeEventListener("resize", setScreen);
     };
   });
-  return /* @__PURE__ */ import_react373.default.createElement(Ie, {
+  return /* @__PURE__ */ import_react371.default.createElement(Ie, {
     containerStyle: isPhoneScreen ? {
       left: 10,
       top: 10,
@@ -441183,7 +441036,7 @@ function ToastProvider() {
 var import_react405 = __toESM(require_react(), 1);
 
 // src/entities/comments/CommentsPanel/CommentsPanelContext.tsx
-var import_react374 = __toESM(require_react(), 1);
+var import_react372 = __toESM(require_react(), 1);
 var CommentsPanelContext = createStrictContext();
 function useCommentsPanelContext() {
   return useStrictContext(CommentsPanelContext);
@@ -441191,8 +441044,8 @@ function useCommentsPanelContext() {
 var CommentsPanelContextProvider = ({
   children
 }) => {
-  const [isPanelOpen, setIsPanelOpen] = import_react374.useState(false);
-  return /* @__PURE__ */ import_react374.default.createElement(CommentsPanelContext.Provider, {
+  const [isPanelOpen, setIsPanelOpen] = import_react372.useState(false);
+  return /* @__PURE__ */ import_react372.default.createElement(CommentsPanelContext.Provider, {
     value: {
       isPanelOpen,
       setIsPanelOpen
@@ -441201,20 +441054,20 @@ var CommentsPanelContextProvider = ({
 };
 
 // src/features/UserPanel/UserPic/UserPic.tsx
-var import_react378 = __toESM(require_react(), 1);
+var import_react376 = __toESM(require_react(), 1);
 
 // src/features/Presence/BringToMe/BringToMe.tsx
-var import_react376 = __toESM(require_react(), 1);
+var import_react374 = __toESM(require_react(), 1);
 
 // src/features/Presence/PresenceUsers/EyeIcon.tsx
-var import_react375 = __toESM(require_react(), 1);
-var EyeIcon = ({ fill: fill3 = "#14151A" }) => /* @__PURE__ */ import_react375.default.createElement("svg", {
+var import_react373 = __toESM(require_react(), 1);
+var EyeIcon = ({ fill: fill3 = "#14151A" }) => /* @__PURE__ */ import_react373.default.createElement("svg", {
   width: "16",
   height: "16",
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ import_react375.default.createElement("path", {
+}, /* @__PURE__ */ import_react373.default.createElement("path", {
   d: "M0.787109 8C1.41378 4.58667 4.40511 2 7.99978 2C11.5944 2 14.5851 4.58667 15.2124 8C14.5858 11.4133 11.5944 14 7.99978 14C4.40511 14 1.41444 11.4133 0.787109 8V8ZM7.99978 11.3333C8.88383 11.3333 9.73168 10.9821 10.3568 10.357C10.9819 9.7319 11.3331 8.88406 11.3331 8C11.3331 7.11595 10.9819 6.2681 10.3568 5.64298C9.73168 5.01786 8.88383 4.66667 7.99978 4.66667C7.11572 4.66667 6.26788 5.01786 5.64275 5.64298C5.01763 6.2681 4.66644 7.11595 4.66644 8C4.66644 8.88406 5.01763 9.7319 5.64275 10.357C6.26788 10.9821 7.11572 11.3333 7.99978 11.3333ZM7.99978 10C7.46934 10 6.96064 9.78929 6.58556 9.41421C6.21049 9.03914 5.99978 8.53043 5.99978 8C5.99978 7.46957 6.21049 6.96086 6.58556 6.58579C6.96064 6.21071 7.46934 6 7.99978 6C8.53021 6 9.03892 6.21071 9.41399 6.58579C9.78906 6.96086 9.99978 7.46957 9.99978 8C9.99978 8.53043 9.78906 9.03914 9.41399 9.41421C9.03892 9.78929 8.53021 10 7.99978 10Z",
   fill: fill3
 }));
@@ -441287,11 +441140,11 @@ var UserActionsDropdown = ({
   userId,
   onClose
 }) => {
-  const dropdownRef = import_react376.useRef(null);
+  const dropdownRef = import_react374.useRef(null);
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
   const notifyPosition = window.innerWidth < 768 ? "top-center" : "bottom-center";
-  import_react376.useEffect(() => {
+  import_react374.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -441329,10 +441182,10 @@ var UserActionsDropdown = ({
     });
     onClose();
   };
-  return /* @__PURE__ */ import_react376.default.createElement("div", {
+  return /* @__PURE__ */ import_react374.default.createElement("div", {
     ref: dropdownRef,
     className: BringToMe_module_default.userActionsDropdown
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react374.default.createElement(UiButton, {
     className: BringToMe_module_default.dropdownButton,
     size: "sm",
     radius: "md",
@@ -441341,12 +441194,12 @@ var UserActionsDropdown = ({
     onMouseDown: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react374.default.createElement(Icon, {
     iconName: "FollowUser",
     width: 16,
     height: 16,
     className: BringToMe_module_default.icon
-  }), /* @__PURE__ */ import_react376.default.createElement("span", null, t11("presence.followUser"))), /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }), /* @__PURE__ */ import_react374.default.createElement("span", null, t11("presence.followUser"))), /* @__PURE__ */ import_react374.default.createElement(UiButton, {
     className: BringToMe_module_default.dropdownButton,
     size: "sm",
     radius: "md",
@@ -441355,22 +441208,22 @@ var UserActionsDropdown = ({
     onMouseDown: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react374.default.createElement(Icon, {
     iconName: "BringToMe",
     width: 16,
     height: 16,
     className: BringToMe_module_default.icon
-  }), /* @__PURE__ */ import_react376.default.createElement("span", null, t11("presence.bringToMe"))));
+  }), /* @__PURE__ */ import_react374.default.createElement("span", null, t11("presence.bringToMe"))));
 };
 var BringToMe = ({ followers, users }) => {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
-  const modalRef = import_react376.useRef(null);
-  const [trackedUser, setIsTrackedUser] = import_react376.useState();
-  const [openDropdownUserId, setOpenDropdownUserId] = import_react376.useState(null);
-  const [searchTerm, setSearchTerm] = import_react376.useState("");
+  const modalRef = import_react374.useRef(null);
+  const [trackedUser, setIsTrackedUser] = import_react374.useState();
+  const [openDropdownUserId, setOpenDropdownUserId] = import_react374.useState(null);
+  const [searchTerm, setSearchTerm] = import_react374.useState("");
   const notifyPosition = window.innerWidth < 768 ? "top-center" : "bottom-center";
-  import_react376.useEffect(() => {
+  import_react374.useEffect(() => {
     const observer = (presence) => {
       setIsTrackedUser(presence.trackedUser || null);
     };
@@ -441379,18 +441232,18 @@ var BringToMe = ({ followers, users }) => {
       board.presence.subject.unsubscribe(observer);
     };
   });
-  const filteredUsers = import_react376.useMemo(() => {
+  const filteredUsers = import_react374.useMemo(() => {
     return users.filter((user) => user.name.toLowerCase().includes(searchTerm.toLowerCase()));
   }, [users, searchTerm]);
-  return /* @__PURE__ */ import_react376.default.createElement("div", {
+  return /* @__PURE__ */ import_react374.default.createElement("div", {
     className: PresenceUsers_module_default.shareModal,
     ref: modalRef
-  }, /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, /* @__PURE__ */ import_react374.default.createElement("div", {
     className: PresenceUsers_module_default.shareModalSearch
-  }, /* @__PURE__ */ import_react376.default.createElement(Input, {
+  }, /* @__PURE__ */ import_react374.default.createElement(Input, {
     id: "searchNicknameId",
     placeholder: t11("presence.searchByName"),
-    prefixIcon: /* @__PURE__ */ import_react376.default.createElement(Icon, {
+    prefixIcon: /* @__PURE__ */ import_react374.default.createElement(Icon, {
       iconName: "Search",
       height: 16,
       width: 16,
@@ -441403,34 +441256,34 @@ var BringToMe = ({ followers, users }) => {
       setSearchTerm(ev.target.value);
       setOpenDropdownUserId(null);
     }
-  })), /* @__PURE__ */ import_react376.default.createElement("div", {
+  })), /* @__PURE__ */ import_react374.default.createElement("div", {
     className: PresenceUsers_module_default.shareList
-  }, filteredUsers.map((user) => /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, filteredUsers.map((user) => /* @__PURE__ */ import_react374.default.createElement("div", {
     key: user.id,
     className: `${PresenceUsers_module_default.shareUser} ${BringToMe_module_default.userListItem}`
-  }, user?.avatar ? /* @__PURE__ */ import_react376.default.createElement("img", {
+  }, user?.avatar ? /* @__PURE__ */ import_react374.default.createElement("img", {
     src: user.avatar,
     className: clsx_default(PresenceUsers_module_default.shareUserPic, user.idle && BringToMe_module_default.idleAvatar),
     style: {
       border: `1px solid ${trackedUser && trackedUser.userId === user.id ? user.color : "transparent"}`
     }
-  }) : /* @__PURE__ */ import_react376.default.createElement("div", {
+  }) : /* @__PURE__ */ import_react374.default.createElement("div", {
     className: clsx_default(PresenceUsers_module_default.shareUserPic, user.idle && BringToMe_module_default.idleAvatar),
     style: {
       backgroundColor: rgbToRgba(user.color, 0.5),
       border: `1px solid ${trackedUser && trackedUser.userId === user.id ? user.color : "transparent"}`
     }
-  }, user.name.charAt(0).toUpperCase()), trackedUser && trackedUser.userId === user.id && /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, user.name.charAt(0).toUpperCase()), trackedUser && trackedUser.userId === user.id && /* @__PURE__ */ import_react374.default.createElement("div", {
     className: PresenceUsers_module_default.shareEye
-  }, /* @__PURE__ */ import_react376.default.createElement(EyeIcon, null)), /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, /* @__PURE__ */ import_react374.default.createElement(EyeIcon, null)), /* @__PURE__ */ import_react374.default.createElement("div", {
     className: clsx_default(user.idle && BringToMe_module_default.idleHide)
-  }, /* @__PURE__ */ import_react376.default.createElement("p", {
+  }, /* @__PURE__ */ import_react374.default.createElement("p", {
     className: BringToMe_module_default.nickname
-  }, user.name), user.idle && /* @__PURE__ */ import_react376.default.createElement("p", {
+  }, user.name), user.idle && /* @__PURE__ */ import_react374.default.createElement("p", {
     className: BringToMe_module_default.idle
-  }, t11("presence.idle"))), /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, t11("presence.idle"))), /* @__PURE__ */ import_react374.default.createElement("div", {
     className: BringToMe_module_default.userActionsContainer
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react374.default.createElement(UiButton, {
     className: BringToMe_module_default.btn,
     size: "md",
     radius: "md",
@@ -441442,20 +441295,20 @@ var BringToMe = ({ followers, users }) => {
     onClick: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react374.default.createElement(Icon, {
     iconName: "ThreeDots",
     width: 20,
     height: 20
-  })), openDropdownUserId === user.id && /* @__PURE__ */ import_react376.default.createElement(UserActionsDropdown, {
+  })), openDropdownUserId === user.id && /* @__PURE__ */ import_react374.default.createElement(UserActionsDropdown, {
     userId: user.id,
     onClose: () => setOpenDropdownUserId(null)
-  }))))), filteredUsers.length === 0 && searchTerm && /* @__PURE__ */ import_react376.default.createElement("div", {
+  }))))), filteredUsers.length === 0 && searchTerm && /* @__PURE__ */ import_react374.default.createElement("div", {
     className: BringToMe_module_default.noResults
-  }, /* @__PURE__ */ import_react376.default.createElement("span", null, t11("presence.noUsersFound")), /* @__PURE__ */ import_react376.default.createElement("p", {
+  }, /* @__PURE__ */ import_react374.default.createElement("span", null, t11("presence.noUsersFound")), /* @__PURE__ */ import_react374.default.createElement("p", {
     className: BringToMe_module_default.noResultsTerm
-  }, '"', searchTerm, '"'), /* @__PURE__ */ import_react376.default.createElement("span", null, t11("presence.noUsersFoundPostfix"))), /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, '"', searchTerm, '"'), /* @__PURE__ */ import_react374.default.createElement("span", null, t11("presence.noUsersFoundPostfix"))), /* @__PURE__ */ import_react374.default.createElement("div", {
     className: BringToMe_module_default.btns
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react374.default.createElement(UiButton, {
     size: "md",
     className: BringToMe_module_default.btnBring,
     onClick: () => {
@@ -441480,7 +441333,7 @@ var BringToMe = ({ followers, users }) => {
         });
       }
     }
-  }, t11("presence.bringToMe")), followers.length > 0 && /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, t11("presence.bringToMe")), followers.length > 0 && /* @__PURE__ */ import_react374.default.createElement(UiButton, {
     className: BringToMe_module_default.btnStop,
     variant: "secondary",
     size: "md",
@@ -441492,18 +441345,18 @@ var BringToMe = ({ followers, users }) => {
         users: followers.map((follower) => follower.userId)
       });
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react374.default.createElement(Icon, {
     iconName: "EyeDashed",
     width: 16,
     height: 16,
     style: { color: "#696B76" }
-  }), /* @__PURE__ */ import_react376.default.createElement("span", {
+  }), /* @__PURE__ */ import_react374.default.createElement("span", {
     className: BringToMe_module_default.text
   }, `${t11("presence.stop")} ${followers.length} ${followers?.length > 1 ? t11("presence.followers") : t11("presence.follower")}`))));
 };
 
 // src/features/UserPanel/UserDropdown/UserDropdown.tsx
-var import_react377 = __toESM(require_react(), 1);
+var import_react375 = __toESM(require_react(), 1);
 var UserDropDown = ({
   setIsDropdownOpen,
   isOpen,
@@ -441522,26 +441375,26 @@ var UserDropDown = ({
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react377.default.createElement("div", {
+  return /* @__PURE__ */ import_react375.default.createElement("div", {
     className: UserPanel_module_default.dropdownWrapper,
     ref: dropdownRef,
     style: { top: customTop }
-  }, email && /* @__PURE__ */ import_react377.default.createElement("div", {
+  }, email && /* @__PURE__ */ import_react375.default.createElement("div", {
     className: UserPanel_module_default.userInfo
-  }, /* @__PURE__ */ import_react377.default.createElement(UserAvatar, {
+  }, /* @__PURE__ */ import_react375.default.createElement(UserAvatar, {
     src: account.info?.avatar,
     width: 40,
     height: 40
-  }), /* @__PURE__ */ import_react377.default.createElement("p", {
+  }), /* @__PURE__ */ import_react375.default.createElement("p", {
     className: UserPanel_module_default.userName
-  }, email)), /* @__PURE__ */ import_react377.default.createElement("div", {
+  }, email)), /* @__PURE__ */ import_react375.default.createElement("div", {
     className: UserPanel_module_default.dropdownBtns
-  }, buttons.filter(import_react377.default.isValidElement).map((button, index4) => {
-    return import_react377.default.cloneElement(button, {
+  }, buttons.filter(import_react375.default.isValidElement).map((button, index4) => {
+    return import_react375.default.cloneElement(button, {
       className: UserPanel_module_default.dropdownBtn,
       key: index4
     });
-  }), presenceUsers.length > 0 && /* @__PURE__ */ import_react377.default.createElement(BringToMe, {
+  }), presenceUsers.length > 0 && /* @__PURE__ */ import_react375.default.createElement(BringToMe, {
     followers,
     users: presenceUsers
   })));
@@ -441566,7 +441419,7 @@ var UserPic = ({ ...props }) => {
   const { t: t11 } = useTranslation();
   const { board } = useAppContext();
   const { setIsPanelOpen } = useCommentsPanelContext();
-  const userPanelRef = import_react378.useRef(null);
+  const userPanelRef = import_react376.useRef(null);
   const account = useAccount();
   const { openModal: openModal2 } = useUiModalContext();
   const navigate = useNavigate();
@@ -441597,7 +441450,7 @@ var UserPic = ({ ...props }) => {
     ev.stopPropagation();
     navigate("/admin");
   };
-  return /* @__PURE__ */ import_react378.default.createElement(import_react378.default.Fragment, null, /* @__PURE__ */ import_react378.default.createElement("div", {
+  return /* @__PURE__ */ import_react376.default.createElement(import_react376.default.Fragment, null, /* @__PURE__ */ import_react376.default.createElement("div", {
     className: UserPanel_module_default.userPicWrapper,
     ref: userPanelRef,
     onClick: (event) => {
@@ -441610,14 +441463,14 @@ var UserPic = ({ ...props }) => {
         setIsPanelOpen(false);
       }
     }
-  }, /* @__PURE__ */ import_react378.default.createElement(UserAvatar, {
+  }, /* @__PURE__ */ import_react376.default.createElement(UserAvatar, {
     src: account.info?.avatar,
     isOwner,
     tooltip: !props.isDropdownOpen,
     name: account.info?.name
-  }), /* @__PURE__ */ import_react378.default.createElement(FollowingUsersCount, {
+  }), /* @__PURE__ */ import_react376.default.createElement(FollowingUsersCount, {
     followers: props.followers
-  })), /* @__PURE__ */ import_react378.default.createElement(UserDropDown, {
+  })), /* @__PURE__ */ import_react376.default.createElement(UserDropDown, {
     openerRef: userPanelRef,
     isOpen: props.isDropdownOpen,
     setIsDropdownOpen: props.setIsDropdownOpen,
@@ -441625,67 +441478,67 @@ var UserPic = ({ ...props }) => {
     followers: props.followers,
     presenceUsers: props.presenceUsers,
     buttons: [
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react376.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown1",
         onClick: handlePlanModalOpen,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
         iconName: "ArrowUpCircle",
         width: 20,
         height: 20
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react376.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("userPlan.upgradePlan"))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react376.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown2",
         onClick: handleOpenProfileSettings,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "human"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react376.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.title"))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react376.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown2",
         onClick: handleOpenSupport,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "support"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react376.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.support"))),
-      /* @__PURE__ */ import_react378.default.createElement(ComponentRolesGuard, {
+      /* @__PURE__ */ import_react376.default.createElement(ComponentRolesGuard, {
         allowedRoles: ["ADMIN" /* ADMIN */]
-      }, /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown3",
         onClick: handleOpenAdminPage,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "Admin"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react376.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.adminPanel")))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react376.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown4",
         onClick: handleLogout,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Logout, null), /* @__PURE__ */ import_react378.default.createElement("span", {
+      }, /* @__PURE__ */ import_react376.default.createElement(Logout, null), /* @__PURE__ */ import_react376.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.logout")))
     ]
@@ -441693,18 +441546,18 @@ var UserPic = ({ ...props }) => {
 };
 
 // src/features/Presence/PresenceUsers/PresenceUsers.tsx
-var import_react380 = __toESM(require_react(), 1);
+var import_react378 = __toESM(require_react(), 1);
 
 // src/features/Presence/PresenceUsers/PresenceUserAvatar.tsx
-var import_react379 = __toESM(require_react(), 1);
+var import_react377 = __toESM(require_react(), 1);
 var TippySvg = () => {
-  return /* @__PURE__ */ import_react379.default.createElement("svg", {
+  return /* @__PURE__ */ import_react377.default.createElement("svg", {
     width: "14",
     height: "4",
     viewBox: "0 0 14 4",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ import_react379.default.createElement("path", {
+  }, /* @__PURE__ */ import_react377.default.createElement("path", {
     d: "M6.9372 0C6.9372 0 3.40535 3.99848 0.0980963 3.99963C-1.46344 4.00017 16.1695 4.00007 13.7763 3.99963C10.2587 3.99898 6.9372 0 6.9372 0Z",
     fill: "#0B0C0E"
   }));
@@ -441717,35 +441570,35 @@ var PresenceUserAvatar = ({
 }) => {
   const isTracked = trackedUser?.userId === user.id;
   const { t: t11 } = useTranslation();
-  return /* @__PURE__ */ import_react379.default.createElement("div", {
+  return /* @__PURE__ */ import_react377.default.createElement("div", {
     className: PresenceUsers_module_default.userWrapper,
     style: { "--index": index4 },
     onClick
-  }, /* @__PURE__ */ import_react379.default.createElement("div", {
+  }, /* @__PURE__ */ import_react377.default.createElement("div", {
     className: clsx_default(PresenceUsers_module_default.userAvatar, isTracked ? PresenceUsers_module_default.selectedAvatar : "", user.idle && !isTracked ? PresenceUsers_module_default.idle : ""),
     style: {
       borderColor: user.color,
       backgroundColor: user.avatar ? undefined : rgbToRgba(user.color, 0.5)
     }
-  }, user.avatar ? /* @__PURE__ */ import_react379.default.createElement("img", {
+  }, user.avatar ? /* @__PURE__ */ import_react377.default.createElement("img", {
     src: user.avatar,
     alt: user.name
-  }) : user.name.charAt(0), isTracked && /* @__PURE__ */ import_react379.default.createElement("div", {
+  }) : user.name.charAt(0), isTracked && /* @__PURE__ */ import_react377.default.createElement("div", {
     className: PresenceUsers_module_default.trackedUserOverlay,
     style: {
       backgroundColor: rgbToRgba(user.color, 0.5) || user.color
     }
-  }, /* @__PURE__ */ import_react379.default.createElement(EyeIcon, null))), /* @__PURE__ */ import_react379.default.createElement("div", {
+  }, /* @__PURE__ */ import_react377.default.createElement(EyeIcon, null))), /* @__PURE__ */ import_react377.default.createElement("div", {
     className: PresenceUsers_module_default.tooltip
-  }, user.name === "Anonymous" ? t11("presence.anonymous") : user.name), /* @__PURE__ */ import_react379.default.createElement("div", {
+  }, user.name === "Anonymous" ? t11("presence.anonymous") : user.name), /* @__PURE__ */ import_react377.default.createElement("div", {
     className: PresenceUsers_module_default.tippy
-  }, /* @__PURE__ */ import_react379.default.createElement(TippySvg, null)));
+  }, /* @__PURE__ */ import_react377.default.createElement(TippySvg, null)));
 };
 
 // src/features/Presence/PresenceUsers/PresenceUsers.tsx
 var FollowingUsersCount = ({ followers }) => {
   const { t: t11 } = useTranslation();
-  const [isOpen, setIsOpen] = import_react380.useState(false);
+  const [isOpen, setIsOpen] = import_react378.useState(false);
   const account = useAccount();
   const tooltipRef = useClickOutside(() => {
     setIsOpen(false);
@@ -441753,9 +441606,9 @@ var FollowingUsersCount = ({ followers }) => {
   if (!followers.length) {
     return null;
   }
-  return /* @__PURE__ */ import_react380.default.createElement("div", {
+  return /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.followingCounter
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.followingCounterIcon,
     onMouseDown: (ev) => {
       ev.stopPropagation();
@@ -441766,20 +441619,20 @@ var FollowingUsersCount = ({ followers }) => {
       }
       setIsOpen(!isOpen);
     }
-  }, /* @__PURE__ */ import_react380.default.createElement(EyeIcon, {
+  }, /* @__PURE__ */ import_react378.default.createElement(EyeIcon, {
     fill: "white"
-  }), /* @__PURE__ */ import_react380.default.createElement("span", null, followers.length)), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react378.default.createElement("span", null, followers.length)), /* @__PURE__ */ import_react378.default.createElement("div", {
     ref: tooltipRef,
     className: clsx_default(PresenceUsers_module_default.followersTooltip, isOpen && PresenceUsers_module_default.followersVisible)
-  }, /* @__PURE__ */ import_react380.default.createElement("p", {
+  }, /* @__PURE__ */ import_react378.default.createElement("p", {
     className: PresenceUsers_module_default.followersMe
-  }, account.info?.email, " ", t11("presence.(you)")), /* @__PURE__ */ import_react380.default.createElement("span", {
+  }, account.info?.email, " ", t11("presence.(you)")), /* @__PURE__ */ import_react378.default.createElement("span", {
     className: PresenceUsers_module_default.followersBoard
-  }, t11("presence.yourBoard")), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, t11("presence.yourBoard")), /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.followersHr
-  }), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.followersList
-  }, followers.map((follower) => /* @__PURE__ */ import_react380.default.createElement("span", {
+  }, followers.map((follower) => /* @__PURE__ */ import_react378.default.createElement("span", {
     key: follower.userId,
     className: PresenceUsers_module_default.followersItem
   }, follower.nickname, " ", t11("presence.following"))))));
@@ -441787,16 +441640,16 @@ var FollowingUsersCount = ({ followers }) => {
 var USERS_IN_ROW = 3;
 var PresenceUsers = () => {
   const { board } = useAppContext();
-  const [selectedUsers, setSelectedUsers] = import_react380.useState(new Set);
-  const [users, setUsers] = import_react380.useState([]);
-  const [followers, setFollowers] = import_react380.useState([]);
-  const [trackedUser, setTrackedUser] = import_react380.useState(null);
-  const [displayUsers, setDisplayUsers] = import_react380.useState(users);
-  const [isUserDropdownOpen, setIsUserDropdownOpen] = import_react380.useState(false);
+  const [selectedUsers, setSelectedUsers] = import_react378.useState(new Set);
+  const [users, setUsers] = import_react378.useState([]);
+  const [followers, setFollowers] = import_react378.useState([]);
+  const [trackedUser, setTrackedUser] = import_react378.useState(null);
+  const [displayUsers, setDisplayUsers] = import_react378.useState(users);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = import_react378.useState(false);
   const account = useAccount();
   const { setIsPanelOpen } = useCommentsPanelContext();
   const needsCollapse = users.length >= 3;
-  import_react380.useEffect(() => {
+  import_react378.useEffect(() => {
     const sortedUsers = [...users].sort((first2, second) => selectedUsers.has(first2.id) === selectedUsers.has(second.id) ? 0 : selectedUsers.has(first2.id) ? -1 : 1).sort((first2, second) => first2.idle === second.idle ? 0 : first2.idle ? 1 : -1);
     setDisplayUsers(sortedUsers.slice(0, USERS_IN_ROW));
   }, [users, selectedUsers]);
@@ -441826,7 +441679,7 @@ var PresenceUsers = () => {
     setUsers(uniqueUsersByHardId);
     setFollowers(board.presence.getFollowers());
   };
-  import_react380.useEffect(() => {
+  import_react378.useEffect(() => {
     const observer = (presence) => {
       updateUsers(presence);
       setTrackedUser(presence.trackedUser || null);
@@ -441836,22 +441689,22 @@ var PresenceUsers = () => {
       board.presence.subject.unsubscribe(observer);
     };
   }, [board]);
-  import_react380.useEffect(() => {
+  import_react378.useEffect(() => {
     updateUsers(board.presence);
   }, [board.getInterfaceType()]);
-  return /* @__PURE__ */ import_react380.default.createElement("div", {
+  return /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.wrapper
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.container
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.userList
-  }, displayUsers.map((user, index4) => /* @__PURE__ */ import_react380.default.createElement(PresenceUserAvatar, {
+  }, displayUsers.map((user, index4) => /* @__PURE__ */ import_react378.default.createElement(PresenceUserAvatar, {
     key: user.id,
     user,
     trackedUser,
     index: index4,
     onClick: () => selectUser(user.id)
-  })), /* @__PURE__ */ import_react380.default.createElement(UserPic, {
+  })), /* @__PURE__ */ import_react378.default.createElement(UserPic, {
     className: PresenceUsers_module_default.userWrapper,
     style: { zIndex: 1000 },
     followers,
@@ -441859,7 +441712,7 @@ var PresenceUsers = () => {
     email: account.info?.name ?? getEmailPrefix(account.info?.email ?? "", "Anonymous"),
     setIsDropdownOpen: setIsUserDropdownOpen,
     isDropdownOpen: isUserDropdownOpen
-  }), needsCollapse && /* @__PURE__ */ import_react380.default.createElement("button", {
+  }), needsCollapse && /* @__PURE__ */ import_react378.default.createElement("button", {
     onClick: (event) => {
       event.stopPropagation();
       if (!isUserDropdownOpen) {
@@ -441874,11 +441727,11 @@ var PresenceUsers = () => {
       "--index": displayUsers.length
     },
     className: PresenceUsers_module_default.usersOverflowWrapper
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.usersOverflowGap
-  }), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.usersOverflowCounter
-  }, /* @__PURE__ */ import_react380.default.createElement("span", null, users.length), /* @__PURE__ */ import_react380.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react378.default.createElement("span", null, users.length), /* @__PURE__ */ import_react378.default.createElement(Icon, {
     iconName: "StrokeChevronDown",
     width: 11,
     height: 6
@@ -441889,7 +441742,7 @@ var PresenceUsers = () => {
 var import_react383 = __toESM(require_react(), 1);
 
 // src/features/UserPanel/Buttons/AddComment/AddComment.tsx
-var import_react381 = __toESM(require_react(), 1);
+var import_react379 = __toESM(require_react(), 1);
 
 // src/features/UserPanel/Buttons/AddComment/AddComment.module.css
 var AddComment_module_default = {
@@ -441924,7 +441777,7 @@ function AddComment2() {
     }
     board.tools.addComment(true);
   };
-  return /* @__PURE__ */ import_react381.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react379.default.createElement(UiButton, {
     className: AddComment_module_default.btn,
     id: "tool-add-comment",
     tooltipPosition: "bottom",
@@ -441933,16 +441786,16 @@ function AddComment2() {
     active: isActive,
     variant: "secondary",
     rounded: "left"
-  }, /* @__PURE__ */ import_react381.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react379.default.createElement(Icon, {
     iconName: "Comment",
     width: 20,
     height: 20
-  }), showBadge && /* @__PURE__ */ import_react381.default.createElement("div", {
+  }), showBadge && /* @__PURE__ */ import_react379.default.createElement("div", {
     className: AddComment_module_default.badge
   }));
 }
 // src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.tsx
-var import_react382 = __toESM(require_react(), 1);
+var import_react380 = __toESM(require_react(), 1);
 
 // src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.module.css
 var TogglePresenceRender_module_default = {
@@ -441953,9 +441806,9 @@ var TogglePresenceRender_module_default = {
 // src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.tsx
 var TogglePresenceRender = () => {
   const { t: t11 } = useTranslation();
-  const [cursorsActive, setCursorsActive] = import_react382.useState(true);
+  const [cursorsActive, setCursorsActive] = import_react380.useState(true);
   const { app } = useAppContext();
-  return /* @__PURE__ */ import_react382.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react380.default.createElement(UiButton, {
     id: "tool-cursors-toggle",
     tooltipPosition: "bottom",
     tooltip: cursorsActive ? t11("presence.hideCursors") : t11("presence.showCursors"),
@@ -441967,13 +441820,162 @@ var TogglePresenceRender = () => {
       const cursorsEnabled = app.getBoard().presence.toggleCursorsRendering();
       setCursorsActive(cursorsEnabled);
     }
-  }, /* @__PURE__ */ import_react382.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react380.default.createElement(Icon, {
     iconName: "ToggleCursors",
     width: 20,
     height: 20
   }));
 };
 
+// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
+var import_react382 = __toESM(require_react(), 1);
+
+// src/shared/lib/uiTheme.ts
+var import_react381 = __toESM(require_react(), 1);
+var STORAGE_KEY = "ui-theme";
+function applyTheme(theme2) {
+  document.documentElement.setAttribute("data-theme", theme2);
+  conf.theme = theme2;
+}
+function getInitialTheme() {
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark")
+    return stored;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function initTheme() {
+  applyTheme(getInitialTheme());
+}
+function toggleUITheme() {
+  const current2 = document.documentElement.getAttribute("data-theme");
+  const next5 = current2 === "dark" ? "light" : "dark";
+  localStorage.setItem(STORAGE_KEY, next5);
+  applyTheme(next5);
+  return next5;
+}
+function getCurrentUITheme() {
+  return document.documentElement.getAttribute("data-theme") ?? "light";
+}
+function useUITheme() {
+  const [theme2, setTheme] = import_react381.useState(getCurrentUITheme);
+  const toggle = () => {
+    setTheme(toggleUITheme());
+  };
+  return { theme: theme2, toggle };
+}
+
+// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
+function SunIcon() {
+  return /* @__PURE__ */ import_react382.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ import_react382.default.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "3.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "10",
+    y1: "1",
+    x2: "10",
+    y2: "3.5",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "10",
+    y1: "16.5",
+    x2: "10",
+    y2: "19",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "19",
+    y1: "10",
+    x2: "16.5",
+    y2: "10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "3.5",
+    y1: "10",
+    x2: "1",
+    y2: "10",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "16.07",
+    y1: "3.93",
+    x2: "14.31",
+    y2: "5.69",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "5.69",
+    y1: "14.31",
+    x2: "3.93",
+    y2: "16.07",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "16.07",
+    y1: "16.07",
+    x2: "14.31",
+    y2: "14.31",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /* @__PURE__ */ import_react382.default.createElement("line", {
+    x1: "5.69",
+    y1: "5.69",
+    x2: "3.93",
+    y2: "3.93",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+}
+function MoonIcon() {
+  return /* @__PURE__ */ import_react382.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /* @__PURE__ */ import_react382.default.createElement("path", {
+    d: "M17 12.5A7.5 7.5 0 1 1 7.5 3a5.5 5.5 0 0 0 9.5 9.5z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}
+function ThemeToggle() {
+  const { board } = useAppContext();
+  const { theme: theme2, toggle } = useUITheme();
+  const handleClick = () => {
+    toggle();
+    board.items.subject.publish(board.items);
+  };
+  return /* @__PURE__ */ import_react382.default.createElement(UiButton, {
+    id: "theme-toggle",
+    tooltip: theme2 === "light" ? "Switch to dark theme" : "Switch to light theme",
+    tooltipPosition: "bottom",
+    onClick: handleClick,
+    variant: "secondary",
+    rounded: "none"
+  }, theme2 === "light" ? /* @__PURE__ */ import_react382.default.createElement(MoonIcon, null) : /* @__PURE__ */ import_react382.default.createElement(SunIcon, null));
+}
+
 // src/features/UserPanel/ActionButtons/ActionButtons.module.css
 var ActionButtons_module_default = {
   wrapper: "wrapper_VBuAXg"
@@ -443588,7 +443590,7 @@ var UserPanel = () => {
       className: UserPanel_module_default.unauthWrapper
     }, /* @__PURE__ */ import_react405.default.createElement("div", {
       className: UserPanel_module_default.unauthBtns
-    }, isMicroboardIframe() && insideOfMicroboard ? /* @__PURE__ */ import_react405.default.createElement(import_react405.default.Fragment, null, /* @__PURE__ */ import_react405.default.createElement(UiLink, {
+    }, /* @__PURE__ */ import_react405.default.createElement(ThemeToggle, null), isMicroboardIframe() && insideOfMicroboard ? /* @__PURE__ */ import_react405.default.createElement(import_react405.default.Fragment, null, /* @__PURE__ */ import_react405.default.createElement(UiLink, {
       variant: "secondary",
       className: UserPanel_module_default.logInBtn,
       onClick: () => onLoginOrRegistrationClick(`/auth/sign-in`),