@maayan-albert/moab-sdk 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var lucideReact = require('lucide-react');
@@ -10,574 +12,614 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var html2canvas__default = /*#__PURE__*/_interopDefault(html2canvas);
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, key + "" , value);
+var Button = ({
+  children,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  onClick,
+  className = "",
+  ...props
+}) => {
+  const baseStyles = "font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
+  const variantStyles = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+    secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
+    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500"
+  };
+  const sizeStyles = {
+    small: "px-3 py-1.5 text-sm",
+    medium: "px-4 py-2 text-base",
+    large: "px-6 py-3 text-lg"
+  };
+  const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${disabledStyles} ${className}`,
+      disabled,
+      onClick,
+      ...props,
+      children
+    }
+  );
 };
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
+var Button_default = Button;
+var Card = ({
+  children,
+  title,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `bg-white rounded-lg shadow-md p-6 border border-gray-200 ${className}`,
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: title }),
+        children
+      ]
+    }
+  );
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
+var Card_default = Card;
+var Input = ({
+  label,
+  type = "text",
+  placeholder,
+  value,
+  onChange,
+  required = false,
+  className = "",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
+      label,
+      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type,
+        placeholder,
+        value,
+        onChange,
+        required,
+        className: `w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${className}`,
+        ...props
+      }
+    )
+  ] });
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Button, Button_default;
-var init_Button = __esm({
-  "src/components/Button.tsx"() {
-    Button = ({
-      children,
-      variant = "primary",
-      size = "medium",
-      disabled = false,
-      onClick,
-      className = "",
-      ...props
-    }) => {
-      const baseStyles = "font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-      const variantStyles = {
-        primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
-        secondary: "bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500",
-        outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500"
-      };
-      const sizeStyles = {
-        small: "px-3 py-1.5 text-sm",
-        medium: "px-4 py-2 text-base",
-        large: "px-6 py-3 text-lg"
+var Input_default = Input;
+var DrawingTool = ({
+  width,
+  height,
+  className = "",
+  overlay = true,
+  ...props
+}) => {
+  const canvasRef = react.useRef(null);
+  const toolbarRef = react.useRef(null);
+  const [isDrawing, setIsDrawing] = react.useState(false);
+  const brushColor = "#EF4444";
+  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(() => {
+    if (overlay) {
+      const updateSize = () => {
+        setCanvasSize({
+          width: window.innerWidth,
+          height: window.innerHeight
+        });
       };
-      const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${disabledStyles} ${className}`,
-          disabled,
-          onClick,
-          ...props,
-          children
+      updateSize();
+      window.addEventListener("resize", updateSize);
+      return () => window.removeEventListener("resize", updateSize);
+    } else {
+      setCanvasSize({
+        width: width || 800,
+        height: height || 600
+      });
+    }
+  }, [overlay, width, height]);
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = canvasSize.width;
+    canvas.height = canvasSize.height;
+    ctx.strokeStyle = brushColor;
+    ctx.lineWidth = brushSize;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    setHasContent(false);
+  }, [canvasSize, brushColor, brushSize]);
+  const getCoordinates = react.useCallback(
+    (e) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return { x: 0, y: 0 };
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      if ("touches" in e) {
+        return {
+          x: (e.touches[0].clientX - rect.left) * scaleX,
+          y: (e.touches[0].clientY - rect.top) * scaleY
+        };
+      } else {
+        return {
+          x: (e.clientX - rect.left) * scaleX,
+          y: (e.clientY - rect.top) * scaleY
+        };
+      }
+    },
+    []
+  );
+  const startDrawing = react.useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) return;
+      const { x, y } = getCoordinates(e);
+      ctx.beginPath();
+      ctx.moveTo(x, y);
+      setIsDrawing(true);
+    },
+    [enabled, getCoordinates]
+  );
+  const draw = react.useCallback(
+    (e) => {
+      if (!isDrawing) return;
+      e.preventDefault();
+      const canvas = canvasRef.current;
+      const ctx = canvas?.getContext("2d");
+      if (!canvas || !ctx) return;
+      const { x, y } = getCoordinates(e);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+      setHasContent(true);
+    },
+    [isDrawing, getCoordinates]
+  );
+  const stopDrawing = react.useCallback(() => {
+    setIsDrawing(false);
+  }, []);
+  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 () => {
+    try {
+      const toolbar = toolbarRef.current;
+      if (toolbar) {
+        toolbar.style.opacity = "0";
+      }
+      const canvas = await html2canvas__default.default(document.body, {
+        useCORS: true,
+        logging: false,
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
+      });
+      if (toolbar) {
+        toolbar.style.opacity = "";
+      }
+      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);
+    }
+  }, []);
+  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 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 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(() => {
+    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");
+      }
     };
