microboard-ui-temp 0.4.0 → 0.5.0

package/dist/{chunk-tvvz6w0f.js → chunk-8aacyxvb.js}

@@ -237738,7 +237738,7 @@ function fillHighlight(ctx, textBlock) {
     return;
   }
   const measure = textBlock.measure;
-  ctx.fillStyle = textBlock.style.backgroundColor;
+  ctx.fillStyle = resolveColor(textBlock.style.backgroundColor, conf.theme, "background");
   ctx.fillRect(textBlock.x, textBlock.y - measure.ascent, measure.width, measure.height);
 }
 function underline(ctx, textBlock) {
@@ -237750,14 +237750,13 @@ function underline(ctx, textBlock) {
   const style = textBlock.style;
   const measure = textBlock.measure;
   const width = measure.width - (textBlock.marginLeft || 0);
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y + 2 * textBlock.fontSize / 14);
   ctx.lineTo(x + width, y + 2 * textBlock.fontSize / 14);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function cross(ctx, textBlock) {
@@ -237770,19 +237769,18 @@ function cross(ctx, textBlock) {
   const measure = textBlock.measure;
   const width = measure.width;
   const height = measure.height;
-  const color = style.color;
-  ctx.strokeStyle = color;
+  ctx.strokeStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.lineWidth = textBlock.fontSize / 14;
   ctx.beginPath();
   ctx.moveTo(x, y - height / 4);
   ctx.lineTo(x + width, y - height / 4);
   ctx.stroke();
-  ctx.strokeStyle = style.backgroundColor ?? "black";
+  ctx.strokeStyle = style.backgroundColor ? resolveColor(style.backgroundColor, conf.theme, "background") : "black";
   ctx.lineWidth = 2;
 }
 function fillText(ctx, textBlock) {
   const { text, style, x, y } = textBlock;
-  ctx.fillStyle = style.color;
+  ctx.fillStyle = resolveColor(style.color, conf.theme, "foreground");
   ctx.fillText(text, x, y);
   if (textBlock.listMark) {
     ctx.fillText(textBlock.listMark, x - measureText(textBlock.listMark, style).width - 4, y);
@@ -244857,7 +244855,7 @@ function setSelectionFontHighlight(editor, format, selectionContext) {
   }
   if (format === "none") {
     Editor.removeMark(editor, "fontHighlight");
-  } else if (marks3.fontHighlight === format) {
+  } else if (typeof format === "string" && marks3.fontHighlight === format) {
     Editor.removeMark(editor, "fontHighlight");
   } else {
     Editor.addMark(editor, "fontHighlight", format);
@@ -250530,8 +250528,8 @@ class RichText extends BaseItem {
             node22.underline ? "underline" : "",
             node22["line-through"] ? "line-through" : ""
           ].filter(Boolean).join(" "),
-          color: node22.fontColor || conf.DEFAULT_TEXT_STYLES.fontColor,
-          backgroundColor: node22.fontHighlight || conf.DEFAULT_TEXT_STYLES.fontHighlight,
+          color: node22.fontColor ? resolveColor(node22.fontColor, conf.theme, "foreground") : conf.DEFAULT_TEXT_STYLES.fontColor,
+          backgroundColor: node22.fontHighlight ? resolveColor(node22.fontHighlight, conf.theme, "background") : conf.DEFAULT_TEXT_STYLES.fontHighlight,
           fontSize: node22.fontSize ? `${node22.fontSize}px` : `${conf.DEFAULT_TEXT_STYLES.fontSize}px`,
           fontFamily: node22.fontFamily || conf.DEFAULT_TEXT_STYLES.fontFamily
         });
@@ -265388,6 +265386,12 @@ class Connector2 extends BaseItem {
     mbr.strokeWidth = 3;
     mbr.borderStyle = "solid";
     this.clipText(context);
+    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
+    this.lines.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBorderColor(resolvedLineColor);
+    this.startPointer.path.setBackgroundColor(resolvedLineColor);
+    this.endPointer.path.setBorderColor(resolvedLineColor);
+    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     if (!this.text.isRenderEnabled && this.board.selection.getContext() !== "EditTextUnderPointer") {
       this.lines.render(context);
     }
@@ -265669,17 +265673,11 @@ class Connector2 extends BaseItem {
     const endPoint = this.endPoint;
     this.lines = getLine(this.lineStyle, startPoint, endPoint, this.middlePoint).addConnectedItemType(this.itemType);
     this.startPointer = getStartPointer(startPoint, this.startPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    const resolvedLineColor = resolveColor(this.lineColor, conf.theme, "foreground");
-    this.startPointer.path.setBorderColor(resolvedLineColor);
     this.startPointer.path.setBorderWidth(this.lineWidth);
-    this.startPointer.path.setBackgroundColor(resolvedLineColor);
     this.endPointer = getEndPointer(endPoint, this.endPointerStyle, this.lineStyle, this.lines, this.lineWidth * 0.1 + 0.2);
-    this.endPointer.path.setBorderColor(resolvedLineColor);
     this.endPointer.path.setBorderWidth(this.lineWidth);
-    this.endPointer.path.setBackgroundColor(resolvedLineColor);
     this.offsetLines();
     this.lines.setBorderWidth(this.lineWidth);
-    this.lines.setBorderColor(resolvedLineColor);
     this.lines.setBorderStyle(this.borderStyle);
     this.updateTitle();
   }
@@ -267366,7 +267364,6 @@ class Shape extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -267402,7 +267399,6 @@ class Shape extends BaseItem {
   }
   applyBorderColor(borderColor) {
     this.borderColor = borderColor;
-    this.path.setBorderColor(resolveColor(borderColor, conf.theme, "foreground"));
   }
   setBorderColor(borderColor) {
     this.emit({
@@ -267510,6 +267506,8 @@ class Shape extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -267610,9 +267608,7 @@ class Shape extends BaseItem {
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
     this.path.transform(this.transformation.toMatrix());
-    this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -267797,7 +267793,6 @@ class Sticker extends BaseItem {
     this.stickerPath.transform(this.transformation.toMatrix());
     this.text.setContainer(this.textContainer.copy());
     this.textContainer.transform(this.transformation.toMatrix());
-    this.stickerPath.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.saveStickerData();
   }
   setId(id2) {
@@ -267841,7 +267836,6 @@ class Sticker extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.stickerPath.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -267888,6 +267882,7 @@ class Sticker extends BaseItem {
       return;
     }
     this.renderShadow(context);
+    this.stickerPath.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.stickerPath.render(context);
     this.text.render(context);
     if (this.getLinkTo()) {
@@ -268425,9 +268420,7 @@ class Frame2 extends BaseItem {
       this.path.transform(this.transformation.toMatrix());
       this.textContainer.transform(this.transformation.toMatrix());
     }
-    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
     this.path.setBackgroundOpacity(this.backgroundOpacity);
-    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.setBorderWidth(this.borderWidth);
     this.path.setBorderStyle(this.borderStyle);
     this.path.setBorderOpacity(this.borderOpacity);
@@ -268578,7 +268571,6 @@ class Frame2 extends BaseItem {
   }
   applyBackgroundColor(backgroundColor) {
     this.backgroundColor = backgroundColor;
-    this.path.setBackgroundColor(resolveColor(backgroundColor, conf.theme, "background"));
   }
   setBackgroundColor(backgroundColor) {
     this.emit({
@@ -268626,6 +268618,8 @@ class Frame2 extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
+    this.path.setBackgroundColor(resolveColor(this.backgroundColor, conf.theme, "background"));
+    this.path.setBorderColor(resolveColor(this.borderColor, conf.theme, "foreground"));
     this.path.render(context);
     this.renderNewShape(context);
     if (this.getLinkTo()) {
@@ -373226,7 +373220,6 @@ function FillStyle() {
     board.selection.setFillColor(color2);
   };
   const isSemanticFill = getSemanticId(rawFillColor) !== null;
-  const isPredefinedColor = isSemanticFill || window.MICROBOARD_CONFIG.SHAPE_FILL_COLORS.some((color2) => color2 === fillColor);
   return /* @__PURE__ */ import_react239.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME4,
     openedMenu,
@@ -373257,15 +373250,10 @@ function FillStyle() {
     id: "fill-style",
     currentValue: rawFillColor,
     onPick: handlePick
-  }), /* @__PURE__ */ import_react239.default.createElement(ColorPicker, {
-    id: "fill-style",
-    selectedColor: fillColor,
-    colors: window.MICROBOARD_CONFIG.SHAPE_FILL_COLORS,
-    onPick: handlePick
   }), /* @__PURE__ */ import_react239.default.createElement(UiColorInput, {
     onChange: handleCustomPick,
-    color: isPredefinedColor ? "none" : fillColor,
-    isActive: fillColor !== "none" && !isPredefinedColor,
+    color: isSemanticFill ? "none" : fillColor,
+    isActive: fillColor !== "none" && !isSemanticFill,
     toggleMenu
   })));
 }
@@ -373613,7 +373601,6 @@ function FrameFill() {
     board.selection.setFillColor(color2);
   };
   const isSemanticFill = getSemanticId(rawFillColor) !== null;
-  const isPredefinedColor = isSemanticFill || FRAME_FILL_COLORS.some((color2) => color2 === fillColor);
   return /* @__PURE__ */ import_react245.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME7,
     openedMenu,
@@ -373644,15 +373631,10 @@ function FrameFill() {
     id: "frame-fill",
     currentValue: rawFillColor,
     onPick: handlePick
-  }), /* @__PURE__ */ import_react245.default.createElement(ColorPicker, {
-    id: "fill-style",
-    selectedColor: fillColor,
-    colors: FRAME_FILL_COLORS,
-    onPick: handlePick
   }), /* @__PURE__ */ import_react245.default.createElement(UiColorInput, {
     onChange: handleCustomPick,
-    color: isPredefinedColor ? "none" : fillColor,
-    isActive: fillColor !== "none" && !isPredefinedColor,
+    color: isSemanticFill ? "none" : fillColor,
+    isActive: fillColor !== "none" && !isSemanticFill,
     toggleMenu
   })));
 }
@@ -374161,11 +374143,6 @@ function StickerFillStyle() {
     id: "sticker-fill",
     currentValue: rawColor,
     onPick: handlePick
-  }), /* @__PURE__ */ import_react258.default.createElement(ColorPicker, {
-    id: "sticker-fill",
-    selectedColor: color2,
-    colors: window.MICROBOARD_CONFIG.STICKER_COLORS,
-    onPick: handlePick
   })));
 }
 
@@ -374221,7 +374198,6 @@ function StrokeStyle({
     board.selection.setStrokeColor(color2);
   };
   const isSemanticStroke = getSemanticId(rawBorderColor) !== null;
-  const isPredefinedColor = isSemanticStroke || window.MICROBOARD_CONFIG.SHAPE_STROKE_COLORS.some((color2) => color2 === borderColor);
   return /* @__PURE__ */ import_react259.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME13,
     openedMenu,
@@ -374264,15 +374240,10 @@ function StrokeStyle({
     id: "stroke-style",
     currentValue: rawBorderColor,
     onPick: handleStrokeColorPick
-  }), /* @__PURE__ */ import_react259.default.createElement(ColorPicker, {
-    id: "stroke-style",
-    colors: window.MICROBOARD_CONFIG.SHAPE_STROKE_COLORS,
-    onPick: handleStrokeColorPick,
-    selectedColor: borderColor
   }), /* @__PURE__ */ import_react259.default.createElement(UiColorInput, {
     onChange: handleStrokeCustomColorPick,
-    color: isPredefinedColor ? "none" : borderColor,
-    isActive: borderColor !== "none" && !isPredefinedColor,
+    color: isSemanticStroke ? "none" : borderColor,
+    isActive: borderColor !== "none" && !isSemanticStroke,
     toggleMenu
   }))));
 }
