From f82344e0dd12419e14e4807a9e3d2683540b80bf Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Wed, 15 Jul 2026 07:55:38 +0400
Subject: [PATCH] feat(project-editor): adopt Design System primitives across
 editor sections

Applied app-input/app-form-field/app-button to 9 of 11 Project Editor
sections: general, branding, theme, footer, homepage, widgets, languages,
navigation, preview. header and features sections were left unchanged -
they contain only checkboxes and selects, and no Checkbox/Select primitive
exists yet.

Theme section's 8 color pickers stay native <input type=color> (app-input's
type union doesn't include 'color') but are now wrapped in app-form-field
for consistent label/hint treatment. Added app-form-field.full grid-column
rule to section.shared.scss (shared by all 11 sections) alongside the
existing label.full rule, since the custom element doesn't match that
selector.

Production build green, arch:check passes.
---
 .../sections/branding-section.component.html  | 32 +++++++------------
 .../sections/branding-section.component.ts    |  4 ++-
 .../sections/footer-section.component.html    | 12 +++----
 .../sections/footer-section.component.ts      |  4 ++-
 .../sections/general-section.component.html   | 32 +++++++------------
 .../sections/general-section.component.ts     |  4 ++-
 .../sections/homepage-section.component.html  |  2 +-
 .../sections/homepage-section.component.ts    |  3 +-
 .../sections/languages-section.component.html |  9 +++---
 .../sections/languages-section.component.ts   |  4 ++-
 .../navigation-section.component.html         | 24 +++++++-------
 .../sections/navigation-section.component.ts  |  4 ++-
 .../sections/preview-section.component.html   |  6 ++--
 .../sections/preview-section.component.ts     |  3 +-
 .../sections/section.shared.scss              |  3 +-
 .../sections/theme-section.component.html     | 16 +++++-----
 .../sections/theme-section.component.ts       |  3 +-
 .../sections/widgets-section.component.html   | 12 +++----
 .../sections/widgets-section.component.ts     |  3 +-
 19 files changed, 89 insertions(+), 91 deletions(-)

diff --git a/src/app/features/project-editor/sections/branding-section.component.html b/src/app/features/project-editor/sections/branding-section.component.html
index 2ce1298..967cf0b 100644
--- a/src/app/features/project-editor/sections/branding-section.component.html
+++ b/src/app/features/project-editor/sections/branding-section.component.html
@@ -2,26 +2,18 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.branding' | translate }}</h2>
   <div class="editor-grid two">