-    Button_default = Button;
-  }
-});
-var Card, Card_default;
-var init_Card = __esm({
-  "src/components/Card.tsx"() {
-    Card = ({
-      children,
-      title,
-      className = "",
-      ...props
-    }) => {
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `bg-white rounded-lg shadow-md p-6 border border-gray-200 ${className}`,
-          ...props,
-          children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold mb-4 text-gray-800", children: title }),
-            children
-          ]
-        }
-      );
+    const handleMouseUp = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
     };
-    Card_default = Card;
-  }
-});
-var Input, Input_default;
-var init_Input = __esm({
-  "src/components/Input.tsx"() {
-    Input = ({
-      label,
-      type = "text",
-      placeholder,
-      value,
-      onChange,
-      required = false,
-      className = "",
-      ...props
-    }) => {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-        label && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type,
-            placeholder,
-            value,
-            onChange,
-            required,
-            className: `w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${className}`,
-            ...props
-          }
-        )
-      ] });
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove, {
+        passive: false
+      });
+      document.addEventListener("mouseup", handleMouseUp, { passive: false });
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
     };
-    Input_default = Input;
-  }
-});
-var DrawingTool, DrawingTool_default;
-var init_DrawingTool = __esm({
-  "src/components/DrawingTool.tsx"() {
-    DrawingTool = ({
-      width,
-      height,
-      className = "",
-      overlay = true,
-      ...props
-    }) => {
-      const canvasRef = react.useRef(null);
-      const toolbarRef = react.useRef(null);
-      const [isDrawing, setIsDrawing] = react.useState(false);
-      const brushColor = "#EF4444";
-      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(() => {
-        if (overlay) {
-          const updateSize = () => {
-            setCanvasSize({
-              width: window.innerWidth,
-              height: window.innerHeight
-            });
-          };
-          updateSize();
-          window.addEventListener("resize", updateSize);
-          return () => window.removeEventListener("resize", updateSize);
-        } else {
-          setCanvasSize({
-            width: width || 800,
-            height: height || 600
-          });
-        }
-      }, [overlay, width, height]);
-      react.useEffect(() => {
-        const canvas = canvasRef.current;
-        if (!canvas || canvasSize.width === 0 || canvasSize.height === 0) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-        canvas.width = canvasSize.width;
-        canvas.height = canvasSize.height;
-        ctx.strokeStyle = brushColor;
-        ctx.lineWidth = brushSize;
-        ctx.lineCap = "round";
-        ctx.lineJoin = "round";
-        setHasContent(false);
-      }, [canvasSize, brushColor, brushSize]);
-      const getCoordinates = react.useCallback(
-        (e) => {
-          const canvas = canvasRef.current;
-          if (!canvas) return { x: 0, y: 0 };
-          const rect = canvas.getBoundingClientRect();
-          const scaleX = canvas.width / rect.width;
-          const scaleY = canvas.height / rect.height;
-          if ("touches" in e) {
-            return {
-              x: (e.touches[0].clientX - rect.left) * scaleX,
-              y: (e.touches[0].clientY - rect.top) * scaleY
-            };
-          } else {
-            return {
-              x: (e.clientX - rect.left) * scaleX,
-              y: (e.clientY - rect.top) * scaleY
-            };
-          }
-        },
-        []
-      );
-      const startDrawing = react.useCallback(
-        (e) => {
-          if (!enabled) return;
-          e.preventDefault();
-          const canvas = canvasRef.current;
-          const ctx = canvas?.getContext("2d");
-          if (!canvas || !ctx) return;
-          const { x, y } = getCoordinates(e);
-          ctx.beginPath();
-          ctx.moveTo(x, y);
-          setIsDrawing(true);
-        },
-        [enabled, getCoordinates]
-      );
-      const draw = react.useCallback(
-        (e) => {
-          if (!isDrawing) return;
-          e.preventDefault();
-          const canvas = canvasRef.current;
-          const ctx = canvas?.getContext("2d");
-          if (!canvas || !ctx) return;
-          const { x, y } = getCoordinates(e);
-          ctx.lineTo(x, y);
-          ctx.stroke();
-          setHasContent(true);
-        },
-        [isDrawing, getCoordinates]
-      );
-      const stopDrawing = react.useCallback(() => {
-        setIsDrawing(false);
-      }, []);
-      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 () => {
-        try {
-          const toolbar = toolbarRef.current;
-          if (toolbar) {
-            toolbar.style.opacity = "0";
-          }
-          const canvas = await html2canvas__default.default(document.body, {
-            useCORS: true,
-            logging: false,
-            windowWidth: window.innerWidth,
-            windowHeight: window.innerHeight
-          });
-          if (toolbar) {
-            toolbar.style.opacity = "";
-          }
-          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);
-        }
-      }, []);
-      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 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 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(() => {
-        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");
+  }, [isDragging, dragStart, getTargetCorner]);
+  if (overlay) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          onMouseDown: startDrawing,
+          onMouseMove: draw,
+          onMouseUp: stopDrawing,
+          onMouseLeave: stopDrawing,
+          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`
           }
-        };
-        const handleMouseUp = (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setIsDragging(false);
-        };
-        if (isDragging) {
-          document.addEventListener("mousemove", handleMouseMove, {
-            passive: false
-          });
-          document.addEventListener("mouseup", handleMouseUp, { passive: false });
         }
-        return () => {
-          document.removeEventListener("mousemove", handleMouseMove);
-          document.removeEventListener("mouseup", handleMouseUp);
-        };
-      }, [isDragging, dragStart, getTargetCorner]);
-      if (overlay) {
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "canvas",
-            {
-              ref: canvasRef,
-              onMouseDown: startDrawing,
-              onMouseMove: draw,
-              onMouseUp: stopDrawing,
-              onMouseLeave: stopDrawing,
-              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`
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "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",
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "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",
                   {
-                    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"
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      takeScreenshot();
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                    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",
                       {
-                        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" })
-                            ]
-                          }
-                        )
+                        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" })
+                        ]
                       }
                     )
                   }
