feat: add MageForge Toolbar with basic audits

LICENSE

@@ -685,3 +685,12 @@ may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
 <https://www.gnu.org/licenses/why-not-lgpl.html>.
+
+
+-------------------------------------------------------------------------------
+Third-Party Notices
+-------------------------------------------------------------------------------
+
+This project includes icons from Tabler Icons (https://tabler.io/icons).
+Copyright (c) 2020-2024 Paweł Kuna (codecalm)
+Licensed under the MIT License (https://github.com/tabler/tabler-icons/blob/main/LICENSE)

README.md

@@ -145,6 +145,14 @@ bin/magento mageforge:theme:inspector disable
 - **License**: [LICENSE](LICENSE)
 - **Changelog**: [CHANGELOG](CHANGELOG.md)
 
+## Credits
+
+MageForge uses the following third-party libraries:
+
+| Library | Author | License |
+| ------- | ------ | ------- |
+| [Tabler Icons](https://tabler.io/icons) | codecalm | [MIT](https://github.com/tabler/tabler-icons/blob/main/LICENSE) |
+
 ---
 
 Thank you for using MageForge!

src/Block/Inspector.php

@@ -18,6 +18,7 @@
 class Inspector extends Template
 {
     private const XML_PATH_INSPECTOR_ENABLED = 'dev/mageforge_inspector/enabled';
+    private const XML_PATH_SHOW_BUTTON_LABELS = 'mageforge/inspector/show_button_labels';
 
     /**
      * @param Context $context
@@ -72,6 +73,16 @@ public function getCssUrl(): string
         return $this->getViewFileUrl('OpenForgeProject_MageForge::css/inspector.css');
     }
 
+    /**
+     * Get Toolbar CSS file URL
+     *
+     * @return string
+     */
+    public function getToolbarCssUrl(): string
+    {
+        return $this->getViewFileUrl('OpenForgeProject_MageForge::css/toolbar.css');
+    }
+
     /**
      * Get JS file URL
      *
@@ -82,6 +93,28 @@ public function getJsUrl(): string
         return $this->getViewFileUrl('OpenForgeProject_MageForge::js/inspector.js');
     }
 
+    /**
+     * Get Toolbar JS file URL
+     *
+     * @return string
+     */
+    public function getToolbarJsUrl(): string
+    {
+        return $this->getViewFileUrl('OpenForgeProject_MageForge::js/toolbar.js');
+    }
+
+    /**
+     * Whether button labels should be displayed in the toolbar
+     *
+     * @return bool
+     */
+    public function getShowButtonLabels(): bool
+    {
+        $value = $this->scopeConfig->getValue(self::XML_PATH_SHOW_BUTTON_LABELS);
+        // Default to true when not explicitly set to '0'
+        return $value !== '0';
+    }
+
     /**
      * Get configured theme
      *

src/Console/Command/Dev/InspectorCommand.php

@@ -175,7 +175,9 @@ private function showStatus(): int
             ]);
         } elseif (!$isEnabled) {
             $this->io->newLine();
-            $this->io->note('Run "bin/magento mageforge:theme:inspector enable" to activate the inspector.');
+            $this->io->note(
+                'Inspector is disabled. Run "bin/magento mageforge:theme:inspector enable" to activate it.'
+            );
         } else {
             $this->io->newLine();
             $this->io->writeln('<info>✓</info> Inspector is active and ready to use!');

src/etc/adminhtml/system.xml

@@ -5,22 +5,29 @@
             <label>MageForge</label>
         </tab>
         <section id="mageforge_inspector" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
-            <label>Inspector</label>
+            <label>Toolbar</label>
             <tab>mageforge</tab>
             <resource>OpenForgeProject_MageForge::config_inspector</resource>
             <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
-                <label>General Settings</label>
+                <label>General Toolbar Settings</label>
                 <field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
-                    <label>Enabled</label>
+                    <label>Show Toolbar</label>
                     <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                     <config_path>dev/mageforge_inspector/enabled</config_path>
+                    <comment>Enable or disable the MageForge Toolbar. Default: Yes.</comment>
                 </field>
                 <field id="theme" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                     <label>Theme</label>
                     <source_model>OpenForgeProject\MageForge\Model\Config\Source\InspectorTheme</source_model>
                     <config_path>mageforge/inspector/theme</config_path>
                     <comment>Choose between Dark, Light, or Auto (System Preference) theme.</comment>
                 </field>
+                <field id="show_button_labels" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Show Button Labels</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <config_path>mageforge/inspector/show_button_labels</config_path>
+                    <comment>Show text labels on the Toolbar and Inspector buttons. Default: Yes.</comment>
+                </field>
             </group>
         </section>
     </system>

src/etc/config.xml

@@ -4,12 +4,13 @@
       <default>
             <dev>
                   <mageforge_inspector>
-                        <enabled>0</enabled>
+                        <enabled>1</enabled>
                   </mageforge_inspector>
             </dev>
             <mageforge>
                 <inspector>
                     <theme>dark</theme>
+                    <show_button_labels>1</show_button_labels>
                 </inspector>
             </mageforge>
       </default>

src/view/frontend/templates/inspector.phtml

@@ -12,6 +12,7 @@
  */
 ?>
 <!-- MageForge Inspector Assets -->
+<link rel="stylesheet" type="text/css" href="<?= $escaper->escapeUrl($block->getToolbarCssUrl()) ?>" />
 <link rel="stylesheet" type="text/css" href="<?= $escaper->escapeUrl($block->getCssUrl()) ?>" />
 
 <!-- Alpine.js Bootstrap (load only if not already present) -->
@@ -60,8 +61,15 @@ JS;
 ?>
 <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $alpineBootstrap, false) ?>
 
+<script type="module" src="<?= $escaper->escapeUrl($block->getToolbarJsUrl()) ?>"></script>
 <script type="module" src="<?= $escaper->escapeUrl($block->getJsUrl()) ?>"></script>
 
+<!-- MageForge Toolbar Component -->
+<div class="mageforge-toolbar-root"
+     x-data="mageforgeToolbar"
+     data-theme="<?= $escaper->escapeHtmlAttr($block->getTheme()) ?>"
+     data-show-labels="<?= $block->getShowButtonLabels() ? '1' : '0' ?>"></div>
+
 <!-- MageForge Inspector Component Wrapper -->
 <div class="mageforge-inspector"
      x-data="mageforgeInspector"

src/view/frontend/web/css/audits/tab-order.css

@@ -0,0 +1,60 @@
+/**
+ * MageForge Toolbar Audit – Tab Order
+ *
+ * Injected on-demand by the tab-order audit.
+ * Relies on CSS custom properties defined in toolbar.css :root.
+ */
+
+.mageforge-tab-order-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999997;
+    overflow: visible;
+}
+
+.mageforge-tab-order-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+}
+
+.mageforge-tab-order-line {
+    stroke: var(--mageforge-color-blue);
+    stroke-width: 1.5;
+    stroke-opacity: 0.5;
+    stroke-dasharray: 4 3;
+    fill: none;
+}
+
+.mageforge-tab-order-line--negative {
+    stroke: var(--mageforge-color-red);
+}
+
+.mageforge-tab-order-badge {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--mageforge-color-blue);
+    color: var(--mageforge-color-white);
+    font-family: var(--mageforge-font-family);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transform: translate(-50%, -50%);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+
+.mageforge-tab-order-badge--negative {
+    background: var(--mageforge-color-red);
+}

src/view/frontend/web/css/inspector.css

@@ -77,30 +77,25 @@
 }
 
 /* ============================================================================
-   Floating Button
+   Inspector Float Button
    ========================================================================== */
 
 .mageforge-inspector-float-button {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
     height: 36px;
     padding: 0 14px;
     background: linear-gradient(135deg, var(--mageforge-color-blue) 0%, var(--mageforge-color-blue-dark) 100%);
     color: white;
     border: none;
-    border-radius: 10px;
+    border-radius: 5px;
     cursor: pointer;
-    z-index: 9999998;
     display: flex;
     align-items: center;
     gap: 8px;
     font-family: var(--mageforge-font-family);
-    font-size: 14px;
+    font-size: 0.75rem;
     font-weight: 600;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    pointer-events: auto;
     backdrop-filter: blur(8px);
     letter-spacing: 0.025em;
 }
@@ -114,7 +109,6 @@
     transform: translateY(0);
 }
 
-/* Active state (inspector open) */
 .mageforge-inspector-float-button.mageforge-active {
     background: linear-gradient(135deg, var(--mageforge-color-green) 0%, var(--mageforge-color-green-dark) 100%);
     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 8px 20px rgba(16, 185, 129, 0.5);
@@ -292,14 +286,6 @@
         max-width: calc(100vw - 40px);
         font-size: 10px;
     }
-
-    .mageforge-inspector-float-button {
-        bottom: 10px;
-        left: 10px;
-        font-size: 11px;
-        height: 32px;
-        padding: 0 12px;
-    }
 }
 
 @media (max-width: 480px) {