@@ -374454,15 +374425,20 @@ function TextColor() {
   const handleClick = () => {
     toggleMenu(MENU_NAME15);
   };
-  const handlePick = (color2) => {
-    board.selection.setFontColor(color2);
+  const handleSemanticPick = (colorValue) => {
+    const resolved = resolveColorForUI(colorValue, "foreground");
+    board.selection.setFontColor(resolved);
     toggleMenu("None");
   };
   const handleCustomPick = (color2) => {
     const rgbColor = convertHexToRGBA2(color2, false);
     board.selection.setFontColor(rgbColor);
   };
-  const isPredefinedColor = window.MICROBOARD_CONFIG.TEXT_COLORS.some((color2) => color2 === fontColor);
+  const activeSemanticId = CONTRAST_PALETTE_LIST.find((pair) => {
+    const fg2 = conf.theme === "light" ? pair.dark : pair.light;
+    return fg2 === fontColor;
+  })?.id ?? null;
+  const isSemanticFont = activeSemanticId !== null;
   return /* @__PURE__ */ import_react264.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME15,
     openedMenu,
@@ -374487,15 +374463,14 @@ function TextColor() {
     grid: true,
     columns: 4,
     gap: 8
-  }, /* @__PURE__ */ import_react264.default.createElement(ColorPicker, {
+  }, /* @__PURE__ */ import_react264.default.createElement(SemanticColorPicker, {
     id: "TextColor",
-    colors: window.MICROBOARD_CONFIG.TEXT_COLORS,
-    selectedColor: fontColor,
-    onPick: handlePick
+    currentValue: { type: "semantic", id: activeSemanticId },
+    onPick: handleSemanticPick
   }), /* @__PURE__ */ import_react264.default.createElement(UiColorInput, {
     onChange: handleCustomPick,
-    color: isPredefinedColor ? "none" : fontColor,
-    isActive: fontColor !== "none" && !isPredefinedColor
+    color: isSemanticFont ? "none" : fontColor,
+    isActive: fontColor !== "none" && !isSemanticFont
   })));
 }
 
@@ -374510,15 +374485,20 @@ function TextHighlight() {
   const handleClick = () => {
     toggleMenu(MENU_NAME16);
   };
-  const handlePick = (color2) => {
-    board.selection.setFontHighlight(color2);
+  const handleSemanticPick = (colorValue) => {
+    const resolved = resolveColorForUI(colorValue, "background");
+    board.selection.setFontHighlight(resolved);
     toggleMenu("None");
   };
   const handleCustomPick = (color2) => {
     const rgbColor = convertHexToRGBA2(color2, false);
     board.selection.setFontHighlight(rgbColor);
   };
-  const isPredefinedColor = window.MICROBOARD_CONFIG.TEXT_HIGHLIGHT_COLORS.includes(highlightColor);
+  const activeSemanticId = CONTRAST_PALETTE_LIST.find((pair) => {
+    const bg = conf.theme === "light" ? pair.light : pair.dark;
+    return bg === highlightColor;
+  })?.id ?? null;
+  const isSemanticHighlight = activeSemanticId !== null;
   return /* @__PURE__ */ import_react265.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME16,
     openedMenu,
@@ -374543,15 +374523,14 @@ function TextHighlight() {
     grid: true,
     columns: 4,
     gap: 8
-  }, /* @__PURE__ */ import_react265.default.createElement(ColorPicker, {
+  }, /* @__PURE__ */ import_react265.default.createElement(SemanticColorPicker, {
     id: "TextHighlight",
-    colors: window.MICROBOARD_CONFIG.TEXT_HIGHLIGHT_COLORS,
-    selectedColor: highlightColor,
-    onPick: handlePick
+    currentValue: { type: "semantic", id: activeSemanticId },
+    onPick: handleSemanticPick
   }), /* @__PURE__ */ import_react265.default.createElement(UiColorInput, {
     onChange: handleCustomPick,
-    color: isPredefinedColor ? "none" : highlightColor,
-    isActive: highlightColor !== "none" && !isPredefinedColor,
+    color: isSemanticHighlight ? "none" : highlightColor,
+    isActive: highlightColor !== "none" && !isSemanticHighlight,
     toggleMenu
   })));
 }
@@ -374663,7 +374642,6 @@ function ConnectorLineColor() {
     board.selection.setStrokeColor(color2);
   };
   const isSemanticLine = getSemanticId(rawLineColor) !== null;
-  const isPredefinedColor = isSemanticLine || window.MICROBOARD_CONFIG.SHAPE_STROKE_COLORS.some((color2) => color2 === connectorLineColor);
   return /* @__PURE__ */ import_react268.default.createElement(ButtonWithMenu, {
     menuName: MENU_NAME17,
     openedMenu,
@@ -374694,15 +374672,10 @@ function ConnectorLineColor() {
     id: "connector-line-color",
     currentValue: rawLineColor,
     onPick: handlePick
-  }), /* @__PURE__ */ import_react268.default.createElement(ColorPicker, {
-    id: "connector-line-color",
-    selectedColor: connectorLineColor,
-    colors: window.MICROBOARD_CONFIG.SHAPE_STROKE_COLORS,
-    onPick: handlePick
   }), /* @__PURE__ */ import_react268.default.createElement(UiColorInput, {
     onChange: handleCustomPick,
-    color: isPredefinedColor ? "none" : connectorLineColor,
-    isActive: connectorLineColor !== "none" && !isPredefinedColor,
+    color: isSemanticLine ? "none" : connectorLineColor,
+    isActive: connectorLineColor !== "none" && !isSemanticLine,
     toggleMenu
   })));
 }
@@ -376803,7 +376776,7 @@ function shouldShow(panel) {
 }
 
 // src/features/SidePanelsContainer/SidePanelsContainer.tsx
