feat(project-editor): finish field descriptions + enum dropdowns across all sections

Wires up the remaining editor sections (theme, header, footer, homepage,
widgets, features, languages, navigation) with the description text and
dropdown UX started for General/Branding:

- Every enum-backed field is now a <select> with a description per option,
  not free text: theme.mode, the new site-wide layout.type (previously had
  no editor at all - added to the Theme section, and added to that
  section's reset-scope), homepage section layout.strategy, and
  catalog.navigationMode (also previously unedited, added to Features).
- Every other field (colors, header toggles, footer contact/company fields,
  widget props, feature flags, language add, nav link label/url/visible)
  gets a one-line plain-language description under its label via the new
  *Desc i18n keys (en/ru/hy) prepared earlier.
- Genuinely open text (widget layout variant strings, JSON props) stays
  free text, description-only, per the existing widgetLayoutDesc/widgetJsonDesc
  wording - not force-fit into a dropdown.

Verified: tsc --noEmit and ng build both clean.

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

@@ -2,15 +2,27 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.marketplaceFeatures' | translate }}</h2>
   <div class="editor-grid three toggles">
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.wishlist" (change)="toggleFeature('wishlist', $any($event.target).checked)" /><span>{{ 'builder.showWishlist' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.compare" (change)="toggleFeature('compare', $any($event.target).checked)" /><span>{{ 'builder.showCompare' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.reviews" (change)="toggleFeature('reviews', $any($event.target).checked)" /><span>{{ 'builder.reviews' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.productPage?.questions?.enabled !== false" (change)="toggleProductFeature('questions', $any($event.target).checked)" /><span>{{ 'builder.questions' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.comments" (change)="toggleFeature('comments', $any($event.target).checked)" /><span>{{ 'builder.comments' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.recommendations" (change)="toggleFeature('recommendations', $any($event.target).checked)" /><span>{{ 'builder.recommendations' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.userExperience?.recentlyViewed?.enabled !== false" (change)="toggleUserExperience('recentlyViewed', $any($event.target).checked)" /><span>{{ 'builder.recentlyViewed' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.suggestionsEnabled !== false" (change)="toggleCatalog('suggestionsEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchSuggestions' | translate }}</span></label>
-    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.searchHistoryEnabled !== false" (change)="toggleCatalog('searchHistoryEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchHistory' | translate }}</span></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.wishlist" (change)="toggleFeature('wishlist', $any($event.target).checked)" /><span>{{ 'builder.showWishlist' | translate }}</span><small class="field-desc">{{ 'builder.wishlistFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.compare" (change)="toggleFeature('compare', $any($event.target).checked)" /><span>{{ 'builder.showCompare' | translate }}</span><small class="field-desc">{{ 'builder.compareFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.featureFlags.reviews" (change)="toggleFeature('reviews', $any($event.target).checked)" /><span>{{ 'builder.reviews' | translate }}</span><small class="field-desc">{{ 'builder.reviewsFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.productPage?.questions?.enabled !== false" (change)="toggleProductFeature('questions', $any($event.target).checked)" /><span>{{ 'builder.questions' | translate }}</span><small class="field-desc">{{ 'builder.questionsFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.comments" (change)="toggleFeature('comments', $any($event.target).checked)" /><span>{{ 'builder.comments' | translate }}</span><small class="field-desc">{{ 'builder.commentsFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="!!bootstrap.featureFlags.recommendations" (change)="toggleFeature('recommendations', $any($event.target).checked)" /><span>{{ 'builder.recommendations' | translate }}</span><small class="field-desc">{{ 'builder.recommendationsFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.userExperience?.recentlyViewed?.enabled !== false" (change)="toggleUserExperience('recentlyViewed', $any($event.target).checked)" /><span>{{ 'builder.recentlyViewed' | translate }}</span><small class="field-desc">{{ 'builder.recentlyViewedFeatureDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.suggestionsEnabled !== false" (change)="toggleCatalog('suggestionsEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchSuggestions' | translate }}</span><small class="field-desc">{{ 'builder.searchSuggestionsDesc' | translate }}</small></label>
+    <label class="toggle-row"><input type="checkbox" [checked]="bootstrap.catalog?.searchHistoryEnabled !== false" (change)="toggleCatalog('searchHistoryEnabled', $any($event.target).checked)" /><span>{{ 'builder.searchHistory' | translate }}</span><small class="field-desc">{{ 'builder.searchHistoryDesc' | translate }}</small></label>
+  </div>
+  <div class="editor-grid two">
+    <label>
+      <span>{{ 'builder.catalogNavigationModeLabel' | translate }}</span>
+      <small class="field-desc">{{ 'builder.catalogNavigationModeDesc' | translate }}</small>
+      <select [ngModel]="bootstrap.catalog?.navigationMode || 'default'" (ngModelChange)="updateCatalogNavigationMode($event)">
+        @for (option of catalogNavigationOptions; track option.value) {
+          <option [value]="option.value">{{ option.labelKey | translate }}</option>
+        }
+      </select>
+      <small class="field-desc">{{ catalogNavigationDescKey(bootstrap.catalog?.navigationMode || 'default') | translate }}</small>
+    </label>
   </div>
 </section>
 }

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

@@ -1,11 +1,18 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 
+export interface CatalogNavigationOption {
+  value: 'default' | 'left-category-navigation' | 'mega-category-layout' | 'top-category-carousel';
+  labelKey: string;
+  descKey: string;
+}
+
 @Component({
   selector: 'app-project-editor-features-section',
   standalone: true,
-  imports: [TranslatePipe],
+  imports: [FormsModule, TranslatePipe],
   templateUrl: './features-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -14,6 +21,24 @@ export class ProjectEditorFeaturesSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
   readonly bootstrap = this.facade.bootstrap;
 
+  readonly catalogNavigationOptions: CatalogNavigationOption[] = [
+    { value: 'default', labelKey: 'builder.catalogNavDefault', descKey: 'builder.catalogNavDefaultDesc' },
+    { value: 'left-category-navigation', labelKey: 'builder.catalogNavLeftCategory', descKey: 'builder.catalogNavLeftCategoryDesc' },
+    { value: 'mega-category-layout', labelKey: 'builder.catalogNavMegaCategory', descKey: 'builder.catalogNavMegaCategoryDesc' },
+    { value: 'top-category-carousel', labelKey: 'builder.catalogNavTopCarousel', descKey: 'builder.catalogNavTopCarouselDesc' },
+  ];
+
+  catalogNavigationDescKey(mode: string | undefined): string {
+    return this.catalogNavigationOptions.find(option => option.value === mode)?.descKey ?? '';
+  }
+
+  updateCatalogNavigationMode(mode: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      catalog: { ...current.catalog, navigationMode: mode as CatalogNavigationOption['value'] }
+    }));
+  }
+
   toggleFeature(key: string, checked: boolean): void {
     this.facade.updateBootstrap(current => ({ ...current, featureFlags: { ...current.featureFlags, [key]: checked } }));
   }

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

@@ -2,14 +2,14 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.footer' | translate }}</h2>
   <div class="editor-grid two">
-    <label><span>{{ 'builder.companyName' | translate }}</span><input type="text" [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></label>
-    <label><span>{{ 'builder.address' | translate }}</span><input type="text" [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></label>
-    <label><span>{{ 'builder.phone' | translate }}</span><input type="text" [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></label>
-    <label><span>{{ 'builder.email' | translate }}</span><input type="text" [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></label>
-    <label class="full"><span>{{ 'builder.copyright' | translate }}</span><input type="text" [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></label>
-    <label class="full"><span>{{ 'builder.paymentIcons' | translate }}</span><textarea rows="4" [ngModel]="paymentIconsValue()" (ngModelChange)="updatePaymentIcons($event)"></textarea></label>
-    <label class="full"><span>{{ 'builder.socialLinks' | translate }}</span><textarea rows="4" [ngModel]="socialLinksValue()" (ngModelChange)="updateSocialLinks($event)"></textarea></label>
-    <label class="full"><span>{{ 'builder.staticPages' | translate }}</span><input type="text" [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></label>
+    <label><span>{{ 'builder.companyName' | translate }}</span><small class="field-desc">{{ 'builder.companyNameDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></label>
+    <label><span>{{ 'builder.address' | translate }}</span><small class="field-desc">{{ 'builder.addressDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></label>
+    <label><span>{{ 'builder.phone' | translate }}</span><small class="field-desc">{{ 'builder.phoneDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></label>
+    <label><span>{{ 'builder.email' | translate }}</span><small class="field-desc">{{ 'builder.emailDesc' | translate }}</small><input type="text" [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></label>
+    <label class="full"><span>{{ 'builder.copyright' | translate }}</span><small class="field-desc">{{ 'builder.copyrightDesc' | translate }}</small><input type="text" [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></label>
+    <label class="full"><span>{{ 'builder.paymentIcons' | translate }}</span><small class="field-desc">{{ 'builder.paymentIconsDesc' | translate }}</small><textarea rows="4" [ngModel]="paymentIconsValue()" (ngModelChange)="updatePaymentIcons($event)"></textarea></label>
+    <label class="full"><span>{{ 'builder.socialLinks' | translate }}</span><small class="field-desc">{{ 'builder.socialLinksDesc' | translate }}</small><textarea rows="4" [ngModel]="socialLinksValue()" (ngModelChange)="updateSocialLinks($event)"></textarea></label>
+    <label class="full"><span>{{ 'builder.staticPages' | translate }}</span><small class="field-desc">{{ 'builder.staticPagesFieldDesc' | translate }}</small><input type="text" [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></label>
   </div>
 </section>
 }

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

@@ -6,6 +6,7 @@
       <label class="toggle-row">
         <input type="checkbox" [checked]="isChecked(item.key)" (change)="toggle(item.key, $any($event.target).checked)" />
         <span>{{ item.label | translate }}</span>
+        <small class="field-desc">{{ item.descKey | translate }}</small>
       </label>
     }
   </div>

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

@@ -15,16 +15,16 @@ import { HeaderConfig } from '../../../shared/models/config';
 export class ProjectEditorHeaderSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
   readonly bootstrap = this.facade.bootstrap;
-  readonly items: Array<{ key: keyof HeaderConfig; label: string }> = [
-    { key: 'showLogo', label: 'builder.showLogo' },
-    { key: 'showSearch', label: 'builder.showSearch' },
-    { key: 'showCategories', label: 'builder.showCategories' },
-    { key: 'showLanguages', label: 'builder.showLanguages' },
-    { key: 'showCart', label: 'builder.showCart' },
-    { key: 'showProfile', label: 'builder.showProfile' },
-    { key: 'showWishlist', label: 'builder.showWishlist' },
-    { key: 'showCompare', label: 'builder.showCompare' },
-    { key: 'showRegion', label: 'builder.showRegion' },
+  readonly items: Array<{ key: keyof HeaderConfig; label: string; descKey: string }> = [
+    { key: 'showLogo', label: 'builder.showLogo', descKey: 'builder.showLogoDesc' },
+    { key: 'showSearch', label: 'builder.showSearch', descKey: 'builder.showSearchDesc' },
+    { key: 'showCategories', label: 'builder.showCategories', descKey: 'builder.showCategoriesDesc' },
+    { key: 'showLanguages', label: 'builder.showLanguages', descKey: 'builder.showLanguagesDesc' },
+    { key: 'showCart', label: 'builder.showCart', descKey: 'builder.showCartDesc' },
+    { key: 'showProfile', label: 'builder.showProfile', descKey: 'builder.showProfileDesc' },
+    { key: 'showWishlist', label: 'builder.showWishlist', descKey: 'builder.showWishlistDesc' },
+    { key: 'showCompare', label: 'builder.showCompare', descKey: 'builder.showCompareDesc' },
+    { key: 'showRegion', label: 'builder.showRegion', descKey: 'builder.showRegionDesc' },
   ];
 
   toggle(key: keyof HeaderConfig, checked: boolean): void {

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

@@ -6,9 +6,26 @@
       <div class="sortable-item" cdkDrag>
         <div class="editor-grid four compact">
           <strong>{{ section.id }}</strong>
-          <label><span>{{ 'builder.visible' | translate }}</span><input type="checkbox" [checked]="section.visible !== false" (change)="updateSection(section.id, 'visible', $any($event.target).checked)" /></label>
-          <label><span>{{ 'builder.layoutLabel' | translate }}</span><input type="text" [ngModel]="section.layout?.strategy || ''" (ngModelChange)="updateLayout(section.id, 'strategy', $event)" /></label>
-          <label><span>{{ 'builder.columns' | translate }}</span><input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" /></label>
+          <label>
+            <span>{{ 'builder.visible' | translate }}</span>
+            <input type="checkbox" [checked]="section.visible !== false" (change)="updateSection(section.id, 'visible', $any($event.target).checked)" />
+            <small class="field-desc">{{ 'builder.sectionVisibleDesc' | translate }}</small>
+          </label>
+          <label>
+            <span>{{ 'builder.layoutStrategyLabel' | translate }}</span>
+            <small class="field-desc">{{ 'builder.layoutStrategyDesc' | translate }}</small>
+            <select [ngModel]="section.layout?.strategy || 'stack'" (ngModelChange)="updateLayout(section.id, 'strategy', $event)">
+              @for (option of layoutStrategyOptions; track option.value) {
+                <option [value]="option.value">{{ option.labelKey | translate }}</option>
+              }
+            </select>
+            <small class="field-desc">{{ layoutStrategyDescKey(section.layout?.strategy || 'stack') | translate }}</small>
+          </label>
+          <label>
+            <span>{{ 'builder.columns' | translate }}</span>
+            <small class="field-desc">{{ 'builder.sectionColumnsDesc' | translate }}</small>
+            <input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
+          </label>
         </div>
       </div>
     }

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

@@ -4,6 +4,12 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 
+export interface LayoutStrategyOption {
+  value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
+  labelKey: string;
+  descKey: string;
+}
+
 @Component({
   selector: 'app-project-editor-homepage-section',
   standalone: true,
@@ -17,6 +23,18 @@ export class ProjectEditorHomepageSectionComponent {
   readonly homePage = this.facade.homepagePage;
   readonly sections = computed(() => [...(this.homePage()?.sections ?? [])].sort((a, b) => a.order - b.order));
 
+  readonly layoutStrategyOptions: LayoutStrategyOption[] = [
+    { value: 'stack', labelKey: 'builder.layoutStrategyStack', descKey: 'builder.layoutStrategyStackDesc' },
+    { value: 'grid', labelKey: 'builder.layoutStrategyGrid', descKey: 'builder.layoutStrategyGridDesc' },
+    { value: 'hero', labelKey: 'builder.layoutStrategyHero', descKey: 'builder.layoutStrategyHeroDesc' },
+    { value: 'carousel', labelKey: 'builder.layoutStrategyCarousel', descKey: 'builder.layoutStrategyCarouselDesc' },
+    { value: 'split', labelKey: 'builder.layoutStrategySplit', descKey: 'builder.layoutStrategySplitDesc' },
+  ];
+
+  layoutStrategyDescKey(strategy: string | undefined): string {
+    return this.layoutStrategyOptions.find(option => option.value === strategy)?.descKey ?? '';
+  }
+
   drop(event: CdkDragDrop<any[]>): void {
     const sections = [...this.sections()];
     moveItemInArray(sections, event.previousIndex, event.currentIndex);

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

@@ -2,6 +2,7 @@
   <div class="editor-actions">
     <h2>{{ 'builder.languagesTab' | translate }}</h2>
   </div>
+  <small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>
 
   <div class="editor-actions">
     <input
@@ -12,6 +13,7 @@
     />
     <button type="button" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</button>
   </div>
+  <small class="field-desc">{{ 'builder.newLanguageDesc' | translate }}</small>
 
   <div class="stack-list">
     @for (code of locales(); track code) {

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

@@ -16,9 +16,9 @@
           </div>
         </div>
         <div class="editor-grid three">
-          <label><span>{{ 'builder.linkLabel' | translate }}</span><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
-          <label><span>{{ 'builder.linkUrl' | translate }}</span><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('header', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span></label>
+          <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
+          <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('header', item.id, $event)" /></label>
+          <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('header', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
         </div>
       </article>
     }
@@ -44,9 +44,9 @@
             </div>
           </div>
           <div class="editor-grid three">
-            <label><span>{{ 'builder.linkLabel' | translate }}</span><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
-            <label><span>{{ 'builder.linkUrl' | translate }}</span><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
-            <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('footer', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span></label>
+            <label><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><input type="text" [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
+            <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><input type="text" [ngModel]="item.route" (ngModelChange)="updateRoute('footer', item.id, $event)" /></label>
+            <label class="toggle-row"><input type="checkbox" [checked]="item.visible !== false" (change)="updateVisible('footer', item.id, $any($event.target).checked)" /><span>{{ 'builder.visible' | translate }}</span><small class="field-desc">{{ 'builder.linkVisibleDesc' | translate }}</small></label>
           </div>
         </article>
       }

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

@@ -2,14 +2,34 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.theme' | translate }}</h2>
   <div class="editor-grid two">
-    <label><span>{{ 'builder.primaryColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></label>
-    <label><span>{{ 'builder.secondaryColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></label>
-    <label><span>{{ 'builder.backgroundColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></label>
-    <label><span>{{ 'builder.surfaceColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></label>
-    <label><span>{{ 'builder.textColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></label>
-    <label><span>{{ 'builder.successColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></label>
-    <label><span>{{ 'builder.warningColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></label>
-    <label><span>{{ 'builder.dangerColor' | translate }}</span><input type="color" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></label>
+    <label><span>{{ 'builder.primaryColor' | translate }}</span><small class="field-desc">{{ 'builder.primaryColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></label>
+    <label><span>{{ 'builder.secondaryColor' | translate }}</span><small class="field-desc">{{ 'builder.secondaryColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></label>
+    <label><span>{{ 'builder.backgroundColor' | translate }}</span><small class="field-desc">{{ 'builder.backgroundColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></label>
+    <label><span>{{ 'builder.surfaceColor' | translate }}</span><small class="field-desc">{{ 'builder.surfaceColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></label>
+    <label><span>{{ 'builder.textColor' | translate }}</span><small class="field-desc">{{ 'builder.textColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></label>
+    <label><span>{{ 'builder.successColor' | translate }}</span><small class="field-desc">{{ 'builder.successColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></label>
+    <label><span>{{ 'builder.warningColor' | translate }}</span><small class="field-desc">{{ 'builder.warningColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></label>
+    <label><span>{{ 'builder.dangerColor' | translate }}</span><small class="field-desc">{{ 'builder.dangerColorDesc' | translate }}</small><input type="color" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></label>
+    <label>
+      <span>{{ 'builder.themeModeLabel' | translate }}</span>
+      <small class="field-desc">{{ 'builder.themeModeDesc' | translate }}</small>
+      <select [ngModel]="bootstrap.theme.mode" (ngModelChange)="updateThemeMode($event)">
+        @for (option of themeModeOptions; track option.value) {
+          <option [value]="option.value">{{ option.labelKey | translate }}</option>
+        }
+      </select>
+      <small class="field-desc">{{ themeModeDescKey(bootstrap.theme.mode) | translate }}</small>
+    </label>
+    <label>
+      <span>{{ 'builder.siteLayoutLabel' | translate }}</span>
+      <small class="field-desc">{{ 'builder.siteLayoutDesc' | translate }}</small>
+      <select [ngModel]="bootstrap.layout?.type || 'default'" (ngModelChange)="updateSiteLayout($event)">
+        @for (option of siteLayoutOptions; track option.value) {
+          <option [value]="option.value">{{ option.labelKey | translate }}</option>
+        }
+      </select>
+      <small class="field-desc">{{ siteLayoutDescKey(bootstrap.layout?.type || 'default') | translate }}</small>
+    </label>
   </div>
 </section>
 }

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

@@ -2,7 +2,19 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
-import { ThemePaletteConfig } from '../../../shared/models/config';
+import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';
+
+export interface ThemeModeOption {
+  value: 'light' | 'dark' | 'system';
+  labelKey: string;
+  descKey: string;
+}
+
+export interface SiteLayoutOption {
+  value: PlatformLayoutType;
+  labelKey: string;
+  descKey: string;
+}
 
 @Component({
   selector: 'app-project-editor-theme-section',
@@ -16,10 +28,45 @@ export class ProjectEditorThemeSectionComponent {
   private readonly facade = inject(ProjectEditorFacade);
   readonly bootstrap = this.facade.bootstrap;
 
+  readonly themeModeOptions: ThemeModeOption[] = [
+    { value: 'light', labelKey: 'builder.themeModeLight', descKey: 'builder.themeModeLightDesc' },
+    { value: 'dark', labelKey: 'builder.themeModeDark', descKey: 'builder.themeModeDarkDesc' },
+    { value: 'system', labelKey: 'builder.themeModeSystem', descKey: 'builder.themeModeSystemDesc' },
+  ];
+
+  readonly siteLayoutOptions: SiteLayoutOption[] = [
+    { value: 'default', labelKey: 'builder.siteLayoutDefault', descKey: 'builder.siteLayoutDefaultDesc' },
+    { value: 'sidebar-left', labelKey: 'builder.siteLayoutSidebarLeft', descKey: 'builder.siteLayoutSidebarLeftDesc' },
+    { value: 'carousel-home', labelKey: 'builder.siteLayoutCarouselHome', descKey: 'builder.siteLayoutCarouselHomeDesc' },
+    { value: 'minimal', labelKey: 'builder.siteLayoutMinimal', descKey: 'builder.siteLayoutMinimalDesc' },
+  ];
+
   updatePalette<K extends keyof ThemePaletteConfig>(key: K, value: string): void {
     this.facade.updateBootstrap(current => ({
       ...current,
       theme: { ...current.theme, palette: { ...current.theme.palette, [key]: value } }
     }));
   }
+
+  updateThemeMode(mode: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      theme: { ...current.theme, mode: mode as 'light' | 'dark' | 'system' }
+    }));
+  }
+
+  updateSiteLayout(type: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      layout: { ...current.layout, type: type as PlatformLayoutType }
+    }));
+  }
+
+  themeModeDescKey(mode: string): string {
+    return this.themeModeOptions.find(option => option.value === mode)?.descKey ?? '';
+  }
+
+  siteLayoutDescKey(type: string): string {
+    return this.siteLayoutOptions.find(option => option.value === type)?.descKey ?? '';
+  }
 }

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

@@ -8,31 +8,32 @@
         @switch (entry.widget.type) {
           @case ('hero') {
             <div class="editor-grid two">
-              <label><span>{{ 'builder.layoutLabel' | translate }}</span><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
-              <label><span>{{ 'builder.height' | translate }}</span><input type="text" [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label>
-              <label><span>{{ 'builder.overlay' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['overlay']" (change)="updateProp(entry.widget.id, 'overlay', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.autoplay' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['autoplay']" (change)="updateProp(entry.widget.id, 'autoplay', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
+              <label><span>{{ 'builder.height' | translate }}</span><small class="field-desc">{{ 'builder.widgetHeightDesc' | translate }}</small><input type="text" [ngModel]="entry.widget.props['height'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'height', $event)" /></label>
+              <label><span>{{ 'builder.overlay' | translate }}</span><small class="field-desc">{{ 'builder.widgetOverlayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['overlay']" (change)="updateProp(entry.widget.id, 'overlay', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.autoplay' | translate }}</span><small class="field-desc">{{ 'builder.widgetAutoplayDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['autoplay']" (change)="updateProp(entry.widget.id, 'autoplay', $any($event.target).checked)" /></label>
             </div>
           }
           @case ('categories') {
             <div class="editor-grid two">
-              <label><span>{{ 'builder.layoutLabel' | translate }}</span><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
-              <label><span>{{ 'builder.columns' | translate }}</span><input type="number" [ngModel]="entry.widget.props['columns'] || 1" (ngModelChange)="updateProp(entry.widget.id, 'columns', +$event)" /></label>
+              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
+              <label><span>{{ 'builder.columns' | translate }}</span><small class="field-desc">{{ 'builder.widgetColumnsDesc' | translate }}</small><input type="number" [ngModel]="entry.widget.props['columns'] || 1" (ngModelChange)="updateProp(entry.widget.id, 'columns', +$event)" /></label>
             </div>
           }
           @case ('product-collection') {
             <div class="editor-grid three">
-              <label><span>{{ 'builder.layoutLabel' | translate }}</span><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
-              <label><span>{{ 'builder.cardsPerRow' | translate }}</span><input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label>
-              <label><span>{{ 'builder.filtersLabel' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['filters']" (change)="updateProp(entry.widget.id, 'filters', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showBadges' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['showBadges']" (change)="updateProp(entry.widget.id, 'showBadges', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showRating' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['showRating']" (change)="updateProp(entry.widget.id, 'showRating', $any($event.target).checked)" /></label>
-              <label><span>{{ 'builder.showPrice' | translate }}</span><input type="checkbox" [checked]="!!entry.widget.props['showPrice']" (change)="updateProp(entry.widget.id, 'showPrice', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><input type="text" [ngModel]="entry.widget.props['layout'] || ''" (ngModelChange)="updateProp(entry.widget.id, 'layout', $event)" /></label>
+              <label><span>{{ 'builder.cardsPerRow' | translate }}</span><small class="field-desc">{{ 'builder.widgetCardsPerRowDesc' | translate }}</small><input type="number" [ngModel]="entry.widget.props['cardsPerRow'] || 4" (ngModelChange)="updateProp(entry.widget.id, 'cardsPerRow', +$event)" /></label>
+              <label><span>{{ 'builder.filtersLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetFiltersDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['filters']" (change)="updateProp(entry.widget.id, 'filters', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.showBadges' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowBadgesDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showBadges']" (change)="updateProp(entry.widget.id, 'showBadges', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.showRating' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowRatingDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showRating']" (change)="updateProp(entry.widget.id, 'showRating', $any($event.target).checked)" /></label>
+              <label><span>{{ 'builder.showPrice' | translate }}</span><small class="field-desc">{{ 'builder.widgetShowPriceDesc' | translate }}</small><input type="checkbox" [checked]="!!entry.widget.props['showPrice']" (change)="updateProp(entry.widget.id, 'showPrice', $any($event.target).checked)" /></label>
             </div>
           }
           @default {
             <label>
               <span>{{ 'builder.widgetJson' | translate }}</span>
+              <small class="field-desc">{{ 'builder.widgetJsonDesc' | translate }}</small>
               <textarea rows="8" [ngModel]="propsJson(entry.widget.props)" (ngModelChange)="updateJson(entry.widget.id, $event)"></textarea>
             </label>
           }