nextjs-ide-helper 1.4.1 → 1.5.3

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,96 @@ 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;
+const STORAGE_KEY = 'ide-helper-hidden';
+function injectToggle() {
+    if (toggleInjected || typeof document === 'undefined')
+        return;
+    toggleInjected = true;
+    // Restore saved state from localStorage
+    try {
+        const savedHidden = localStorage.getItem(STORAGE_KEY) === 'true';
+        if (savedHidden) {
+            document.body.classList.add('ide-helper-hidden');
+        }
+    }
+    catch {
+        // localStorage unavailable (private browsing)
+    }
+    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');
+        try {
+            const isHidden = document.body.classList.contains('ide-helper-hidden');
+            localStorage.setItem(STORAGE_KEY, String(isHidden));
+        }
+        catch {
+            // localStorage unavailable (private browsing)
+        }
+    };
+    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 +116,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.3",
   "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",
@@ -23,19 +23,22 @@
     "ide",
     "development",
     "webpack",
+    "turbopack",
     "plugin",
     "components"
   ],
   "author": "Your Name",
   "license": "MIT",
+  "engines": {
+    "node": ">=18.17.0"
+  },
   "peerDependencies": {
     "next": ">=13.0.0",
     "react": ">=18.0.0"
   },
-  "dependencies": { 
+  "dependencies": {
     "minimatch": "^10.0.3"
   },
-  
   "devDependencies": {
     "@babel/generator": "^7.28.0",
     "@babel/parser": "^7.28.0",
@@ -44,7 +47,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.9",
     "@types/react": "^18.3.23",
-    "jest": "^30.0.5",  
+    "jest": "^30.0.5",
     "typescript": "^5.8.3"
   },
   "repository": {

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/plugin.js

@@ -19,8 +19,25 @@ function extractBaseDirectory(globPattern) {
   return globPattern.replace(/\/\*\*.*$/, '').replace(/\/\*.*$/, '');
 }
 
+/**
+ * Convert glob pattern to regex pattern for Turbopack path matching
+ * @param {string} globPattern - The glob pattern (e.g., 'src/components/**\/*.tsx')
+ * @returns {RegExp} - A regex pattern for path matching
+ */
+function globToRegex(globPattern) {
+  // Escape special regex characters except * and **
+  let pattern = globPattern
+    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
+    .replace(/\*\*/g, '{{GLOBSTAR}}')
+    .replace(/\*/g, '[^/]*')
+    .replace(/\{\{GLOBSTAR\}\}/g, '.*');
+
+  return new RegExp(pattern);
+}
+
 /**
  * NextJS Cursor Helper plugin
+ * Supports both Webpack (Next.js 13-15) and Turbopack (Next.js 16+)
  * @param {CursorHelperOptions} options - Configuration options
  * @returns {function} Next.js config modifier function
  */
@@ -33,24 +50,75 @@ function withCursorHelper(options = {}) {
   };
 
   const config = { ...defaultOptions, ...options };
-  
+
   console.log('🔧 Plugin initialized with config:', config);
 
+  // Resolve loader path once
+  const loaderPath = require.resolve('./loader.js');
+
   return (nextConfig = {}) => {
+    // If plugin is disabled, return config unchanged
+    if (!config.enabled) {
+      console.log('🔧 Plugin disabled, returning original config');
+      return nextConfig;
+    }
+
+    // Extract base directories from glob patterns for webpack's include
+    const includeDirectories = [...new Set(
+      config.componentPaths.map(p => extractBaseDirectory(p))
+    )].map(p => path.resolve(config.projectRoot, p));
+
+    // Create path regex patterns for Turbopack conditions
+    const pathPatterns = config.componentPaths.map(p => globToRegex(p));
+
+    // Build Turbopack rules for .tsx and .jsx files
+    const turbopackRules = {};
+
+    // Create loader config for Turbopack
+    const turbopackLoaderConfig = {
+      loaders: [{
+        loader: loaderPath,
+        options: config
+      }]
+    };
+
+    // Add rules for .tsx files
+    turbopackRules['*.tsx'] = pathPatterns.map(pathRegex => ({
+      condition: {
+        all: [
+          'browser',      // Client-side only
+          'development',  // Dev mode only
+          { path: pathRegex }
+        ]
+      },
+      ...turbopackLoaderConfig,
+      as: '*.tsx'
+    }));
+
+    // Add rules for .jsx files
+    turbopackRules['*.jsx'] = pathPatterns.map(pathRegex => ({
+      condition: {
+        all: [
+          'browser',
+          'development',
+          { path: pathRegex }
+        ]
+      },
+      ...turbopackLoaderConfig,
+      as: '*.jsx'
+    }));
+
     return {
       ...nextConfig,
+
+      // Webpack config (Next.js 13-15, or Next.js 16+ with --webpack flag)
       webpack: (webpackConfig, context) => {
         const { dev, isServer } = context;
-        
+
         console.log('🔧 Webpack config called:', { dev, isServer, enabled: config.enabled });
 
         // Only apply in development and for client-side
-        if (config.enabled && dev && !isServer) {
-          // Extract base directories from glob patterns for webpack's include
-          const includeDirectories = [...new Set(
-            config.componentPaths.map(p => extractBaseDirectory(p))
-          )].map(p => path.resolve(config.projectRoot, p));
-          
+        if (dev && !isServer) {
           console.log('🔧 Adding webpack rule with include directories:', includeDirectories);
 
           const rule = {
@@ -58,7 +126,7 @@ function withCursorHelper(options = {}) {
             include: includeDirectories,
             use: [
               {
-                loader: require.resolve('./loader.js'),
+                loader: loaderPath,
                 options: config
               }
             ],
@@ -68,7 +136,7 @@ function withCursorHelper(options = {}) {
           webpackConfig.module.rules.unshift(rule);
           console.log('🔧 Webpack rule added successfully');
         } else {
-          console.log('🔧 Plugin conditions not met, skipping webpack rule');
+          console.log('🔧 Webpack conditions not met (dev:', dev, 'isServer:', isServer, ')');
         }
 
         // Call the existing webpack function if it exists
@@ -77,6 +145,15 @@ function withCursorHelper(options = {}) {
         }
 
         return webpackConfig;
+      },
+
+      // Turbopack config (Next.js 16+ default bundler)
+      turbopack: {
+        ...nextConfig.turbopack,
+        rules: {
+          ...nextConfig.turbopack?.rules,
+          ...turbopackRules
+        }
       }
     };
   };

package/src/withIdeButton.tsx

@@ -1,6 +1,81 @@
 '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;
+
+const STORAGE_KEY = 'ide-helper-hidden';
+
+function injectToggle() {
+  if (toggleInjected || typeof document === 'undefined') return;
+  toggleInjected = true;
+
+  // Restore saved state from localStorage
+  try {
+    const savedHidden = localStorage.getItem(STORAGE_KEY) === 'true';
+    if (savedHidden) {
+      document.body.classList.add('ide-helper-hidden');
+    }
+  } catch {
+    // localStorage unavailable (private browsing)
+  }
+
+  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');
+    try {
+      const isHidden = document.body.classList.contains('ide-helper-hidden');
+      localStorage.setItem(STORAGE_KEY, String(isHidden));
+    } catch {
+      // localStorage unavailable (private browsing)
+    }
+  };
+  document.body.appendChild(btn);
+}
+
 interface IdeButtonProps {
   filePath: string;
   projectRoot?: string;
@@ -8,30 +83,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 +149,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 +164,4 @@ export function withIdeButton<T extends object>(
   WithIdeButtonComponent.displayName = `withIdeButton(${WrappedComponent.displayName || WrappedComponent.name})`;
 
   return WithIdeButtonComponent;
-}
+}