@fxl-business/support-widget 0.1.0 → 0.2.1

package/dist/index.d.mts

@@ -12,6 +12,7 @@ type WidgetLabels = {
     descriptionPlaceholder: string;
     attachmentsLabel: string;
     attachmentsDropzone: string;
+    attachmentsPasteHint: string;
     send: string;
     sending: string;
     cancel: string;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ type WidgetLabels = {
     descriptionPlaceholder: string;
     attachmentsLabel: string;
     attachmentsDropzone: string;
+    attachmentsPasteHint: string;
     send: string;
     sending: string;
     cancel: string;

package/dist/index.js

@@ -26,7 +26,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/support-widget.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/types.ts
 var defaultLabels = {
@@ -39,6 +39,7 @@ var defaultLabels = {
   descriptionPlaceholder: "Describe the issue or request in detail",
   attachmentsLabel: "Attachments (optional)",
   attachmentsDropzone: "Drag & drop or click to attach images/videos",
+  attachmentsPasteHint: "You can also paste images (Ctrl+V)",
   send: "Send",
   sending: "Sending...",
   cancel: "Cancel",
@@ -97,15 +98,46 @@ async function uploadFileToR2(presignedUrl, file) {
 
 // src/support-form.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var formStore = {
+  type: "bug",
+  title: "",
+  description: "",
+  files: []
+};
+function resetFormStore() {
+  formStore.type = "bug";
+  formStore.title = "";
+  formStore.description = "";
+  formStore.files = [];
+}
 function SupportForm({ config, labels, onSuccess, onCancel }) {
-  const [type, setType] = (0, import_react.useState)("bug");
-  const [title, setTitle] = (0, import_react.useState)("");
-  const [description, setDescription] = (0, import_react.useState)("");
-  const [files, setFiles] = (0, import_react.useState)([]);
+  const [type, setTypeRaw] = (0, import_react.useState)(formStore.type);
+  const [title, setTitleRaw] = (0, import_react.useState)(formStore.title);
+  const [description, setDescriptionRaw] = (0, import_react.useState)(formStore.description);
+  const [files, setFilesRaw] = (0, import_react.useState)(formStore.files);
   const [isSubmitting, setIsSubmitting] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
   const [fileError, setFileError] = (0, import_react.useState)(null);
   const fileInputRef = (0, import_react.useRef)(null);
+  function setType(value) {
+    formStore.type = value;
+    setTypeRaw(value);
+  }
+  function setTitle(value) {
+    formStore.title = value;
+    setTitleRaw(value);
+  }
+  function setDescription(value) {
+    formStore.description = value;
+    setDescriptionRaw(value);
+  }
+  function setFiles(updater) {
+    setFilesRaw((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      formStore.files = next;
+      return next;
+    });
+  }
   const MAX_FILE_SIZE = 10 * 1024 * 1024;
   const ALLOWED_TYPES = /^(image|video)\//;
   function validateAndAddFiles(newFiles) {
@@ -171,6 +203,28 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
     const dropped = Array.from(e.dataTransfer.files);
     validateAndAddFiles(dropped);
   }
+  function handlePaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const imageFiles = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) {
+          const ext = item.type.split("/")[1] || "png";
+          const named = new File([file], `pasted-image-${Date.now()}.${ext}`, {
+            type: file.type
+          });
+          imageFiles.push(named);
+        }
+      }
+    }
+    if (imageFiles.length > 0) {
+      e.preventDefault();
+      validateAndAddFiles(imageFiles);
+    }
+  }
   const isFormValid = title.trim().length > 0 && description.trim().length > 0;
   const inputStyle = {
     width: "100%",
@@ -249,6 +303,7 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
         {
           value: description,
           onChange: (e) => setDescription(e.target.value),
+          onPaste: handlePaste,
           placeholder: labels.descriptionPlaceholder,
           required: true,
           rows: 4,
@@ -302,6 +357,7 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
           ] }, `${f.name}-${i}`)) : labels.attachmentsDropzone
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "#555", fontSize: 10, margin: "4px 0 0", fontStyle: "italic" }, children: labels.attachmentsPasteHint }),
       fileError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { color: "#ff4d4d", fontSize: 11, margin: "4px 0 0" }, children: fileError }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "input",
@@ -363,27 +419,97 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
   ] });
 }
 
