feat(project-editor): syntax-highlighted code editor for HTML raw mode

- shared app-code-editor: overlay textarea + highlighted <pre> layer,
  no external dependency (Monaco/CodeMirror)
- tokenizeCss: selector/property/value/string/comment/at-rule aware,
  brace-depth state machine
- tokenizeHtml: tags + comments colored, delegates <style> block content
  to tokenizeCss (that's where static-page CSS is actually authored)
- marketplace-html-editor raw-code mode now uses app-code-editor instead
  of a plain textarea

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html

@@ -7,13 +7,13 @@
   </div>
 
   @if (showCode()) {
-    <textarea
-      class="html-editor-code"
-      [class.html-editor-code--invalid]="codeError()"
-      rows="10"
+    <app-code-editor
+      language="html"
+      [rows]="10"
+      [invalid]="!!codeError()"
       [value]="codeValue()"
-      (input)="updateCode($any($event.target).value)"
-    ></textarea>
+      (valueChange)="updateCode($event)"
+    />
     @if (codeError()) {
       <p class="html-editor-code-error">{{ codeError() }}</p>
     }

src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.scss

@@ -18,18 +18,6 @@
   overflow-y: auto;
 }
 
-.html-editor-code {
-  min-height: 160px;
-  font-family: monospace;
-  border: 1px solid var(--border, #ccc);
-  border-radius: 4px;
-  padding: 0.5rem;
-
-  &--invalid {
-    border-color: var(--error-color, #991b1b);
-  }
-}
-
 .html-editor-code-error {
   margin: 0;
   color: var(--error-color, #991b1b);

src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmi
 import { TranslateService } from '../../../../i18n/translate.service';
 import { TranslatePipe } from '../../../../i18n/translate.pipe';
 import { validateHtml } from '../../schema/validators/primitives';
+import { CodeEditorComponent } from '../../../../shared/ui/code-editor/code-editor.component';
 
 export interface HtmlEditorToolbarCommand {
   id: string;
@@ -29,7 +30,7 @@ export const HTML_EDITOR_TOOLBAR: HtmlEditorToolbarCommand[] = [
 @Component({
   selector: 'app-marketplace-html-editor',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [TranslatePipe, CodeEditorComponent],
   templateUrl: './marketplace-html-editor.component.html',
   styleUrls: ['./marketplace-html-editor.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush