Fix toggle functionality and improve keyboard control

resources/js/index.js

@@ -1,4 +1,3 @@
-
 function createPopup() {
     const popup = document.createElement('div');
     popup.classList.add('theme-inspector-container');
@@ -94,19 +93,25 @@ document.body.addEventListener('mouseenter', (e) => {
 }, true);
 
 document.body.addEventListener('mouseleave', (e) => {
-    // Hide the popup when the mouse leaves the target
     if (e.target.matches('[class*="fi-"]') && !isFrozen) {
         hidePopup(popup);
     }
 }, true);
 
-document.addEventListener('keydown', (e) => {
-    if (e.altKey) {
-        isFrozen = true;
-        popup.style.pointerEvents = 'auto';
-    }
-});
+if (window.filamentData.toggle === true) {
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Alt') {
+            isFrozen = !isFrozen;
+        }
+    });
+} else {
+    document.addEventListener('keydown', (e) => {
+        if (e.altKey) {
+            isFrozen = true;
+        }
+    });
 
-document.addEventListener('keyup', (e) => {
-    if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
-});
+    document.addEventListener('keyup', (e) => {
+        if (e.key === 'Alt' || e.key === 'Meta') isFrozen = false;
+    });
+}

src/FilamentThemeInspectorPlugin.php

@@ -16,11 +16,20 @@ class FilamentThemeInspectorPlugin implements Plugin
 
     protected Closure | bool $disabled = false;
 
+    protected bool $toggle = false;
+
     public function getId(): string
     {
         return 'filament-theme-inspector';
     }
 
+    public function toggle(bool $toggle = true): self
+    {
+        $this->toggle = $toggle;
+
+        return $this;
+    }
+
     public function disabled(Closure | bool $disabled = true): self
     {
         $this->disabled = $disabled;
@@ -33,13 +42,22 @@ public function isDisabled(): bool
         return $this->evaluate($this->disabled);
     }
 
+    public function isToggle(): bool
+    {
+        return $this->toggle;
+    }
+
     public function register(Panel $panel): void
     {
         if (! $this->isDisabled()) {
             FilamentAsset::register([
                 Js::make('filament-theme-inspector-scripts', __DIR__ . '/../resources/dist/filament-theme-inspector.js'),
                 Css::make('filament-theme-inspector-styles', __DIR__ . '/../resources/dist/filament-theme-inspector.css'),
             ]);
+
+            FilamentAsset::registerScriptData([
+                'toggle' => $this->isToggle(),
+            ]);
         }
     }