+// src/use-drag.ts
+var import_react2 = require("react");
+var DRAG_THRESHOLD = 5;
+function useDrag() {
+  const [position, setPosition] = (0, import_react2.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const dragState = (0, import_react2.useRef)(null);
+  const handlePointerMove = (0, import_react2.useCallback)((e) => {
+    const state = dragState.current;
+    if (!state) return;
+    const dx = e.clientX - state.startX;
+    const dy = e.clientY - state.startY;
+    if (!state.moved && Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) {
+      return;
+    }
+    state.moved = true;
+    setIsDragging(true);
+    const newX = Math.max(0, Math.min(window.innerWidth - 44, state.startPosX + dx));
+    const newY = Math.max(0, Math.min(window.innerHeight - 44, state.startPosY + dy));
+    setPosition({ x: newX, y: newY });
+  }, []);
+  const handlePointerUp = (0, import_react2.useCallback)((_e) => {
+    const state = dragState.current;
+    if (!state) return;
+    if (state.element) {
+      state.element.releasePointerCapture(state.pointerId);
+    }
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    if (state.moved) {
+      requestAnimationFrame(() => setIsDragging(false));
+    }
+    dragState.current = null;
+  }, [handlePointerMove]);
+  const handlePointerDown = (0, import_react2.useCallback)((e) => {
+    if (e.button !== 0) return;
+    const element = e.currentTarget;
+    element.setPointerCapture(e.pointerId);
+    const rect = element.parentElement.getBoundingClientRect();
+    const startPosX = rect.left;
+    const startPosY = rect.top;
+    dragState.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startPosX,
+      startPosY,
+      moved: false,
+      pointerId: e.pointerId,
+      element
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  }, [handlePointerMove, handlePointerUp]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [handlePointerMove, handlePointerUp]);
+  return { position, isDragging, handlePointerDown };
+}
+
 // src/support-widget.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var persistedPanelState = "closed";
 function SupportWidget(props) {
   const labels = { ...defaultLabels, ...props.labels };
-  const [panelState, setPanelState] = (0, import_react2.useState)("closed");
-  const [openCount, setOpenCount] = (0, import_react2.useState)(0);
-  const panelRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useEffect)(() => {
+  const [panelState, setPanelStateRaw] = (0, import_react3.useState)(persistedPanelState);
+  const panelRef = (0, import_react3.useRef)(null);
+  const { position, isDragging, handlePointerDown } = useDrag();
+  const setPanelState = (0, import_react3.useCallback)((next) => {
+    setPanelStateRaw((prev) => {
+      const value = typeof next === "function" ? next(prev) : next;
+      persistedPanelState = value;
+      return value;
+    });
+  }, []);
+  (0, import_react3.useEffect)(() => {
     function handleKeyDown(e) {
       if (e.key === "Escape") setPanelState("closed");
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (panelState === "success") {
       const timer = setTimeout(() => setPanelState("closed"), 2e3);
       return () => clearTimeout(timer);
     }
   }, [panelState]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     function handleClickOutside(e) {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setPanelState("closed");
@@ -401,8 +527,7 @@ function SupportWidget(props) {
       "data-fxl-widget": "",
       style: {
         position: "fixed",
-        bottom: 24,
-        right: 24,
+        ...position ? { left: position.x, top: position.y } : { bottom: 24, right: 24 },
         zIndex: 9999,
         fontFamily: "'Space Grotesk', system-ui, sans-serif"
       },
@@ -413,14 +538,22 @@ function SupportWidget(props) {
             className: "fxl-panel",
             style: {
               position: "absolute",
-              bottom: 56,
-              right: 0,
               width: 300,
               background: "#111111",
               border: "1px solid #2a2a2a",
               borderRadius: 8,
               padding: 16,
-              boxShadow: "0 8px 32px rgba(0,0,0,0.6)"
+              boxShadow: "0 8px 32px rgba(0,0,0,0.6)",
+              ...(() => {
+                const btnRect = panelRef.current?.getBoundingClientRect();
+                if (!btnRect) return { bottom: 56, right: 0 };
+                const inBottomHalf = btnRect.top > window.innerHeight / 2;
+                const inRightHalf = btnRect.left > window.innerWidth / 2;
+                return {
+                  ...inBottomHalf ? { bottom: 56 } : { top: 56 },
+                  ...inRightHalf ? { right: 0 } : { left: 0 }
+                };
+              })()
             },
             children: panelState === "success" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 24, marginBottom: 8 }, children: "\u2713" }),
@@ -461,10 +594,12 @@ function SupportWidget(props) {
                 {
                   config: props,
                   labels,
-                  onSuccess: () => setPanelState("success"),
+                  onSuccess: () => {
+                    resetFormStore();
+                    setPanelState("success");
+                  },
                   onCancel: () => setPanelState("closed")
-                },
-                openCount
+                }
               )
             ] })
           }