-var import_react369 = __toESM(require_react(), 1);
+var import_react368 = __toESM(require_react(), 1);
 
 // src/features/AppView/InactiveBoardHidder.tsx
 var import_react309 = __toESM(require_react(), 1);
@@ -437851,7 +437824,7 @@ var AIChatPanel = ({ board }) => {
 var AIChatPanel_default = AIChatPanel;
 
 // src/features/ToolsPanel/ToolsPanel.tsx
-var import_react363 = __toESM(require_react(), 1);
+var import_react362 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/AddConnector.tsx
 var import_react325 = __toESM(require_react(), 1);
@@ -439644,28 +439617,8 @@ function Select3({ rounded = "top" }) {
   }));
 }
 
-// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
-var import_react354 = __toESM(require_react(), 1);
-function ThemeToggle() {
-  const { board } = useAppContext();
-  const [theme2, setTheme] = import_react354.useState(conf.theme);
-  const handleClick = () => {
-    const next5 = conf.theme === "light" ? "dark" : "light";
-    conf.theme = next5;
-    setTheme(next5);
-    board.items.subject.publish(board.items);
-  };
-  return /* @__PURE__ */ import_react354.default.createElement(UiButton, {
-    id: "theme-toggle",
-    tooltip: theme2 === "light" ? "Switch to dark theme" : "Switch to light theme",
-    onClick: handleClick,
-    variant: "secondary",
-    rounded: "none"
-  }, theme2 === "light" ? "☀" : "☾");
-}
-
 // src/features/ToolsPanel/Buttons/Undo.tsx
-var import_react355 = __toESM(require_react(), 1);
+var import_react354 = __toESM(require_react(), 1);
 function Undo() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -439678,7 +439631,7 @@ function Undo() {
     board.events?.undo();
   };
   const canUndo = board.events?.canUndo();
-  return /* @__PURE__ */ import_react355.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react354.default.createElement(UiButton, {
     id: "undo",
     tooltip: t11("toolsPanel.undo.tooltip"),
     hotkey: getHotkeyLabel("undo"),
@@ -439686,7 +439639,7 @@ function Undo() {
     disabled: !canUndo,
     rounded: "top",
     variant: "secondary"
-  }, /* @__PURE__ */ import_react355.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react354.default.createElement(Icon, {
     iconName: "Undo"
   }));
 }
@@ -439702,13 +439655,13 @@ var ToolsPanel_module_default = {
 };
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddGameItem.tsx
-var import_react362 = __toESM(require_react(), 1);
+var import_react361 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddDice.tsx
-var import_react357 = __toESM(require_react(), 1);
+var import_react356 = __toESM(require_react(), 1);
 
 // src/features/GameItems/CreateDiceModal.tsx
