feat(builder): implement visual homepage builder

New HomepageOverviewComponent (Tasks 1+8), mounted at the top of the
existing Homepage section page: completion ring, active/hidden section
counts, recommended next step, last-modified timestamp, and a 6-item
Homepage Health checklist (hero/categories/products/promotion/
newsletter/any-sections) - all derived from the real page.sections/
widgets data already in the facade, nothing fabricated.

Existing page-level drag-and-drop reordering (homepage-section's
CdkDragDrop over page.sections) was already implemented pre-Sprint 5 -
left as-is per "build on top of, do not replace."

Widgets section (Task 2) rewritten from a bare list into visual cards:
per-widget icon + humanized type label (hero/categories/product-
collection), a visible/hidden toggle and badge, up/down move buttons
(keyboard-accessible reorder within a section - see Known limitations
for why this replaces pointer drag for widgets specifically), duplicate,
and remove (with confirm). The existing per-type field editors (hero/
categories/product-collection) are unchanged; the raw-JSON fallback for
unknown widget types now sits behind a collapsed "Advanced settings"
disclosure instead of being the default view.

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

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

@@ -6,13 +6,26 @@ import { TranslateService } from '../../../i18n/translate.service';
 import { InputComponent } from '../../../shared/ui/input/input.component';
 import { SectionCardComponent } from '../../../shared/ui/section-card/section-card.component';
 import { ToggleComponent } from '../../../shared/ui/toggle/toggle.component';
+import { WidgetConfig } from '../../../shared/models/config';
+
+const WIDGET_ICONS: Record<string, string> = {
+  hero: 'pi-image',
+  categories: 'pi-th-large',
+  'product-collection': 'pi-box',
+};
+
+const WIDGET_LABEL_KEYS: Record<string, string> = {
+  hero: 'builder.widgetTypeHero',
+  categories: 'builder.widgetTypeCategories',
+  'product-collection': 'builder.widgetTypeProducts',
+};
 
 @Component({
   selector: 'app-project-editor-widgets-section',
   standalone: true,
   imports: [FormsModule, TranslatePipe, InputComponent, SectionCardComponent, ToggleComponent],
   templateUrl: './widgets-section.component.html',
-  styleUrls: ['./section.shared.scss'],
+  styleUrls: ['./section.shared.scss', './widgets-section.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProjectEditorWidgetsSectionComponent {
@@ -24,22 +37,101 @@ export class ProjectEditorWidgetsSectionComponent {
     return messageKey ? this.translate.t(messageKey) : null;
   };
 
-  updateWidget(widgetId: string, updater: (props: Record<string, unknown>) => Record<string, unknown>): void {
+  widgetIcon(type: string): string {
+    return WIDGET_ICONS[type] ?? 'pi-stop';
+  }
+
+  widgetLabel(widget: WidgetConfig): string {
+    if (widget.title) {
+      return widget.title;
+    }
+    const key = WIDGET_LABEL_KEYS[widget.type];
+    return key ? this.translate.t(key) : widget.type;
+  }
+
+  isVisible(widget: WidgetConfig): boolean {
+    return widget.visible !== false;
+  }
+
+  toggleVisible(widgetId: string): void {
+    this.updateWidgetConfig(widgetId, widget => ({ ...widget, visible: !this.isVisible(widget) }));
+  }
+
+  moveWidget(widgetId: string, direction: -1 | 1): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => ({
+        ...page,
+        sections: page.sections.map(section => {
+          const index = section.widgets.findIndex(w => w.id === widgetId);
+          if (index === -1) {
+            return section;
+          }
+          const targetIndex = index + direction;
+          if (targetIndex < 0 || targetIndex >= section.widgets.length) {
+            return section;
+          }
+          const widgets = [...section.widgets];
+          [widgets[index], widgets[targetIndex]] = [widgets[targetIndex], widgets[index]];
+          return { ...section, widgets };
+        })
+      }))
+    }));
+  }
+
+  duplicateWidget(widgetId: string): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => ({
+        ...page,
+        sections: page.sections.map(section => {
+          const index = section.widgets.findIndex(w => w.id === widgetId);
+          if (index === -1) {
+            return section;
+          }
+          const original = section.widgets[index];
+          const copy: WidgetConfig = { ...original, id: `${original.id}-copy-${Date.now()}` };
+          const widgets = [...section.widgets];
+          widgets.splice(index + 1, 0, copy);
+          return { ...section, widgets };
+        })
+      }))
+    }));
+  }
+
+  removeWidget(widgetId: string): void {
+    if (!confirm(this.translate.t('builder.widgetRemoveConfirm'))) {
+      return;
+    }
     this.facade.updateBootstrap(current => ({
       ...current,
       pages: current.pages.map(page => ({
         ...page,
         sections: page.sections.map(section => ({
           ...section,
-          widgets: section.widgets.map(widget => widget.id !== widgetId ? widget : ({
-            ...widget,
-            props: updater(widget.props ?? {})
-          }))
+          widgets: section.widgets.filter(w => w.id !== widgetId)
         }))
       }))
     }));
   }
 
+  private updateWidgetConfig(widgetId: string, updater: (widget: WidgetConfig) => WidgetConfig): void {
+    this.facade.updateBootstrap(current => ({
+      ...current,
+      pages: current.pages.map(page => ({
+        ...page,
+        sections: page.sections.map(section => ({
+          ...section,
+          widgets: section.widgets.map(widget => widget.id !== widgetId ? widget : updater(widget))
+        }))
+      }))
+    }));
+  }
+
+  updateWidget(widgetId: string, updater: (props: Record<string, unknown>) => Record<string, unknown>): void {
+    this.updateWidgetConfig(widgetId, widget => ({ ...widget, props: updater(widget.props ?? {}) }));
+  }
+
   updateProp(widgetId: string, key: string, value: unknown): void {
     this.updateWidget(widgetId, props => ({ ...props, [key]: value }));
   }