=== Toolbox for Elementor ===
Contributors: sabbir37
Donate link: https://profiles.wordpress.org/sabbir37/
Tags: elementor, elementor addon, productivity, editor, web design
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Professional diagnostic HUD & productivity toolkit for Elementor. Live alignment grids, rulers, spacing inspector, device previews, and audits.

== Description ==

**Toolbox for Elementor** is an all-in-one diagnostic HUD (Heads-Up Display) and workflow productivity toolkit designed specifically for WordPress creators, UI/UX designers, and front-end developers building with Elementor.

Stop toggling between browser DevTools and the Elementor panel. Say goodbye to repetitive margin/padding calculations, unexpected Z-index stacking collisions, and responsive breakpoint guesswork. Toolbox for Elementor embeds professional design-system overlays, precision pixel rulers, computed spacing visualizers, typographic hierarchy checks, and WCAG accessibility audits right inside your active Elementor editor canvas.

### Why Designers & Developers Choose Toolbox for Elementor

* **Zero Frontend Bloat**: Assets, scripts, and stylesheets load exclusively inside the active Elementor editing session. Live visitors experience zero impact on speed, Core Web Vitals, or page weight.
* **Non-Destructive Workflow**: Visual overlays, rulers, guides, crosshairs, and inspection badges are non-destructive visual guides. They never alter your DOM structure, post content, or database records.
* **Modern Container Architecture**: 100% compatible with modern Elementor Flexbox Containers, CSS Grid Containers, and classic Section/Column structures.
* **Pixel-Perfect Precision**: Build websites with the rigor of Figma or Sketch directly on live WordPress pages.

---

### Core Diagnostic Tools & Features

* **Global Class Crosshair**: Hover over any container or widget to instantly detect and pulse-highlight every other element across the canvas sharing the identical custom CSS class. Ideal for micro-auditing custom design systems and utility classes.
* **Live Alignment Grid Overlay**: Display an adjustable layout grid on top of your live canvas. Freely customize column width (`vw`, `px`), row/gutter height (`vh`, `px`), and grid line colors with real-time opacity control.
* **Precision Canvas Rulers & Drag Guidelines**: Pull interactive horizontal and vertical guide lines from top and left pixel rulers. Measure distances with single-pixel accuracy and align disparate widgets effortlessly.
* **Spacing Compare & Live Margin/Padding Inspector**: Hover over any element to reveal real-time computed box model overlays (margins in orange, padding in green, exact content dimensions). Includes a detachable, draggable floating Spacing HUD.
* **T-Tags Heading Structure Detector**: Visualize your entire document heading hierarchy (H1, H2, H3, H4, H5, H6) with color-coded live badges. Catch missing H1 tags, multiple H1 tags, or skipped heading levels to ensure optimal on-page SEO and GEO (Generative Engine Optimization).
* **Live Font Family Detector**: Inspect rendered font families across all headings and text blocks with live badges. Rapidly discover accidental fallback fonts, inconsistent font assignments, or rogue typography styling.
* **Live Z-Index Overlay & Stacking Map**: Solve sticky header overlaps, dropdown menu stacking bugs, and misplaced modal backdrops with instant visual badges displaying computed `z-index` values for all positioned elements.
* **Live Element Inspector HUD**: Inspect computed CSS rules, box dimensions, element tags, and classes directly on canvas without having to open the browser inspect panel.
* **Device Responsive Breakpoint Simulator**: Test layouts instantly across 24+ real-world mobile, tablet, and foldable device presets (iPhone 17/16/15 Pro Max, Galaxy S26/S25/S24 Ultra, Pixel 9 Pro XL, iPad Pro, Galaxy Z Fold 6) or enter custom viewport dimensions. Features a one-click ⇄ orientation swap button.
* **Canvas Zoom & Extended Height Controls**: Zoom canvas scale from 100vh up to 1000vh and 2000vh with smooth panning controls for effortless long-page layout reviews and sticky position debugging.
* **Instant Custom CSS Jump**: Jump directly into Elementor's Custom CSS panel with a single click, saving hours of repetitive tab switching.
* **Page Accessibility & Structure Audit (WCAG 2.1 AA)**: One-click accessibility scanner analyzing your page for color contrast ratios (4.5:1 text, 3:1 large text), missing or duplicate `<main>` landmarks, header/footer landmarks, missing image ALT tags, non-modern image formats (PNG/JPEG vs WebP), heading level skips, and touch target minimum sizes (24x24px). Includes an interactive "Info & Fixes" drawer with step-by-step Elementor remediation instructions.
* **Quick Navigator & Search Drawer**: Search and filter containers, sections, and widgets instantly via a fast slide-out drawer to jump to any element on heavy pages.
* **Customizable Control Layer**: Organize your workflow by showing or hiding individual tools, setting your default startup tool, and saving preferences per user account via user meta.
* **Global Admin Control**: Includes a clean WordPress dashboard settings screen with a master toggle switch to enable or disable editor HUD assets site-wide.

== Installation ==

1. Upload the `toolbox-for-elementor` folder to your `/wp-content/plugins/` directory, or install the plugin directly via the WordPress Plugins screen (`Plugins > Add New`).
2. Activate the plugin through the **Plugins** screen in WordPress.
3. (Optional) Go to **Toolbox** in your WordPress admin menu to review general settings.
4. Open any post, page, or template in the **Elementor Editor**. The floating Toolbox HUD will appear ready to assist you.