-                ),
-                /* @__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(
+                )
+              }
+            ),
+            /* @__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.jsx(
+                          lucideReact.Trash2,
+                          {
+                            size: 18,
+                            strokeWidth: 2,
+                            className: "relative z-10 group-hover:text-red-600 transition-colors"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  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();
-                            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.jsx(
-                              lucideReact.Trash2,
-                              {
-                                size: 18,
-                                strokeWidth: 2,
-                                className: "relative z-10 group-hover:text-red-600 transition-colors"
-                              }
-                            )
-                          ]
+                          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 })
                         }
-                      ),
-                      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(
+                      )
+                    ] }),
+                    /* @__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 })
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex flex-col items-center gap-4 p-6 bg-white rounded-full shadow-lg border border-gray-200 ${className}`,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-row items-center w-full justify-center transition-all duration-300 ease-in-out",
+            style: {
+              gap: enabled ? "12px" : "0px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setEnabled(!enabled),
+                  className: `p-3 rounded-xl transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 ${enabled ? "bg-emerald-500 text-white hover:bg-emerald-600 active:bg-emerald-700" : "bg-slate-500 text-white hover:bg-slate-600 active:bg-slate-700"}`,
+                  "aria-label": enabled ? "Turn off drawing" : "Turn on drawing",
+                  children: enabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "20",
+                      height: "20",
+                      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(
+                "div",
+                {
+                  className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
+                  style: {
+                    width: enabled ? "52px" : "0px",
+                    minWidth: enabled ? "52px" : "0px",
+                    opacity: enabled ? 1 : 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",
+                      onClick: clearCanvas,
+                      disabled: !hasContent,
+                      className: "p-3 bg-red-500 text-white hover:text-red-200 rounded-xl hover:bg-red-600 active:bg-red-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-500 disabled:hover:shadow-md disabled:active:scale-100 whitespace-nowrap",
+                      "aria-label": "Clear canvas",
                       children: /* @__PURE__ */ jsxRuntime.jsxs(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
-                          width: "18",
-                          height: "18",
+                          width: "20",
+                          height: "20",
                           viewBox: "0 0 24 24",
                           fill: "none",
                           stroke: "currentColor",
                           strokeWidth: "2",
                           strokeLinecap: "round",
                           strokeLinejoin: "round",
-                          className: "lucide lucide-brush",
+                          className: "lucide lucide-brush-cleaning",
                           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("path", { d: "m16 22-1-4" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 22 1-4" })
                           ]
                         }
                       )
                     }
