microboard-ui-temp 0.0.3

package/src/features/hyperLink/HyperLinkInput/HyperLinkInput.tsx

@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+import { Input } from "shared/ui-lib/Input/Input";
+import styles from "./HyperLinkInput.module.css";
+import { useHyperLinkContext } from "features/hyperLink/HyperLinkContext";
+import { useAppContext } from "features/AppContext";
+import { useClickOutside } from "shared/lib/useClickOutside";
+import { Icon } from "shared/ui-lib/Icon/Icon";
+import { useDomMbr } from "App/useDomMbr";
+import { useTranslation } from "react-i18next";
+import { conf } from "microboard-temp";
+import { notify } from "shared/ui-lib/Toast/notify";
+
+export const HyperLinkInput = () => {
+	const [inputValue, setInputValue] = useState<string>("");
+	const { isEditingLink, setIsEditingLink, hyperLinkData, setHyperLinkData } =
+		useHyperLinkContext();
+	const { board, app } = useAppContext();
+	const { t } = useTranslation();
+	const containerRef = useClickOutside(
+		() => {
+			if (isEditingLink) {
+				setIsEditingLink(false);
+			}
+		},
+		[],
+		true,
+	);
+
+	const mbr = useDomMbr({
+		app,
+		board,
+		ref: containerRef,
+		targetMbr: board.selection.items.getSingle()?.getRichText()?.getMbr(),
+		subjects: ["pointer"],
+		fit: "hyperLink",
+	});
+
+	const richTextEditor = board.selection.items
+		.getSingle()
+		?.getRichText()?.editor;
+
+	useEffect(() => {
+		if (hyperLinkData && hyperLinkData.isWatchMode) {
+			const link = richTextEditor?.getFirstSelectionLink(
+				hyperLinkData.selection,
+			);
+			if (link !== inputValue) {
+				setInputValue(link || "");
+			}
+		}
+		if (hyperLinkData && isEditingLink) {
+			(
+				document.querySelector(
+					"#hyper-link-input",
+				) as HTMLInputElement | null
+			)?.focus();
+		}
+		if (!hyperLinkData) {
+			setInputValue("");
+		}
+	}, [hyperLinkData]);
+
+	if (!hyperLinkData || (!isEditingLink && !hyperLinkData.isWatchMode)) {
+		return null;
+	}
+
+	const handleConfirmBtnClick = () => {
+		if (!conf.URL_REGEX.test(inputValue)) {
+			notify({
+				header: t("hyperLink.errorTitle"),
+				body: t("hyperLink.errorBody"),
+				variant: "error",
+				duration: 3000,
+			});
+		} else {
+			board.selection.setHyperLink(inputValue, hyperLinkData.selection);
+			setInputValue("");
+			setIsEditingLink(false);
+		}
+	};
+
+	const handleInputClick = (
+		event: React.MouseEvent<HTMLInputElement>,
+	): void => {
+		event.stopPropagation();
+		if (board.selection.getContext() === "EditTextUnderPointer") {
+			board.selection.setContext("EditUnderPointer");
+		}
+	};
+
+	const onPaste = (event: React.ClipboardEvent<HTMLInputElement>): void => {
+		event.stopPropagation();
+		if (!conf.URL_REGEX.test(event.clipboardData.getData("text/plain"))) {
+			event.preventDefault();
+			notify({
+				header: t("hyperLink.errorTitle"),
+				body: t("hyperLink.errorBody"),
+				variant: "error",
+				duration: 3000,
+			});
+		}
+	};
+
+	const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+		if (event.key === "Enter") {
+			handleConfirmBtnClick();
+		}
+		event.stopPropagation();
+	};
+
+	const handleEditBtnClick = () => {
+		setHyperLinkData({ ...hyperLinkData, isWatchMode: false });
+		setIsEditingLink(true);
+	};
+
+	const handleDeleteBtnClick = () => {
+		board.selection.setHyperLink(undefined, hyperLinkData.selection);
+	};
+	let left = hyperLinkData.inputPosition?.left || mbr.left;
+	let top = hyperLinkData.inputPosition?.top || mbr.top;
+	const width = containerRef.current?.clientWidth || 0;
+	const height = containerRef.current?.clientHeight || 0;
+	const right = left + width;
+	const bottom = top + height;
+	const offset = 20;
+	const view = board.camera.window.getMbr();
+
+	if (right >= view.right - offset) {
+		left = view.right - offset - width;
+	} else if (left <= view.left + offset) {
+		left = view.left + offset;
+	}
+
+	if (bottom >= view.bottom - offset) {
+		top = view.bottom - offset - height;
+	} else if (top <= view.top + offset) {
+		top = view.top + offset;
+	}
+
+	return (
+		<div
+			ref={containerRef}
+			className={styles.container}
+			style={{
+				top,
+				left,
+			}}
+		>
+			{hyperLinkData.isWatchMode ? (
+				<>
+					<a
+						className={styles.link}
+						target="_blank"
+						href={inputValue}
+						rel="noreferrer"
+					>
+						{inputValue}
+					</a>
+					<button
+						className={styles.iconButton}
+						onClick={handleEditBtnClick}
+					>
+						<Icon iconName={"EditPen"} width={16} height={16} />
+					</button>
+					<button
+						className={styles.iconButton}
+						onClick={handleDeleteBtnClick}
+					>
+						<Icon iconName={"Delete"} width={19} height={19} />
+					</button>
+				</>
+			) : (
+				<div className={styles.inputContainer}>
+					<Input
+						onKeyDown={onKeyDown}
+						shouldSelect={true}
+						shouldFocus={true}
+						id="hyper-link-input"
+						placeholder={t("hyperLink.addLink")}
+						value={inputValue}
+						onClick={handleInputClick}
+						onFocus={event => event.currentTarget.select()}
+						onPaste={onPaste}
+						onChange={e => setInputValue(e.target.value)}
+					/>
+					<button
+						onClick={handleConfirmBtnClick}
+						className={styles.confirmBtn}
+					>
+						{t("hyperLink.done")}
+					</button>
+				</div>
+			)}
+		</div>
+	);
+};

