feat(builder): visual homepage blocks, merchant-language widget settings, real carousel arrows

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

P0 user feedback: homepage builder showed raw section.id like 'section-hero'/'section-categories'; hero widget exposed 'full-bleed'/'boxed' and raw px/vh as free text with no explanation; Overlay/Autoplay toggles made no sense without a slides concept; product carousel widgets rendered arrows nowhere near a working carousel.

Homepage section (sections list -> visual blocks):
- Replaced raw section.id display with a merchant-facing block catalog (icon + name + one-line explanation) for hero/categories/featured-products/product-carousel/recently-viewed/banner/partners/custom-html
- Added block catalog picker to append new blocks (was fixed at whatever the seed data had - task asked 'what if we add manually? not fixed 3')
- Added duplicate and remove per block, alongside the existing drag-to-reorder
- Verified in browser: labels render correctly, add-block and duplicate both confirmed working end-to-end

Widgets section (hero widget):
- 'Layout' free-text replaced with a select (Full width / Boxed) instead of typing 'full-bleed'/'boxed' blind
- 'Height' free-text replaced with a select (Compact/Medium/Tall/Full screen) mapped to real vh values
- New Slides editor: title/subtitle pairs an admin can add/remove: this is the actual multi-slide data the Overlay/Autoplay toggles were referring to with nothing to point at before
- HeroWidgetData contract gains slides[]/autoplay; HeroWidgetComponent now renders a real rotator (dots, click-to-jump, autoplay interval) when more than one slide exists - previously autoplay/overlay props existed but there was no slideshow behavior anywhere to control

Carousel arrows root cause and fix:
- widget-manifest.json offers 'carousel' as a layout option for product-collection/product-carousel widgets, and the admin UI let you select it, but ProductCarouselWidgetComponent always rendered a static CSS grid regardless - there was no carousel implementation to have arrows in the first place
- Now renders a real horizontally-scrollable strip with working prev/next buttons (native scrollBy, disabled at each end) when section.layout.strategy === 'carousel'; falls back to the existing grid otherwise
- Confirmed src/app/components/items-carousel (a PrimeNG p-carousel) is dead code, not wired into any route or widget - not the source of the reported bug

New builder.* i18n keys (en/ru/hy), zero duplicate-key collisions verified via scan

src/app/i18n/en.ts

