@maayan-albert/moab-sdk 1.0.5 → 1.0.6

package/dist/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var lucideReact = require('lucide-react');
-var html2canvas = require('html2canvas');
+var htmlToImage = require('html-to-image');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -96,25 +96,77 @@ var Input = ({
   ] });
 };
 var Input_default = Input;
-var DrawingTool = ({
-  width,
-  height,
-  className = "",
-  ...props
-}) => {
-  const canvasRef = react.useRef(null);
-  const toolbarRef = react.useRef(null);
-  const [isDrawing, setIsDrawing] = react.useState(false);
-  const brushColor = "#EF4444";
+
+// src/components/DrawingTool.module.scss
+var css = '@keyframes moab__toolbarEnter___kVde9 {\n  from {\n    opacity: 0;\n    transform: scale(0.5) rotate(90deg);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) rotate(0deg);\n  }\n}\n@keyframes moab__scaleIn___bOiIm {\n  from {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes moab__scaleOut___wrtHU {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.85);\n  }\n}\n.moab__toolbar___GXd-P {\n  position: fixed;\n  bottom: 1.25rem;\n  right: 1.25rem;\n  z-index: 100000;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n  pointer-events: none;\n  transition: left 0s, top 0s, right 0s, bottom 0s;\n}\n\n.moab__toolbarContainer___sQuuF {\n  user-select: none;\n  margin-left: auto;\n  align-self: flex-end;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #1a1a1a;\n  color: #fff;\n  border: none;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);\n  pointer-events: auto;\n  cursor: grab;\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.moab__toolbarContainer___sQuuF.moab__dragging___c6CuY {\n  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: grabbing;\n}\n.moab__toolbarContainer___sQuuF.moab__entrance___kTkKT {\n  animation: moab__toolbarEnter___kVde9 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;\n}\n.moab__toolbarContainer___sQuuF.moab__collapsed___xYm1N {\n  width: 44px;\n  height: 44px;\n  border-radius: 22px;\n  padding: 0;\n  cursor: pointer;\n}\n.moab__toolbarContainer___sQuuF.moab__collapsed___xYm1N svg {\n  margin-top: -1px;\n}\n.moab__toolbarContainer___sQuuF.moab__collapsed___xYm1N:hover {\n  background: #2a2a2a;\n}\n.moab__toolbarContainer___sQuuF.moab__collapsed___xYm1N:active {\n  transform: scale(0.95);\n}\n.moab__toolbarContainer___sQuuF.moab__expanded___Gshmq {\n  width: calc-size(auto, size);\n  height: 44px;\n  border-radius: 1.5rem;\n  padding: 0.375rem;\n}\n@supports not (width: calc-size(auto, size)) {\n  .moab__toolbarContainer___sQuuF.moab__expanded___Gshmq {\n    width: auto;\n  }\n}\n\n.moab__toggleContent___KfJ0y {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.moab__toggleContent___KfJ0y.moab__visible___1M9br {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n.moab__toggleContent___KfJ0y.moab__hidden___Zdoqy {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.moab__controlsContent___KGEHS {\n  display: flex;\n  align-items: center;\n  gap: 0.375rem;\n  transition: filter 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);\n}\n.moab__controlsContent___KGEHS.moab__visible___1M9br {\n  opacity: 1;\n  filter: blur(0px);\n  transform: scale(1);\n  visibility: visible;\n  pointer-events: auto;\n}\n.moab__controlsContent___KGEHS.moab__hidden___Zdoqy {\n  opacity: 0;\n  filter: blur(10px);\n  transform: scale(0.4);\n  pointer-events: none;\n}\n\n.moab__buttonWrapper___ZDZWf {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.moab__controlButton___AYQcE {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: transparent;\n  color: rgba(255, 255, 255, 0.5);\n  border-radius: 999px;\n  cursor: pointer;\n  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);\n}\n.moab__controlButton___AYQcE:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.1);\n  color: rgba(255, 255, 255, 0.9);\n}\n.moab__controlButton___AYQcE[data-active=true]:hover:not(:disabled) {\n  background: rgba(60, 130, 247, 0.35);\n  color: #3c82f7;\n}\n.moab__controlButton___AYQcE:active:not(:disabled) {\n  transform: scale(0.95);\n}\n.moab__controlButton___AYQcE:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.moab__controlButton___AYQcE[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.25);\n}\n.moab__controlButton___AYQcE[data-danger]:hover:not(:disabled) {\n  background: rgba(255, 59, 48, 0.15);\n  color: #ff3b30;\n}\n\n.moab__buttonTooltip___ZUL58 {\n  position: absolute;\n  bottom: calc(100% + 0.5rem);\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 0.375rem 0.625rem;\n  background: #383838;\n  color: rgba(255, 255, 255, 0.7);\n  font-size: 0.6875rem;\n  font-weight: 400;\n  line-height: 1.2;\n  border-radius: 0.5rem;\n  white-space: nowrap;\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;\n  z-index: 100001;\n  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.28);\n}\n.moab__buttonTooltip___ZUL58::after {\n  content: "";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 0;\n  height: 0;\n  border-left: 4px solid transparent;\n  border-right: 4px solid transparent;\n  border-top: 4px solid #383838;\n}\n\n.moab__buttonWrapper___ZDZWf:hover .moab__buttonTooltip___ZUL58 {\n  opacity: 1;\n  visibility: visible;\n}\n\n.moab__divider___o4mDB {\n  width: 1px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.15);\n  margin: 0 0.125rem;\n}\n\n.moab__light___s-xQ4.moab__toolbarContainer___sQuuF {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.moab__light___s-xQ4.moab__toolbarContainer___sQuuF.moab__collapsed___xYm1N:hover {\n  background: #f5f5f5;\n}\n.moab__light___s-xQ4.moab__controlButton___AYQcE {\n  color: rgba(0, 0, 0, 0.5);\n}\n.moab__light___s-xQ4.moab__controlButton___AYQcE:hover:not(:disabled) {\n  background: rgba(0, 0, 0, 0.06);\n  color: rgba(0, 0, 0, 0.85);\n}\n.moab__light___s-xQ4.moab__controlButton___AYQcE[data-active=true]:hover:not(:disabled) {\n  background: rgba(60, 130, 247, 0.25);\n  color: #3c82f7;\n}\n.moab__light___s-xQ4.moab__controlButton___AYQcE[data-active=true] {\n  color: #3c82f7;\n  background: rgba(60, 130, 247, 0.15);\n}\n.moab__light___s-xQ4.moab__controlButton___AYQcE[data-danger]:hover:not(:disabled) {\n  background: rgba(255, 59, 48, 0.15);\n  color: #ff3b30;\n}\n.moab__light___s-xQ4.moab__buttonTooltip___ZUL58 {\n  background: #fff;\n  color: rgba(0, 0, 0, 0.85);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);\n}\n.moab__light___s-xQ4.moab__buttonTooltip___ZUL58::after {\n  background: #fff;\n}\n.moab__light___s-xQ4.moab__divider___o4mDB {\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.moab-drawing-canvas {\n  position: fixed !important;\n  top: 0 !important;\n  left: 0 !important;\n  z-index: 50 !important;\n  touch-action: none !important;\n}';
+var classNames = { "toolbar": "moab__toolbar___GXd-P", "toolbarContainer": "moab__toolbarContainer___sQuuF", "dragging": "moab__dragging___c6CuY", "entrance": "moab__entrance___kTkKT", "collapsed": "moab__collapsed___xYm1N", "expanded": "moab__expanded___Gshmq", "toggleContent": "moab__toggleContent___KfJ0y", "visible": "moab__visible___1M9br", "hidden": "moab__hidden___Zdoqy", "controlsContent": "moab__controlsContent___KGEHS", "buttonWrapper": "moab__buttonWrapper___ZDZWf", "controlButton": "moab__controlButton___AYQcE", "buttonTooltip": "moab__buttonTooltip___ZUL58", "divider": "moab__divider___o4mDB", "light": "moab__light___s-xQ4"};
+if (typeof document !== "undefined") {
+  let style = document.getElementById("moab-components-DrawingTool");
+  if (!style) {
+    style = document.createElement("style");
+    style.id = "moab-components-DrawingTool";
+    document.head.appendChild(style);
+  }
+  style.textContent = css;
+}
+var DrawingTool_module_default = classNames;
+var TOOLBAR_POSITION_STORAGE_KEY = "moab-drawing-toolbar-position";
+var DrawingTool = () => {
+  const canvasRef = React.useRef(null);
+  const toolbarRef = React.useRef(null);
+  const toolbarWrapperRef = React.useRef(null);
+  const [isDrawing, setIsDrawing] = React.useState(false);
+  const brushColor = "#3B82F6";
   const brushSize = 5;
-  const [canvasSize, setCanvasSize] = react.useState({ width: 0, height: 0 });
-  const [enabled, setEnabled] = react.useState(false);
-  const [hasContent, setHasContent] = react.useState(false);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const [corner, setCorner] = react.useState("bottom-right");
-  const [dragStart, setDragStart] = react.useState({ x: 0, y: 0 });
-  const [showClearTooltip, setShowClearTooltip] = react.useState(false);
-  react.useEffect(() => {
+  const [canvasSize, setCanvasSize] = React.useState({ width: 0, height: 0 });
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isPainting, setIsPainting] = React.useState(false);
+  const [hasContent, setHasContent] = React.useState(false);
+  const [isDraggingToolbar, setIsDraggingToolbar] = React.useState(false);
+  const [toolbarPosition, setToolbarPosition] = React.useState(null);
+  const [isToolbarReady, setIsToolbarReady] = React.useState(false);
+  const [dragStartPos, setDragStartPos] = React.useState(null);
+  const [dragRotation, setDragRotation] = React.useState(0);
+  const justFinishedToolbarDragRef = React.useRef(false);
+  React.useLayoutEffect(() => {
+    const toolbarWrapper = toolbarWrapperRef.current;
+    if (!toolbarWrapper) return;
+    const restorePosition = () => {
+      try {
+        const stored = localStorage.getItem(TOOLBAR_POSITION_STORAGE_KEY);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          if (typeof parsed?.x === "number" && typeof parsed?.y === "number") {
+            setToolbarPosition({ x: parsed.x, y: parsed.y });
+            setIsToolbarReady(true);
+            return;
+          }
+        }
+      } catch {
+      }
+      const rect = toolbarWrapper.getBoundingClientRect();
+      const padding = 20;
+      const startX = padding;
+      const startY = Math.max(
+        padding,
+        window.innerHeight - rect.height - padding
+      );
+      setToolbarPosition({ x: startX, y: startY });
+      setIsToolbarReady(true);
+    };
+    restorePosition();
+  }, []);
+  React.useEffect(() => {
+    if (!toolbarPosition) return;
+    try {
+      localStorage.setItem(
+        TOOLBAR_POSITION_STORAGE_KEY,
+        JSON.stringify(toolbarPosition)
+      );
+    } catch {
+    }
+  }, [toolbarPosition]);
+  React.useEffect(() => {
     const updateSize = () => {
       setCanvasSize({
         width: window.innerWidth,
@@ -125,7 +177,7 @@ var DrawingTool = ({
     window.addEventListener("resize", updateSize);
     return () => window.removeEventListener("resize", updateSize);
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
     const ctx = canvas.getContext("2d");
@@ -138,7 +190,7 @@ var DrawingTool = ({
     ctx.lineJoin = "round";
     setHasContent(false);
   }, [canvasSize, brushColor, brushSize]);
-  const getCoordinates = react.useCallback(
+  const getCoordinates = React.useCallback(
     (e) => {
       const canvas = canvasRef.current;
       if (!canvas) return { x: 0, y: 0 };
@@ -159,9 +211,9 @@ var DrawingTool = ({
     },
     []
   );
-  const startDrawing = react.useCallback(
+  const startDrawing = React.useCallback(
     (e) => {
-      if (!enabled) return;
+      if (!isPainting) return;
       e.preventDefault();
       const canvas = canvasRef.current;
       const ctx = canvas?.getContext("2d");
@@ -171,9 +223,9 @@ var DrawingTool = ({
       ctx.moveTo(x, y);
       setIsDrawing(true);
     },
-    [enabled, getCoordinates]
+    [isPainting, getCoordinates]
   );
-  const draw = react.useCallback(
+  const draw = React.useCallback(
     (e) => {
       if (!isDrawing) return;
       e.preventDefault();
@@ -187,140 +239,175 @@ var DrawingTool = ({
     },
     [isDrawing, getCoordinates]
   );
-  const stopDrawing = react.useCallback(() => {
+  const stopDrawing = React.useCallback(() => {
     setIsDrawing(false);
   }, []);
-  const clearCanvas = react.useCallback(() => {
+  const clearCanvas = React.useCallback(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!canvas || !ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     setHasContent(false);
   }, []);
-  const takeScreenshot = react.useCallback(async () => {
+  const takeScreenshot = React.useCallback(async () => {
+    const toolbar = toolbarRef.current;
     try {
-      const toolbar = toolbarRef.current;
       if (toolbar) {
-        toolbar.style.opacity = "0";
+        toolbar.style.visibility = "hidden";
       }
-      const canvas = await html2canvas__default.default(document.body, {
-        useCORS: true,
-        logging: false,
-        windowWidth: window.innerWidth,
-        windowHeight: window.innerHeight
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      const dataUrl = await htmlToImage.toPng(document.body, {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        style: {
+          transform: `translate(-${window.scrollX}px, -${window.scrollY}px)`
+        },
+        filter: (node) => {
+          if (node instanceof HTMLElement) {
+            if (node.closest?.("[data-drawing-toolbar]")) {
+              return false;
+            }
+          }
+          return true;
+        }
       });
       if (toolbar) {
-        toolbar.style.opacity = "";
+        toolbar.style.visibility = "";
+      }
+      const response = await fetch(dataUrl);
+      const blob = await response.blob();
+      try {
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            "image/png": blob
+          })
+        ]);
+      } catch (err) {
+        console.error("Failed to copy to clipboard:", err);
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "screenshot.png";
+        a.click();
+        URL.revokeObjectURL(url);
       }
-      canvas.toBlob(async (blob) => {
-        if (!blob) return;
-        try {
-          await navigator.clipboard.write([
-            new ClipboardItem({
-              "image/png": blob
-            })
-          ]);
-        } catch (err) {
-          console.error("Failed to copy to clipboard:", err);
-          const url = URL.createObjectURL(blob);
-          const a = document.createElement("a");
-          a.href = url;
-          a.download = "screenshot.png";
-          a.click();
-          URL.revokeObjectURL(url);
-        }
-      }, "image/png");
     } catch (error) {
       console.error("Failed to take screenshot:", error);
+      if (toolbar) {
+        toolbar.style.visibility = "";
+      }
     }
   }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
     if (!ctx) return;
     ctx.strokeStyle = brushColor;
     ctx.lineWidth = brushSize;
   }, [brushColor, brushSize]);
-  const getTargetCorner = react.useCallback(
-    (startX, startY, currentX, currentY) => {
-      const deltaX = currentX - startX;
-      const deltaY = currentY - startY;
-      const threshold = 50;
-      if (Math.abs(deltaX) < threshold && Math.abs(deltaY) < threshold) {
-        return null;
+  const handleToolbarMouseDown = React.useCallback(
+    (e) => {
+      if (e.target.closest("button")) {
+        return;
       }
-      const viewportWidth = window.innerWidth;
-      const viewportHeight = window.innerHeight;
-      const horizontal = currentX < viewportWidth / 2 ? "left" : "right";
-      const vertical = currentY < viewportHeight / 2 ? "top" : "bottom";
-      if (vertical === "top" && horizontal === "left") return "top-left";
-      if (vertical === "top" && horizontal === "right") return "top-right";
-      if (vertical === "bottom" && horizontal === "left") return "bottom-left";
-      if (vertical === "bottom" && horizontal === "right")
-        return "bottom-right";
-      return null;
+      const toolbarWrapper = toolbarWrapperRef.current;
+      if (!toolbarWrapper) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const rect = toolbarWrapper.getBoundingClientRect();
+      const randomRotation = (Math.random() - 0.5) * 10;
+      setDragRotation(randomRotation);
+      setDragStartPos({
+        x: e.clientX,
+        y: e.clientY,
+        toolbarX: toolbarPosition?.x ?? rect.left,
+        toolbarY: toolbarPosition?.y ?? rect.top,
+        toolbarWidth: rect.width,
+        toolbarHeight: rect.height
+      });
     },
-    []
+    [toolbarPosition]
   );
-  const handleMouseDown = react.useCallback((e) => {
-    if (e.target.closest("button")) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-    setDragStart({
-      x: e.clientX,
-      y: e.clientY
-    });
-  }, []);
-  react.useEffect(() => {
+  React.useEffect(() => {
+    if (!dragStartPos) return;
+    const DRAG_THRESHOLD = 5;
     const handleMouseMove = (e) => {
-      if (!isDragging) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const targetCorner = getTargetCorner(
-        dragStart.x,
-        dragStart.y,
-        e.clientX,
-        e.clientY
-      );
-      if (targetCorner) {
-        setCorner(targetCorner);
-      } else {
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-        const horizontal = e.clientX < viewportWidth / 2 ? "left" : "right";
-        const vertical = e.clientY < viewportHeight / 2 ? "top" : "bottom";
-        if (vertical === "top" && horizontal === "left") setCorner("top-left");
-        else if (vertical === "top" && horizontal === "right")
-          setCorner("top-right");
-        else if (vertical === "bottom" && horizontal === "left")
-          setCorner("bottom-left");
-        else setCorner("bottom-right");
+      const deltaX = e.clientX - dragStartPos.x;
+      const deltaY = e.clientY - dragStartPos.y;
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      if (!isDraggingToolbar && distance > DRAG_THRESHOLD) {
+        setIsDraggingToolbar(true);
+      }
+      if (isDraggingToolbar || distance > DRAG_THRESHOLD) {
+        const padding = 20;
+        const maxX = window.innerWidth - dragStartPos.toolbarWidth - padding;
+        const maxY = window.innerHeight - dragStartPos.toolbarHeight - padding;
+        const newX = Math.max(
+          padding,
+          Math.min(maxX, dragStartPos.toolbarX + deltaX)
+        );
+        const newY = Math.max(
+          padding,
+          Math.min(maxY, dragStartPos.toolbarY + deltaY)
+        );
+        setToolbarPosition({ x: newX, y: newY });
       }
     };
-    const handleMouseUp = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragging(false);
+    const handleMouseUp = () => {
+      if (isDraggingToolbar) {
+        justFinishedToolbarDragRef.current = true;
+        setTimeout(() => {
+          justFinishedToolbarDragRef.current = false;
+        }, 50);
+      }
+      setIsDraggingToolbar(false);
+      setDragStartPos(null);
     };
-    if (isDragging) {
-      document.addEventListener("mousemove", handleMouseMove, {
-        passive: false
-      });
-      document.addEventListener("mouseup", handleMouseUp, { passive: false });
-    }
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
     return () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [isDragging, dragStart, getTargetCorner]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
+  }, [dragStartPos, isDraggingToolbar]);
+  React.useEffect(() => {
+    if (!toolbarPosition) return;
+    const constrainPosition = () => {
+      const toolbarWrapper = toolbarWrapperRef.current;
+      const rect = toolbarWrapper?.getBoundingClientRect();
+      const width = rect?.width ?? 44;
+      const height = rect?.height ?? 44;
+      const padding = 20;
+      const maxX = window.innerWidth - width - padding;
+      const maxY = window.innerHeight - height - padding;
+      const newX = Math.max(padding, Math.min(maxX, toolbarPosition.x));
+      const newY = Math.max(padding, Math.min(maxY, toolbarPosition.y));
+      if (newX !== toolbarPosition.x || newY !== toolbarPosition.y) {
+        setToolbarPosition({ x: newX, y: newY });
+      }
+    };
+    constrainPosition();
+    window.addEventListener("resize", constrainPosition);
+    return () => window.removeEventListener("resize", constrainPosition);
+  }, [toolbarPosition, isOpen]);
+  const [showEntranceAnimation, setShowEntranceAnimation] = React.useState(false);
+  const [isDarkMode] = React.useState(true);
+  React.useEffect(() => {
+    setShowEntranceAnimation(true);
+    const timer = setTimeout(() => setShowEntranceAnimation(false), 500);
+    return () => clearTimeout(timer);
+  }, []);
+  React.useEffect(() => {
+    if (!isPainting) {
+      setIsDrawing(false);
+    }
+  }, [isPainting]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "canvas",
       {
         ref: canvasRef,
+        className: "moab-drawing-canvas",
         onMouseDown: startDrawing,
         onMouseMove: draw,
         onMouseUp: stopDrawing,
@@ -328,186 +415,150 @@ var DrawingTool = ({
         onTouchStart: startDrawing,
         onTouchMove: draw,
         onTouchEnd: stopDrawing,
-        className: `fixed top-0 left-0 touch-none z-50 transition-opacity ${enabled && !isDragging ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
         style: {
           width: `${canvasSize.width}px`,
-          height: `${canvasSize.height}px`
+          height: `${canvasSize.height}px`,
+          cursor: isPainting && !isDraggingToolbar ? "crosshair" : "default",
+          pointerEvents: isPainting && !isDraggingToolbar ? "auto" : "none",
+          opacity: isPainting && !isDraggingToolbar ? 1 : 0,
+          transition: "opacity 300ms ease-in-out"
         }
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        ref: toolbarRef,
-        className: `fixed flex flex-row items-center px-2 py-1.5 bg-neutral-800 rounded-full shadow-lg z-[60] ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${className}`,
-        style: {
-          gap: enabled ? "8px" : "0px",
-          transition: "gap 300ms ease-in-out",
-          ...corner === "top-left" ? { top: "16px", left: "16px", bottom: "auto", right: "auto" } : corner === "top-right" ? { top: "16px", right: "16px", bottom: "auto", left: "auto" } : corner === "bottom-left" ? { bottom: "16px", left: "16px", top: "auto", right: "auto" } : { bottom: "16px", right: "16px", top: "auto", left: "auto" }
-        },
-        onMouseDown: handleMouseDown,
-        ...props,
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "overflow-hidden flex-shrink-0",
-              style: {
-                maxWidth: enabled ? "100px" : "0px",
-                opacity: enabled ? 1 : 0,
-                transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+        ref: toolbarWrapperRef,
+        className: DrawingTool_module_default.toolbar,
+        "data-drawing-toolbar": true,
+        style: toolbarPosition ? {
+          left: toolbarPosition.x,
+          top: toolbarPosition.y,
+          right: "auto",
+          bottom: "auto",
+          visibility: isToolbarReady ? "visible" : "hidden"
+        } : { visibility: "hidden" },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: toolbarRef,
+            className: `${DrawingTool_module_default.toolbarContainer} ${isOpen ? DrawingTool_module_default.expanded : DrawingTool_module_default.collapsed} ${showEntranceAnimation ? DrawingTool_module_default.entrance : ""} ${isDraggingToolbar ? DrawingTool_module_default.dragging : ""} ${!isDarkMode ? DrawingTool_module_default.light : ""}`,
+            onClick: !isOpen ? (e) => {
+              if (justFinishedToolbarDragRef.current) {
+                e.preventDefault();
+                return;
+              }
+              setIsOpen(true);
+            } : void 0,
+            onMouseDown: handleToolbarMouseDown,
+            role: !isOpen ? "button" : void 0,
+            tabIndex: !isOpen ? 0 : -1,
+            style: isDraggingToolbar ? {
+              cursor: "grabbing",
+              transform: `scale(1.05) rotate(${dragRotation}deg)`
+            } : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    takeScreenshot();
-                  },
-                  className: "p-2 text-white hover:bg-neutral-600/30 rounded-full transition-colors focus:outline-none whitespace-nowrap",
-                  "aria-label": "Take screenshot",
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "svg",
-                    {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "18",
-                      height: "18",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: "lucide lucide-camera",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
-                      ]
-                    }
-                  )
+                  className: `${DrawingTool_module_default.toggleContent} ${!isOpen ? DrawingTool_module_default.visible : DrawingTool_module_default.hidden}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { size: 20, strokeWidth: 2 })
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "overflow-hidden flex-shrink-0 relative",
-              style: {
-                maxWidth: enabled ? "100px" : "0px",
-                opacity: enabled ? 1 : 0,
-                transition: "max-width 300ms ease-in-out, opacity 300ms ease-in-out"
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      clearCanvas();
-                      setShowClearTooltip(false);
-                    },
-                    onMouseEnter: () => {
-                      if (hasContent) {
-                        setShowClearTooltip(true);
-                      }
-                    },
-                    onMouseLeave: () => setShowClearTooltip(false),
-                    disabled: !hasContent,
-                    className: "p-2 text-white rounded-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed relative group",
-                    "aria-label": "Clear canvas",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full bg-red-600/30 opacity-0 group-hover:opacity-100 transition-opacity disabled:group-hover:opacity-0" }),
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: `${DrawingTool_module_default.controlsContent} ${isOpen ? DrawingTool_module_default.visible : DrawingTool_module_default.hidden}`,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DrawingTool_module_default.buttonWrapper, children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        lucideReact.Trash2,
+                        "button",
                         {
-                          size: 18,
-                          strokeWidth: 2,
-                          className: "relative z-10 group-hover:text-red-600 transition-colors"
+                          className: `${DrawingTool_module_default.controlButton} ${!isDarkMode ? DrawingTool_module_default.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setIsPainting((prev) => !prev);
+                          },
+                          "data-active": isPainting,
+                          "aria-label": "Toggle draw mode",
+                          "aria-pressed": isPainting,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brush, { size: 18, strokeWidth: 2 })
                         }
-                      )
-                    ]
-                  }
-                ),
-                showClearTooltip && hasContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-neutral-800 rounded-full shadow-lg whitespace-nowrap z-[70]", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-sm", children: "Clear all" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          setShowClearTooltip(false);
-                        },
-                        onMouseDown: (e) => e.stopPropagation(),
-                        className: "text-white hover:text-neutral-300 transition-colors rounded-full",
-                        "aria-label": "Dismiss tooltip",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, strokeWidth: 2 })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2 h-2 bg-neutral-800 rotate-45" }) })
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setEnabled(!enabled);
-                },
-                className: "p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
-                style: {
-                  opacity: enabled ? 0 : 1,
-                  pointerEvents: enabled ? "none" : "auto",
-                  transition: "opacity 300ms ease-in-out"
-                },
-                "aria-label": "Turn on drawing",
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    xmlns: "http://www.w3.org/2000/svg",
-                    width: "18",
-                    height: "18",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    className: "lucide lucide-brush",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11 10 3 3" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 21A3.5 3.5 0 1 0 3 17.5a2.62 2.62 0 0 1-.708 1.792A1 1 0 0 0 3 21z" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.969 17.031 21.378 5.624a1 1 0 0 0-3.002-3.002L6.967 14.031" })
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setEnabled(false);
-                },
-                className: "absolute inset-0 p-1.5 text-white hover:bg-neutral-600/30 rounded-full transition-all focus:outline-none",
-                style: {
-                  opacity: enabled ? 1 : 0,
-                  pointerEvents: enabled ? "auto" : "none",
-                  transition: "opacity 300ms ease-in-out"
-                },
-                "aria-label": "Close",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, strokeWidth: 2.5 })
-              }
-            )
-          ] })
-        ]
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: DrawingTool_module_default.buttonTooltip, children: "Draw" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DrawingTool_module_default.buttonWrapper, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: `${DrawingTool_module_default.controlButton} ${!isDarkMode ? DrawingTool_module_default.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            takeScreenshot();
+                          },
+                          "aria-label": "Take screenshot",
+                          children: /* @__PURE__ */ jsxRuntime.jsxs(
+                            "svg",
+                            {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "18",
+                              height: "18",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: "2",
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z" }),
+                                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3" })
+                              ]
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: DrawingTool_module_default.buttonTooltip, children: "Take screenshot" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DrawingTool_module_default.buttonWrapper, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: `${DrawingTool_module_default.controlButton} ${!isDarkMode ? DrawingTool_module_default.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            clearCanvas();
+                          },
+                          disabled: !hasContent,
+                          "data-danger": true,
+                          "aria-label": "Clear",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 18, strokeWidth: 2 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: DrawingTool_module_default.buttonTooltip, children: "Clear" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${DrawingTool_module_default.divider} ${!isDarkMode ? DrawingTool_module_default.light : ""}` }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: DrawingTool_module_default.buttonWrapper, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          className: `${DrawingTool_module_default.controlButton} ${!isDarkMode ? DrawingTool_module_default.light : ""}`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            setIsOpen(false);
+                            setIsPainting(false);
+                          },
+                          "aria-label": "Close",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 18, strokeWidth: 2.5 })
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: DrawingTool_module_default.buttonTooltip, children: "Close" })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     )
   ] });