nextjs-ide-helper 1.4.1 → 1.5.2

package/README.md

@@ -8,7 +8,8 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 - 🎯 **Smart Detection**: Only processes components in specified directories
 - 🔧 **Zero Configuration**: Works out of the box with sensible defaults (Cursor as default IDE)
 - 🏎️ **Development Only**: Only active in development mode, no production overhead
-- 🎨 **Non-intrusive**: Uses absolute positioning to avoid layout disruption
+- 🎨 **Non-intrusive**: Minimal blue dot indicators that don't disrupt your layout
+- 👁️ **Toggle Visibility**: Floating button to show/hide all IDE dots instantly
 - ⚡ **Hydration Safe**: No SSR/client hydration mismatches
 - 📱 **TypeScript Support**: Full TypeScript definitions included
 - 🔌 **Multi-IDE Support**: Supports Cursor, VS Code, WebStorm, and Atom
@@ -18,8 +19,7 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 ## Installation
 
 ```bash
-# or
-# or
+npm install nextjs-ide-helper
 ```
 
 ## Quick Start
@@ -29,7 +29,7 @@ A Next.js plugin that automatically adds IDE buttons to React components in deve
 Add the plugin to your `next.config.js`:
 
 ```javascript
-const withIdeHelper = require('nextjs-ide-plugin');
+const withIdeHelper = require('nextjs-ide-helper');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -43,12 +43,30 @@ module.exports = withIdeHelper()(nextConfig);
 
 All React components in your `src/components` directory will automatically get IDE buttons in development mode (defaults to Cursor IDE).
 
+## User Interface
+
+### IDE Indicator Dots
+
+Each wrapped component displays a small **blue dot** (10x10px) in the top-right corner:
+- **Click** the dot to open the component's source file in your IDE
+- **Hover** to see the file path tooltip
+- The dots are subtle (60% opacity) and brighten on hover
+
+### Toggle Button
+
+A **floating toggle button** appears in the bottom-right corner of your page:
+- **Blue** = IDE dots are visible
+- **Gray** = IDE dots are hidden
+- **Click** to toggle all dots on/off instantly
+
+This lets you quickly hide the dots when you want an unobstructed view of your app, then bring them back when needed.
+
 ## Configuration
 
 You can customize the plugin behavior:
 
 ```javascript
-const withIdeHelper = require('nextjs-ide-plugin');
+const withIdeHelper = require('nextjs-ide-helper');
 
 const nextConfig = {
   // your existing config
@@ -57,7 +75,7 @@ const nextConfig = {
 module.exports = withIdeHelper({
   componentPaths: ['src/components', 'components', 'src/ui'], // directories to scan (supports glob patterns)
   projectRoot: process.cwd(), // project root directory
-  importPath: 'nextjs-ide-plugin/withIdeButton', // import path for the HOC
+  importPath: 'nextjs-ide-helper/withIdeButton', // import path for the HOC
   enabled: process.env.NODE_ENV === 'development', // enable/disable
   ideType: 'cursor' // IDE to use: 'cursor', 'vscode', 'webstorm', 'atom'
 })(nextConfig);
@@ -69,7 +87,7 @@ module.exports = withIdeHelper({
 |--------|------|---------|-------------|
 | `componentPaths` | `string[]` | `['src/components']` | Directories to scan for React components (supports glob patterns) |
 | `projectRoot` | `string` | `process.cwd()` | Root directory of your project |
-| `importPath` | `string` | `'nextjs-ide-plugin/withIdeButton'` | Import path for the withIdeButton HOC |
+| `importPath` | `string` | `'nextjs-ide-helper/withIdeButton'` | Import path for the withIdeButton HOC |
 | `enabled` | `boolean` | `process.env.NODE_ENV === 'development'` | Enable/disable the plugin |
 | `ideType` | `'cursor' \| 'vscode' \| 'webstorm' \| 'atom'` | `'cursor'` | IDE to open files in |
 
@@ -100,7 +118,7 @@ module.exports = withIdeHelper({
 You can also manually wrap components:
 
 ```tsx
-import { withIdeButton } from 'nextjs-ide-plugin';
+import { withIdeButton } from 'nextjs-ide-helper';
 
 const MyComponent = () => {
   return <div>Hello World</div>;
@@ -257,7 +275,7 @@ After (automatically transformed):
 ```tsx
 // src/components/Button.tsx (transformed by the plugin)
 import React from 'react';
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 const Button = ({ children, onClick }) => {
   return (
@@ -297,7 +315,7 @@ export const SecondaryButton = ({ children, onClick }) => {
 After (automatically transformed):
 ```tsx
 // src/components/Buttons.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 export const PrimaryButton = withIdeButton(({ children, onClick }) => {
   return (
@@ -343,7 +361,7 @@ export default Layout;
 After (automatically transformed):
 ```tsx
 // src/components/Layout.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 export const Header = withIdeButton(() => <header>My App Header</header>, 'src/components/Layout.tsx', {
   projectRoot: '/path/to/project',
@@ -381,7 +399,7 @@ export default function Header() {
 After (automatically transformed):
 ```tsx
 // src/components/Header.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 function Header() {
   return <header>My App Header</header>;
@@ -405,7 +423,7 @@ export default () => {
 After (automatically transformed):
 ```tsx
 // src/components/Footer.tsx (transformed by the plugin)
-import { withIdeButton } from 'nextjs-ide-plugin/withIdeButton';
+import { withIdeButton } from 'nextjs-ide-helper/withIdeButton';
 
 export default withIdeButton(() => {
   return <footer>© 2025 My App</footer>;
@@ -456,6 +474,17 @@ See [CHANGELOG.md](./CHANGELOG.md) for detailed release notes.
 
 ### Recent Releases
 
+### 1.5.0 - Toggle Visibility
+- Added floating toggle button to show/hide all IDE dots
+- Toggle button appears in bottom-right corner
+- Blue when dots visible, gray when hidden
+- State synchronized across all components via custom events
+
+### 1.4.1 - Minimal UI
+- Changed IDE buttons from text+emoji to minimal 10x10px blue dots
+- Reduced visual footprint for less intrusive development experience
+- Removed console.log statements from plugin
+
 ### 1.4.0 - Named Export Support
 - Added comprehensive support for ES6 named exports in React components
 - Support for `export const Component = () => {}` and `export function Component() {}` patterns

package/lib/loader.js

@@ -221,22 +221,28 @@ module.exports = function cursorButtonLoader(source) {
       modified = true;
     } else if (namedExport.declaration) {
       // Handle export function Component() {}
-      const funcDeclaration = namedExport.declaration;
+      // Convert FunctionDeclaration to FunctionExpression (preserves name for stack traces)
+      const funcDecl = namedExport.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
       const wrappedCall = t.callExpression(
         t.identifier('withIdeButton'),
         [
-          t.identifier(namedExport.name),
+          funcExpr,
           t.stringLiteral(relativePath),
           t.objectExpression([
             t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
           ])
         ]
       );
-      
-      // Insert the function declaration before the export
-      namedExport.path.insertBefore(funcDeclaration);
-      
-      // Replace the export with wrapped call
+
+      // Replace: export function X() {} -> export const X = withIdeButton(function X() {}, ...)
       namedExport.path.node.declaration = t.variableDeclaration('const', [
         t.variableDeclarator(t.identifier(namedExport.name), wrappedCall)
       ]);
@@ -290,15 +296,33 @@ module.exports = function cursorButtonLoader(source) {
       );
     }
 
-    // If the export is a named function or class declaration, we need to handle it differently
-    if (!isAnonymousComponent && 
-        (t.isFunctionDeclaration(defaultExportPath.node.declaration) || 
-         t.isClassDeclaration(defaultExportPath.node.declaration))) {
-      // Insert the function/class declaration before the export
+    // If the export is a named function declaration, convert to function expression inline
+    if (!isAnonymousComponent && t.isFunctionDeclaration(defaultExportPath.node.declaration)) {
+      const funcDecl = defaultExportPath.node.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
+      // Wrap the function expression directly
+      wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          funcExpr,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+      defaultExportPath.node.declaration = wrappedCall;
+    } else if (!isAnonymousComponent && t.isClassDeclaration(defaultExportPath.node.declaration)) {
+      // For classes, we still need to separate declaration (can't inline class expressions easily)
       const declaration = defaultExportPath.node.declaration;
       defaultExportPath.insertBefore(declaration);
-      
-      // Replace the export declaration with the wrapped call
       defaultExportPath.node.declaration = wrappedCall;
     } else {
       // For other cases (identifier, variable declaration, anonymous functions), just replace the declaration

package/lib/withIdeButton.js

@@ -4,27 +4,76 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withIdeButton = withIdeButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+// Inject global styles once
+let stylesInjected = false;
+function injectStyles() {
+    if (stylesInjected || typeof document === 'undefined')
+        return;
+    stylesInjected = true;
+    const style = document.createElement('style');
+    style.id = 'ide-helper-styles';
+    style.textContent = `
+    .ide-helper-dot { display: block; }
+    .ide-helper-hidden .ide-helper-dot { display: none; }
+    .ide-helper-toggle {
+      background: transparent;
+      border: 2px solid #007acc !important;
+      box-sizing: border-box;
+    }
+    .ide-helper-hidden .ide-helper-toggle {
+      background: #666;
+      border-color: #666 !important;
+    }
+  `;
+    document.head.appendChild(style);
+}
+// Toggle button - renders once via singleton pattern
+let toggleInjected = false;
+function injectToggle() {
+    if (toggleInjected || typeof document === 'undefined')
+        return;
+    toggleInjected = true;
+    const btn = document.createElement('button');
+    btn.className = 'ide-helper-toggle';
+    btn.title = 'Toggle IDE dots (click to show/hide)';
+    Object.assign(btn.style, {
+        position: 'fixed',
+        bottom: '16px',
+        right: '16px',
+        width: '18px',
+        height: '18px',
+        border: 'none',
+        borderRadius: '50%',
+        padding: '0',
+        cursor: 'pointer',
+        zIndex: '9999',
+        opacity: '0.7',
+        transition: 'opacity 0.2s'
+    });
+    btn.onmouseenter = () => btn.style.opacity = '1';
+    btn.onmouseleave = () => btn.style.opacity = '0.7';
+    btn.onclick = () => document.body.classList.toggle('ide-helper-hidden');
+    document.body.appendChild(btn);
+}
 const IdeButton = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+    (0, react_1.useEffect)(() => {
+        injectStyles();
+        injectToggle();
+    }, []);
     const getIdeUrl = (ide, path) => {
         const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
         switch (ide) {
-            case 'cursor':
-                return `cursor://file${fullPath}`;
-            case 'vscode':
-                return `vscode://file${fullPath}`;
-            case 'webstorm':
-                return `webstorm://open?file=${fullPath}`;
-            case 'atom':
-                return `atom://open?path=${fullPath}`;
-            default:
-                return `cursor://file${fullPath}`;
+            case 'cursor': return `cursor://file${fullPath}`;
+            case 'vscode': return `vscode://file${fullPath}`;
+            case 'webstorm': return `webstorm://open?file=${fullPath}`;
+            case 'atom': return `atom://open?path=${fullPath}`;
+            default: return `cursor://file${fullPath}`;
         }
     };
     const handleClick = () => {
-        const url = getIdeUrl(ideType, filePath);
-        window.open(url, '_blank');
+        window.open(getIdeUrl(ideType, filePath), '_blank');
     };
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: handleClick, style: {
+    return ((0, jsx_runtime_1.jsx)("button", { className: "ide-helper-dot", onClick: handleClick, style: {
             position: 'absolute',
             top: '4px',
             right: '4px',
@@ -47,7 +96,6 @@ function withIdeButton(WrappedComponent, filePath, options = {}) {
         (0, react_1.useEffect)(() => {
             setIsClient(true);
         }, []);
-        // In production or when disabled, just return the component without wrapper
         if (!enabled || !isClient) {
             return (0, jsx_runtime_1.jsx)(WrappedComponent, { ...props });
         }

package/lib/withIdeButton.tsx

@@ -1,6 +1,61 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 
+// Inject global styles once
+let stylesInjected = false;
+
+function injectStyles() {
+  if (stylesInjected || typeof document === 'undefined') return;
+  stylesInjected = true;
+
+  const style = document.createElement('style');
+  style.id = 'ide-helper-styles';
+  style.textContent = `
+    .ide-helper-dot { display: block; }
+    .ide-helper-hidden .ide-helper-dot { display: none; }
+    .ide-helper-toggle {
+      background: transparent;
+      border: 2px solid #007acc !important;
+      box-sizing: border-box;
+    }
+    .ide-helper-hidden .ide-helper-toggle {
+      background: #666;
+      border-color: #666 !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// Toggle button - renders once via singleton pattern
+let toggleInjected = false;
+
+function injectToggle() {
+  if (toggleInjected || typeof document === 'undefined') return;
+  toggleInjected = true;
+
+  const btn = document.createElement('button');
+  btn.className = 'ide-helper-toggle';
+  btn.title = 'Toggle IDE dots (click to show/hide)';
+  Object.assign(btn.style, {
+    position: 'fixed',
+    bottom: '16px',
+    right: '16px',
+    width: '18px',
+    height: '18px',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '0',
+    cursor: 'pointer',
+    zIndex: '9999',
+    opacity: '0.7',
+    transition: 'opacity 0.2s'
+  });
+  btn.onmouseenter = () => btn.style.opacity = '1';
+  btn.onmouseleave = () => btn.style.opacity = '0.7';
+  btn.onclick = () => document.body.classList.toggle('ide-helper-hidden');
+  document.body.appendChild(btn);
+}
+
 interface IdeButtonProps {
   filePath: string;
   projectRoot?: string;
@@ -8,30 +63,29 @@ interface IdeButtonProps {
 }
 
 const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+  useEffect(() => {
+    injectStyles();
+    injectToggle();
+  }, []);
+
   const getIdeUrl = (ide: string, path: string) => {
     const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
-    
     switch (ide) {
-      case 'cursor':
-        return `cursor://file${fullPath}`;
-      case 'vscode':
-        return `vscode://file${fullPath}`;
-      case 'webstorm':
-        return `webstorm://open?file=${fullPath}`;
-      case 'atom':
-        return `atom://open?path=${fullPath}`;
-      default:
-        return `cursor://file${fullPath}`;
+      case 'cursor': return `cursor://file${fullPath}`;
+      case 'vscode': return `vscode://file${fullPath}`;
+      case 'webstorm': return `webstorm://open?file=${fullPath}`;
+      case 'atom': return `atom://open?path=${fullPath}`;
+      default: return `cursor://file${fullPath}`;
     }
   };
 
   const handleClick = () => {
-    const url = getIdeUrl(ideType, filePath);
-    window.open(url, '_blank');
+    window.open(getIdeUrl(ideType, filePath), '_blank');
   };
 
   return (
     <button
+      className="ide-helper-dot"
       onClick={handleClick}
       style={{
         position: 'absolute',
@@ -75,7 +129,6 @@ export function withIdeButton<T extends object>(
       setIsClient(true);
     }, []);
 
-    // In production or when disabled, just return the component without wrapper
     if (!enabled || !isClient) {
       return <WrappedComponent {...props} />;
     }
@@ -91,4 +144,4 @@ export function withIdeButton<T extends object>(
   WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
 
   return WithIdeButtonComponent;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-ide-helper",
-  "version": "1.4.1",
+  "version": "1.5.2",
   "description": "A Next.js plugin that automatically adds IDE buttons to React components for seamless IDE integration. Supports Cursor, VS Code, WebStorm, and Atom.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/loader.js

@@ -221,22 +221,28 @@ module.exports = function cursorButtonLoader(source) {
       modified = true;
     } else if (namedExport.declaration) {
       // Handle export function Component() {}
-      const funcDeclaration = namedExport.declaration;
+      // Convert FunctionDeclaration to FunctionExpression (preserves name for stack traces)
+      const funcDecl = namedExport.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
       const wrappedCall = t.callExpression(
         t.identifier('withIdeButton'),
         [
-          t.identifier(namedExport.name),
+          funcExpr,
           t.stringLiteral(relativePath),
           t.objectExpression([
             t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
           ])
         ]
       );
-      
-      // Insert the function declaration before the export
-      namedExport.path.insertBefore(funcDeclaration);
-      
-      // Replace the export with wrapped call
+
+      // Replace: export function X() {} -> export const X = withIdeButton(function X() {}, ...)
       namedExport.path.node.declaration = t.variableDeclaration('const', [
         t.variableDeclarator(t.identifier(namedExport.name), wrappedCall)
       ]);
@@ -290,15 +296,33 @@ module.exports = function cursorButtonLoader(source) {
       );
     }
 
-    // If the export is a named function or class declaration, we need to handle it differently
-    if (!isAnonymousComponent && 
-        (t.isFunctionDeclaration(defaultExportPath.node.declaration) || 
-         t.isClassDeclaration(defaultExportPath.node.declaration))) {
-      // Insert the function/class declaration before the export
+    // If the export is a named function declaration, convert to function expression inline
+    if (!isAnonymousComponent && t.isFunctionDeclaration(defaultExportPath.node.declaration)) {
+      const funcDecl = defaultExportPath.node.declaration;
+      const funcExpr = t.functionExpression(
+        funcDecl.id,        // Keep the name for debugging
+        funcDecl.params,
+        funcDecl.body,
+        funcDecl.generator,
+        funcDecl.async
+      );
+
+      // Wrap the function expression directly
+      wrappedCall = t.callExpression(
+        t.identifier('withIdeButton'),
+        [
+          funcExpr,
+          t.stringLiteral(relativePath),
+          t.objectExpression([
+            t.objectProperty(t.identifier('projectRoot'), t.stringLiteral(projectRoot))
+          ])
+        ]
+      );
+      defaultExportPath.node.declaration = wrappedCall;
+    } else if (!isAnonymousComponent && t.isClassDeclaration(defaultExportPath.node.declaration)) {
+      // For classes, we still need to separate declaration (can't inline class expressions easily)
       const declaration = defaultExportPath.node.declaration;
       defaultExportPath.insertBefore(declaration);
-      
-      // Replace the export declaration with the wrapped call
       defaultExportPath.node.declaration = wrappedCall;
     } else {
       // For other cases (identifier, variable declaration, anonymous functions), just replace the declaration

package/src/withIdeButton.tsx

@@ -1,6 +1,61 @@
 'use client';
 import React, { useState, useEffect } from 'react';
 
+// Inject global styles once
+let stylesInjected = false;
+
+function injectStyles() {
+  if (stylesInjected || typeof document === 'undefined') return;
+  stylesInjected = true;
+
+  const style = document.createElement('style');
+  style.id = 'ide-helper-styles';
+  style.textContent = `
+    .ide-helper-dot { display: block; }
+    .ide-helper-hidden .ide-helper-dot { display: none; }
+    .ide-helper-toggle {
+      background: transparent;
+      border: 2px solid #007acc !important;
+      box-sizing: border-box;
+    }
+    .ide-helper-hidden .ide-helper-toggle {
+      background: #666;
+      border-color: #666 !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// Toggle button - renders once via singleton pattern
+let toggleInjected = false;
+
+function injectToggle() {
+  if (toggleInjected || typeof document === 'undefined') return;
+  toggleInjected = true;
+
+  const btn = document.createElement('button');
+  btn.className = 'ide-helper-toggle';
+  btn.title = 'Toggle IDE dots (click to show/hide)';
+  Object.assign(btn.style, {
+    position: 'fixed',
+    bottom: '16px',
+    right: '16px',
+    width: '18px',
+    height: '18px',
+    border: 'none',
+    borderRadius: '50%',
+    padding: '0',
+    cursor: 'pointer',
+    zIndex: '9999',
+    opacity: '0.7',
+    transition: 'opacity 0.2s'
+  });
+  btn.onmouseenter = () => btn.style.opacity = '1';
+  btn.onmouseleave = () => btn.style.opacity = '0.7';
+  btn.onclick = () => document.body.classList.toggle('ide-helper-hidden');
+  document.body.appendChild(btn);
+}
+
 interface IdeButtonProps {
   filePath: string;
   projectRoot?: string;
@@ -8,30 +63,29 @@ interface IdeButtonProps {
 }
 
 const IdeButton: React.FC<IdeButtonProps> = ({ filePath, projectRoot, ideType = 'cursor' }) => {
+  useEffect(() => {
+    injectStyles();
+    injectToggle();
+  }, []);
+
   const getIdeUrl = (ide: string, path: string) => {
     const fullPath = projectRoot ? `${projectRoot}/${path}` : path;
-    
     switch (ide) {
-      case 'cursor':
-        return `cursor://file${fullPath}`;
-      case 'vscode':
-        return `vscode://file${fullPath}`;
-      case 'webstorm':
-        return `webstorm://open?file=${fullPath}`;
-      case 'atom':
-        return `atom://open?path=${fullPath}`;
-      default:
-        return `cursor://file${fullPath}`;
+      case 'cursor': return `cursor://file${fullPath}`;
+      case 'vscode': return `vscode://file${fullPath}`;
+      case 'webstorm': return `webstorm://open?file=${fullPath}`;
+      case 'atom': return `atom://open?path=${fullPath}`;
+      default: return `cursor://file${fullPath}`;
     }
   };
 
   const handleClick = () => {
-    const url = getIdeUrl(ideType, filePath);
-    window.open(url, '_blank');
+    window.open(getIdeUrl(ideType, filePath), '_blank');
   };
 
   return (
     <button
+      className="ide-helper-dot"
       onClick={handleClick}
       style={{
         position: 'absolute',
@@ -75,7 +129,6 @@ export function withIdeButton<T extends object>(
       setIsClient(true);
     }, []);
 
-    // In production or when disabled, just return the component without wrapper
     if (!enabled || !isClient) {
       return <WrappedComponent {...props} />;
     }
@@ -91,4 +144,4 @@ export function withIdeButton<T extends object>(
   WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
 
   return WithIdeButtonComponent;
-}
+}