react-grab 0.1.15 → 0.1.16

package/dist/react.js

@@ -2140,7 +2140,7 @@ var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEED
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.15";
+    VERSION = "0.1.16";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -10189,7 +10189,7 @@ var init_icon_copy = __esm({
 });
 
 // src/components/history-dropdown.tsx
-var _tmpl$37, _tmpl$211, _tmpl$38, _tmpl$45, DEFAULT_OFFSCREEN_POSITION2, ITEM_ACTION_CLASS, EDGE_TO_TRANSFORM_ORIGIN, formatRelativeTime, HistoryDropdown;
+var _tmpl$37, _tmpl$211, _tmpl$38, _tmpl$45, DEFAULT_OFFSCREEN_POSITION2, ITEM_ACTION_CLASS, EDGE_TO_TRANSFORM_ORIGIN, formatRelativeTime, getHistoryItemDisplayName, HistoryDropdown;
 var init_history_dropdown = __esm({
   "src/components/history-dropdown.tsx"() {
     "use strict";
@@ -10234,6 +10234,12 @@ var init_history_dropdown = __esm({
       if (elapsedHours < 24) return `${elapsedHours}h`;
       return `${Math.floor(elapsedHours / 24)}d`;
     };
+    getHistoryItemDisplayName = (item) => {
+      if (item.elementsCount && item.elementsCount > 1) {
+        return `${item.elementsCount} elements`;
+      }
+      return item.componentName ?? item.tagName;
+    };
     HistoryDropdown = (props) => {
       let containerRef;
       const [measuredWidth, setMeasuredWidth] = createSignal(0);
@@ -10452,7 +10458,7 @@ var init_history_dropdown = __esm({
                 }, FEEDBACK_DURATION_MS);
               };
               _el$10.$$pointerdown = (event) => event.stopPropagation();
-              insert(_el$12, () => item.componentName ?? item.tagName);
+              insert(_el$12, () => getHistoryItemDisplayName(item));
               insert(_el$11, createComponent(Show, {
                 get when() {
                   return item.commentText;
@@ -10558,6 +10564,7 @@ var init_renderer = __esm({
     init_solid();
     init_constants();
     init_build_open_file_url();
+    init_is_element_connected();
     init_overlay_canvas();
     init_selection_label();
     init_toolbar();
@@ -10777,6 +10784,9 @@ var init_renderer = __esm({
           get componentName() {
             return instance().componentName;
           },
+          get elementsCount() {
+            return instance().elementsCount;
+          },
           get selectionBounds() {
             return instance().bounds;
           },
@@ -10806,7 +10816,12 @@ var init_renderer = __esm({
             return instance().hideArrow;
           },
           get onShowContextMenu() {
-            return (instance().status === "copied" || instance().status === "fading") && instance().element && (document.body ?? document.documentElement).contains(instance().element) ? () => props.onShowContextMenuInstance?.(instance().id) : void 0;
+            const currentInstance = instance();
+            const hasCompletedStatus = currentInstance.status === "copied" || currentInstance.status === "fading";
+            if (!hasCompletedStatus || !isElementConnected(currentInstance.element)) {
+              return void 0;
+            }
+            return () => props.onShowContextMenuInstance?.(currentInstance.id);
           },
           onHoverChange: (isHovered) => props.onLabelInstanceHoverChange?.(instance().id, isHovered)
         })
@@ -13957,7 +13972,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.15";
+        const version = "0.1.16";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -14113,6 +14128,7 @@ var copyHtmlPlugin;
 var init_copy_html = __esm({
   "src/core/plugins/copy-html.ts"() {
     "use strict";
+    init_copy_content();
     copyHtmlPlugin = {
       name: "copy-html",
       actions: [
@@ -14130,8 +14146,7 @@ var init_copy_html = __esm({
                 context.elements
               );
               if (!transformedHtml) return false;
-              await navigator.clipboard.writeText(transformedHtml);
-              return true;
+              return copyContent(transformedHtml);
             });
           }
         }
@@ -14210,7 +14225,12 @@ var init_history_storage = __esm({
       try {
         const serializedHistoryItems = sessionStorage.getItem(SESSION_STORAGE_KEY);
         if (!serializedHistoryItems) return [];
-        return JSON.parse(serializedHistoryItems);
+        const parsedHistoryItems = JSON.parse(serializedHistoryItems);
+        return parsedHistoryItems.map((historyItem) => ({
+          ...historyItem,
+          elementsCount: Math.max(1, historyItem.elementsCount ?? 1),
+          previewBounds: historyItem.previewBounds ?? []
+        }));
       } catch {
         return [];
       }
@@ -14401,12 +14421,21 @@ var init_core = __esm({
         const [hasUnreadHistoryItems, setHasUnreadHistoryItems] = createSignal(false);
         const [isHistoryHoverOpen, setIsHistoryHoverOpen] = createSignal(false);
         let historyHoverPreviews = [];
+        const getMappedHistoryElements = (historyItemId) => historyElementMap.get(historyItemId) ?? [];
+        const getConnectedHistoryElements = (historyItemId) => getMappedHistoryElements(historyItemId).filter((mappedElement) => isElementConnected(mappedElement));
+        const getFirstConnectedHistoryElement = (historyItemId) => getConnectedHistoryElements(historyItemId)[0];
+        const getHistoryPreviewBounds = (historyItem) => {
+          const connectedElements = getConnectedHistoryElements(historyItem.id);
+          if (connectedElements.length > 0) {
+            return connectedElements.map((element) => createElementBounds(element));
+          }
+          return historyItem.previewBounds ?? [];
+        };
         const historyDisconnectedItemIds = createMemo(() => {
           void historyDropdownPosition();
           const disconnectedIds = /* @__PURE__ */ new Set();
           for (const item of historyItems2()) {
-            const element = historyElementMap.get(item.id);
-            if (!element || !isElementConnected(element)) {
+            if (getConnectedHistoryElements(item.id).length === 0) {
               disconnectedIds.add(item.id);
             }
           }
@@ -14694,12 +14723,13 @@ var init_core = __esm({
             onAfterCopy: pluginRegistry.hooks.onAfterCopy,
             onCopySuccess: (copiedElements, content) => {
               pluginRegistry.hooks.onCopySuccess(copiedElements, content);
-              const primaryElement = copiedElements[0];
+              const hasCopiedElements = copiedElements.length > 0;
               const isComment = Boolean(extraPrompt);
-              if (primaryElement) {
+              if (hasCopiedElements) {
                 const currentItems = historyItems2();
-                for (const [existingItemId, mappedElement] of historyElementMap.entries()) {
-                  if (mappedElement !== primaryElement) continue;
+                for (const [existingItemId, mappedElements] of historyElementMap.entries()) {
+                  const isSameSelection = mappedElements.length === copiedElements.length && mappedElements.every((element, index) => element === copiedElements[index]);
+                  if (!isSameSelection) continue;
                   const existingItem = currentItems.find((item) => item.id === existingItemId);
                   if (!existingItem) continue;
                   const shouldDedup = isComment ? existingItem.isComment && existingItem.commentText === extraPrompt : !existingItem.isComment;
@@ -14715,6 +14745,8 @@ var init_core = __esm({
                 elementName: elementName ?? "element",
                 tagName: tagName ?? "div",
                 componentName: componentName ?? void 0,
+                elementsCount: copiedElements.length,
+                previewBounds: copiedElements.map((element) => createElementBounds(element)),
                 isComment,
                 commentText: extraPrompt ?? void 0,
                 timestamp: Date.now()
@@ -14722,8 +14754,8 @@ var init_core = __esm({
               setHistoryItems(updatedHistoryItems);
               setHasUnreadHistoryItems(true);
               const newestHistoryItem = updatedHistoryItems[0];
-              if (newestHistoryItem && primaryElement) {
-                historyElementMap.set(newestHistoryItem.id, primaryElement);
+              if (newestHistoryItem && hasCopiedElements) {
+                historyElementMap.set(newestHistoryItem.id, [...copiedElements]);
               }
               const currentItemIds = new Set(updatedHistoryItems.map((item) => item.id));
               for (const mapItemId of historyElementMap.keys()) {
@@ -16474,33 +16506,45 @@ var init_core = __esm({
           }
           historyHoverPreviews = [];
         };
-        const addHistoryItemPreview = (item, element, idPrefix) => {
-          const bounds = createElementBounds(element);
-          const boxId = `${idPrefix}-${item.id}`;
-          actions.addGrabbedBox({
-            id: boxId,
-            bounds,
-            createdAt: 0,
-            element
-          });
+        const addHistoryItemPreview = (item, previewBounds, previewElements, idPrefix) => {
+          if (previewBounds.length === 0) return;
           const hasCommentText = item.isComment && item.commentText;
-          const labelId = `${idPrefix}-label-${item.id}`;
-          actions.addLabelInstance({
-            id: labelId,
-            bounds,
-            tagName: item.tagName,
-            componentName: item.componentName,
-            status: "idle",
-            isPromptMode: Boolean(hasCommentText),
-            inputValue: hasCommentText ? item.commentText : void 0,
-            createdAt: 0,
-            element,
-            mouseX: bounds.x + bounds.width / 2
-          });
-          historyHoverPreviews.push({
-            boxId,
-            labelId
-          });
+          for (const [index, bounds] of previewBounds.entries()) {
+            const previewElement = previewElements[index];
+            const boxId = `${idPrefix}-${item.id}-${index}`;
+            actions.addGrabbedBox({
+              id: boxId,
+              bounds,
+              createdAt: 0,
+              element: previewElement
+            });
+            let labelId = null;
+            if (index === 0) {
+              labelId = `${idPrefix}-label-${item.id}`;
+              actions.addLabelInstance({
+                id: labelId,
+                bounds,
+                tagName: item.tagName,
+                componentName: item.componentName,
+                elementsCount: item.elementsCount,
+                status: "idle",
+                isPromptMode: Boolean(hasCommentText),
+                inputValue: hasCommentText ? item.commentText : void 0,
+                createdAt: 0,
+                element: previewElement,
+                mouseX: bounds.x + bounds.width / 2
+              });
+            }
+            historyHoverPreviews.push({
+              boxId,
+              labelId
+            });
+          }
+        };
+        const showHistoryItemPreview = (item, idPrefix) => {
+          const previewBounds = getHistoryPreviewBounds(item);
+          const connectedElements = getConnectedHistoryElements(item.id);
+          addHistoryItemPreview(item, previewBounds, connectedElements, idPrefix);
         };
         const stopTrackingToolbarPosition = () => {
           if (historyPositionFrameId !== null) {
@@ -16596,8 +16640,8 @@ var init_core = __esm({
             componentName: item.componentName ?? item.elementName,
             commentText: item.commentText
           });
-          const element = historyElementMap.get(item.id);
-          if (!element || !isElementConnected(element)) return;
+          const element = getFirstConnectedHistoryElement(item.id);
+          if (!element) return;
           actions.clearLabelInstances();
           requestAnimationFrame(() => {
             if (!isElementConnected(element)) return;
@@ -16615,8 +16659,8 @@ var init_core = __esm({
             actions.exitPromptMode();
             actions.clearInputText();
           }
-          const element = historyElementMap.get(item.id);
-          if (item.isComment && item.commentText && element && isElementConnected(element)) {
+          const element = getFirstConnectedHistoryElement(item.id);
+          if (item.isComment && item.commentText && element) {
             const bounds = createElementBounds(element);
             const centerX = bounds.x + bounds.width / 2;
             const centerY = bounds.y + bounds.height / 2;
@@ -16658,34 +16702,32 @@ var init_core = __esm({
           requestAnimationFrame(() => {
             batch(() => {
               for (const historyItem of currentHistoryItems) {
-                const element = historyElementMap.get(historyItem.id);
-                if (!element || !isElementConnected(element)) continue;
-                const bounds = createElementBounds(element);
-                const labelId = `label-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-                actions.addLabelInstance({
-                  id: labelId,
-                  bounds,
-                  tagName: historyItem.tagName,
-                  componentName: historyItem.componentName,
-                  status: "copied",
-                  createdAt: Date.now(),
-                  element,
-                  mouseX: bounds.x + bounds.width / 2
-                });
-                scheduleLabelFade(labelId);
+                const connectedElements = getConnectedHistoryElements(historyItem.id);
+                for (const element of connectedElements) {
+                  const bounds = createElementBounds(element);
+                  const labelId = `label-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+                  actions.addLabelInstance({
+                    id: labelId,
+                    bounds,
+                    tagName: historyItem.tagName,
+                    componentName: historyItem.componentName,
+                    status: "copied",
+                    createdAt: Date.now(),
+                    element,
+                    mouseX: bounds.x + bounds.width / 2
+                  });
+                  scheduleLabelFade(labelId);
+                }
               }
             });
           });
         };
         const handleHistoryItemHover = (historyItemId) => {
           clearHistoryHoverPreviews();
-          if (historyItemId) {
-            const item = historyItems2().find((innerItem) => innerItem.id === historyItemId);
-            const element = historyElementMap.get(historyItemId);
-            if (item && element && isElementConnected(element)) {
-              addHistoryItemPreview(item, element, "history-hover");
-            }
-          }
+          if (!historyItemId) return;
+          const item = historyItems2().find((innerItem) => innerItem.id === historyItemId);
+          if (!item) return;
+          showHistoryItemPreview(item, "history-hover");
         };
         const handleHistoryButtonHover = (isHovered) => {
           cancelHistoryHoverOpenTimeout();
@@ -16725,10 +16767,7 @@ var init_core = __esm({
         };
         const showAllHistoryItemPreviews = () => {
           for (const item of historyItems2()) {
-            const element = historyElementMap.get(item.id);
-            if (element && isElementConnected(element)) {
-              addHistoryItemPreview(item, element, "history-all-hover");
-            }
+            showHistoryItemPreview(item, "history-all-hover");
           }
         };
         const handleHistoryClear = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Select context for coding agents directly from your website",
   "keywords": [
     "agent",