@@ -670,6 +670,18 @@ export const en: Translations = {
     widgetHeightDesc: 'Preferred height for this widget (e.g. "480px" or "60vh").',
     widgetOverlayDesc: 'Show a dark overlay behind hero text for readability.',
     widgetAutoplayDesc: 'Automatically rotate hero slides without shopper interaction.',
+    heroLayoutFullBleed: 'Full width (edge to edge)',
+    heroLayoutBoxed: 'Boxed (within page margins)',
+    heroHeightCompact: 'Compact',
+    heroHeightMedium: 'Medium',
+    heroHeightTall: 'Tall',
+    heroHeightFullScreen: 'Full screen',
+    heroSlides: 'Slides',
+    heroSlidesHint: 'Add more slides to turn this into a slideshow. The fields above are slide 1. Autoplay and dots only appear once you have more than one slide.',
+    heroSlideTitlePlaceholder: 'Slide title',
+    heroSlideSubtitlePlaceholder: 'Slide subtitle',
+    addSlide: 'Add slide',
+    removeSlide: 'Remove slide',
     widgetColumnsDesc: 'Number of category tiles per row.',
     widgetCardsPerRowDesc: 'Number of product cards shown per row.',
     widgetFiltersDesc: 'Show filter controls alongside the product collection.',
@@ -836,6 +848,26 @@ export const en: Translations = {
     widgetRemove: 'Remove',
     widgetRemoveConfirm: 'Remove this section from the homepage?',
     widgetAdvancedSettings: 'Advanced settings',
+    homepageBlocksHint: 'These are the blocks customers see on your homepage, top to bottom. Drag the handle to reorder.',
+    addBlockHint: 'Add a block to your homepage:',
+    dragToReorder: 'Drag to reorder',
+    blockRemoveConfirm: 'Remove this block from the homepage?',
+    blockHero: 'Hero banner',
+    blockHeroDesc: 'The large welcome banner at the top of your homepage, with a title and call-to-action button.',
+    blockCategories: 'Categories',
+    blockCategoriesDesc: 'A grid of category tiles so customers can browse by department.',
+    blockFeaturedProducts: 'Featured products',
+    blockFeaturedProductsDesc: 'A grid of hand-picked or best-selling products.',
+    blockProductCarousel: 'Product carousel',
+    blockProductCarouselDesc: 'A horizontally scrolling row of products, with arrows to browse more.',
+    blockRecentlyViewed: 'Recently viewed',
+    blockRecentlyViewedDesc: 'Shows each customer the products they looked at recently.',
+    blockBanner: 'Promo banner',
+    blockBannerDesc: 'A single image with a headline and button, for sales or announcements.',
+    blockPartners: 'Partner logos',
+    blockPartnersDesc: 'A row of brand or partner logos for trust and credibility.',
+    blockCustomHtml: 'Custom block',
+    blockCustomHtmlDesc: 'Free-form HTML for anything the other blocks do not cover.',
   },
   dashboard: {
     title: 'Dashboard',

src/app/i18n/hy.ts

@@ -670,6 +670,18 @@ export const hy: Translations = {
     widgetHeightDesc: 'Այս վիջեթի նախընտրելի բարձրությունը (օր․՝ "480px" կամ "60vh")։',
     widgetOverlayDesc: 'Ցույց տալ մուգ overlay hero տեքստի հետևում՝ ընթեռնելիության համար։',
     widgetAutoplayDesc: 'Ինքնաշխատ պտտել hero սլայդները առանց գնորդի մասնակցության։',
+    heroLayoutFullBleed: 'Ամբողջ լայնությամբ (եզրից եզր)',
+    heroLayoutBoxed: 'Շրջանակով (էջի լուսանցքների սահմաններում)',
+    heroHeightCompact: 'Կոմպակտ',
+    heroHeightMedium: 'Միջին',
+    heroHeightTall: 'Բարձր',
+    heroHeightFullScreen: 'Լիաէկրան',
+    heroSlides: 'Սլայդներ',
+    heroSlidesHint: 'Ավելացրեք սլայդներ՝ սլայդշոու ստանալու համար։ Վերևի դաշտերը 1-ին սլայդն են։ Ինքնաշարժ և կետերը հայտնվում են միայն մեկից ավելի սլայդի դեպքում։',
+    heroSlideTitlePlaceholder: 'Սլայդի վերնագիր',
+    heroSlideSubtitlePlaceholder: 'Սլայդի ենթավերնագիր',
+    addSlide: 'Ավելացնել սլայդ',
+    removeSlide: 'Հեռացնել սլայդը',
     widgetColumnsDesc: 'Կատեգորիայի սալիկների քանակը մեկ շարքում։',
     widgetCardsPerRowDesc: 'Ապրանքի քարտերի քանակը մեկ շարքում։',
     widgetFiltersDesc: 'Ցույց տալ ֆիլտրերի կառավարման տարրերը ապրանքների հավաքածուի կողքին։',
@@ -836,6 +848,26 @@ export const hy: Translations = {
     widgetRemove: 'Հեռացնել',
     widgetRemoveConfirm: 'Հեռացնե՞լ այս բլոկը գլխավոր էջից։',
     widgetAdvancedSettings: 'Լրացուցիչ կարգավորումներ',
+    homepageBlocksHint: 'Սրանք են բլոկները, որոնք գնորդները տեսնում են գլխավոր էջում վերևից ներքև։ Քաշեք բռնակից՝ կարգը փոխելու համար։',
+    addBlockHint: 'Ավելացնել բլոկ գլխավոր էջում.',
+    dragToReorder: 'Քաշեք՝ կարգը փոխելու համար',
+    blockRemoveConfirm: 'Հեռացնե՞լ այս բլոկը գլխավոր էջից։',
+    blockHero: 'Ողջույնի բաններ',
+    blockHeroDesc: 'Գլխավոր էջի վերևի մեծ բանները՝ վերնագրով և գործողության կոճակով։',
+    blockCategories: 'Կատեգորիաներ',
+    blockCategoriesDesc: 'Կատեգորիաների ցանց, որպեսզի գնորդները կարողանան դիտարկել բաժինները։',
+    blockFeaturedProducts: 'Առաջարկվող ապրանքներ',
+    blockFeaturedProductsDesc: 'Ընտրված կամ ամենավաճառվող ապրանքների ցանց։',
+    blockProductCarousel: 'Ապրանքների կարուսել',
+    blockProductCarouselDesc: 'Հորիզոնական ոլորվող ապրանքների շարք՝ սլաքներով ավելին դիտելու համար։',
+    blockRecentlyViewed: 'Վերջերս դիտվածներ',
+    blockRecentlyViewedDesc: 'Ցույց է տալիս յուրաքանչյուր գնորդի՝ նրա վերջերս դիտած ապրանքները։',
+    blockBanner: 'Գովազդային բաններ',
+    blockBannerDesc: 'Մեկ նկար՝ վերնագրով և կոճակով, զեղչերի կամ հայտարարությունների համար։',
+    blockPartners: 'Գործընկերների լոգոներ',
+    blockPartnersDesc: 'Բրենդի կամ գործընկերների լոգոների շարք՝ վստահության համար։',
+    blockCustomHtml: 'Սեփական բլոկ',
+    blockCustomHtmlDesc: 'Ազատ HTML այն ամենի համար, ինչ մյուս բլոկները չեն ծածկում։',
   },
   dashboard: {
     title: 'Կառավարման վահանակ',

src/app/i18n/ru.ts

@@ -670,6 +670,18 @@ export const ru: Translations = {
     widgetHeightDesc: 'Предпочтительная высота виджета (например, "480px" или "60vh").',
     widgetOverlayDesc: 'Показывать тёмную подложку под текстом hero для читаемости.',
     widgetAutoplayDesc: 'Автоматически прокручивать слайды hero без участия покупателя.',
+    heroLayoutFullBleed: 'На всю ширину (край в край)',
+    heroLayoutBoxed: 'В рамке (с отступами страницы)',
+    heroHeightCompact: 'Компактная',
+    heroHeightMedium: 'Средняя',
+    heroHeightTall: 'Высокая',
+    heroHeightFullScreen: 'На весь экран',
+    heroSlides: 'Слайды',
+    heroSlidesHint: 'Добавьте ещё слайды, чтобы получился слайд-шоу. Поля выше — это слайд 1. Автопрокрутка и точки появляются только при более чем одном слайде.',
+    heroSlideTitlePlaceholder: 'Заголовок слайда',
+    heroSlideSubtitlePlaceholder: 'Подзаголовок слайда',
+    addSlide: 'Добавить слайд',
+    removeSlide: 'Удалить слайд',
     widgetColumnsDesc: 'Количество плиток категорий в ряду.',
     widgetCardsPerRowDesc: 'Количество карточек товаров в ряду.',
     widgetFiltersDesc: 'Показывать элементы управления фильтрами рядом с подборкой товаров.',
@@ -836,6 +848,26 @@ export const ru: Translations = {
     widgetRemove: 'Удалить',
     widgetRemoveConfirm: 'Удалить этот блок с главной страницы?',
     widgetAdvancedSettings: 'Дополнительные настройки',
+    homepageBlocksHint: 'Это блоки, которые покупатели видят на главной странице сверху вниз. Перетаскивайте за ручку, чтобы изменить порядок.',
+    addBlockHint: 'Добавить блок на главную страницу:',
+    dragToReorder: 'Перетащите, чтобы изменить порядок',
+    blockRemoveConfirm: 'Удалить этот блок с главной страницы?',
+    blockHero: 'Приветственный баннер',
+    blockHeroDesc: 'Крупный баннер вверху главной страницы с заголовком и кнопкой призыва к действию.',
+    blockCategories: 'Категории',
+    blockCategoriesDesc: 'Сетка плиток категорий, чтобы покупатели могли просматривать разделы.',
+    blockFeaturedProducts: 'Рекомендуемые товары',
+    blockFeaturedProductsDesc: 'Сетка отобранных вручную или самых продаваемых товаров.',
+    blockProductCarousel: 'Карусель товаров',
+    blockProductCarouselDesc: 'Горизонтально прокручиваемый ряд товаров со стрелками для просмотра других.',
+    blockRecentlyViewed: 'Недавно просмотренные',
+    blockRecentlyViewedDesc: 'Показывает каждому покупателю товары, которые он недавно смотрел.',
+    blockBanner: 'Промо-баннер',
+    blockBannerDesc: 'Одно изображение с заголовком и кнопкой — для акций или объявлений.',
+    blockPartners: 'Логотипы партнёров',
+    blockPartnersDesc: 'Ряд логотипов брендов или партнёров для доверия.',
+    blockCustomHtml: 'Свой блок',
+    blockCustomHtmlDesc: 'Произвольный HTML для всего, что не покрывают другие блоки.',
   },
   dashboard: {
     title: 'Панель управления',

src/app/i18n/translations.ts

@@ -668,6 +668,18 @@ export interface Translations {
     widgetHeightDesc: string;
     widgetOverlayDesc: string;
     widgetAutoplayDesc: string;
+    heroLayoutFullBleed: string;
+    heroLayoutBoxed: string;
+    heroHeightCompact: string;
+    heroHeightMedium: string;
+    heroHeightTall: string;
+    heroHeightFullScreen: string;
+    heroSlides: string;
+    heroSlidesHint: string;
+    heroSlideTitlePlaceholder: string;
+    heroSlideSubtitlePlaceholder: string;
+    addSlide: string;
+    removeSlide: string;
     widgetColumnsDesc: string;
     widgetCardsPerRowDesc: string;
     widgetFiltersDesc: string;
@@ -835,6 +847,26 @@ export interface Translations {
     widgetRemove: string;
     widgetRemoveConfirm: string;
     widgetAdvancedSettings: string;
+    homepageBlocksHint: string;
+    addBlockHint: string;
+    dragToReorder: string;
+    blockRemoveConfirm: string;
+    blockHero: string;
+    blockHeroDesc: string;
+    blockCategories: string;
+    blockCategoriesDesc: string;
+    blockFeaturedProducts: string;
+    blockFeaturedProductsDesc: string;
+    blockProductCarousel: string;
+    blockProductCarouselDesc: string;
+    blockRecentlyViewed: string;
+    blockRecentlyViewedDesc: string;
+    blockBanner: string;
+    blockBannerDesc: string;
+    blockPartners: string;
+    blockPartnersDesc: string;
+    blockCustomHtml: string;
+    blockCustomHtmlDesc: string;
   };
   dashboard: {
     title: string;