-    <label>
-      <span>{{ 'builder.logo' | translate }}</span>
-      <small class="field-desc">{{ 'builder.logoDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
-    </label>
-    <label>
-      <span>{{ 'builder.smallLogo' | translate }}</span>
-      <small class="field-desc">{{ 'builder.smallLogoDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.branding.logoCompactUrl || ''" (ngModelChange)="updateField('logoCompactUrl', $event)" />
-    </label>
-    <label>
-      <span>{{ 'builder.favicon' | translate }}</span>
-      <small class="field-desc">{{ 'builder.faviconDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.branding.faviconUrl" (ngModelChange)="updateField('faviconUrl', $event)" />
-    </label>
-    <label>
-      <span>{{ 'builder.marketplaceTitle' | translate }}</span>
-      <small class="field-desc">{{ 'builder.marketplaceTitleDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.seo.default.title" (ngModelChange)="updateMarketplaceTitle($event)" />
-    </label>
+    <app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate">
+      <app-input [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.smallLogo' | translate" [hint]="'builder.smallLogoDesc' | translate">
+      <app-input [ngModel]="bootstrap.branding.logoCompactUrl || ''" (ngModelChange)="updateField('logoCompactUrl', $event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.favicon' | translate" [hint]="'builder.faviconDesc' | translate">
+      <app-input [ngModel]="bootstrap.branding.faviconUrl" (ngModelChange)="updateField('faviconUrl', $event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.marketplaceTitle' | translate" [hint]="'builder.marketplaceTitleDesc' | translate">
+      <app-input [ngModel]="bootstrap.seo.default.title" (ngModelChange)="updateMarketplaceTitle($event)" />
+    </app-form-field>
   </div>
 </section>
 }
diff --git a/src/app/features/project-editor/sections/branding-section.component.ts b/src/app/features/project-editor/sections/branding-section.component.ts
index 90ebf72..6b0704d 100644
--- a/src/app/features/project-editor/sections/branding-section.component.ts
+++ b/src/app/features/project-editor/sections/branding-section.component.ts
@@ -2,11 +2,13 @@ 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 { InputComponent } from '../../../shared/ui/input/input.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 
 @Component({
   selector: 'app-project-editor-branding-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
   templateUrl: './branding-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/footer-section.component.html b/src/app/features/project-editor/sections/footer-section.component.html
index 988b2ad..db72d84 100644
--- a/src/app/features/project-editor/sections/footer-section.component.html
+++ b/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><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>
+    <app-form-field [label]="'builder.companyName' | translate" [hint]="'builder.companyNameDesc' | translate"><app-input [ngModel]="bootstrap.company.companyName" (ngModelChange)="updateCompanyName($event)" /></app-form-field>
+    <app-form-field [label]="'builder.address' | translate" [hint]="'builder.addressDesc' | translate"><app-input [ngModel]="bootstrap.company.address.street || ''" (ngModelChange)="updateAddress($event)" /></app-form-field>
+    <app-form-field [label]="'builder.phone' | translate" [hint]="'builder.phoneDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.phone || ''" (ngModelChange)="updatePhone($event)" /></app-form-field>
+    <app-form-field [label]="'builder.email' | translate" [hint]="'builder.emailDesc' | translate"><app-input [ngModel]="bootstrap.company.contacts.email" (ngModelChange)="updateEmail($event)" /></app-form-field>
+    <app-form-field class="full" [label]="'builder.copyright' | translate" [hint]="'builder.copyrightDesc' | translate"><app-input [ngModel]="copyrightValue()" (ngModelChange)="updateCopyright($event)" /></app-form-field>
     <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>
+    <app-form-field class="full" [label]="'builder.staticPages' | translate" [hint]="'builder.staticPagesFieldDesc' | translate"><app-input [ngModel]="staticPagesValue()" (ngModelChange)="updateStaticPages($event)" /></app-form-field>
   </div>
 </section>
 }
diff --git a/src/app/features/project-editor/sections/footer-section.component.ts b/src/app/features/project-editor/sections/footer-section.component.ts
index 46e7c7a..5088d3c 100644
--- a/src/app/features/project-editor/sections/footer-section.component.ts
+++ b/src/app/features/project-editor/sections/footer-section.component.ts
@@ -2,11 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/c
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { InputComponent } from '../../../shared/ui/input/input.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 
 @Component({
   selector: 'app-project-editor-footer-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
   templateUrl: './footer-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/general-section.component.html b/src/app/features/project-editor/sections/general-section.component.html
index b7401b2..fc857ef 100644
--- a/src/app/features/project-editor/sections/general-section.component.html
+++ b/src/app/features/project-editor/sections/general-section.component.html
@@ -2,31 +2,23 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.general' | translate }}</h2>
   <div class="editor-grid two">
-    <label>
-      <span>{{ 'builder.marketplaceName' | translate }}</span>
-      <small class="field-desc">{{ 'builder.marketplaceNameDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.branding.brandName" (ngModelChange)="updateMarketplaceName($event)" />
-    </label>
-    <label>
-      <span>{{ 'builder.domain' | translate }}</span>
-      <small class="field-desc">{{ 'builder.domainDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.tenant.host" (ngModelChange)="updateDomain($event)" />
-    </label>
+    <app-form-field [label]="'builder.marketplaceName' | translate" [hint]="'builder.marketplaceNameDesc' | translate">
+      <app-input [ngModel]="bootstrap.branding.brandName" (ngModelChange)="updateMarketplaceName($event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.domain' | translate" [hint]="'builder.domainDesc' | translate">
+      <app-input [ngModel]="bootstrap.tenant.host" (ngModelChange)="updateDomain($event)" />
+    </app-form-field>
     <label class="full">
       <span>{{ 'builder.descriptionLabel' | translate }}</span>
       <small class="field-desc">{{ 'builder.descriptionFieldDesc' | translate }}</small>
       <textarea rows="3" [ngModel]="bootstrap.seo.default.description" (ngModelChange)="updateDescription($event)"></textarea>
     </label>
-    <label>
-      <span>{{ 'builder.defaultLanguage' | translate }}</span>
-      <small class="field-desc">{{ 'builder.defaultLanguageDesc' | translate }}</small>
-      <input type="text" [ngModel]="bootstrap.localization.defaultLocale" (ngModelChange)="updateDefaultLanguage($event)" />
-    </label>
-    <label>
-      <span>{{ 'builder.supportedLanguages' | translate }}</span>
-      <small class="field-desc">{{ 'builder.supportedLanguagesDesc' | translate }}</small>
-      <input type="text" [ngModel]="languagesValue()" (ngModelChange)="updateSupportedLanguages($event)" />
-    </label>
+    <app-form-field [label]="'builder.defaultLanguage' | translate" [hint]="'builder.defaultLanguageDesc' | translate">
+      <app-input [ngModel]="bootstrap.localization.defaultLocale" (ngModelChange)="updateDefaultLanguage($event)" />
+    </app-form-field>
+    <app-form-field [label]="'builder.supportedLanguages' | translate" [hint]="'builder.supportedLanguagesDesc' | translate">
+      <app-input [ngModel]="languagesValue()" (ngModelChange)="updateSupportedLanguages($event)" />
+    </app-form-field>
   </div>
 </section>
 }
diff --git a/src/app/features/project-editor/sections/general-section.component.ts b/src/app/features/project-editor/sections/general-section.component.ts
index 8e2d522..4c146c7 100644
--- a/src/app/features/project-editor/sections/general-section.component.ts
+++ b/src/app/features/project-editor/sections/general-section.component.ts
@@ -2,11 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/c
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { InputComponent } from '../../../shared/ui/input/input.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 
 @Component({
   selector: 'app-project-editor-general-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
   templateUrl: './general-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/homepage-section.component.html b/src/app/features/project-editor/sections/homepage-section.component.html
index d5c32d5..c78da56 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.html
+++ b/src/app/features/project-editor/sections/homepage-section.component.html
@@ -24,7 +24,7 @@
           <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)" />
+            <app-input type="number" [ngModel]="section.layout?.columns || 1" (ngModelChange)="updateLayout(section.id, 'columns', $event)" />
           </label>
         </div>
       </div>
diff --git a/src/app/features/project-editor/sections/homepage-section.component.ts b/src/app/features/project-editor/sections/homepage-section.component.ts
index 40225f2..df83bd9 100644
--- a/src/app/features/project-editor/sections/homepage-section.component.ts
+++ b/src/app/features/project-editor/sections/homepage-section.component.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/c
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { InputComponent } from '../../../shared/ui/input/input.component';
 
 export interface LayoutStrategyOption {
   value: 'stack' | 'grid' | 'hero' | 'carousel' | 'split';
@@ -13,7 +14,7 @@ export interface LayoutStrategyOption {
 @Component({
   selector: 'app-project-editor-homepage-section',
   standalone: true,
-  imports: [DragDropModule, FormsModule, TranslatePipe],
+  imports: [DragDropModule, FormsModule, TranslatePipe, InputComponent],
   templateUrl: './homepage-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/languages-section.component.html b/src/app/features/project-editor/sections/languages-section.component.html
index 57e317a..225f4a5 100644
--- a/src/app/features/project-editor/sections/languages-section.component.html
+++ b/src/app/features/project-editor/sections/languages-section.component.html
@@ -5,13 +5,12 @@
   <small class="field-desc">{{ 'builder.languagesTabDesc' | translate }}</small>
 
   <div class="editor-actions">
-    <input
-      type="text"
+    <app-input
       [ngModel]="newLocale()"
       (ngModelChange)="updateNewLocale($event)"
       placeholder="de"
     />
-    <button type="button" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</button>
+    <app-button variant="primary" (click)="addLocale()">{{ 'builder.addLanguage' | translate }}</app-button>
   </div>
   <small class="field-desc">{{ 'builder.newLanguageDesc' | translate }}</small>
 
@@ -24,8 +23,8 @@
             @if (code === defaultLocale()) {
               <span>{{ 'builder.defaultLanguageLabel' | translate }}</span>
             } @else {
-              <button type="button" class="secondary" (click)="setDefault(code)">{{ 'builder.setDefaultLanguage' | translate }}</button>
-              <button type="button" class="secondary" (click)="removeLocale(code)">{{ 'builder.removeLanguage' | translate }}</button>
+              <app-button variant="secondary" size="sm" (click)="setDefault(code)">{{ 'builder.setDefaultLanguage' | translate }}</app-button>
+              <app-button variant="secondary" size="sm" (click)="removeLocale(code)">{{ 'builder.removeLanguage' | translate }}</app-button>
             }
           </div>
         </div>
diff --git a/src/app/features/project-editor/sections/languages-section.component.ts b/src/app/features/project-editor/sections/languages-section.component.ts
index 276d4b7..c3a7123 100644
--- a/src/app/features/project-editor/sections/languages-section.component.ts
+++ b/src/app/features/project-editor/sections/languages-section.component.ts
@@ -2,11 +2,13 @@ import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@a
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
+import { InputComponent } from '../../../shared/ui/input/input.component';
 
 @Component({
   selector: 'app-project-editor-languages-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent],
   templateUrl: './languages-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/navigation-section.component.html b/src/app/features/project-editor/sections/navigation-section.component.html
index 51011c3..3199f69 100644
--- a/src/app/features/project-editor/sections/navigation-section.component.html
+++ b/src/app/features/project-editor/sections/navigation-section.component.html
@@ -1,7 +1,7 @@
 <section class="editor-section-card">
   <div class="editor-actions">
     <h2>{{ 'builder.navigationHeader' | translate }}</h2>
-    <button type="button" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</button>
+    <app-button variant="primary" (click)="addLink('header')">{{ 'builder.addLink' | translate }}</app-button>
   </div>
 
   <div class="stack-list">
@@ -10,14 +10,14 @@
         <div class="editor-actions">
           <h3>{{ labelOf(item) }}</h3>
           <div class="editor-actions">
-            <button type="button" class="secondary" (click)="move('header', item.id, -1)">↑</button>
-            <button type="button" class="secondary" (click)="move('header', item.id, 1)">↓</button>
-            <button type="button" class="secondary" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</button>
+            <app-button variant="secondary" size="sm" (click)="move('header', item.id, -1)">&uarr;</app-button>
+            <app-button variant="secondary" size="sm" (click)="move('header', item.id, 1)">&darr;</app-button>
+            <app-button variant="secondary" size="sm" (click)="removeLink('header', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
           </div>
         </div>
         <div class="editor-grid three">
-          <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><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('header', item.id, $event)" /></label>
+          <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [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>
@@ -27,7 +27,7 @@
   <div class="editor-actions">
     <h2>{{ 'builder.navigationFooter' | translate }}</h2>
     @if (footerLinks(); as footer) {
-      <button type="button" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</button>
+      <app-button variant="primary" (click)="addLink('footer')">{{ 'builder.addLink' | translate }}</app-button>
     }
   </div>
 
@@ -38,14 +38,14 @@
           <div class="editor-actions">
             <h3>{{ labelOf(item) }}</h3>
             <div class="editor-actions">
-              <button type="button" class="secondary" (click)="move('footer', item.id, -1)">↑</button>
-              <button type="button" class="secondary" (click)="move('footer', item.id, 1)">↓</button>
-              <button type="button" class="secondary" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</button>
+              <app-button variant="secondary" size="sm" (click)="move('footer', item.id, -1)">&uarr;</app-button>
+              <app-button variant="secondary" size="sm" (click)="move('footer', item.id, 1)">&darr;</app-button>
+              <app-button variant="secondary" size="sm" (click)="removeLink('footer', item.id)">{{ 'builder.removeLink' | translate }}</app-button>
             </div>
           </div>
           <div class="editor-grid three">
-            <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><span>{{ 'builder.linkLabel' | translate }}</span><small class="field-desc">{{ 'builder.linkLabelDesc' | translate }}</small><app-input [ngModel]="labelOf(item)" (ngModelChange)="updateLabel('footer', item.id, $event)" /></label>
+            <label><span>{{ 'builder.linkUrl' | translate }}</span><small class="field-desc">{{ 'builder.linkUrlDesc' | translate }}</small><app-input [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>
diff --git a/src/app/features/project-editor/sections/navigation-section.component.ts b/src/app/features/project-editor/sections/navigation-section.component.ts
index 9e6e146..03f1f8f 100644
--- a/src/app/features/project-editor/sections/navigation-section.component.ts
+++ b/src/app/features/project-editor/sections/navigation-section.component.ts
@@ -3,11 +3,13 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { NavigationItemConfig } from '../../../shared/models/config';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
+import { InputComponent } from '../../../shared/ui/input/input.component';
 
 @Component({
   selector: 'app-project-editor-navigation-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, ButtonComponent, InputComponent],
   templateUrl: './navigation-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/preview-section.component.html b/src/app/features/project-editor/sections/preview-section.component.html
index 9c76ab3..1862e9b 100644
--- a/src/app/features/project-editor/sections/preview-section.component.html
+++ b/src/app/features/project-editor/sections/preview-section.component.html
@@ -1,9 +1,9 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.preview' | translate }}</h2>
   <div class="editor-actions">
-    <button type="button" (click)="preview()">{{ 'builder.livePreview' | translate }}</button>
-    <button type="button" class="secondary" (click)="refreshExport()">{{ 'builder.exportBootstrap' | translate }}</button>
-    <button type="button" class="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</button>
+    <app-button variant="primary" (click)="preview()">{{ 'builder.livePreview' | translate }}</app-button>
+    <app-button variant="secondary" (click)="refreshExport()">{{ 'builder.exportBootstrap' | translate }}</app-button>
+    <app-button variant="secondary" (click)="importDraft()">{{ 'builder.importBootstrap' | translate }}</app-button>
   </div>
   @if (importError()) {
     <p class="editor-error">{{ importError()! | translate }}</p>
diff --git a/src/app/features/project-editor/sections/preview-section.component.ts b/src/app/features/project-editor/sections/preview-section.component.ts
index 8347cc3..410a669 100644
--- a/src/app/features/project-editor/sections/preview-section.component.ts
+++ b/src/app/features/project-editor/sections/preview-section.component.ts
@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/cor
 import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
 
 @Component({
   selector: 'app-project-editor-preview-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, ButtonComponent],
   templateUrl: './preview-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/section.shared.scss b/src/app/features/project-editor/sections/section.shared.scss
index 70cecd3..71bae23 100644
--- a/src/app/features/project-editor/sections/section.shared.scss
+++ b/src/app/features/project-editor/sections/section.shared.scss
@@ -39,7 +39,8 @@ label {
   font-weight: 600;
 }
 
-label.full {
+label.full,
+app-form-field.full {
   grid-column: 1 / -1;
 }
 
diff --git a/src/app/features/project-editor/sections/theme-section.component.html b/src/app/features/project-editor/sections/theme-section.component.html
index 8632ef6..b79bcbb 100644
--- a/src/app/features/project-editor/sections/theme-section.component.html
+++ b/src/app/features/project-editor/sections/theme-section.component.html
@@ -2,14 +2,14 @@
 <section class="editor-section-card">
   <h2>{{ 'builder.theme' | translate }}</h2>
   <div class="editor-grid two">
-    <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>
+    <app-form-field [label]="'builder.primaryColor' | translate" [hint]="'builder.primaryColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.primary" (ngModelChange)="updatePalette('primary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.secondaryColor' | translate" [hint]="'builder.secondaryColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.secondary" (ngModelChange)="updatePalette('secondary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.backgroundColor' | translate" [hint]="'builder.backgroundColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.backgroundPrimary" (ngModelChange)="updatePalette('backgroundPrimary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.surfaceColor' | translate" [hint]="'builder.surfaceColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.backgroundSecondary" (ngModelChange)="updatePalette('backgroundSecondary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.textColor' | translate" [hint]="'builder.textColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.textPrimary" (ngModelChange)="updatePalette('textPrimary', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.successColor' | translate" [hint]="'builder.successColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.success" (ngModelChange)="updatePalette('success', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.warningColor' | translate" [hint]="'builder.warningColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.warning" (ngModelChange)="updatePalette('warning', $event)" /></app-form-field>
+    <app-form-field [label]="'builder.dangerColor' | translate" [hint]="'builder.dangerColorDesc' | translate"><input type="color" [ngModel]="bootstrap.theme.palette.danger" (ngModelChange)="updatePalette('danger', $event)" /></app-form-field>
     <label>
       <span>{{ 'builder.themeModeLabel' | translate }}</span>
       <small class="field-desc">{{ 'builder.themeModeDesc' | translate }}</small>
diff --git a/src/app/features/project-editor/sections/theme-section.component.ts b/src/app/features/project-editor/sections/theme-section.component.ts
index b087948..0e52c18 100644
--- a/src/app/features/project-editor/sections/theme-section.component.ts
+++ b/src/app/features/project-editor/sections/theme-section.component.ts
@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 import { ProjectEditorFacade } from '../facade/project-editor.facade';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { PlatformLayoutType, ThemePaletteConfig } from '../../../shared/models/config';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
 
 export interface ThemeModeOption {
   value: 'light' | 'dark' | 'system';
@@ -19,7 +20,7 @@ export interface SiteLayoutOption {
 @Component({
   selector: 'app-project-editor-theme-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, FormFieldComponent],
   templateUrl: './theme-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/project-editor/sections/widgets-section.component.html b/src/app/features/project-editor/sections/widgets-section.component.html
index 992f361..0bd99ab 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.html
+++ b/src/app/features/project-editor/sections/widgets-section.component.html
@@ -8,22 +8,22 @@
         @switch (entry.widget.type) {
           @case ('hero') {
             <div class="editor-grid two">
-              <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.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [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><app-input [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><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>
+              <label><span>{{ 'builder.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [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><app-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><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.layoutLabel' | translate }}</span><small class="field-desc">{{ 'builder.widgetLayoutDesc' | translate }}</small><app-input [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><app-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>
diff --git a/src/app/features/project-editor/sections/widgets-section.component.ts b/src/app/features/project-editor/sections/widgets-section.component.ts
index c521b6e..9044593 100644
--- a/src/app/features/project-editor/sections/widgets-section.component.ts
+++ b/src/app/features/project-editor/sections/widgets-section.component.ts
@@ -2,11 +2,12 @@ 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 { InputComponent } from '../../../shared/ui/input/input.component';
 
 @Component({
   selector: 'app-project-editor-widgets-section',
   standalone: true,
-  imports: [FormsModule, TranslatePipe],
+  imports: [FormsModule, TranslatePipe, InputComponent],
   templateUrl: './widgets-section.component.html',
   styleUrls: ['./section.shared.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush