microboard-ui-temp 0.0.3

package/src/features/CryptoWrapper/CryptoWrapper.tsx

@@ -0,0 +1,79 @@
+import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { PropsWithChildren, ErrorInfo } from "react";
+import { ViewSettings } from "shared/ViewSettings";
+import { Config, WagmiProvider } from "wagmi";
+
+class CryptoErrorBoundary extends React.Component<
+	PropsWithChildren<{
+		fallback?: React.ReactNode;
+		onError?: (error: Error, errorInfo: ErrorInfo) => void;
+	}>,
+	{ hasError: boolean }
+> {
+	constructor(props: PropsWithChildren<{}>) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_error: Error): { hasError: boolean } {
+		// Update state so the next render will show the fallback UI.
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+		// You can log the error to an error reporting service
+		console.error("Crypto Provider Error:", error, errorInfo);
+
+		// Optional custom error handler
+		this.props.onError?.(error, errorInfo);
+	}
+
+	render(): React.ReactNode {
+		if (this.state.hasError) {
+			// You can render any custom fallback UI
+			return (
+				this.props.fallback || (
+					<div>Something went wrong with crypto providers</div>
+				)
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
+export const createWagmiConfig = (): Config => {
+	try {
+		return getDefaultConfig(ViewSettings.WagmiConfig);
+	} catch (error) {
+		console.error("Failed to create Wagmi config:", error);
+		throw error;
+	}
+};
+
+const queryClient = new QueryClient();
+
+export function CryptoWrapper({
+	children,
+}: PropsWithChildren<{}>): JSX.Element {
+	return (
+		<CryptoErrorBoundary
+			fallback={<div>Crypto Provider Initialization Failed</div>}
+			onError={(error, errorInfo) => {
+				// Additional error handling logic if needed
+				console.error(
+					"Detailed Crypto Wrapper Error:",
+					error,
+					errorInfo,
+				);
+			}}
+		>
+			<WagmiProvider config={createWagmiConfig()}>
+				<QueryClientProvider client={queryClient}>
+					<RainbowKitProvider>{children}</RainbowKitProvider>
+				</QueryClientProvider>
+			</WagmiProvider>
+		</CryptoErrorBoundary>
+	);
+}

package/src/features/CryptoWrapper/index.ts

@@ -0,0 +1 @@
+export * from "./CryptoWrapper";

package/src/features/Cursors/comment.svg

@@ -0,0 +1,22 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_dd_4488_42225)">
+        <path d="M6.80084 18C6.57679 18 6.35923 18.0752 6.18305 18.2137L3.61778 20.229C2.96165 20.7445 2 20.2771 2 19.4427V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H21C21.2652 2 21.5196 2.10536 21.7071 2.29289C21.8946 2.48043 22 2.73478 22 3V17C22 17.2652 21.8946 17.5196 21.7071 17.7071C21.5196 17.8946 21.2652 18 21 18H6.80084ZM5.49106 16.2136C5.66723 16.0752 5.88478 16 6.10882 16H20V4H4V17.385L5.49106 16.2136Z" fill="#14151A"/>
+        <path d="M5.49106 16.2136C5.66723 16.0752 5.88478 16 6.10882 16H20V4H4V17.385L5.49106 16.2136Z" fill="white"/>
+    </g>
+    <defs>
+        <filter id="filter0_dd_4488_42225" x="-1" y="0" width="26" height="24.4446" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1"/>
+            <feGaussianBlur stdDeviation="1"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.06 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4488_42225"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="1"/>
+            <feGaussianBlur stdDeviation="1.5"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.1 0"/>
+            <feBlend mode="normal" in2="effect1_dropShadow_4488_42225" result="effect2_dropShadow_4488_42225"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_4488_42225" result="shape"/>
+        </filter>
+    </defs>
+</svg>

package/src/features/Cursors/customCursors.ts

@@ -0,0 +1,31 @@
+import pencil from "./pencil.svg";
+import stickerPurple from "./sticker/sticker-purple.svg";
+import stickerPink from "./sticker/sticker-pink.svg";
+import stickerSkyBlue from "./sticker/sticker-sky-blue.svg";
+import stickerBlue from "./sticker/sticker-blue.svg";
+import stickerGreen from "./sticker/sticker-green.svg";
+import stickerLightGreen from "./sticker/sticker-light-green.svg";
+import stickerOrange from "./sticker/sticker-orange.svg";
+import stickerYellow from "./sticker/sticker-yellow.svg";
+import stickerLightGray from "./sticker/sticker-light-gray.svg";
+import stickerGray from "./sticker/sticker-gray.svg";
+import eraser from "./eraser.svg";
+import comment from "./comment.svg";
+import { conf } from "microboard-temp";
+
+const { cursorsMap } = conf;
+cursorsMap["eraser"] = `url(${eraser}) -10 10, auto`;
+cursorsMap["pen"] = `url(${pencil}) 1 24, auto`;
+cursorsMap["comment"] = `url(${comment}) 1 24, auto`;
+cursorsMap["sticker-purple"] = `url(${stickerPurple}) 12 12, auto`;
+cursorsMap["sticker-pink"] = `url(${stickerPink}) 12 12, auto`;
+cursorsMap["sticker-sky-blue"] = `url(${stickerSkyBlue}) 12 12, auto`;
+cursorsMap["sticker-blue"] = `url(${stickerBlue}) 12 12, auto`;
+cursorsMap["sticker-green"] = `url(${stickerGreen}) 12 12, auto`;
+cursorsMap["sticker-light-green"] = `url(${stickerLightGreen}) 12 12, auto`;
+cursorsMap["sticker-orange"] = `url(${stickerOrange}) 12 12, auto`;
+cursorsMap["sticker-yellow"] = `url(${stickerYellow}) 12 12, auto`;
+cursorsMap["sticker-light-gray"] = `url(${stickerLightGray}) 12 12, auto`;
+cursorsMap["sticker-gray"] = `url(${stickerGray}) 12 12, auto`;
+
+export default {};

package/src/features/Cursors/eraser.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.6667 14.8333H15.6667C16.1269 14.8333 16.5 15.2064 16.5 15.6667C16.5 16.1269 16.1269 16.5 15.6667 16.5H9.00001L5.66835 16.5017L0.262513 11.0958C0.106287 10.9396 0.0185242 10.7276 0.0185242 10.5067C0.0185242 10.2857 0.106287 10.0738 0.262513 9.9175L9.10001 1.07833C9.17741 1.00085 9.26931 0.939383 9.37048 0.897446C9.47164 0.855509 9.58008 0.833923 9.6896 0.833923C9.79911 0.833923 9.90755 0.855509 10.0087 0.897446C10.1099 0.939383 10.2018 1.00085 10.2792 1.07833L16.7608 7.56C16.9171 7.71627 17.0048 7.92819 17.0048 8.14916C17.0048 8.37013 16.9171 8.58206 16.7608 8.73833L10.6667 14.8333ZM12.0475 11.0958L14.9933 8.14916L9.69001 2.84583L6.74418 5.7925L12.0475 11.0958Z" fill="#14151A"/>
+</svg>

package/src/features/Cursors/index.ts

@@ -0,0 +1 @@
+export { default as customCursors } from "./customCursors";

package/src/features/Cursors/pencil.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M17.4956 10.7475L13.4 6.65092V5.64988L12.5464 6.50344L2.64645 16.4034L2.5 16.5499V16.757V21V21.5H3H7.242H7.44909L7.59554 21.3536L17.4955 11.4546L17.8491 11.1011L17.4956 10.7475ZM13.9604 5.09052L13.607 5.44408L13.9604 5.79754L18.2024 10.0395L18.5559 10.393L18.9095 10.0396L21.0315 7.91863L21.0316 7.91849C21.3128 7.6372 21.4708 7.25574 21.4708 6.85799C21.4708 6.46024 21.3128 6.07878 21.0316 5.79749L21.0316 5.79744L18.2026 2.96844L18.2025 2.96839C17.9212 2.68718 17.5397 2.52921 17.142 2.52921C16.7443 2.52921 16.3628 2.68718 16.0815 2.96839L16.0814 2.96852L13.9604 5.09052Z" fill="#14151A" stroke="white"/>
+</svg>

package/src/features/Cursors/sticker/sticker-black.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(20, 21, 26)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-blue.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(205, 250, 255)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-gray.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(156, 156, 156)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-green.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(203, 232, 150)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-light-blue.svg

@@ -0,0 +1,28 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(155, 234, 243)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+

package/src/features/Cursors/sticker/sticker-light-gray.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(231, 232, 238)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-light-green.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(180, 241, 198)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-orange.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(255, 180, 126)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-pink.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(255, 209, 211)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-purple.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(233, 208, 255)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-sky-blue.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(206, 228, 255)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/Cursors/sticker/sticker-yellow.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_113_6759)">
+<g filter="url(#filter0_d_113_6759)">
+<mask id="path-1-outside-1_113_6759" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20" fill="black">
+<rect fill="white" x="2" y="2" width="20" height="20"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z"/>
+</mask>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" fill="rgb(255, 235, 163)"/>
+<path d="M21 16L15.997 21H3.998C3.73402 21.0005 3.48062 20.8962 3.29349 20.71C3.10636 20.5239 3.00079 20.271 3 20.007V3.993C3 3.445 3.445 3 3.993 3H20.007C20.555 3 21 3.447 21 3.999V16Z" stroke="white" stroke-width="2" mask="url(#path-1-outside-1_113_6759)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_113_6759" x="0" y="1" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0784314 0 0 0 0 0.0823529 0 0 0 0 0.101961 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_113_6759"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_113_6759" result="shape"/>
+</filter>
+<clipPath id="clip0_113_6759">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/features/ErrorBoundary/ErrorBoundary.module.css

@@ -0,0 +1,64 @@
+.wrapper {
+	width: 100%;
+	height: 100dvh;
+	background-color: rgba(200, 200, 200, 0.2);
+	overflow: hidden;
+}
+
+.errorContainer {
+	display: grid;
+	place-items: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	inset: 0;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+}
+
+.errorButtons {
+	display: flex;
+	gap: 12px;
+	margin-top: 8px;
+	width: 100%;
+}
+
+.errorMessage {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	gap: 16px;
+	padding: 24px;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	max-width: 400px;
+	width: 90%;
+}
+
+.errorMessage h2 {
+	color: #e6483d;
+	margin: 0;
+	font-size: 24px;
+}
+
+.errorMessage p {
+	color: #666;
+	margin: 0;
+	font-size: 16px;
+	word-break: break-word;
+}
+
+.recoveryInfo {
+	color: #666;
+	font-size: 14px;
+	font-style: italic;
+	margin: 0;
+	padding: 8px 0;
+	border-top: 1px solid #eee;
+	border-bottom: 1px solid #eee;
+	width: 100%;
+}