react-grab 0.0.36 → 0.0.38

package/dist/index.js

@@ -258,9 +258,10 @@ var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elemen
 // src/components/label.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
 var _tmpl$22 = /* @__PURE__ */ template(`<div style=margin-right:4px>Copied`);
-var _tmpl$32 = /* @__PURE__ */ template(`<span style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-variant-numeric:tabular-nums">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div style="position:fixed;padding:2px 6px;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;pointer-events:none;transition:opacity 0.2s ease-in-out;display:flex;align-items:center;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap">`);
+var _tmpl$32 = /* @__PURE__ */ template(`<span style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-variant-numeric:tabular-nums;vertical-align:middle">`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div style="position:fixed;padding:2px 6px;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;pointer-events:none;transition:opacity 0.2s ease-in-out;display:flex;align-items:center;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap">`);
 var Label = (props) => {
   const [opacity, setOpacity] = createSignal(0);
   const [positionTick, setPositionTick] = createSignal(0);
@@ -358,12 +359,26 @@ var Label = (props) => {
     fallback.top += INDICATOR_CLAMP_PADDING_PX;
     return fallback;
   };
+  const labelSegments = () => {
+    const separator = " in ";
+    const separatorIndex = props.text.indexOf(separator);
+    if (separatorIndex === -1) {
+      return {
+        primary: props.text,
+        secondary: ""
+      };
+    }
+    return {
+      primary: props.text.slice(0, separatorIndex),
+      secondary: props.text.slice(separatorIndex)
+    };
+  };
   return createComponent(Show, {
     get when() {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$5();
+      var _el$ = _tmpl$6();
       var _ref$ = labelRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
       insert(_el$, createComponent(Show, {
@@ -401,9 +416,20 @@ var Label = (props) => {
           return props.variant !== "processing";
         },
         get children() {
-          var _el$4 = _tmpl$32();
-          insert(_el$4, () => props.text);
-          return _el$4;
+          return [(() => {
+            var _el$4 = _tmpl$32();
+            insert(_el$4, () => labelSegments().primary);
+            return _el$4;
+          })(), createComponent(Show, {
+            get when() {
+              return memo(() => props.variant === "hover")() && labelSegments().secondary !== "";
+            },
+            get children() {
+              var _el$5 = _tmpl$4();
+              insert(_el$5, () => labelSegments().secondary);
+              return _el$5;
+            }
+          })];
         }
       }), null);
       insert(_el$, createComponent(Show, {
@@ -411,7 +437,7 @@ var Label = (props) => {
           return props.variant === "success";
         },
         get children() {
-          return _tmpl$4();
+          return _tmpl$5();
         }
       }), null);
       effect((_p$) => {
@@ -431,7 +457,7 @@ var Label = (props) => {
     }
   });
 };
-var _tmpl$6 = /* @__PURE__ */ template(`<div style="position:fixed;z-index:2147483647;pointer-events:none;transition:opacity 0.1s ease-in-out"><div style="width:32px;height:2px;background-color:rgba(178, 28, 142, 0.2);border-radius:1px;overflow:hidden;position:relative"><div style="height:100%;background-color:#b21c8e;border-radius:1px;transition:width 0.05s cubic-bezier(0.165, 0.84, 0.44, 1)">`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div style="position:fixed;z-index:2147483647;pointer-events:none;transition:opacity 0.1s ease-in-out"><div style="width:32px;height:2px;background-color:rgba(178, 28, 142, 0.2);border-radius:1px;overflow:hidden;position:relative"><div style="height:100%;background-color:#b21c8e;border-radius:1px;transition:width 0.05s cubic-bezier(0.165, 0.84, 0.44, 1)">`);
 var useFadeInOut = (visible) => {
   const [opacity, setOpacity] = createSignal(0);
   createEffect(on(() => visible, (isVisible) => {
@@ -464,7 +490,7 @@ var ProgressIndicator = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      var _el$ = _tmpl$7(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
       var _ref$ = progressIndicatorRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : progressIndicatorRef = _el$;
       effect((_p$) => {
@@ -484,7 +510,7 @@ var ProgressIndicator = (props) => {
     }
   });
 };
-var _tmpl$7 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
 var Crosshair = (props) => {
   let canvasRef;
   let context = null;
@@ -574,7 +600,7 @@ var Crosshair = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$7();
+      var _el$ = _tmpl$8();
       var _ref$ = canvasRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
       return _el$;
@@ -706,6 +732,11 @@ var ReactGrabRenderer = (props) => {
     }
   })];
 };
+
+// src/utils/is-capitalized.ts
+var isCapitalized = (value) => value.length > 0 && /^[A-Z]/.test(value);
+
+// src/instrumentation.ts
 instrument({
   onCommitFiberRoot(_, fiberRoot) {
     _fiberRoots.add(fiberRoot);
@@ -714,40 +745,36 @@ instrument({
 var generateCSSSelector = (element) => {
   return finder(element);
 };
-var getHTMLSnippet = async (element) => {
-  const truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
-  const isInternalComponent = (name) => {
-    if (name.startsWith("_")) return true;
-    if (name.includes("Provider") && name.includes("Context")) return true;
-    return false;
-  };
-  const extractReactComponentName = (el) => {
-    const fiber = getFiberFromHostInstance(el);
-    if (!fiber) return null;
-    let componentName = null;
-    traverseFiber(
-      fiber,
-      (currentFiber) => {
-        if (isCompositeFiber(currentFiber)) {
-          const displayName = getDisplayName(currentFiber);
-          if (displayName && !isInternalComponent(displayName)) {
-            componentName = displayName;
-            return true;
-          }
+var truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
+var isInternalComponent = (name) => !isCapitalized(name) || name.startsWith("_") || name.includes("Provider") && name.includes("Context");
+var getNearestComponentDisplayName = (element) => {
+  const fiber = getFiberFromHostInstance(element);
+  if (!fiber) return null;
+  let componentName = null;
+  traverseFiber(
+    fiber,
+    (currentFiber) => {
+      if (isCompositeFiber(currentFiber)) {
+        const displayName = getDisplayName(currentFiber);
+        if (displayName && !isInternalComponent(displayName)) {
+          componentName = displayName;
+          return true;
         }
-        return false;
-      },
-      true
-    );
-    return componentName;
-  };
-  const formatComponentSourceLocation = async (el) => {
-    const source = await getSourceFromHostInstance(el);
-    if (!source) return null;
-    const fileName = normalizeFileName(source.fileName);
-    if (!isSourceFile(fileName)) return null;
-    return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
-  };
+      }
+      return false;
+    },
+    true
+  );
+  return componentName;
+};
+var formatComponentSourceLocation = async (el) => {
+  const source = await getSourceFromHostInstance(el);
+  if (!source) return null;
+  const fileName = normalizeFileName(source.fileName);
+  if (!isSourceFile(fileName)) return null;
+  return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
+};
+var getHTMLSnippet = async (element) => {
   const semanticTags = /* @__PURE__ */ new Set([
     "article",
     "aside",
@@ -836,9 +863,9 @@ var getHTMLSnippet = async (element) => {
   lines.push("```html");
   const ancestors = collectDistinguishingAncestors(element);
   const ancestorComponents = ancestors.map(
-    (ancestor) => extractReactComponentName(ancestor)
+    (ancestor) => getNearestComponentDisplayName(ancestor)
   );
-  const elementComponent = extractReactComponentName(element);
+  const elementComponent = getNearestComponentDisplayName(element);
   const ancestorSources = await Promise.all(
     ancestors.map((ancestor) => formatComponentSourceLocation(ancestor))
   );
@@ -946,17 +973,18 @@ var waitForFocus = () => {
     window.focus();
   });
 };
-var copyContent = async (content) => {
+var copyContent = async (content, onSuccess) => {
   await waitForFocus();
   try {
     if (Array.isArray(content)) {
       if (!navigator?.clipboard?.write) {
         for (const contentPart of content) {
           if (typeof contentPart === "string") {
-            const result = copyContentFallback(contentPart);
+            const result = copyContentFallback(contentPart, onSuccess);
             if (!result) return result;
           }
         }
+        onSuccess?.();
         return true;
       }
       const mimeTypeMap = /* @__PURE__ */ new Map();
@@ -975,28 +1003,52 @@ var copyContent = async (content) => {
           }
         }
       }
-      await navigator.clipboard.write([
-        new ClipboardItem(Object.fromEntries(mimeTypeMap))
-      ]);
-      return true;
+      if (mimeTypeMap.size === 0) {
+        const plainTextFallback = content.find(
+          (contentPart) => typeof contentPart === "string"
+        );
+        if (typeof plainTextFallback === "string") {
+          return copyContentFallback(plainTextFallback, onSuccess);
+        }
+        return false;
+      }
+      try {
+        await navigator.clipboard.write([
+          new ClipboardItem(Object.fromEntries(mimeTypeMap))
+        ]);
+        onSuccess?.();
+        return true;
+      } catch {
+        const plainTextParts = content.filter(
+          (contentPart) => typeof contentPart === "string"
+        );
+        if (plainTextParts.length > 0) {
+          const combinedText = plainTextParts.join("\n\n");
+          return copyContentFallback(combinedText, onSuccess);
+        }
+        return false;
+      }
     } else if (content instanceof Blob) {
       await navigator.clipboard.write([
         new ClipboardItem({ [content.type]: content })
       ]);
+      onSuccess?.();
       return true;
     } else {
       try {
         await navigator.clipboard.writeText(String(content));
+        onSuccess?.();
         return true;
       } catch {
-        return copyContentFallback(content);
+        const result = copyContentFallback(content, onSuccess);
+        return result;
       }
     }
   } catch {
     return false;
   }
 };
-var copyContentFallback = (content) => {
+var copyContentFallback = (content, onSuccess) => {
   if (!document.execCommand) return false;
   const el = document.createElement("textarea");
   el.value = String(content);
@@ -1006,12 +1058,46 @@ var copyContentFallback = (content) => {
   doc.append(el);
   try {
     el.select();
-    return document.execCommand("copy");
+    const result = document.execCommand("copy");
+    if (result) onSuccess?.();
+    return result;
   } finally {
     el.remove();
   }
 };
 
+// src/utils/play-copy-sound.ts
+var playCopySound = () => {
+  try {
+    const audioContext = new (window.AudioContext || // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access -- window.webkitAudioContext is not typed
+    window.webkitAudioContext)();
+    const masterGain = audioContext.createGain();
+    masterGain.connect(audioContext.destination);
+    const notes = [
+      { freq: 523.25, start: 0, duration: 0.1 },
+      { freq: 659.25, start: 0.05, duration: 0.1 },
+      { freq: 783.99, start: 0.1, duration: 0.15 }
+    ];
+    notes.forEach((note) => {
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      oscillator.connect(gainNode);
+      gainNode.connect(masterGain);
+      oscillator.frequency.value = note.freq;
+      oscillator.type = "triangle";
+      const startTime = audioContext.currentTime + note.start;
+      const peakTime = startTime + 0.01;
+      const endTime = startTime + note.duration;
+      gainNode.gain.setValueAtTime(0, startTime);
+      gainNode.gain.linearRampToValueAtTime(0.15, peakTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, endTime);
+      oscillator.start(startTime);
+      oscillator.stop(endTime);
+    });
+  } catch {
+  }
+};
+
 // src/utils/is-element-visible.ts
 var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
   return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
@@ -1119,6 +1205,12 @@ var createElementBounds = (element) => {
   };
 };
 
+// src/utils/is-localhost.ts
+var isLocalhost = () => {
+  const hostname = window.location.hostname;
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+};
+
 // src/core.tsx
 var PROGRESS_INDICATOR_DELAY_MS = 150;
 var init = (rawOptions) => {
@@ -1126,6 +1218,7 @@ var init = (rawOptions) => {
     enabled: true,
     keyHoldDuration: 300,
     allowActivationInsideInput: true,
+    playCopySound: false,
     ...rawOptions
   };
   if (options.enabled === false) {
@@ -1222,13 +1315,41 @@ ${context}
           computedStyles: element.computedStyles
         }))
       };
-      const base64Data = btoa(JSON.stringify(structuredData));
+      const jsonString = JSON.stringify(structuredData);
+      const base64Data = btoa(encodeURIComponent(jsonString).replace(/%([0-9A-F]{2})/g, (_match, p1) => String.fromCharCode(parseInt(p1, 16))));
       const htmlContent = `<div data-react-grab="${base64Data}"></div>`;
       return new Blob([htmlContent], {
         type: "text/html"
       });
     };
     const extractElementTagName = (element) => (element.tagName || "").toLowerCase();
+    const extractNearestComponentName = (element) => {
+      const fiber = getFiberFromHostInstance(element);
+      if (!fiber) return null;
+      let componentName = null;
+      traverseFiber(fiber, (currentFiber) => {
+        if (isCompositeFiber(currentFiber)) {
+          const displayName = getDisplayName(currentFiber);
+          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_")) {
+            componentName = displayName;
+            return true;
+          }
+        }
+        return false;
+      }, true);
+      return componentName;
+    };
+    const extractElementLabelText = (element) => {
+      const tagName = extractElementTagName(element);
+      const componentName = extractNearestComponentName(element);
+      if (tagName && componentName) {
+        return `<${tagName}> in ${componentName}`;
+      }
+      if (tagName) {
+        return `<${tagName}>`;
+      }
+      return "<element>";
+    };
     const notifyElementsSelected = (elements) => {
       try {
         const elementsPayload = elements.map((element) => ({
@@ -1242,6 +1363,8 @@ ${context}
       } catch {
       }
     };
+    const isExtensionEnvironment = () => window.__REACT_GRAB_EXTENSION_ACTIVE__ === true || options.isExtension === true;
+    const isExtensionTextOnlyMode = () => isExtensionEnvironment() && !isLocalhost();
     const executeCopyOperation = async (positionX, positionY, operation) => {
       setCopyStartX(positionX);
       setCopyStartY(positionY);
@@ -1252,22 +1375,49 @@ ${context}
         stopProgressAnimation();
       });
     };
+    const hasInnerText = (element) => "innerText" in element;
+    const extractElementTextContent = (element) => {
+      if (hasInnerText(element)) {
+        return element.innerText;
+      }
+      return element.textContent ?? "";
+    };
+    const createCombinedTextContent = (elements) => elements.map((element) => extractElementTextContent(element).trim()).filter((textContent) => textContent.length > 0).join("\n\n");
     const copySingleElementToClipboard = async (targetElement2) => {
-      const tagName = extractElementTagName(targetElement2);
       showTemporaryGrabbedBox(createElementBounds(targetElement2));
       await new Promise((resolve) => requestAnimationFrame(resolve));
+      let didCopy = false;
       try {
-        const content = await getHTMLSnippet(targetElement2);
-        const plainTextContent = wrapInSelectedElementTags(content);
-        const htmlContent = createStructuredClipboardHtmlBlob([{
-          tagName,
-          content,
-          computedStyles: extractRelevantComputedStyles(targetElement2)
-        }]);
-        await copyContent([plainTextContent, htmlContent]);
+        if (isExtensionTextOnlyMode()) {
+          const plainTextContent = createCombinedTextContent([targetElement2]);
+          if (plainTextContent.length > 0) {
+            didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
+          }
+        } else {
+          const content = await getHTMLSnippet(targetElement2);
+          const plainTextContent = wrapInSelectedElementTags(content);
+          const htmlContent = createStructuredClipboardHtmlBlob([{
+            tagName: extractElementTagName(targetElement2),
+            content,
+            computedStyles: extractRelevantComputedStyles(targetElement2)
+          }]);
+          didCopy = await copyContent([plainTextContent, htmlContent], options.playCopySound ? playCopySound : void 0);
+          if (!didCopy) {
+            const plainTextContentOnly = createCombinedTextContent([targetElement2]);
+            if (plainTextContentOnly.length > 0) {
+              didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
+            }
+          }
+        }
       } catch {
+        const plainTextContentOnly = createCombinedTextContent([targetElement2]);
+        if (plainTextContentOnly.length > 0) {
+          didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
+        }
+      }
+      if (didCopy) {
+        showTemporarySuccessLabel(extractElementLabelText(targetElement2), copyStartX(), copyStartY());
       }
-      showTemporarySuccessLabel(tagName ? `<${tagName}>` : "<element>", copyStartX(), copyStartY());
       notifyElementsSelected([targetElement2]);
     };
     const copyMultipleElementsToClipboard = async (targetElements) => {
@@ -1276,19 +1426,43 @@ ${context}
         showTemporaryGrabbedBox(createElementBounds(element));
       }
       await new Promise((resolve) => requestAnimationFrame(resolve));
+      let didCopy = false;
       try {
-        const elementSnippets = await Promise.all(targetElements.map((element) => getHTMLSnippet(element)));
-        const plainTextContent = elementSnippets.filter((snippet) => snippet.trim()).map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
-        const structuredElements = elementSnippets.map((content, index) => ({
-          tagName: extractElementTagName(targetElements[index]),
-          content,
-          computedStyles: extractRelevantComputedStyles(targetElements[index])
-        }));
-        const htmlContent = createStructuredClipboardHtmlBlob(structuredElements);
-        await copyContent([plainTextContent, htmlContent]);
+        if (isExtensionTextOnlyMode()) {
+          const plainTextContent = createCombinedTextContent(targetElements);
+          if (plainTextContent.length > 0) {
+            didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
+          }
+        } else {
+          const elementSnippetResults = await Promise.allSettled(targetElements.map((element) => getHTMLSnippet(element)));
+          const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
+          if (elementSnippets.length > 0) {
+            const plainTextContent = elementSnippets.map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
+            const structuredElements = elementSnippets.map((content, elementIndex) => ({
+              tagName: extractElementTagName(targetElements[elementIndex]),
+              content,
+              computedStyles: extractRelevantComputedStyles(targetElements[elementIndex])
+            }));
+            const htmlContent = createStructuredClipboardHtmlBlob(structuredElements);
+            didCopy = await copyContent([plainTextContent, htmlContent], options.playCopySound ? playCopySound : void 0);
+            if (!didCopy) {
+              const plainTextContentOnly = createCombinedTextContent(targetElements);
+              if (plainTextContentOnly.length > 0) {
+                didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
+              }
+            }
+          } else {
+            const plainTextContentOnly = createCombinedTextContent(targetElements);
+            if (plainTextContentOnly.length > 0) {
+              didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
+            }
+          }
+        }
       } catch {
       }
-      showTemporarySuccessLabel(`${targetElements.length} elements`, copyStartX(), copyStartY());
+      if (didCopy) {
+        showTemporarySuccessLabel(`${targetElements.length} elements`, copyStartX(), copyStartY());
+      }
       notifyElementsSelected(targetElements);
     };
     const targetElement = createMemo(() => {
@@ -1345,7 +1519,7 @@ ${context}
     });
     const labelText = createMemo(() => {
       const element = targetElement();
-      return element ? `<${extractElementTagName(element)}>` : "<element>";
+      return element ? extractElementLabelText(element) : "<element>";
     });
     const labelPosition = createMemo(() => isCopying() ? {
       x: copyStartX(),
@@ -1372,7 +1546,13 @@ ${context}
       progressTick();
       if (startTime === null) return 0;
       const elapsedTime = Date.now() - startTime;
-      return Math.min(elapsedTime / options.keyHoldDuration, 1);
+      const normalizedTime = elapsedTime / options.keyHoldDuration;
+      const easedProgress = 1 - Math.exp(-normalizedTime);
+      const maxProgressBeforeCompletion = 0.95;
+      if (isCopying()) {
+        return Math.min(easedProgress, maxProgressBeforeCompletion);
+      }
+      return 1;
     });
     const startProgressAnimation = () => {
       setProgressStartTime(Date.now());
@@ -1657,6 +1837,9 @@ ${context}
 // src/index.ts
 var globalApi = null;
 var getGlobalApi = () => globalApi;
-globalApi = init();
+var EXTENSION_MARKER = "__REACT_GRAB_EXTENSION_ACTIVE__";
+if (!window[EXTENSION_MARKER]) {
+  globalApi = init();
+}
 
-export { getGlobalApi, init };
+export { getGlobalApi, init, playCopySound };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "",
   "keywords": [
     "react",
@@ -69,7 +69,8 @@
     "@medv/finder": "^4.0.2",
     "bippy": "^0.5.14",
     "modern-screenshot": "^4.6.6",
-    "solid-js": "^1.9.10"
+    "solid-js": "^1.9.10",
+    "solid-sonner": "^0.2.8"
   },
   "scripts": {
     "build": "NODE_ENV=production tsup",