feat(project-editor): header layout + sticky option

- HeaderConfig gains sticky (default true) and layout ('default'|'centered')
- header editor exposes layout select + sticky toggle
- runtime header component applies static/centered classes from config

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

src/app/features/project-editor/sections/header-section.component.html

@@ -1,5 +1,15 @@
 @if (bootstrap(); as bootstrap) {
 <app-section-card [title]="'builder.header' | translate">
+  <div class="editor-grid two">
+    <app-form-field [label]="'builder.headerLayout' | translate" [hint]="'builder.headerLayoutDesc' | translate">
+      <app-select [options]="layoutSelectOptions()" [ngModel]="bootstrap.header?.layout || 'default'" (ngModelChange)="updateLayout($event)" />
+    </app-form-field>
+    <label class="toggle-row">
+      <app-toggle [ngModel]="isSticky()" (ngModelChange)="toggleSticky($event)" [ariaLabel]="'builder.headerSticky' | translate" />
+      <span>{{ 'builder.headerSticky' | translate }}</span>
+      <small class="field-desc">{{ 'builder.headerStickyDesc' | translate }}</small>
+    </label>
+  </div>
   <div class="editor-grid three toggles">
     @for (item of items; track item.key) {
       <label class="toggle-row">

src/app/features/project-editor/sections/header-section.component.ts

@@ -1,21 +1,25 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { TranslateService } from '../../../i18n/translate.service';
 import { HeaderConfig } from '../../../shared/models/config';
 import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
 import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
+import { SelectComponent, SelectOption } from '../../../shared/ui/select/select.component';
 
 @Component({
   selector: 'app-project-editor-header-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent],
+  imports: [FormsModule, TranslatePipe, SectionCardComponent, ToggleComponent, FormFieldComponent, SelectComponent],
   templateUrl: './header-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectEditorHeaderSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
+  private readonly translate = inject(TranslateService);
   readonly bootstrap = this.facade.bootstrap;
   readonly items: Array<{ key: keyof HeaderConfig; label: string; descKey: string }> = [
     { key: 'showLogo', label: 'builder.showLogo', descKey: 'builder.showLogoDesc' },
@@ -29,6 +33,15 @@ export class ProjectEditorHeaderSectionComponent {
     { key: 'showRegion', label: 'builder.showRegion', descKey: 'builder.showRegionDesc' },
   ];
 
+  private readonly layoutOptions: Array<{ value: string; labelKey: string }> = [
+    { value: 'default', labelKey: 'builder.headerLayoutDefault' },
+    { value: 'centered', labelKey: 'builder.headerLayoutCentered' },
+  ];
+
+  readonly layoutSelectOptions = computed<SelectOption[]>(() =>
+    this.layoutOptions.map(option => ({ value: option.value, label: this.translate.t(option.labelKey) }))
+  );
+
   toggle(key: keyof HeaderConfig, checked: boolean): void {
     this.facade.updateBootstrap(current => ({
       ...current,
@@ -39,4 +52,20 @@ export class ProjectEditorHeaderSectionComponent {
   isChecked(key: keyof HeaderConfig): boolean {
     return !!this.bootstrap()?.header?.[key];
   }
+
+  readonly isSticky = (): boolean => this.bootstrap()?.header?.sticky !== false;
+
+  toggleSticky(checked: boolean): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      header: { ...(current.header ?? {}), sticky: checked }
+    }));
+  }
+
+  updateLayout(layout: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      header: { ...(current.header ?? {}), layout: layout as HeaderConfig['layout'] }
+    }));
+  }
 }