package/src/features/hyperLink/index.ts

@@ -0,0 +1,6 @@
+export { HyperLink } from "./HyperLink.tsx";
+export {
+  HyperLinkContextProvider,
+  useHyperLinkContext,
+} from "./HyperLinkContext.tsx";
+export type { HyperLinkCreationData } from "./HyperLinkContext.tsx";

package/src/features/index.drawio

@@ -0,0 +1,115 @@
+<mxfile host="65bd71144e">
+    <diagram id="5xD8ex14hHM9CkSOHjqB" name="Page-1">
+        <mxGraphModel dx="1533" dy="714" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="4" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="2" target="3">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="6" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="2" target="5">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="2" value="window" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="140" y="20" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="8" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="3" target="7">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="3" target="9">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="container" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="230" y="130" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="5" value="offscreen" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="60" y="130" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="22" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="7" target="21">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="24" value="" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="27" target="23">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="26" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="7" target="25">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="28" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="7" target="27">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="30" value="" style="edgeStyle=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="27" target="29">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="7" target="35">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="7" value="overlays" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="60" y="240" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="9" target="11">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="13" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="9" target="11">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="9" target="11">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="16" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="9" target="15">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="canvas" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="630" y="230" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="20" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="11" target="19">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="11" value="top" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="580" y="340" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="18" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="15" target="17">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="15" value="bottom" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="730" y="340" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="17" value="items" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="730" y="440" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="19" value="selection, add rect, transformer" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="580" y="440" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="21" value="text editor" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="410" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="23" value="context panel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="140" y="580" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="25" value="context menu" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="270" y="410" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="27" target="31">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="34" value="" style="edgeStyle=none;html=1;" edge="1" parent="1" source="27" target="33">
+                    <mxGeometry relative="1" as="geometry"/>
+                </mxCell>
+                <mxCell id="27" value="panels" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="-30" y="410" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="29" value="tools panel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="-10" y="580" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="zoom panel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="-150" y="580" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="33" value="title panel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="280" y="580" width="120" height="60" as="geometry"/>
+                </mxCell>
+                <mxCell id="35" value="side panel" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+                    <mxGeometry x="120" y="410" width="120" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>