@@ -472,33 +607,33 @@ function SupportWidget(props) {
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
+            onPointerDown: handlePointerDown,
             onClick: () => {
-              setPanelState((s) => {
-                if (s === "closed") {
-                  setOpenCount((c) => c + 1);
-                  return "open";
-                }
-                return "closed";
-              });
+              if (isDragging) return;
+              setPanelState((s) => s === "closed" ? "open" : "closed");
             },
             "aria-label": labels.openWidget,
+            className: "fxl-drag-button",
             style: {
               width: 44,
               height: 44,
               borderRadius: "50%",
               background: "#b4e62e",
               border: "none",
-              cursor: "pointer",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               boxShadow: "0 2px 12px rgba(180,230,46,0.4)",
-              transition: "transform 0.15s, box-shadow 0.15s"
+              transition: isDragging ? "none" : "transform 0.15s, box-shadow 0.15s",
+              touchAction: "none",
+              userSelect: "none"
             },
             onMouseEnter: (e) => {
-              ;
-              e.currentTarget.style.transform = "scale(1.1)";
-              e.currentTarget.style.boxShadow = "0 4px 20px rgba(180,230,46,0.5)";
+              if (!isDragging) {
+                ;
+                e.currentTarget.style.transform = "scale(1.1)";
+                e.currentTarget.style.boxShadow = "0 4px 20px rgba(180,230,46,0.5)";
+              }
             },
             onMouseLeave: (e) => {
               ;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/support-widget.tsx
-import { useState as useState2, useEffect, useRef as useRef2 } from "react";
+import { useState as useState3, useEffect as useEffect2, useRef as useRef3, useCallback as useCallback2 } from "react";
 
 // src/types.ts
 var defaultLabels = {
@@ -12,6 +12,7 @@ var defaultLabels = {
   descriptionPlaceholder: "Describe the issue or request in detail",
   attachmentsLabel: "Attachments (optional)",
   attachmentsDropzone: "Drag & drop or click to attach images/videos",
+  attachmentsPasteHint: "You can also paste images (Ctrl+V)",
   send: "Send",
   sending: "Sending...",
   cancel: "Cancel",
@@ -70,15 +71,46 @@ async function uploadFileToR2(presignedUrl, file) {
 
 // src/support-form.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var formStore = {
+  type: "bug",
+  title: "",
+  description: "",
+  files: []
+};
+function resetFormStore() {
+  formStore.type = "bug";
+  formStore.title = "";
+  formStore.description = "";
+  formStore.files = [];
+}
 function SupportForm({ config, labels, onSuccess, onCancel }) {
-  const [type, setType] = useState("bug");
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [files, setFiles] = useState([]);
+  const [type, setTypeRaw] = useState(formStore.type);
+  const [title, setTitleRaw] = useState(formStore.title);
+  const [description, setDescriptionRaw] = useState(formStore.description);
+  const [files, setFilesRaw] = useState(formStore.files);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
   const [fileError, setFileError] = useState(null);
   const fileInputRef = useRef(null);
+  function setType(value) {
+    formStore.type = value;
+    setTypeRaw(value);
+  }
+  function setTitle(value) {
+    formStore.title = value;
+    setTitleRaw(value);
+  }
+  function setDescription(value) {
+    formStore.description = value;
+    setDescriptionRaw(value);
+  }
+  function setFiles(updater) {
+    setFilesRaw((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      formStore.files = next;
+      return next;
+    });
+  }
   const MAX_FILE_SIZE = 10 * 1024 * 1024;
   const ALLOWED_TYPES = /^(image|video)\//;
   function validateAndAddFiles(newFiles) {
@@ -144,6 +176,28 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
     const dropped = Array.from(e.dataTransfer.files);
     validateAndAddFiles(dropped);
   }
+  function handlePaste(e) {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    const imageFiles = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type.startsWith("image/")) {
+        const file = item.getAsFile();
+        if (file) {
+          const ext = item.type.split("/")[1] || "png";
+          const named = new File([file], `pasted-image-${Date.now()}.${ext}`, {
+            type: file.type
+          });
+          imageFiles.push(named);
+        }
+      }
+    }
+    if (imageFiles.length > 0) {
+      e.preventDefault();
+      validateAndAddFiles(imageFiles);
+    }
+  }
   const isFormValid = title.trim().length > 0 && description.trim().length > 0;
   const inputStyle = {
     width: "100%",
@@ -222,6 +276,7 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
         {
           value: description,
           onChange: (e) => setDescription(e.target.value),
+          onPaste: handlePaste,
           placeholder: labels.descriptionPlaceholder,
           required: true,
           rows: 4,
@@ -275,6 +330,7 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
           ] }, `${f.name}-${i}`)) : labels.attachmentsDropzone
         }
       ),