-var import_react356 = __toESM(require_react(), 1);
+var import_react355 = __toESM(require_react(), 1);
 
 // src/features/GameItems/Modal.module.css
 var Modal_module_default = {
@@ -439734,14 +439687,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_react355.useState(Array(MIN_SIDES).fill(null));
+  const [previews, setPreviews] = import_react355.useState(Array(MIN_SIDES).fill(null));
+  const [isLoading, setIsLoading] = import_react355.useState(false);
+  const inputRefs = import_react355.useRef([]);
   const { board } = useAppContext();
   const account = useAccount();
   const { t: t11 } = useTranslation();
-  import_react356.useEffect(() => {
+  import_react355.useEffect(() => {
     faces.forEach((file, idx) => {
       if (file) {
         const reader = new FileReader;
@@ -439827,43 +439780,43 @@ function CreateDiceModal() {
     }
     closeModal2();
   };
-  return /* @__PURE__ */ import_react356.default.createElement(UiModal, {
+  return /* @__PURE__ */ import_react355.default.createElement(UiModal, {
     modalId: CREATE_DICE_MODAL,
     closeOnClickOutside: false,
     renderAsPageOnMobile: true
-  }, /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, /* @__PURE__ */ import_react355.default.createElement("div", {
     className: Modal_module_default.modalContent
-  }, /* @__PURE__ */ import_react356.default.createElement("div", {
+  }, /* @__PURE__ */ import_react355.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_react355.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_react355.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_react355.default.createElement("img", {
     src: previews[idx] || undefined,
     alt: `face-${idx + 1}`,
     className: Modal_module_default.dicePreview
-  }) : /* @__PURE__ */ import_react356.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react355.default.createElement("span", {
     className: Modal_module_default.diceLabel
-  }, idx + 1), /* @__PURE__ */ import_react356.default.createElement("input", {
+  }, idx + 1), /* @__PURE__ */ import_react355.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_react355.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_react355.default.createElement("div", {
     className: Modal_module_default.removeFaceBtnWrapper
-  }, /* @__PURE__ */ import_react356.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react355.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_react355.default.createElement(UiButton, {
     className: Modal_module_default.acceptBtn,
     variant: "primary",
     onClick: handleAccept,
@@ -439878,23 +439831,23 @@ function AddDice2({ rounded }) {
   const handleClick = () => {
     openModal2(CREATE_DICE_MODAL);
   };
-  return /* @__PURE__ */ import_react357.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react356.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_react356.default.createElement(Icon, {
     iconName: "Dice"
   }));
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddCard.tsx
-var import_react359 = __toESM(require_react(), 1);
+var import_react358 = __toESM(require_react(), 1);
 
 // src/features/GameItems/CreateCardsModal.tsx
-var import_react358 = __toESM(require_react(), 1);
+var import_react357 = __toESM(require_react(), 1);
 var CREATE_CARDS_MODAL = Symbol("createCardsModal");
 var getImageDimensions = (file) => {
   return new Promise((resolve2) => {
@@ -439913,14 +439866,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_react357.default.useState(null);
+  const [coverPreview, setCoverPreview] = import_react357.default.useState(null);
+  const [cards, setCards] = import_react357.default.useState([]);
+  const [cardsPreview, setCardsPreview] = import_react357.default.useState([]);
+  const [loading, setLoading] = import_react357.default.useState(false);
+  const [cardDimensions, setCardDimensions] = import_react357.useState(conf.DEFAULT_GAME_ITEM_DIMENSIONS);
+  const coverInputRef = import_react357.default.useRef(null);
+  const cardsInputRef = import_react357.default.useRef(null);
   const handleCoverClick = () => coverInputRef.current?.click();
   const handleCardsClick = () => cardsInputRef.current?.click();
   const createDeck2 = (backsideUrl, faceUrls) => {
@@ -439984,17 +439937,17 @@ function CreateCardsModal() {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ import_react358.default.createElement(UiModal, {
+  return /* @__PURE__ */ import_react357.default.createElement(UiModal, {
     modalId: CREATE_CARDS_MODAL,
     closeOnClickOutside: false,
     renderAsPageOnMobile: true
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react357.default.createElement("div", {
     className: Modal_module_default.modalContent
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react357.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_react357.default.createElement("div", {
     className: Modal_module_default.cardsRow
-  }, /* @__PURE__ */ import_react358.default.createElement("div", {
+  }, /* @__PURE__ */ import_react357.default.createElement("div", {
     className: Modal_module_default.cardSilhouette,
     onClick: handleCoverClick,
     style: {
@@ -440002,19 +439955,19 @@ function CreateCardsModal() {
       height: cardDimensions.height,
       maxWidth: "80vw"
     }
-  }, coverPreview ? /* @__PURE__ */ import_react358.default.createElement("img", {
+  }, coverPreview ? /* @__PURE__ */ import_react357.default.createElement("img", {
     src: coverPreview,
     alt: "cover",
     className: Modal_module_default.cardPreview
-  }) : /* @__PURE__ */ import_react358.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react357.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_react357.default.createElement("input", {
     type: "file",
     accept: "image/*",
     style: { display: "none" },
     ref: coverInputRef,
     onChange: handleCoverChange
-  })), /* @__PURE__ */ import_react358.default.createElement("div", {
+  })), /* @__PURE__ */ import_react357.default.createElement("div", {
     className: Modal_module_default.cardSilhouette,
     onClick: handleCardsClick,
     style: {
@@ -440022,20 +439975,20 @@ function CreateCardsModal() {
       height: cardDimensions.height,
       maxWidth: "80vw"
     }
-  }, cardsPreview.length > 0 ? /* @__PURE__ */ import_react358.default.createElement("img", {
+  }, cardsPreview.length > 0 ? /* @__PURE__ */ import_react357.default.createElement("img", {
     src: cardsPreview[0],
     alt: "preview",
     className: Modal_module_default.cardPreview
-  }) : /* @__PURE__ */ import_react358.default.createElement("span", {
+  }) : /* @__PURE__ */ import_react357.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_react357.default.createElement("input", {
     type: "file",
     accept: "image/*",
     multiple: true,
     style: { display: "none" },
     ref: cardsInputRef,
     onChange: handleCardsChange
-  }))), /* @__PURE__ */ import_react358.default.createElement(UiButton, {
+  }))), /* @__PURE__ */ import_react357.default.createElement(UiButton, {
     className: Modal_module_default.acceptBtn,
     variant: "primary",
     onClick: handleAccept,
@@ -440050,13 +440003,13 @@ function AddCard({ rounded = "none" }) {
   const handleClick = () => {
     openModal2(CREATE_CARDS_MODAL);
   };
-  return /* @__PURE__ */ import_react359.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react358.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_react358.default.createElement(Icon, {
     iconName: "Card",
     width: 24,
     height: 24
@@ -440064,7 +440017,7 @@ function AddCard({ rounded = "none" }) {
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddScreen.tsx
-var import_react360 = __toESM(require_react(), 1);
+var import_react359 = __toESM(require_react(), 1);
 function AddScreen2() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440072,20 +440025,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_react359.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_react359.default.createElement(Icon, {
     iconName: "AddScreen"
   }));
 }
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddPouch.tsx
-var import_react361 = __toESM(require_react(), 1);
+var import_react360 = __toESM(require_react(), 1);
 function AddPouch2() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440093,14 +440046,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_react360.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_react360.default.createElement(Icon, {
     iconName: "AddPouch",
     width: 24,
     height: 24
@@ -440109,35 +440062,35 @@ function AddPouch2() {
 
 // src/features/ToolsPanel/Buttons/AddGameItem/AddGameItem.tsx
 function AddGameItem() {
-  const [isOpen, setIsOpen] = import_react362.useState(false);
+  const [isOpen, setIsOpen] = import_react361.useState(false);
   const { t: t11 } = useTranslation();
   const ref4 = useClickOutside(() => setIsOpen(false), [], true);
-  return /* @__PURE__ */ import_react362.default.createElement(ButtonWithMenu2, {
+  return /* @__PURE__ */ import_react361.default.createElement(ButtonWithMenu2, {
     ref: ref4,
-    button: /* @__PURE__ */ import_react362.default.createElement(UiButton, {
+    button: /* @__PURE__ */ import_react361.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_react361.default.createElement(Icon, {
       iconName: "GameItems"
     })),
     isOpen
-  }, /* @__PURE__ */ import_react362.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react361.default.createElement(UiPanel, {
     vertical: true,
     padding: 0
-  }, /* @__PURE__ */ import_react362.default.createElement(AddDice2, {
+  }, /* @__PURE__ */ import_react361.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_react361.default.createElement(AddScreen2, null), /* @__PURE__ */ import_react361.default.createElement(AddPouch2, null), /* @__PURE__ */ import_react361.default.createElement(AddCard, {
     rounded: "bottom"
   })));
 }
 
 // src/features/ToolsPanel/ToolsPanel.tsx
 function ToolsPanel() {
-  const [openedMenu, setOpenedMenu] = import_react363.useState("None");
+  const [openedMenu, setOpenedMenu] = import_react362.useState("None");
   const toggleMenu = (menu) => setOpenedMenu((prev2) => prev2 === menu ? "None" : menu);
   const { app } = useAppContext();
   const forceUpdate = useForceUpdate();
@@ -440145,31 +440098,31 @@ function ToolsPanel() {
     subjects: ["tools"],
     observer: forceUpdate
   });
-  import_react363.useEffect(() => {}, [window.showDebug]);
-  return /* @__PURE__ */ import_react363.default.createElement(PanelContext2.Provider, {
+  import_react362.useEffect(() => {}, [window.showDebug]);
+  return /* @__PURE__ */ import_react362.default.createElement(PanelContext2.Provider, {
     value: { toggleMenu, openedMenu }
-  }, /* @__PURE__ */ import_react363.default.createElement("div", {
+  }, /* @__PURE__ */ import_react362.default.createElement("div", {
     className: window.location.protocol === "file:" ? ToolsPanel_module_default.localWrapper : ToolsPanel_module_default.wrapper
-  }, /* @__PURE__ */ import_react363.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react362.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_react362.default.createElement(AddGameItem, null), /* @__PURE__ */ import_react362.default.createElement(AddTemplate, null), /* @__PURE__ */ import_react362.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react362.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_react362.default.createElement(AddDrawing2, null), /* @__PURE__ */ import_react362.default.createElement(AddText2, null), /* @__PURE__ */ import_react362.default.createElement(AddShape2, null), /* @__PURE__ */ import_react362.default.createElement(AddConnector2, null), /* @__PURE__ */ import_react362.default.createElement(AddSticker2, null), /* @__PURE__ */ import_react362.default.createElement(AddFrame2, null), /* @__PURE__ */ import_react362.default.createElement(AddMedia, null)), /* @__PURE__ */ import_react362.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_react362.default.createElement(Undo, null), /* @__PURE__ */ import_react362.default.createElement(Redo, null)), /* @__PURE__ */ import_react362.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_react362.default.createElement(EventList, null), window.enableDiagrams && /* @__PURE__ */ import_react362.default.createElement(AIChatPanel_default, {
     board: app.getBoard()
   }))));
 }
 // src/features/ToolsPanel/ViewToolsPanel.tsx
-var import_react365 = __toESM(require_react(), 1);
+var import_react364 = __toESM(require_react(), 1);
 
 // src/features/ToolsPanel/Buttons/Grab.tsx
-var import_react364 = __toESM(require_react(), 1);
+var import_react363 = __toESM(require_react(), 1);
 function Grab() {
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
@@ -440177,14 +440130,14 @@ function Grab() {
     board.tools.navigate();
   };
   const isActive = Boolean(board.tools.getNavigate());
-  return /* @__PURE__ */ import_react364.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react363.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_react363.default.createElement(Icon, {
     iconName: "Hand"
   }));
 }
@@ -440196,25 +440149,25 @@ function ViewToolsPanel() {
     subjects: ["tools"],
     observer: forceUpdate
   });
-  import_react365.useEffect(() => {}, [window.showDebug]);
-  return /* @__PURE__ */ import_react365.default.createElement("div", {
+  import_react364.useEffect(() => {}, [window.showDebug]);
+  return /* @__PURE__ */ import_react364.default.createElement("div", {
     className: ToolsPanel_module_default.wrapper
-  }, /* @__PURE__ */ import_react365.default.createElement(UiPanel, {
+  }, /* @__PURE__ */ import_react364.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_react364.default.createElement(Grab, null), /* @__PURE__ */ import_react364.default.createElement(UiSeparator, null), /* @__PURE__ */ import_react364.default.createElement(Select3, {
     rounded: "bottom"
-  })), window.showDebug && /* @__PURE__ */ import_react365.default.createElement(EventList, null));
+  })), window.showDebug && /* @__PURE__ */ import_react364.default.createElement(EventList, null));
 }
 
 // src/features/BoardItemsPanel/BoardItemsPanel.tsx
-var import_react368 = __toESM(require_react(), 1);
+var import_react367 = __toESM(require_react(), 1);
 
 // src/shared/lib/useHotkey.ts
-var import_react366 = __toESM(require_react(), 1);
+var import_react365 = __toESM(require_react(), 1);
 function useHotkey(code4, callback, options3 = {}) {
-  import_react366.useEffect(() => {
+  import_react365.useEffect(() => {
     const { ctrl = false, shift: shift2 = false, alt = false, meta: meta3 = false } = options3;
     const handler = (event) => {
       const target = event.target;
@@ -440232,7 +440185,7 @@ function useHotkey(code4, callback, options3 = {}) {
 }
 
 // src/features/BoardItemsPanel/BoardItemsPanelContext.tsx
-var import_react367 = __toESM(require_react(), 1);
+var import_react366 = __toESM(require_react(), 1);
 var BoardItemsPanelContext = createStrictContext();
 function useBoardItemsPanelContext() {
   return useStrictContext(BoardItemsPanelContext);
@@ -440240,8 +440193,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_react366.useState(false);
+  return /* @__PURE__ */ import_react366.default.createElement(BoardItemsPanelContext.Provider, {
     value: {
       isOpen,
       openPanel: () => setIsOpen(true),
@@ -440268,49 +440221,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_react367.useState("");
+  const inputRef = import_react367.useRef(null);
+  const handleOpenSearch = import_react367.useCallback(() => {
     openPanel();
     setTimeout(() => inputRef.current?.focus(), 50);
   }, [openPanel]);
   useHotkey("KeyF", handleOpenSearch, { ctrl: true });
-  return /* @__PURE__ */ import_react368.default.createElement(UiPanel, {
+  return /* @__PURE__ */ import_react367.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_react367.default.createElement("div", {
     className: BoardItemsPanel_module_default.header
-  }, /* @__PURE__ */ import_react368.default.createElement("h3", {
+  }, /* @__PURE__ */ import_react367.default.createElement("h3", {
     className: BoardItemsPanel_module_default.title
-  }, "Предметы"), /* @__PURE__ */ import_react368.default.createElement(UiButton, {
+  }, "Предметы"), /* @__PURE__ */ import_react367.default.createElement(UiButton, {
     onClick: closePanel,
     variant: "secondary",
     className: BoardItemsPanel_module_default.close
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react367.default.createElement(Icon, {
     iconName: "Close"
-  }))), /* @__PURE__ */ import_react368.default.createElement("div", {
+  }))), /* @__PURE__ */ import_react367.default.createElement("div", {
     className: BoardItemsPanel_module_default.search
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react367.default.createElement(Icon, {
     iconName: "Search",
     width: 14,
     height: 14,
     className: BoardItemsPanel_module_default.searchIcon
-  }), /* @__PURE__ */ import_react368.default.createElement("input", {
+  }), /* @__PURE__ */ import_react367.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_react367.default.createElement("button", {
     className: BoardItemsPanel_module_default.searchClear,
     onClick: () => setQuery("")
-  }, /* @__PURE__ */ import_react368.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react367.default.createElement(Icon, {
     iconName: "Close",
     width: 12,
     height: 12
-  }))), /* @__PURE__ */ import_react368.default.createElement("div", {
+  }))), /* @__PURE__ */ import_react367.default.createElement("div", {
     className: BoardItemsPanel_module_default.content
-  }, /* @__PURE__ */ import_react368.default.createElement(BoardItemsList, {
+  }, /* @__PURE__ */ import_react367.default.createElement(BoardItemsList, {
     query: query2
   })));
 }
@@ -440321,7 +440274,7 @@ var SidePanelsContainer_module_default = {
 };
 
 // src/features/SidePanelsContainer/SidePanelsContainer.tsx
-var SidePanelsContainer = import_react369.memo(({ isBlank }) => {
+var SidePanelsContainer = import_react368.memo(({ isBlank }) => {
   const { toggleSideMenu, isOpen } = useSidePanelContext();
   const { renamingId } = useRenameContext();
   const containerRef = useClickOutside(() => {
@@ -440329,21 +440282,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_react368.default.createElement(BoardItemsPanelContextProvider, null, /* @__PURE__ */ import_react368.default.createElement(ShapesPanelContextProvider, null, /* @__PURE__ */ import_react368.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_react368.default.createElement(TitlePanel, null), /* @__PURE__ */ import_react368.default.createElement(ViewModeGuard, {
     iframe: true
-  }, /* @__PURE__ */ import_react369.default.createElement("div", {
+  }, /* @__PURE__ */ import_react368.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_react368.default.createElement(SidePanel, null), /* @__PURE__ */ import_react368.default.createElement(ShapesPanel, null), /* @__PURE__ */ import_react368.default.createElement(BoardItemsPanel, null)), /* @__PURE__ */ import_react368.default.createElement(InactiveBoardHidder, null, /* @__PURE__ */ import_react368.default.createElement(ViewModeGuard, {
     mode: ["edit", "view"]
   }, (interfaceType) => {
     switch (interfaceType) {
       case "view":
-        return /* @__PURE__ */ import_react369.default.createElement(ViewToolsPanel, null);
+        return /* @__PURE__ */ import_react368.default.createElement(ViewToolsPanel, null);
       case "edit":
-        return /* @__PURE__ */ import_react369.default.createElement(ToolsPanel, null);
+        return /* @__PURE__ */ import_react368.default.createElement(ToolsPanel, null);
       default:
         return null;
     }
@@ -440351,10 +440304,10 @@ var SidePanelsContainer = import_react369.memo(({ isBlank }) => {
 });
 SidePanelsContainer.displayName = "SidePanelsContainer";
 // src/features/TextEditor/TextEditor.tsx
-var import_react372 = __toESM(require_react(), 1);
+var import_react371 = __toESM(require_react(), 1);
 
 // src/features/TextEditor/Leaf.tsx
-var import_react370 = __toESM(require_react(), 1);
+var import_react369 = __toESM(require_react(), 1);
 function Leaf2(props) {
   const { attributes, leaf: leaf3, fontSize, isAutoSize, text: text5 } = props;
   let { children } = props;
@@ -440380,26 +440333,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_react369.default.createElement("strong", null, children);
         break;
       case "italic":
-        children = /* @__PURE__ */ import_react370.default.createElement("em", null, children);
+        children = /* @__PURE__ */ import_react369.default.createElement("em", null, children);
         break;
       case "underline":
-        children = /* @__PURE__ */ import_react370.default.createElement("u", null, children);
+        children = /* @__PURE__ */ import_react369.default.createElement("u", null, children);
         break;
       case "line-through":
-        children = /* @__PURE__ */ import_react370.default.createElement("s", null, children);
+        children = /* @__PURE__ */ import_react369.default.createElement("s", null, children);
         break;
       case "sub":
-        children = /* @__PURE__ */ import_react370.default.createElement("sub", null, children);
+        children = /* @__PURE__ */ import_react369.default.createElement("sub", null, children);
         break;
       case "super":
-        children = /* @__PURE__ */ import_react370.default.createElement("sup", null, children);
+        children = /* @__PURE__ */ import_react369.default.createElement("sup", null, children);
         break;
     }
   }
-  return /* @__PURE__ */ import_react370.default.createElement("span", {
+  return /* @__PURE__ */ import_react369.default.createElement("span", {
     ...attributes,
     style: {
       color: props.text.fontColor,
@@ -440411,7 +440364,7 @@ function Leaf2(props) {
 }
 
 // src/features/TextEditor/Element.tsx
-var import_react371 = __toESM(require_react(), 1);
+var import_react370 = __toESM(require_react(), 1);
 
 // src/features/TextEditor/TextEditor.module.css
 var TextEditor_module_default = {
@@ -440456,7 +440409,7 @@ function Element4(props) {
   }
   switch (element5.type) {
     case "paragraph":
-      return /* @__PURE__ */ import_react371.default.createElement("p", {
+      return /* @__PURE__ */ import_react370.default.createElement("p", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440466,7 +440419,7 @@ function Element4(props) {
         }
       }, children);
     case "ul_list":
-      return /* @__PURE__ */ import_react371.default.createElement("ul", {
+      return /* @__PURE__ */ import_react370.default.createElement("ul", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440476,7 +440429,7 @@ function Element4(props) {
         }
       }, children);
     case "ol_list":
-      return /* @__PURE__ */ import_react371.default.createElement("ol", {
+      return /* @__PURE__ */ import_react370.default.createElement("ol", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440487,7 +440440,7 @@ function Element4(props) {
         className: getListMarkType2(element5.listLevel || 1)
       }, children);
     case "block-quote":
-      return /* @__PURE__ */ import_react371.default.createElement("blockquote", {
+      return /* @__PURE__ */ import_react370.default.createElement("blockquote", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440496,7 +440449,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_one":
-      return /* @__PURE__ */ import_react371.default.createElement("h1", {
+      return /* @__PURE__ */ import_react370.default.createElement("h1", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440505,7 +440458,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_two":
-      return /* @__PURE__ */ import_react371.default.createElement("h2", {
+      return /* @__PURE__ */ import_react370.default.createElement("h2", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440514,7 +440467,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_three":
-      return /* @__PURE__ */ import_react371.default.createElement("h3", {
+      return /* @__PURE__ */ import_react370.default.createElement("h3", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440523,7 +440476,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_four":
-      return /* @__PURE__ */ import_react371.default.createElement("h4", {
+      return /* @__PURE__ */ import_react370.default.createElement("h4", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440532,7 +440485,7 @@ function Element4(props) {
         }
       }, children);
     case "heading_five":
-      return /* @__PURE__ */ import_react371.default.createElement("h5", {
+      return /* @__PURE__ */ import_react370.default.createElement("h5", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440541,7 +440494,7 @@ function Element4(props) {
         }
       }, children);
     case "code_block":
-      return /* @__PURE__ */ import_react371.default.createElement("code", {
+      return /* @__PURE__ */ import_react370.default.createElement("code", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440551,7 +440504,7 @@ function Element4(props) {
         }
       }, children);
     case "list_item":
-      return /* @__PURE__ */ import_react371.default.createElement("li", {
+      return /* @__PURE__ */ import_react370.default.createElement("li", {
         ...attributes,
         className: TextEditor_module_default.listItem,
         style: {
@@ -440565,7 +440518,7 @@ function Element4(props) {
         }
       }, children);
     default:
-      return /* @__PURE__ */ import_react371.default.createElement("span", {
+      return /* @__PURE__ */ import_react370.default.createElement("span", {
         ...attributes,
         style: {
           textAlign: props.element.horisontalAlignment,
@@ -440588,7 +440541,7 @@ function verticalAlignmentToFlex(align2) {
 }
 
 // src/features/TextEditor/TextEditor.tsx
-class TextEditors extends import_react372.default.Component {
+class TextEditors extends import_react371.default.Component {
   observer = () => {
     this.forceUpdate();
   };
@@ -440607,7 +440560,7 @@ class TextEditors extends import_react372.default.Component {
     if (!text5) {
       return null;
     }
-    return /* @__PURE__ */ import_react372.default.createElement(TextEditor, {
+    return /* @__PURE__ */ import_react371.default.createElement(TextEditor, {
       app: this.props.app,
       board: this.props.board,
       text: text5,
@@ -440619,7 +440572,7 @@ class TextEditors extends import_react372.default.Component {
   }
 }
 
-class TextEditor extends import_react372.default.Component {
+class TextEditor extends import_react371.default.Component {
   static getDerivedStateFromError(error3) {
     console.error("Text Editor error", error3);
     return { hasError: true };
@@ -440648,8 +440601,8 @@ class TextEditor extends import_react372.default.Component {
     isButtonVisible: false,
     isQuoteBtnTooltipVisible: false
   };
-  containerRef = import_react372.default.createRef();
-  editableRef = import_react372.default.createRef();
+  containerRef = import_react371.default.createRef();
+  editableRef = import_react371.default.createRef();
   updateHyperLinkDataFromSelectionAnchor(editor, isWatchMode) {
     const link2 = editor.getFirstSelectionLink(editor.getSelection());
     if (link2) {
@@ -440830,7 +440783,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_react371.default.createElement("div", {
         id: "TextEditor",
         ref: this.containerRef,
         className: "notranslate",
@@ -440862,7 +440815,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_react371.default.createElement(import_react371.default.Fragment, null, /* @__PURE__ */ import_react371.default.createElement("div", {
       id: "TextEditor",
       ref: this.containerRef,
       className: "notranslate",
@@ -440895,7 +440848,7 @@ class TextEditor extends import_react372.default.Component {
         willChange: "transform",
         transform: "translate3d(0,0,0)"
       }
-    }, /* @__PURE__ */ import_react372.default.createElement("div", {
+    }, /* @__PURE__ */ import_react371.default.createElement("div", {
       ref: this.editableRef,
       style: {
         position: "relative",
@@ -440911,14 +440864,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_react371.default.createElement(Slate, {
       editor: text5.editor.editor,
       initialValue: text5.getText(),
       key: text5.rtCounter,
       onChange: this.handleSelectionChange
-    }, /* @__PURE__ */ import_react372.default.createElement(Editable, {
+    }, /* @__PURE__ */ import_react371.default.createElement(Editable, {
       renderElement: Element4,
-      renderLeaf: (props) => /* @__PURE__ */ import_react372.default.createElement(Leaf2, {
+      renderLeaf: (props) => /* @__PURE__ */ import_react371.default.createElement(Leaf2, {
         fontSize: text5.getFontSize(),
         isAutoSize: text5.isAutosize(),
         ...props
@@ -440936,7 +440889,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_react371.default.createElement(Icon, {
       iconName: "TextLimitWarning",
       width: this.editableRef.current?.offsetWidth,
       height: this.editableRef.current?.offsetHeight,
@@ -440944,7 +440897,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_react371.default.createElement("button", {
       onMouseEnter: () => this.setState({
         isQuoteBtnTooltipVisible: true
       }),
@@ -440958,15 +440911,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_react371.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_react371.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_react371.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"
     }))));
@@ -440974,11 +440927,11 @@ class TextEditor extends import_react372.default.Component {
 }
 
 // src/features/ToastProvider.tsx
-var import_react373 = __toESM(require_react(), 1);
+var import_react372 = __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_react372.useState(isPhoneScreenCheck);
+  import_react372.useEffect(() => {
     const setScreen = () => {
       setIsPhoneScreen(isPhoneScreenCheck());
     };
@@ -440987,7 +440940,7 @@ function ToastProvider() {
       window.removeEventListener("resize", setScreen);
     };
   });
-  return /* @__PURE__ */ import_react373.default.createElement(Ie, {
+  return /* @__PURE__ */ import_react372.default.createElement(Ie, {
     containerStyle: isPhoneScreen ? {
       left: 10,
       top: 10,
@@ -441001,7 +440954,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_react373 = __toESM(require_react(), 1);
 var CommentsPanelContext = createStrictContext();
 function useCommentsPanelContext() {
   return useStrictContext(CommentsPanelContext);
@@ -441009,8 +440962,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_react373.useState(false);
+  return /* @__PURE__ */ import_react373.default.createElement(CommentsPanelContext.Provider, {
     value: {
       isPanelOpen,
       setIsPanelOpen
@@ -441019,20 +440972,20 @@ var CommentsPanelContextProvider = ({
 };
 
 // src/features/UserPanel/UserPic/UserPic.tsx
-var import_react378 = __toESM(require_react(), 1);
+var import_react377 = __toESM(require_react(), 1);
 
 // src/features/Presence/BringToMe/BringToMe.tsx
-var import_react376 = __toESM(require_react(), 1);
+var import_react375 = __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_react374 = __toESM(require_react(), 1);
+var EyeIcon = ({ fill: fill3 = "#14151A" }) => /* @__PURE__ */ import_react374.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_react374.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
 }));
@@ -441105,11 +441058,11 @@ var UserActionsDropdown = ({
   userId,
   onClose
 }) => {
-  const dropdownRef = import_react376.useRef(null);
+  const dropdownRef = import_react375.useRef(null);
   const { board } = useAppContext();
   const { t: t11 } = useTranslation();
   const notifyPosition = window.innerWidth < 768 ? "top-center" : "bottom-center";
-  import_react376.useEffect(() => {
+  import_react375.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         onClose();
@@ -441147,10 +441100,10 @@ var UserActionsDropdown = ({
     });
     onClose();
   };
-  return /* @__PURE__ */ import_react376.default.createElement("div", {
+  return /* @__PURE__ */ import_react375.default.createElement("div", {
     ref: dropdownRef,
     className: BringToMe_module_default.userActionsDropdown
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react375.default.createElement(UiButton, {
     className: BringToMe_module_default.dropdownButton,
     size: "sm",
     radius: "md",
@@ -441159,12 +441112,12 @@ var UserActionsDropdown = ({
     onMouseDown: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react375.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_react375.default.createElement("span", null, t11("presence.followUser"))), /* @__PURE__ */ import_react375.default.createElement(UiButton, {
     className: BringToMe_module_default.dropdownButton,
     size: "sm",
     radius: "md",
@@ -441173,22 +441126,22 @@ var UserActionsDropdown = ({
     onMouseDown: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react375.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_react375.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_react375.useRef(null);
+  const [trackedUser, setIsTrackedUser] = import_react375.useState();
+  const [openDropdownUserId, setOpenDropdownUserId] = import_react375.useState(null);
+  const [searchTerm, setSearchTerm] = import_react375.useState("");
   const notifyPosition = window.innerWidth < 768 ? "top-center" : "bottom-center";
-  import_react376.useEffect(() => {
+  import_react375.useEffect(() => {
     const observer = (presence) => {
       setIsTrackedUser(presence.trackedUser || null);
     };
@@ -441197,18 +441150,18 @@ var BringToMe = ({ followers, users }) => {
       board.presence.subject.unsubscribe(observer);
     };
   });
-  const filteredUsers = import_react376.useMemo(() => {
+  const filteredUsers = import_react375.useMemo(() => {
     return users.filter((user) => user.name.toLowerCase().includes(searchTerm.toLowerCase()));
   }, [users, searchTerm]);
-  return /* @__PURE__ */ import_react376.default.createElement("div", {
+  return /* @__PURE__ */ import_react375.default.createElement("div", {
     className: PresenceUsers_module_default.shareModal,
     ref: modalRef
-  }, /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, /* @__PURE__ */ import_react375.default.createElement("div", {
     className: PresenceUsers_module_default.shareModalSearch
-  }, /* @__PURE__ */ import_react376.default.createElement(Input, {
+  }, /* @__PURE__ */ import_react375.default.createElement(Input, {
     id: "searchNicknameId",
     placeholder: t11("presence.searchByName"),
-    prefixIcon: /* @__PURE__ */ import_react376.default.createElement(Icon, {
+    prefixIcon: /* @__PURE__ */ import_react375.default.createElement(Icon, {
       iconName: "Search",
       height: 16,
       width: 16,
@@ -441221,34 +441174,34 @@ var BringToMe = ({ followers, users }) => {
       setSearchTerm(ev.target.value);
       setOpenDropdownUserId(null);
     }
-  })), /* @__PURE__ */ import_react376.default.createElement("div", {
+  })), /* @__PURE__ */ import_react375.default.createElement("div", {
     className: PresenceUsers_module_default.shareList
-  }, filteredUsers.map((user) => /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, filteredUsers.map((user) => /* @__PURE__ */ import_react375.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_react375.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_react375.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_react375.default.createElement("div", {
     className: PresenceUsers_module_default.shareEye
-  }, /* @__PURE__ */ import_react376.default.createElement(EyeIcon, null)), /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, /* @__PURE__ */ import_react375.default.createElement(EyeIcon, null)), /* @__PURE__ */ import_react375.default.createElement("div", {
     className: clsx_default(user.idle && BringToMe_module_default.idleHide)
-  }, /* @__PURE__ */ import_react376.default.createElement("p", {
+  }, /* @__PURE__ */ import_react375.default.createElement("p", {
     className: BringToMe_module_default.nickname
-  }, user.name), user.idle && /* @__PURE__ */ import_react376.default.createElement("p", {
+  }, user.name), user.idle && /* @__PURE__ */ import_react375.default.createElement("p", {
     className: BringToMe_module_default.idle
-  }, t11("presence.idle"))), /* @__PURE__ */ import_react376.default.createElement("div", {
+  }, t11("presence.idle"))), /* @__PURE__ */ import_react375.default.createElement("div", {
     className: BringToMe_module_default.userActionsContainer
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react375.default.createElement(UiButton, {
     className: BringToMe_module_default.btn,
     size: "md",
     radius: "md",
@@ -441260,20 +441213,20 @@ var BringToMe = ({ followers, users }) => {
     onClick: (ev) => {
       ev.stopPropagation();
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react375.default.createElement(Icon, {
     iconName: "ThreeDots",
     width: 20,
     height: 20
-  })), openDropdownUserId === user.id && /* @__PURE__ */ import_react376.default.createElement(UserActionsDropdown, {
+  })), openDropdownUserId === user.id && /* @__PURE__ */ import_react375.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_react375.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_react375.default.createElement("span", null, t11("presence.noUsersFound")), /* @__PURE__ */ import_react375.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_react375.default.createElement("span", null, t11("presence.noUsersFoundPostfix"))), /* @__PURE__ */ import_react375.default.createElement("div", {
     className: BringToMe_module_default.btns
-  }, /* @__PURE__ */ import_react376.default.createElement(UiButton, {
+  }, /* @__PURE__ */ import_react375.default.createElement(UiButton, {
     size: "md",
     className: BringToMe_module_default.btnBring,
     onClick: () => {
@@ -441298,7 +441251,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_react375.default.createElement(UiButton, {
     className: BringToMe_module_default.btnStop,
     variant: "secondary",
     size: "md",
@@ -441310,18 +441263,18 @@ var BringToMe = ({ followers, users }) => {
         users: followers.map((follower) => follower.userId)
       });
     }
-  }, /* @__PURE__ */ import_react376.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react375.default.createElement(Icon, {
     iconName: "EyeDashed",
     width: 16,
     height: 16,
     style: { color: "#696B76" }
-  }), /* @__PURE__ */ import_react376.default.createElement("span", {
+  }), /* @__PURE__ */ import_react375.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_react376 = __toESM(require_react(), 1);
 var UserDropDown = ({
   setIsDropdownOpen,
   isOpen,
@@ -441340,26 +441293,26 @@ var UserDropDown = ({
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react377.default.createElement("div", {
+  return /* @__PURE__ */ import_react376.default.createElement("div", {
     className: UserPanel_module_default.dropdownWrapper,
     ref: dropdownRef,
     style: { top: customTop }
-  }, email && /* @__PURE__ */ import_react377.default.createElement("div", {
+  }, email && /* @__PURE__ */ import_react376.default.createElement("div", {
     className: UserPanel_module_default.userInfo
-  }, /* @__PURE__ */ import_react377.default.createElement(UserAvatar, {
+  }, /* @__PURE__ */ import_react376.default.createElement(UserAvatar, {
     src: account.info?.avatar,
     width: 40,
     height: 40
-  }), /* @__PURE__ */ import_react377.default.createElement("p", {
+  }), /* @__PURE__ */ import_react376.default.createElement("p", {
     className: UserPanel_module_default.userName
-  }, email)), /* @__PURE__ */ import_react377.default.createElement("div", {
+  }, email)), /* @__PURE__ */ import_react376.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_react376.default.isValidElement).map((button, index4) => {
+    return import_react376.default.cloneElement(button, {
       className: UserPanel_module_default.dropdownBtn,
       key: index4
     });
-  }), presenceUsers.length > 0 && /* @__PURE__ */ import_react377.default.createElement(BringToMe, {
+  }), presenceUsers.length > 0 && /* @__PURE__ */ import_react376.default.createElement(BringToMe, {
     followers,
     users: presenceUsers
   })));
@@ -441384,7 +441337,7 @@ var UserPic = ({ ...props }) => {
   const { t: t11 } = useTranslation();
   const { board } = useAppContext();
   const { setIsPanelOpen } = useCommentsPanelContext();
-  const userPanelRef = import_react378.useRef(null);
+  const userPanelRef = import_react377.useRef(null);
   const account = useAccount();
   const { openModal: openModal2 } = useUiModalContext();
   const navigate = useNavigate();
@@ -441415,7 +441368,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_react377.default.createElement(import_react377.default.Fragment, null, /* @__PURE__ */ import_react377.default.createElement("div", {
     className: UserPanel_module_default.userPicWrapper,
     ref: userPanelRef,
     onClick: (event) => {
@@ -441428,14 +441381,14 @@ var UserPic = ({ ...props }) => {
         setIsPanelOpen(false);
       }
     }
-  }, /* @__PURE__ */ import_react378.default.createElement(UserAvatar, {
+  }, /* @__PURE__ */ import_react377.default.createElement(UserAvatar, {
     src: account.info?.avatar,
     isOwner,
     tooltip: !props.isDropdownOpen,
     name: account.info?.name
-  }), /* @__PURE__ */ import_react378.default.createElement(FollowingUsersCount, {
+  }), /* @__PURE__ */ import_react377.default.createElement(FollowingUsersCount, {
     followers: props.followers
-  })), /* @__PURE__ */ import_react378.default.createElement(UserDropDown, {
+  })), /* @__PURE__ */ import_react377.default.createElement(UserDropDown, {
     openerRef: userPanelRef,
     isOpen: props.isDropdownOpen,
     setIsDropdownOpen: props.setIsDropdownOpen,
@@ -441443,67 +441396,67 @@ var UserPic = ({ ...props }) => {
     followers: props.followers,
     presenceUsers: props.presenceUsers,
     buttons: [
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react377.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown1",
         onClick: handlePlanModalOpen,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react377.default.createElement(Icon, {
         iconName: "ArrowUpCircle",
         width: 20,
         height: 20
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react377.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("userPlan.upgradePlan"))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react377.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown2",
         onClick: handleOpenProfileSettings,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react377.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "human"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react377.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.title"))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react377.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown2",
         onClick: handleOpenSupport,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react377.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "support"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react377.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.support"))),
-      /* @__PURE__ */ import_react378.default.createElement(ComponentRolesGuard, {
+      /* @__PURE__ */ import_react377.default.createElement(ComponentRolesGuard, {
         allowedRoles: ["ADMIN" /* ADMIN */]
-      }, /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      }, /* @__PURE__ */ import_react377.default.createElement(UiButton, {
         type: "button",
         key: "userDropDown3",
         onClick: handleOpenAdminPage,
         variant: "ghost",
         size: "lg"
-      }, /* @__PURE__ */ import_react378.default.createElement(Icon, {
+      }, /* @__PURE__ */ import_react377.default.createElement(Icon, {
         width: 20,
         height: 20,
         iconName: "Admin"
-      }), " ", /* @__PURE__ */ import_react378.default.createElement("span", {
+      }), " ", /* @__PURE__ */ import_react377.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.adminPanel")))),
-      /* @__PURE__ */ import_react378.default.createElement(UiButton, {
+      /* @__PURE__ */ import_react377.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_react377.default.createElement(Logout, null), /* @__PURE__ */ import_react377.default.createElement("span", {
         className: UserPanel_module_default.userDropDownButton
       }, t11("profile.logout")))
     ]
@@ -441511,18 +441464,18 @@ var UserPic = ({ ...props }) => {
 };
 
 // src/features/Presence/PresenceUsers/PresenceUsers.tsx
-var import_react380 = __toESM(require_react(), 1);
+var import_react379 = __toESM(require_react(), 1);
 
 // src/features/Presence/PresenceUsers/PresenceUserAvatar.tsx
-var import_react379 = __toESM(require_react(), 1);
+var import_react378 = __toESM(require_react(), 1);
 var TippySvg = () => {
-  return /* @__PURE__ */ import_react379.default.createElement("svg", {
+  return /* @__PURE__ */ import_react378.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_react378.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"
   }));
@@ -441535,35 +441488,35 @@ var PresenceUserAvatar = ({
 }) => {
   const isTracked = trackedUser?.userId === user.id;
   const { t: t11 } = useTranslation();
-  return /* @__PURE__ */ import_react379.default.createElement("div", {
+  return /* @__PURE__ */ import_react378.default.createElement("div", {
     className: PresenceUsers_module_default.userWrapper,
     style: { "--index": index4 },
     onClick
-  }, /* @__PURE__ */ import_react379.default.createElement("div", {
+  }, /* @__PURE__ */ import_react378.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_react378.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_react378.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_react378.default.createElement(EyeIcon, null))), /* @__PURE__ */ import_react378.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_react378.default.createElement("div", {
     className: PresenceUsers_module_default.tippy
-  }, /* @__PURE__ */ import_react379.default.createElement(TippySvg, null)));
+  }, /* @__PURE__ */ import_react378.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_react379.useState(false);
   const account = useAccount();
   const tooltipRef = useClickOutside(() => {
     setIsOpen(false);
@@ -441571,9 +441524,9 @@ var FollowingUsersCount = ({ followers }) => {
   if (!followers.length) {
     return null;
   }
-  return /* @__PURE__ */ import_react380.default.createElement("div", {
+  return /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.followingCounter
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.followingCounterIcon,
     onMouseDown: (ev) => {
       ev.stopPropagation();
@@ -441584,20 +441537,20 @@ var FollowingUsersCount = ({ followers }) => {
       }
       setIsOpen(!isOpen);
     }
-  }, /* @__PURE__ */ import_react380.default.createElement(EyeIcon, {
+  }, /* @__PURE__ */ import_react379.default.createElement(EyeIcon, {
     fill: "white"
-  }), /* @__PURE__ */ import_react380.default.createElement("span", null, followers.length)), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react379.default.createElement("span", null, followers.length)), /* @__PURE__ */ import_react379.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_react379.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_react379.default.createElement("span", {
     className: PresenceUsers_module_default.followersBoard
-  }, t11("presence.yourBoard")), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, t11("presence.yourBoard")), /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.followersHr
-  }), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.followersList
-  }, followers.map((follower) => /* @__PURE__ */ import_react380.default.createElement("span", {
+  }, followers.map((follower) => /* @__PURE__ */ import_react379.default.createElement("span", {
     key: follower.userId,
     className: PresenceUsers_module_default.followersItem
   }, follower.nickname, " ", t11("presence.following"))))));
@@ -441605,16 +441558,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_react379.useState(new Set);
+  const [users, setUsers] = import_react379.useState([]);
+  const [followers, setFollowers] = import_react379.useState([]);
+  const [trackedUser, setTrackedUser] = import_react379.useState(null);
+  const [displayUsers, setDisplayUsers] = import_react379.useState(users);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = import_react379.useState(false);
   const account = useAccount();
   const { setIsPanelOpen } = useCommentsPanelContext();
   const needsCollapse = users.length >= 3;
-  import_react380.useEffect(() => {
+  import_react379.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]);
@@ -441644,7 +441597,7 @@ var PresenceUsers = () => {
     setUsers(uniqueUsersByHardId);
     setFollowers(board.presence.getFollowers());
   };
-  import_react380.useEffect(() => {
+  import_react379.useEffect(() => {
     const observer = (presence) => {
       updateUsers(presence);
       setTrackedUser(presence.trackedUser || null);
@@ -441654,22 +441607,22 @@ var PresenceUsers = () => {
       board.presence.subject.unsubscribe(observer);
     };
   }, [board]);
-  import_react380.useEffect(() => {
+  import_react379.useEffect(() => {
     updateUsers(board.presence);
   }, [board.getInterfaceType()]);
-  return /* @__PURE__ */ import_react380.default.createElement("div", {
+  return /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.wrapper
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.container
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.userList
-  }, displayUsers.map((user, index4) => /* @__PURE__ */ import_react380.default.createElement(PresenceUserAvatar, {
+  }, displayUsers.map((user, index4) => /* @__PURE__ */ import_react379.default.createElement(PresenceUserAvatar, {
     key: user.id,
     user,
     trackedUser,
     index: index4,
     onClick: () => selectUser(user.id)
-  })), /* @__PURE__ */ import_react380.default.createElement(UserPic, {
+  })), /* @__PURE__ */ import_react379.default.createElement(UserPic, {
     className: PresenceUsers_module_default.userWrapper,
     style: { zIndex: 1000 },
     followers,
@@ -441677,7 +441630,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_react379.default.createElement("button", {
     onClick: (event) => {
       event.stopPropagation();
       if (!isUserDropdownOpen) {
@@ -441692,11 +441645,11 @@ var PresenceUsers = () => {
       "--index": displayUsers.length
     },
     className: PresenceUsers_module_default.usersOverflowWrapper
-  }, /* @__PURE__ */ import_react380.default.createElement("div", {
+  }, /* @__PURE__ */ import_react379.default.createElement("div", {
     className: PresenceUsers_module_default.usersOverflowGap
-  }), /* @__PURE__ */ import_react380.default.createElement("div", {
+  }), /* @__PURE__ */ import_react379.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_react379.default.createElement("span", null, users.length), /* @__PURE__ */ import_react379.default.createElement(Icon, {
     iconName: "StrokeChevronDown",
     width: 11,
     height: 6
@@ -441707,7 +441660,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_react380 = __toESM(require_react(), 1);
 
 // src/features/UserPanel/Buttons/AddComment/AddComment.module.css
 var AddComment_module_default = {
@@ -441742,7 +441695,7 @@ function AddComment2() {
     }
     board.tools.addComment(true);
   };
-  return /* @__PURE__ */ import_react381.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react380.default.createElement(UiButton, {
     className: AddComment_module_default.btn,
     id: "tool-add-comment",
     tooltipPosition: "bottom",
@@ -441751,16 +441704,16 @@ function AddComment2() {
     active: isActive,
     variant: "secondary",
     rounded: "left"
-  }, /* @__PURE__ */ import_react381.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react380.default.createElement(Icon, {
     iconName: "Comment",
     width: 20,
     height: 20
-  }), showBadge && /* @__PURE__ */ import_react381.default.createElement("div", {
+  }), showBadge && /* @__PURE__ */ import_react380.default.createElement("div", {
     className: AddComment_module_default.badge
   }));
 }
 // src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.tsx
-var import_react382 = __toESM(require_react(), 1);
+var import_react381 = __toESM(require_react(), 1);
 
 // src/features/UserPanel/Buttons/TogglePresenceRender/TogglePresenceRender.module.css
 var TogglePresenceRender_module_default = {
@@ -441771,9 +441724,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_react381.useState(true);
   const { app } = useAppContext();
-  return /* @__PURE__ */ import_react382.default.createElement(UiButton, {
+  return /* @__PURE__ */ import_react381.default.createElement(UiButton, {
     id: "tool-cursors-toggle",
     tooltipPosition: "bottom",
     tooltip: cursorsActive ? t11("presence.hideCursors") : t11("presence.showCursors"),
@@ -441785,13 +441738,127 @@ var TogglePresenceRender = () => {
       const cursorsEnabled = app.getBoard().presence.toggleCursorsRendering();
       setCursorsActive(cursorsEnabled);
     }
-  }, /* @__PURE__ */ import_react382.default.createElement(Icon, {
+  }, /* @__PURE__ */ import_react381.default.createElement(Icon, {
     iconName: "ToggleCursors",
     width: 20,
     height: 20
   }));
 };
 
+// src/features/ToolsPanel/Buttons/ThemeToggle.tsx
+var import_react382 = __toESM(require_react(), 1);
+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 [theme2, setTheme] = import_react382.useState(conf.theme);
+  const handleClick = () => {
+    const next5 = conf.theme === "light" ? "dark" : "light";
+    conf.theme = next5;
+    setTheme(next5);
+    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",
+    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"
@@ -441807,7 +441874,7 @@ var ActionButtons = () => {
   }
   return /* @__PURE__ */ import_react383.default.createElement("div", {
     className: ActionButtons_module_default.wrapper
-  }, (account.info?.name || account.info?.email) && /* @__PURE__ */ import_react383.default.createElement(AddComment2, null), /* @__PURE__ */ import_react383.default.createElement(TogglePresenceRender, null));
+  }, (account.info?.name || account.info?.email) && /* @__PURE__ */ import_react383.default.createElement(AddComment2, null), /* @__PURE__ */ import_react383.default.createElement(TogglePresenceRender, null), /* @__PURE__ */ import_react383.default.createElement(ThemeToggle, null));
 };
 
 // src/features/UserPanel/Buttons/ShareBtn/ShareBtn.tsx