package/src/features/index.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1001px" height="621px" viewBox="-0.5 -0.5 1001 621" content="&lt;mxfile&gt;&lt;diagram id=&quot;5xD8ex14hHM9CkSOHjqB&quot; name=&quot;Page-1&quot;&gt;3VpBk5owFP41Hrcjiah7rbvdXnry0PaYwlMyA4kTnor76xskiBi644xtHtOT5CVAvs/vvS8EJnxVVG9G7LJvOoV8wqZpNeEvE8Yizpb2p46cmkhct+rA1sjUDeoCa/kOLjh10b1MoewNRK1zlLt+MNFKQYK9mDBGH/vDNjrv33UntuAF1onI/eh3mWLWRJfxtIt/BbnN2jtHU9dTiHawC5SZSPXxKsRfJ3xltMbmqKhWkNfktbw05335Q+9lYgYU3nPCrDnhIPK9w+bmhacWLKQWu2sqrezP5wyL3LYie+jf0M2h1HuTuEu4i6IwW3CjeBOqL351mpvkG+gC0JzsAAO5QHnoEy/c/7e9jOsg2gOHchjxnApxTIWYeYiPUtWqu8Vt9F6lUJ81tTiPmURY78QZ0tEm8p00HMAgVB9CbHtnLgtcGWiT4tjlVNTGsqt8mk8fJ2UZRAbcl8GCSgZt8QwP+ZkKMvcQW0dAIRUYcvEz3hd/xAOqP/aI0ZtNmRgARU7MnJCXgVr5L3Jk4edIO4zAHh5eA0Al8Uetj0+xa/286nmpnHTOjZNr3MXTIFFkK4dAS4chzHRrhzA+OYSZzCj5w0YZNiHo7JUsIThZQix857TWlotTOTbjZLOAxhmFMc5nXwoRmXFG/vLy/8ccZsNgXJjDlLkhzGRl7tmDnAh1ECMocjePTSzo40GYR+hW6j0pkLl8O5sr0Kh35EKIl30h8KB2F2ZZ3OZ/Twh0G0j+rsEvjagLci0sOKUW/CWhxVvQl8pbVmZBWfEdpIQcEpRaTdiqvnqanlWaYNNGI1S50aYYwebcbXEJSh0bKLhQ4TnnJWp6dma3wopCsjO8qdsQtBOqftVIzM/te42LmoLw41fpjp8C1J6cHrYglA9nHj0eIX/j/d/QpgXZEwwP9Jp3CDTddq3vy+fyQG/MT6T10zfm+tuJcjTV8ykirJ7c9953Xa9wR0NOTMmO770o0XIxFnrYkpId33lLmY6HnAvwAGXHNruPmM59V5+C8dff&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><path d="M 374.55 60 L 411.42 105.07" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 414.75 109.13 L 407.61 105.93 L 411.42 105.07 L 413.02 101.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 328.18 60 L 295.56 104.85" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 292.48 109.1 L 293.76 101.38 L 295.56 104.85 L 299.42 105.49 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="290" y="0" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 30px; margin-left: 291px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">window</div></div></div></foreignObject><text x="350" y="34" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">window</text></switch></g><path d="M 393.64 170 L 321.71 216.54" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 317.3 219.39 L 321.28 212.65 L 321.71 216.54 L 325.08 218.53 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 500 155 L 773.82 223.46" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 778.92 224.73 L 771.28 226.43 L 773.82 223.46 L 772.97 219.64 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="380" y="110" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 140px; margin-left: 381px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">container</div></div></div></foreignObject><text x="440" y="144" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">container</text></switch></g><rect x="210" y="110" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 140px; margin-left: 211px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">offscreen</div></div></div></foreignObject><text x="270" y="144" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">offscreen</text></switch></g><path d="M 330 277.57 L 574.21 389.77" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 578.98 391.97 L 571.16 392.22 L 574.21 389.77 L 574.08 385.86 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 180 450 L 308.66 555.95" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 312.71 559.29 L 305.08 557.54 L 308.66 555.95 L 309.53 552.14 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 307.06 280 L 437.99 385.99" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 442.07 389.3 L 434.43 387.61 L 437.99 385.99 L 438.83 382.17 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 254.12 280 L 198.86 384.37" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 196.41 389.01 L 196.59 381.19 L 198.86 384.37 L 202.77 384.46 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 180 450 L 194.81 553.7" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 195.56 558.89 L 191.1 552.46 L 194.81 553.7 L 198.03 551.47 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 280.59 280 L 317.29 384" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 319.04 388.95 L 313.41 383.51 L 317.29 384 L 320.01 381.18 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="210" y="220" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 250px; margin-left: 211px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">overlays</div></div></div></foreignObject><text x="270" y="254" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">overlays</text></switch></g><path d="M 826.36 270 L 806.27 314.2" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 804.1 318.98 L 803.81 311.16 L 806.27 314.2 L 810.18 314.06 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 826.36 270 L 806.27 314.2" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 804.1 318.98 L 803.81 311.16 L 806.27 314.2 L 810.18 314.06 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 826.36 270 L 806.27 314.2" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 804.1 318.98 L 803.81 311.16 L 806.27 314.2 L 810.18 314.06 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 867.27 270 L 908.44 315.29" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 911.98 319.17 L 904.68 316.35 L 908.44 315.29 L 909.86 311.64 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="780" y="210" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 240px; margin-left: 781px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">canvas</div></div></div></foreignObject><text x="840" y="244" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">canvas</text></switch></g><path d="M 790 380 L 790 413.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 790 418.88 L 786.5 411.88 L 790 413.63 L 793.5 411.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="730" y="320" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 350px; margin-left: 731px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">top</div></div></div></foreignObject><text x="790" y="354" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">top</text></switch></g><path d="M 940 380 L 940 413.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 940 418.88 L 936.5 411.88 L 940 413.63 L 943.5 411.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="880" y="320" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 350px; margin-left: 881px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">bottom</div></div></div></foreignObject><text x="940" y="354" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">bottom</text></switch></g><rect x="880" y="420" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 450px; margin-left: 881px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">items</div></div></div></foreignObject><text x="940" y="454" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">items</text></switch></g><rect x="730" y="420" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 450px; margin-left: 731px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">selection, add rect, transformer</div></div></div></foreignObject><text x="790" y="454" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">selection, add rect,...</text></switch></g><rect x="580" y="390" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 581px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">text editor</div></div></div></foreignObject><text x="640" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">text editor</text></switch></g><rect x="290" y="560" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 291px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">context panel</div></div></div></foreignObject><text x="350" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">context panel</text></switch></g><rect x="420" y="390" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 421px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">context menu</div></div></div></foreignObject><text x="480" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">context menu</text></switch></g><path d="M 158.82 450 L 84.85 554.8" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81.82 559.09 L 83 551.35 L 84.85 554.8 L 88.72 555.39 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><path d="M 234.71 450 L 429.71 556.94" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 434.31 559.46 L 426.49 559.17 L 429.71 556.94 L 429.86 553.03 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/><rect x="120" y="390" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 121px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">panels</div></div></div></foreignObject><text x="180" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">panels</text></switch></g><rect x="140" y="560" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 141px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">tools panel</div></div></div></foreignObject><text x="200" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">tools panel</text></switch></g><rect x="0" y="560" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 1px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">zoom panel</div></div></div></foreignObject><text x="60" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">zoom panel</text></switch></g><rect x="430" y="560" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 590px; margin-left: 431px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">title panel</div></div></div></foreignObject><text x="490" y="594" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">title panel</text></switch></g><rect x="270" y="390" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 420px; margin-left: 271px;"><div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">side panel</div></div></div></foreignObject><text x="330" y="424" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">side panel</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

package/src/features/modules.d.ts

@@ -0,0 +1,22 @@
+declare module "*.css" {
+	const content: unknown;
+	export default content;
+}
+
+declare module "*.module.css" {
+	interface IClassNames {
+		[className: string]: string;
+	}
+	const classNames: IClassNames;
+	export = classNames;
+}
+
+declare module "*.png" {
+	const content: unknown;
+	export default content;
+}
+
+declare module "*.svg" {
+	const content: unknown;
+	export default content;
+}

package/src/index.css

@@ -0,0 +1,65 @@
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
+@import "microboard-temp/style";
+
+:root {
+	--background-surface-default: rgb(255, 255, 255);
+	--background-button-secondary: rgb(255, 255, 255);
+	--background-button-secondary-hover: rgb(247, 247, 248);
+	--background-badge-purple-disabled: rgb(247, 241, 253);
+	--background-badge-gray: rgb(233, 234, 236);
+	--background-accent-purple: rgb(146, 79, 232);
+
+	--border-action-normal: rgb(222, 223, 227);
+	--border-action-focus: rgb(146, 79, 232);
+	--border-select-primary: rgb(146, 79, 232);
+
+	--text-base-primary: rgb(20, 21, 26);
+	--text-base-secondary: rgba(15, 19, 36, 0.6);
+	--text-base-quaternary: rgb(10, 15, 41, 0.25);
+	--text-accent-purple: rgb(152, 89, 233);
+
+	--icon-base-primary: rgb(20, 21, 26);
+	--icon-base-secondary: rgb(105, 107, 118);
+	--icon-accent-purple: rgb(146, 79, 232);
+
+	--absolute-position-panel-padding: 12px;
+}
+
+* {
+	box-sizing: border-box;
+	padding: 0;
+	margin: 0;
+	border: none;
+	background: none;
+	font-family: inherit;
+}
+
+*:focus {
+	outline: none;
+}
+
+html {
+	font-size: 62.5%;
+}
+
+body {
+	color: var(--text-base-primary);
+	font-size: 1.6rem;
+	font-optical-sizing: auto;
+	font-style: normal;
+	font-family: "Manrope", sans-serif;
+}
+
+html,
+body {
+	overscroll-behavior-x: none;
+	-webkit-user-select: none;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+	-webkit-box-shadow: 0 0 0 30px white inset !important;
+}