+      /* @__PURE__ */ jsx("p", { style: { color: "#555", fontSize: 10, margin: "4px 0 0", fontStyle: "italic" }, children: labels.attachmentsPasteHint }),
       fileError && /* @__PURE__ */ jsx("p", { style: { color: "#ff4d4d", fontSize: 11, margin: "4px 0 0" }, children: fileError }),
       /* @__PURE__ */ jsx(
         "input",
@@ -336,27 +392,97 @@ function SupportForm({ config, labels, onSuccess, onCancel }) {
   ] });
 }
 
+// src/use-drag.ts
+import { useState as useState2, useRef as useRef2, useCallback, useEffect } from "react";
+var DRAG_THRESHOLD = 5;
+function useDrag() {
+  const [position, setPosition] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  const dragState = useRef2(null);
+  const handlePointerMove = useCallback((e) => {
+    const state = dragState.current;
+    if (!state) return;
+    const dx = e.clientX - state.startX;
+    const dy = e.clientY - state.startY;
+    if (!state.moved && Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) {
+      return;
+    }
+    state.moved = true;
+    setIsDragging(true);
+    const newX = Math.max(0, Math.min(window.innerWidth - 44, state.startPosX + dx));
+    const newY = Math.max(0, Math.min(window.innerHeight - 44, state.startPosY + dy));
+    setPosition({ x: newX, y: newY });
+  }, []);
+  const handlePointerUp = useCallback((_e) => {
+    const state = dragState.current;
+    if (!state) return;
+    if (state.element) {
+      state.element.releasePointerCapture(state.pointerId);
+    }
+    document.removeEventListener("pointermove", handlePointerMove);
+    document.removeEventListener("pointerup", handlePointerUp);
+    if (state.moved) {
+      requestAnimationFrame(() => setIsDragging(false));
+    }
+    dragState.current = null;
+  }, [handlePointerMove]);
+  const handlePointerDown = useCallback((e) => {
+    if (e.button !== 0) return;
+    const element = e.currentTarget;
+    element.setPointerCapture(e.pointerId);
+    const rect = element.parentElement.getBoundingClientRect();
+    const startPosX = rect.left;
+    const startPosY = rect.top;
+    dragState.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      startPosX,
+      startPosY,
+      moved: false,
+      pointerId: e.pointerId,
+      element
+    };
+    document.addEventListener("pointermove", handlePointerMove);
+    document.addEventListener("pointerup", handlePointerUp);
+  }, [handlePointerMove, handlePointerUp]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [handlePointerMove, handlePointerUp]);
+  return { position, isDragging, handlePointerDown };
+}
+
 // src/support-widget.tsx
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var persistedPanelState = "closed";
 function SupportWidget(props) {
   const labels = { ...defaultLabels, ...props.labels };
-  const [panelState, setPanelState] = useState2("closed");
-  const [openCount, setOpenCount] = useState2(0);
-  const panelRef = useRef2(null);
-  useEffect(() => {
+  const [panelState, setPanelStateRaw] = useState3(persistedPanelState);
+  const panelRef = useRef3(null);
+  const { position, isDragging, handlePointerDown } = useDrag();
+  const setPanelState = useCallback2((next) => {
+    setPanelStateRaw((prev) => {
+      const value = typeof next === "function" ? next(prev) : next;
+      persistedPanelState = value;
+      return value;
+    });
+  }, []);
+  useEffect2(() => {
     function handleKeyDown(e) {
       if (e.key === "Escape") setPanelState("closed");
     }
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (panelState === "success") {
       const timer = setTimeout(() => setPanelState("closed"), 2e3);
       return () => clearTimeout(timer);
     }
   }, [panelState]);
-  useEffect(() => {
+  useEffect2(() => {
     function handleClickOutside(e) {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setPanelState("closed");
@@ -374,8 +500,7 @@ function SupportWidget(props) {
       "data-fxl-widget": "",
       style: {
         position: "fixed",
-        bottom: 24,
-        right: 24,
+        ...position ? { left: position.x, top: position.y } : { bottom: 24, right: 24 },
         zIndex: 9999,
         fontFamily: "'Space Grotesk', system-ui, sans-serif"
       },
@@ -386,14 +511,22 @@ function SupportWidget(props) {
             className: "fxl-panel",
             style: {
               position: "absolute",
-              bottom: 56,
-              right: 0,
               width: 300,
               background: "#111111",
               border: "1px solid #2a2a2a",
               borderRadius: 8,
               padding: 16,
-              boxShadow: "0 8px 32px rgba(0,0,0,0.6)"
+              boxShadow: "0 8px 32px rgba(0,0,0,0.6)",
+              ...(() => {
+                const btnRect = panelRef.current?.getBoundingClientRect();
+                if (!btnRect) return { bottom: 56, right: 0 };
+                const inBottomHalf = btnRect.top > window.innerHeight / 2;
+                const inRightHalf = btnRect.left > window.innerWidth / 2;
+                return {
+                  ...inBottomHalf ? { bottom: 56 } : { top: 56 },
+                  ...inRightHalf ? { right: 0 } : { left: 0 }
+                };
+              })()
             },
             children: panelState === "success" ? /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
               /* @__PURE__ */ jsx2("div", { style: { fontSize: 24, marginBottom: 8 }, children: "\u2713" }),
@@ -434,10 +567,12 @@ function SupportWidget(props) {
                 {
                   config: props,
                   labels,
-                  onSuccess: () => setPanelState("success"),
+                  onSuccess: () => {
+                    resetFormStore();
+                    setPanelState("success");
+                  },
                   onCancel: () => setPanelState("closed")
-                },
-                openCount
+                }
               )
             ] })
           }
@@ -445,33 +580,33 @@ function SupportWidget(props) {
         /* @__PURE__ */ jsx2(
           "button",
           {
+            onPointerDown: handlePointerDown,
             onClick: () => {
-              setPanelState((s) => {
-                if (s === "closed") {
-                  setOpenCount((c) => c + 1);
-                  return "open";
-                }
-                return "closed";
-              });
+              if (isDragging) return;
+              setPanelState((s) => s === "closed" ? "open" : "closed");
             },
             "aria-label": labels.openWidget,
+            className: "fxl-drag-button",
             style: {
               width: 44,
               height: 44,
               borderRadius: "50%",
               background: "#b4e62e",
               border: "none",
-              cursor: "pointer",
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
               boxShadow: "0 2px 12px rgba(180,230,46,0.4)",
-              transition: "transform 0.15s, box-shadow 0.15s"
+              transition: isDragging ? "none" : "transform 0.15s, box-shadow 0.15s",
+              touchAction: "none",
+              userSelect: "none"
             },
             onMouseEnter: (e) => {
-              ;
-              e.currentTarget.style.transform = "scale(1.1)";
-              e.currentTarget.style.boxShadow = "0 4px 20px rgba(180,230,46,0.5)";
+              if (!isDragging) {
+                ;
+                e.currentTarget.style.transform = "scale(1.1)";
+                e.currentTarget.style.boxShadow = "0 4px 20px rgba(180,230,46,0.5)";
+              }
             },
             onMouseLeave: (e) => {
               ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fxl-business/support-widget",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Embeddable support widget for FXL Support — bug reports and feature requests",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -16,11 +16,6 @@
   "files": [
     "dist"
   ],
-  "scripts": {
-    "build": "tsup",
-    "type-check": "tsc --noEmit",
-    "prepublishOnly": "pnpm build"
-  },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -36,5 +31,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "type-check": "tsc --noEmit"
   }
-}
+}