== Frequently Asked Questions ==

= Does Toolbox for Elementor slow down my live website or affect frontend page speed? =
No. Toolbox for Elementor is engineered with strict zero-frontend-footprint architecture. Its JavaScript controllers, CSS stylesheets, and diagnostic scripts are enqueued strictly inside the Elementor Editor environment (`elementor/editor/after_enqueue_scripts`). Not a single byte is loaded for your public website visitors, ensuring flawless 100/100 Core Web Vitals and Google PageSpeed scores.

= Is Toolbox for Elementor compatible with Elementor Flexbox Containers and CSS Grid? =
Yes. Toolbox for Elementor is built to fully support modern Elementor Flexbox Containers, CSS Grid Containers, nested containers, as well as legacy Section and Column structures. All measurement tools, alignment grids, spacing visualizers, and inspectors adapt to flex and grid properties.

= Does Toolbox for Elementor require Elementor Pro? =
No. Toolbox for Elementor works seamlessly with both Elementor Free and Elementor Pro. All diagnostic features—including rulers, alignment grids, spacing inspector, font family detector, heading audit, WCAG contrast scanner, and device simulator—function completely on free Elementor setups.

= How does the Global Class Crosshair feature work? =
When you activate the Crosshair tool and hover over any container, section, or widget with custom CSS classes, the tool automatically scans the canvas and applies a pulsing highlight badge to every other element on the page sharing the same class. This allows you to verify that design system utility classes are applied consistently across your layout.

= What does the Page Audit scanner test and how does it help with SEO and accessibility? =
The Page Audit engine scans your active page DOM according to WCAG 2.1 AA accessibility criteria and modern on-page SEO standards. It evaluates:
* Landmarks: Confirms the presence of a single `<main>` landmark, header, and footer.
* Headings: Validates single H1 presence, detects duplicate H1 tags, and flags skipped heading levels (e.g. H2 to H4).
* Color Contrast: Computes relative luminance and contrast ratio (requiring 4.5:1 for standard text, 3:1 for large text).
* Clickable Touch Targets: Flags buttons and icon controls smaller than 24x24px.
* Images: Detects missing alt text and highlights legacy image formats (suggesting WebP/AVIF).
Clicking "Info & Fixes" opens an interactive guide showing the exact Elementor panel settings to resolve each issue.

= Can I customize which tools appear in the floating HUD? =
Yes. Click the Settings icon on the floating Toolbox bar to open the Control Layer drawer. You can toggle any tool on or off, set your preferred default tool on open, or reset preferences to defaults. Your settings are automatically saved to your WordPress user meta.

= How does the Device Responsive Breakpoint Simulator work? =
The simulator row lets you choose from 24+ popular device presets (ranging from the latest iPhone and Samsung Galaxy flagships to Google Pixel phones, iPads, and foldable devices), or type custom pixel widths and heights directly into the W and H inputs. It includes an orientation swap button (⇄) to test landscape and portrait orientations without altering Elementor's internal responsive settings.

= Does this plugin alter my layout, database records, or page content? =
No. Toolbox for Elementor is completely non-destructive. Rulers, grid overlays, Z-index badges, typography markers, and spacing highlights are temporary visual aids rendered exclusively inside the editor preview layer. Deactivating the tools or saving your page will never leave behind orphan code or modify your stored Elementor content.

= Can I disable the Toolbox without deactivating the plugin? =
Yes. Navigate to **Toolbox** in your WordPress admin menu. Turn off the **Enable Toolbox in Elementor Editor** toggle and click **Save Changes**. This prevents all editor scripts and styles from loading.

= Which user roles can access the Toolbox HUD? =
Any user with permission to edit posts or pages in Elementor (by default Administrators, Editors, and Authors with edit capabilities) can use the Toolbox while inside the Elementor editor.

== Screenshots ==

1. Floating Toolbox diagnostic HUD bar inside the active Elementor editor canvas.
2. Spacing Compare and live margin & padding box model visualizer HUD.
3. Live Alignment Grid overlay with configurable column widths, gutter heights, and colors.
4. WCAG 2.1 AA Page Accessibility & Structure Audit panel with interactive Info & Fixes guide.
5. Device Responsive Breakpoint Simulator with 24+ smartphone, tablet, and foldable presets.
6. Global Class Crosshair highlighting elements sharing identical custom CSS classes.

== Changelog ==

= 1.0.0 =
* Initial public release on WordPress.org.
* Added Global Class Crosshair inspector with live pulsing badges.
* Added Live Alignment Grid overlay with configurable width, height, and color picker.
* Added Precision Rulers and drag-and-drop horizontal & vertical guidelines.
* Added Spacing Compare and live margin/padding box model visualizer.
* Added T-Tags Heading Tag hierarchy detector (H1-H6 badges) for SEO structure.
* Added Live Font Family detector badges across all rendered text elements.
* Added Live Z-Index Overlay map for resolving layer stacking conflicts.
* Added Device Responsive Breakpoint Simulator featuring 24+ modern device presets and custom dimensions.
* Added Canvas Zoom controls (100vh to 2000vh) with quick presets.
* Added Instant Custom CSS Jump button.
* Added WCAG 2.1 AA Page Accessibility and DOM structure audit scanner with Elementor remediation instructions.
* Added Quick Navigator element tree with real-time search filter.
* Added draggable, minimizable floating HUD with custom tool selection drawer.
* Added clean WordPress admin dashboard page with master enable/disable switch.
