@maayan-albert/moab-sdk 1.0.0

package/dist/index.js

@@ -0,0 +1,764 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var html2canvas = require('html2canvas');
+
+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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __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"
+      };
+      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
+        }
+      );
+    };
+    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
+          ]
+        }
+      );
+    };
+    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
+          }
+        )
+      ] });
+    };
+    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");
+          }
+        };
+        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",
+                  {
+                    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",
+                      {
+                        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" })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                /* @__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();
+                                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 })
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ] });
+      }
+      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: 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;
+  }
+});
+
+// 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.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) {
+      }
+    }
+  }
+});
+var index = require_src();
+
+module.exports = index;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map