package/src/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="
+			width=device-width,
+			initial-scale=1,
+			shrink-to-fit=no
+			minimum-scale=1.0, 
+			maximum-scale=1.0, 
+			user-scalable=no
+		 " />
+	<title>Microboard</title>
+	<link rel="icon" type="image/png" sizes="16x16" href="./public/favicons/favicon-16x16.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="./public/favicons/favicon-32x32.png">
+	<link rel="icon" type="image/svg+xml" href="./public/favicon.svg">
+	<link rel="icon" href="./public/favicons/favicon.ico">
+	<link rel="apple-touch-icon" sizes="180x180" href="./public/favicons/apple-touch-icon.png">
+	<link rel="manifest" href="./public/favicons/site.webmanifest" />
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
+	<link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
+	<link rel="stylesheet" type="text/css" href="./index.css">
+</head>
+
+<body style="
+			margin: 0;
+			height: 100%;
+			width: 100%;
+			/* overflow: hidden; */
+			position: fixed;
+			padding: 0;
+			touch-action: none;
+			-ms-touch-action: none;
+			background-color: #fff;
+		">
+	<div id="root" style="
+				height: 100%;
+				width: 100%;
+				resize: none;
+				background: none;
+				outline: none;
+				border: none;
+				padding: 0px;
+				margin: 0px;
+				overflow: auto;
+	">
+		<div style="
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+			width: 100vw
+		">
+			<div style="
+							transform: scale(7);
+					">
+					<img src="./public/loader.svg" alt="">
+			</div>
+		</div>
+	</div>
+	<div id="modal"></div>
+	<div id="selector"></div>
+	<div id="drag" style="position: fixed; left: 0; top: 0; touch-action: none; height: 100%; width: 100%; z-index: 1000; pointer-events: none;">
+	</div>
+	<div id="tooltip"></div>
+	<script type="module" src="./production.entrypoint.ts"></script>
+</body>
+</html>

package/src/index.ts

@@ -0,0 +1,4 @@
+export { App, createApp } from "App/App";
+export { initInter } from "initI18N";
+// import "features/Cursors";
+// import "./index.css";

package/src/initI18N.ts

@@ -0,0 +1,42 @@
+import { createInstance } from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { conf, initI18N } from "microboard-temp";
+import { initReactI18next } from "react-i18next";
+import en from "shared/Lang/en.json";
+import ru from "shared/Lang/ru.json";
+
+let configuredI18n: any = null;
+
+export async function initInter(): Promise<void> {
+	const defaultNS = "default";
+	const resources = {
+		en: {
+			default: en,
+		},
+		ru: {
+			default: ru,
+		},
+	};
+	const i18Instance = createInstance({
+		debug: conf.debug,
+		detection: {
+			order: ["navigator"],
+		},
+		supportedLngs: ["en", "ru"],
+		defaultNS,
+		resources,
+		fallbackLng: conf.FALLBACK_LNG,
+		interpolation: {
+			escapeValue: false,
+		},
+	});
+
+	await i18Instance.use(LanguageDetector).use(initReactI18next).init();
+
+	configuredI18n = i18Instance;
+	initI18N(i18Instance);
+}
+
+export function getConfiguredI18n() {
+	return configuredI18n;
+}