-                  ),
-                  /* @__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 })
-                    }
                   )
-                ] })
-              ]
-            }
-          )
-        ] });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `flex flex-col items-center gap-4 p-6 bg-white rounded-full shadow-lg border border-gray-200 ${className}`,
-          ...props,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "flex flex-row items-center w-full justify-center transition-all duration-300 ease-in-out",
-                style: {
-                  gap: enabled ? "12px" : "0px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
+                  style: {
+                    width: enabled ? "52px" : "0px",
+                    minWidth: enabled ? "52px" : "0px",
+                    opacity: enabled ? 1 : 0
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
-                      onClick: () => setEnabled(!enabled),
-                      className: `p-3 rounded-xl transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 ${enabled ? "bg-emerald-500 text-white hover:bg-emerald-600 active:bg-emerald-700" : "bg-slate-500 text-white hover:bg-slate-600 active:bg-slate-700"}`,
-                      "aria-label": enabled ? "Turn off drawing" : "Turn on drawing",
-                      children: enabled ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20, strokeWidth: 2.5 }) : /* @__PURE__ */ jsxRuntime.jsxs(
+                      onClick: takeScreenshot,
+                      className: "p-3 bg-neutral-500 text-white rounded-xl hover:bg-neutral-600 active:bg-neutral-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 whitespace-nowrap",
+                      "aria-label": "Take screenshot",
+                      children: /* @__PURE__ */ jsxRuntime.jsxs(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -589,176 +631,69 @@ var init_DrawingTool = __esm({
                           strokeWidth: "2",
                           strokeLinecap: "round",
                           strokeLinejoin: "round",
-                          className: "lucide lucide-brush",
+                          className: "lucide lucide-camera",
                           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("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(
-                    "div",
-                    {
-                      className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
-                      style: {
-                        width: enabled ? "52px" : "0px",
-                        minWidth: enabled ? "52px" : "0px",
-                        opacity: enabled ? 1 : 0
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          onClick: clearCanvas,
-                          disabled: !hasContent,
-                          className: "p-3 bg-red-500 text-white hover:text-red-200 rounded-xl hover:bg-red-600 active:bg-red-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-red-500 disabled:hover:shadow-md disabled:active:scale-100 whitespace-nowrap",
-                          "aria-label": "Clear canvas",
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            "svg",
-                            {
-                              xmlns: "http://www.w3.org/2000/svg",
-                              width: "20",
-                              height: "20",
-                              viewBox: "0 0 24 24",
-                              fill: "none",
-                              stroke: "currentColor",
-                              strokeWidth: "2",
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              className: "lucide lucide-brush-cleaning",
-                              children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 22-1-4" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z" }),
-                                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8 22 1-4" })
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: "transition-all duration-300 ease-in-out overflow-hidden flex-shrink-0",
-                      style: {
-                        width: enabled ? "52px" : "0px",
-                        minWidth: enabled ? "52px" : "0px",
-                        opacity: enabled ? 1 : 0
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          onClick: takeScreenshot,
-                          className: "p-3 bg-neutral-500 text-white rounded-xl hover:bg-neutral-600 active:bg-neutral-700 transition-all duration-200 focus:outline-none shadow-md hover:shadow-lg active:scale-95 whitespace-nowrap",
-                          "aria-label": "Take screenshot",
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(
-                            "svg",
-                            {
-                              xmlns: "http://www.w3.org/2000/svg",
-                              width: "20",
-                              height: "20",
-                              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" })
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    }
                   )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "canvas",
-              {
-                ref: canvasRef,
-                onMouseDown: startDrawing,
-                onMouseMove: draw,
-                onMouseUp: stopDrawing,
-                onMouseLeave: stopDrawing,
-                onTouchStart: startDrawing,
-                onTouchMove: draw,
-                onTouchEnd: stopDrawing,
-                className: `border border-gray-300 rounded touch-none transition-opacity ${enabled ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
-                style: {
-                  width: `${canvasSize.width}px`,
-                  height: `${canvasSize.height}px`,
-                  maxWidth: "100%"
                 }
-              }
-            )
-          ]
-        }
-      );
-    };
-    DrawingTool_default = DrawingTool;
-  }
-});
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            onMouseDown: startDrawing,
+            onMouseMove: draw,
+            onMouseUp: stopDrawing,
+            onMouseLeave: stopDrawing,
+            onTouchStart: startDrawing,
+            onTouchMove: draw,
+            onTouchEnd: stopDrawing,
+            className: `border border-gray-300 rounded touch-none transition-opacity ${enabled ? "cursor-crosshair pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+            style: {
+              width: `${canvasSize.width}px`,
+              height: `${canvasSize.height}px`,
+              maxWidth: "100%"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var DrawingTool_default = DrawingTool;
 
-// src/components.ts
-var components_exports = {};
-__export(components_exports, {
-  Button: () => Button,
-  ButtonDefault: () => Button_default,
-  Card: () => Card,
-  CardDefault: () => Card_default,
-  DrawingTool: () => DrawingTool,
-  DrawingToolDefault: () => DrawingTool_default,
-  Input: () => Input,
-  InputDefault: () => Input_default
-});
-var init_components = __esm({
-  "src/components.ts"() {
-    init_Button();
-    init_Card();
-    init_Input();
-    init_DrawingTool();
-    init_Button();
-    init_Card();
-    init_Input();
-    init_DrawingTool();
+// src/index.ts
+var MoabSDK = class {
+  constructor(options = {}) {
+    __publicField(this, "options");
+    this.options = options;
   }
-});
-
-// src/index.js
-var require_src = __commonJS({
-  "src/index.js"(exports$1, module) {
-    var MoabSDK = class {
-      constructor(options = {}) {
-        this.options = options;
-      }
-      /**
-       * Example method - replace with your SDK functionality
-       */
-      hello() {
-        return "Hello from Moab SDK!";
-      }
-    };
-    module.exports = MoabSDK;
-    module.exports.default = MoabSDK;
-    if (typeof module !== "undefined" && module.exports) {
-      try {
-        module.exports.components = (init_components(), __toCommonJS(components_exports));
-      } catch (e) {
-      }
-    }
+  /**
+   * Example method - replace with your SDK functionality
+   */
+  hello() {
+    return "Hello from Moab SDK!";
   }
-});
-var index = require_src();
+};
+var src_default = MoabSDK;
 
-module.exports = index;
+exports.Button = Button;
+exports.ButtonDefault = Button_default;
+exports.Card = Card;
+exports.CardDefault = Card_default;
+exports.DrawingTool = DrawingTool;
+exports.DrawingToolDefault = DrawingTool_default;
+exports.Input = Input;
+exports.InputDefault = Input_default;
+exports.MoabSDK = MoabSDK;
+exports.default = src_default;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map