Update Frontend Edting v13/14

1. 1Objective: Refactoring the friendsoftypo3/frontend-editing extension for TYPO3 v13 and v14 compatibility running on PHP 8.3+.
2. 2Architectural demands: Transition to native ES Modules via import maps, PHP Attributes, strict CSP compliance, and TypoScript Site Sets.
3. 3Prompting techniques: Role assignment (Lead TYPO3 Extension Architect), structured task decomposition, strict negative constraints, few-shot code patterns, and QA checklists.
4. 4Beneficiaries: TYPO3 developers, maintainers, and agencies modernising legacy extensions using AI coding tools.

# Prompt: Rewrite `friendsoftypo3/frontend-editing` for TYPO3 v13 and v14

## Context
- **Role:** You are a Lead TYPO3 Extension Architect.
- **Input:** You have a copy of the extension `friendsoftypo3/frontend-editing` that is currently compatible with TYPO3 v12.
- **Task:** Refactor and upgrade the codebase to support **TYPO3 v13 LTS** and the upcoming **TYPO3 v14**.
- **PHP Targets:** PHP 8.3+ (Strict requirement for v14 compatibility).
- **Environment:**
  - TYPO3 v13.4+ (LTS).
  - TYPO3 v14.0+ (Bleeding Edge).

## Primary Goals
1.  **Architecture Modernization:** Fully adopt **ES Modules** (dropping all AMD/RequireJS) and **PHP Attributes** (dropping DocBlock annotations).
2.  **Compatibility:** Ensure installability and stability on TYPO3 v13 and v14 with a single codebase.
3.  **Security:** Ensure the frontend editing toolbar and UI are **Content Security Policy (CSP)** compliant (no inline JS/CSS without nonces, no `eval()`).
4.  **Configuration:** Migrate TypoScript inclusion to the new **Site Sets** feature (v13+).

## Constraints and Principles
- **No Legacy JS:** RequireJS/AMD is forbidden. Use native ECMAScript Modules (ESM) via `importmap`.
- **Strict Typing:** All PHP classes must use strict typing (`declare(strict_types=1);`) and property typing.
- **Attributes over Annotations:** Use PHP 8 Attributes for Dependency Injection, Validation, and Event Listening.
- **CSP Compliance:** The extension injects UI into the frontend. It must use the `PageRenderer` or `AssetCollector` API correctly to support CSP nonces.

## Step-by-Step Tasks

### A. Composer and Metadata
1.  **`composer.json`**
    - Set `require`: `"php": "^8.3"`.
    - Set `typo3/cms-core`: `"^13.4 || ^14.0"`.
    - Replace `typo3/testing-framework` with version `^8.0`.
2.  **`ext_emconf.php`**
    - Update constraints to match Composer.
    - Ensure `clearCacheOnLoad` is set correctly for modern deployment flows.

### B. PHP Refactoring & API Migration
3.  **Rector & Static Analysis**
    - Apply `ssch/typo3-rector` sets for `TYPO3_13` and `TYPO3_14`.
    - Apply `PHP_83` rules.
    - Ensure all services in `Services.yaml` utilize `autowire` and `autoconfigure`.
4.  **PSR-14 Events (Strict)**
    - Verify no legacy Hooks (`$GLOBALS['TYPO3_CONF_VARS']['SC_OPTIONS']`) remain.
    - Use `#[AsEventListener]` attributes on listener classes instead of `Services.yaml` tags where possible.
5.  **Controller & Request Handling**
    - Ensure all Controllers return `\Psr\Http\Message\ResponseInterface`.
    - Remove any usage of `EXIT` or `die()`.
    - Validate that Middleware implements `Psr\Http\Server\MiddlewareInterface` and handles the `ResponseFactory` correctly for v13+.

### C. JavaScript & Frontend Assets (Crucial)
6.  **ES Modules (Import Maps)**
    - Convert all `.js` files to native ES Modules (`export`/`import`).
    - Register modules in `Configuration/JavaScriptModules.php`.
    - **Mapping:**
        - Imports from `TYPO3/CMS/*` must be replaced with `@typo3/*` mapped imports.
        - Example: `import Modal from '@typo3/backend/modal.js';`
7.  **CSP Compliance**
    - Scan for inline JavaScript `onclick="..."` in fluid templates. **Remove them.**
    - Replace inline event handlers with `EventDelegation` or attaching listeners in the ES Module `initialize()` method.
    - Ensure all CSS is loaded via `AssetCollector::addCssFile()` so it receives proper nonces.
8.  **Lit / Web Components (Optional but Recommended)**
    - If the UI requires complex state, favor standard Web Components or Lit (if already used in Core v13) over jQuery.

### D. Configuration & TypoScript
9.  **Site Sets (v13+)**
    - Create `Configuration/Sets/FrontendEditing/config.yaml`.
    - Migrate existing TypoScript `setup.typoscript` and `constants.typoscript` to be loadable via this Set.
    - Retain `ext_typoscript_setup.txt` only as a backward-compatibility wrapper if absolutely necessary, but prioritize Sets.
10. **TCA (Table Configuration Array)**
    - Ensure all TCA files are in `Configuration/TCA/*`.
    - Migrate `ctrl.iconfile` to the `EXT:extension/Resources/Public/Icons/` path or registered IconIdentifier.
    - Validate `renderType` fields against v13 strictness (e.g., `select` types).

### E. Quality Assurance
11. **Testing Checklist**
    - **Install:** `composer require` on a fresh TYPO3 v13 setup.
    - **Site Sets:** Verify "Frontend Editing" appears in the Site Configuration "Sets" tab.
    - **Frontend:** Log in, view a page. Verify the toolbar loads via ESM (check browser console network tab for `.js` files, ensure no 404s).
    - **CSP:** Enable `config.contentSecurityPolicy.mode = enforce`. Verify the editor still loads without console violations.
    - **Editing:** Perform an inline edit and save. Verify the Ajax request uses the correct PSR-7 flow.

## Deliverables
1.  **Codebase:** Cleaned, v13/14 native code.
2.  **Migration Log:** `MIGRATION_v13.md` detailing the switch to ES Modules and Attributes.
3.  **Config:** `JavaScriptModules.php` and `Configuration/Sets/` folder structure.

---

### Concrete Code Patterns for v13/14

**1. Event Listener with Attribute:**
```php
use TYPO3\CMS\Core\Attribute\AsEventListener;
use TYPO3\CMS\Frontend\Event\AfterLinkIsGeneratedEvent;

#[AsEventListener(identifier: 'frontend-editing/link-fixer')]
final class LinkFixerEventListener {
    public function __invoke(AfterLinkIsGeneratedEvent $event): void {
        // ...
    }
}
```


### `Configuration/JavaScriptModules.php`

```php
<?php

return [
    'dependencies' => ['core', 'backend'],
    'imports' => [
        '@friendsoftypo3/frontend-editing/' => 'EXT:frontend_editing/Resources/Public/JavaScript/',
    ],
];

```

### `Configuration/Sets/FrontendEditing/config.yaml`

```yaml
name: 'friendsoftypo3/frontend-editing'
label: 'Frontend Editing'
dependencies:
  - typo3/cms-frontend
settings:
  definitions:
    frontend_editing:
      type: bool
      label: 'Enable Frontend Editing'
      value: true

```