@designcrowd/library.brand-page 6.0.12 → 6.0.13

package/lib/src/metadata-builder/parsers/section-tool-arguments.d.ts

@@ -92,10 +92,15 @@ export interface ProfileSectionArguments {
     background_color?: string | null;
 }
 export interface TextSectionItem {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     text?: RichTextField;
     text_style?: TextStyleArguments;
 }
@@ -108,21 +113,26 @@ export interface TextSectionArguments {
     /** Multiple text items (BrandSite) */
     items?: TextSectionItem[];
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
     background_color?: string | null;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface ImageSectionArguments {
     image_url?: string;
     image_title?: string;
 }
 export interface ImageGalleryItem {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     image_url?: string;
     caption?: string;
 }
@@ -131,10 +141,10 @@ export interface ImageGallerySectionArguments {
     gallery_type?: 'grid' | 'carousel' | 'masonry';
     is_full_width?: boolean;
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface GeneralLinkSectionArguments {
     title?: string;
@@ -189,10 +199,15 @@ export interface TiktokSectionArguments {
     url?: string;
 }
 export interface SocialLink {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     platform?: 'facebook' | 'x' | 'instagram' | 'youtube' | 'linkedin' | 'pinterest' | 'twitch' | 'tiktok';
     url?: string;
 }
@@ -204,10 +219,10 @@ export interface SocialLinksSectionArguments {
     /** Style for the icon container background (used when icon_style is 'square' or 'circle'). */
     icon_background_style?: TextStyleArguments;
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface MailingListSectionArguments {
     title?: RichTextField;
@@ -215,6 +230,8 @@ export interface MailingListSectionArguments {
     accepted_fields?: 'emailOnly' | 'nameAndEmail';
     title_style?: TextStyleArguments;
     button_text_style?: ButtonTextStyleArguments;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface ContactFormFieldToggle {
     /** Field ID matching FORM_FIELD_IDS (e.g., 'firstName', 'lastName', 'phoneNumber', 'message') */
@@ -239,6 +256,8 @@ export interface ContactFormSectionArguments {
     fields?: ContactFormFieldToggle[];
     background_color?: string | null;
     card_style?: CardStyleArguments;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface BannerSectionArguments {
     title?: RichTextField;
@@ -255,6 +274,8 @@ export interface BannerSectionArguments {
     button_text_style?: ButtonTextStyleArguments;
     background_color?: string | null;
     card_style?: CardStyleArguments;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface AboutSectionArguments {
     title?: RichTextField;
@@ -266,12 +287,19 @@ export interface AboutSectionArguments {
     title_style?: TextStyleArguments;
     paragraph_style?: TextStyleArguments;
     background_color?: string | null;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface ImagesSectionItem {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     image_url?: string;
     heading?: string;
     text?: string;
@@ -283,10 +311,8 @@ export interface ImagesSectionArguments {
     items?: ImagesSectionItem[];
     display_style?: 'left-aligned' | 'right-aligned' | 'centered' | 'media-only' | 'center-card-aligned-image' | 'alternate-image';
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
     title_style?: TextStyleArguments;
     description_style?: TextStyleArguments;
     heading_style?: TextStyleArguments;
@@ -298,10 +324,15 @@ export interface ImagesSectionArguments {
     card_style?: CardStyleArguments;
 }
 export interface TestimonialItem {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     testimonial?: string;
     name?: string;
     position?: string;
@@ -314,22 +345,27 @@ export interface TestimonialSectionArguments {
     items?: TestimonialItem[];
     display_style?: 'centered' | 'big-image' | 'columns';
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
     title_style?: TextStyleArguments;
     testimonial_style?: TextStyleArguments;
     name_style?: TextStyleArguments;
     position_style?: TextStyleArguments;
     background_style?: BackgroundStyleArguments;
     card_style?: CardStyleArguments;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface ShapesSectionItem {
-    /** 0-based index of existing item to update in-place */
-    item_index?: number;
-    /** 0-based position to insert a new item at */
-    insert_at?: number;
+    /** Stable id of the existing item to update or move. Omit to ADD a new item. */
+    item_id?: string;
+    /**
+     * Id of an existing item to position this item before (insert for new items,
+     * move for existing ones). Use "__end__" for the end of the list. Omit to
+     * leave an existing item in place / append a new item. Mirrors the
+     * section-level move_before_content_id.
+     */
+    move_before_item_id?: string;
     icon_image_url?: string;
     shape_url?: string;
     color_theme?: string;
@@ -342,10 +378,8 @@ export interface ShapesSectionArguments {
     items?: ShapesSectionItem[];
     display_style?: 'left-aligned' | 'right-aligned' | 'centered' | 'media-only' | 'center-card-aligned-image' | 'alternate-image';
     _replace_items?: boolean;
-    /** 0-based indices of items to remove */
-    _remove_item_indices?: number[];
-    /** New order as array of current 0-based indices */
-    _reorder_items?: number[];
+    /** Stable ids of items to remove. Order-independent (no index shifting). */
+    _remove_item_ids?: string[];
     title_style?: TextStyleArguments;
     description_style?: TextStyleArguments;
     heading_style?: TextStyleArguments;
@@ -364,6 +398,8 @@ export interface BookingSectionArguments {
     description_style?: TextStyleArguments;
     button_text_style?: ButtonTextStyleArguments;
     background_color?: string | null;
+    padding_top?: number;
+    padding_bottom?: number;
 }
 export interface DividerSectionArguments {
     divider_style?: 'none' | 'thin' | 'thick';

package/lib/src/shared/content-settings/components/links-field/LinksField.mixin.js

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue';
 import cloneDeep from 'lodash.clonedeep';
+import * as uuid from 'uuid';
 const ACCEPTED_MIME_TYPES = 'image/png, image/jpeg, image/svg+xml';
 export default defineComponent({
     props: {
@@ -75,6 +76,7 @@ export default defineComponent({
         },
         addNewItem() {
             const newItem = {
+                id: uuid.v4(),
                 height: 0,
                 imageTitle: '',
                 width: 0,

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -2871,6 +2871,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -3095,6 +3096,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -2824,6 +2824,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;
@@ -3048,6 +3049,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 logoImageBase64Url?: string | undefined;
                 socialLinks: {
                     url: string;
+                    id: string;
                     imageUrl: string;
                     size?: string | undefined;
                     imageTitle: string;

package/lib/src/utils/minify-brand-page-metadata.d.ts

@@ -2,6 +2,8 @@ import { type BrandPageModel, type BrandPageType, type NavModel, type PageStyles
 import type { ContentType } from '../brand-page/models/content.model';
 import { type AssetEntry } from './build-asset-manifest';
 type MinifiedFooterSocialLink = {
+    position: number;
+    id?: string;
     imageUrl: string;
     url: string;
 };

package/lib/src/utils/minify-brand-page-metadata.js

@@ -156,6 +156,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('name', item.name, editor),
                         ...st('jobTitle', item.position, editor),
                         ...st('testimonials', item.testimonials, editor),
@@ -183,6 +184,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.items) && {
                     items: c.items.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...includeImageWithKey(item.imageUrl),
                         ...st('title', item.title, editor),
                         ...st('paragraph', item.paragraph, editor),
@@ -212,6 +214,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.textItems) && {
                     textItems: c.textItems.map((item, index) => ({
                         position: index + 1,
+                        ...(item.id && { id: item.id }),
                         ...st('text', item.text, editor),
                         ...(includeStyle(item.textStyle) && { textStyle: item.textStyle }),
                     })),
@@ -292,6 +295,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.links) && {
                     links: c.links.map((link, index) => ({
                         position: index + 1,
+                        ...(link.id && { id: link.id }),
                         ...(includeString(link.url) && { url: link.url }),
                         ...includeImageWithKey(link.imageUrl),
                     })),
@@ -331,6 +335,7 @@ const minifyContent = (content, editor, assets) => {
                 ...(Array.isArray(c.images) && {
                     images: c.images.map((img, index) => ({
                         position: index + 1,
+                        ...(img.id && { id: img.id }),
                         ...includeImageWithKey(img.imageUrl),
                         ...st('imageTitle', img.imageTitle, editor),
                     })),
@@ -371,7 +376,9 @@ const minifyFooter = (footer, logoAssetKey) => {
         logoImageWidth: footer.logoImageWidth || undefined,
         ...(logoAssetKey && { logoAssetKey }),
         socialLinks: footer.socialLinks?.length
-            ? footer.socialLinks.map((l) => ({
+            ? footer.socialLinks.map((l, index) => ({
+                position: index + 1,
+                ...(l.id && { id: l.id }),
                 imageUrl: l.imageUrl || '',
                 url: l.url || '',
             }))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.12",
+  "version": "6.0.13",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/image-gallery/ImageGallery.stories.ts

@@ -52,6 +52,7 @@ export const Carousel = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-carousel-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 300,
           height: 300,
@@ -83,6 +84,7 @@ export const Masonry = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-masonry-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 564,
           height: 416,
@@ -114,6 +116,7 @@ export const Grid = () => {
 
       content.images = new Array(10).fill(0).map((_, i) => {
         return {
+          id: `gallery-grid-item-${i}`,
           imageUrl: `https://picsum.photos/${300 * ((i + 1) / 4)}/${300 * ((i + 1) / 4)}?random=${i}`,
           width: 564,
           height: 416,

package/src/brand-page/components/image-gallery/ImageGallery.test.ts

@@ -47,6 +47,7 @@ const createTestImageGalleryViewModel = (
   role: 'image-gallery',
   images: [
     {
+      id: 'gallery-item-1',
       imageUrl: faker.internet.url(),
       width: faker.datatype.number(1000),
       height: faker.datatype.number(1000),

package/src/brand-page/components/image-gallery/masonry/MasonryGallery.mixin.ts

@@ -7,7 +7,8 @@ import type { ImageGalleryImageClickPayload } from '../models';
 import type { BrandPageContext, ImageGalleryItem } from '../../../models';
 import { getImageAltText } from '../../../utils';
 
-interface IndexedImageGalleryItem extends ImageGalleryItem {
+interface IndexedImageGalleryItem extends Omit<ImageGalleryItem, 'id'> {
+  // Local rendering index, distinct from the stable string `id` on ImageItem.
   id: number;
 }
 

package/src/brand-page/components/images-section/ImagesSection.stories.ts

@@ -50,8 +50,9 @@ export const Images = () => {
     data() {
       const content = createInitialImagesSectionContent();
 
-      content.items = new Array(2).fill(0).map(() => {
+      content.items = new Array(2).fill(0).map((_, i) => {
         return {
+          id: `images-section-item-${i}`,
           imageUrl:
             'https://bc-user-uploads.brandcrowd.com/public/media-int/6b3a4d19-e95c-4d59-aa22-ac033a2cec2f/1116870a-c672-4306-b515-32f8d5d6e10c',
           width: 564,

package/src/brand-page/components/social-links/SocialLinks.stories.ts

@@ -14,6 +14,7 @@ const viewModel: SocialLinksViewModel = {
   title: 'Follow us on',
   links: [
     {
+      id: 'social-link-facebook',
       imageUrl: 'facebook',
       url: '',
       imageTitle: '',
@@ -24,6 +25,7 @@ const viewModel: SocialLinksViewModel = {
       imageLink: '',
     },
     {
+      id: 'social-link-instagram',
       imageUrl: 'instagram',
       url: 'https://www.instagram.com',
       imageTitle: '',
@@ -34,6 +36,7 @@ const viewModel: SocialLinksViewModel = {
       imageLink: '',
     },
     {
+      id: 'social-link-empty',
       imageUrl: '',
       url: '',
       imageTitle: '',

package/src/brand-page/components/social-links/SocialLinks.vue.test.ts

@@ -53,6 +53,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
   isFullWidth: false,
   links: [
     {
+      id: 'social-link-facebook',
       imageUrl: 'facebook',
       url: 'https://www.facebook.com',
       imageTitle: '',
@@ -63,6 +64,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
       imageLink: '',
     },
     {
+      id: 'social-link-instagram',
       imageUrl: 'instagram',
       url: 'https://www.instagram.com',
       imageTitle: '',
@@ -73,6 +75,7 @@ const createTestSocialLinksViewModel = (): SocialLinksViewModel => ({
       imageLink: '',
     },
     {
+      id: 'social-link-twitter',
       imageUrl: 'twitter',
       url: 'https://www.twitter.com',
       imageTitle: '',
@@ -115,6 +118,7 @@ describe('Social Links', () => {
         isPreview: false,
         links: [
           {
+            id: 'social-link-facebook',
             imageUrl: 'facebook',
             url: '',
             imageTitle: '',
@@ -145,6 +149,7 @@ describe('Social Links', () => {
         isPreview: false,
         links: [
           {
+            id: 'social-link-facebook',
             imageUrl: 'facebook',
             url: 'https://www.fb.com',
             imageTitle: '',

package/src/brand-page/components/testimonial-section/__fixtures__/data.ts

@@ -14,6 +14,7 @@ export const viewModel: TestimonialSectionViewModel = {
   displayStyle: 'centered',
   items: [
     {
+      id: 'testimonial-1',
       testimonials: faker.lorem.paragraphs(1),
       imageUrl: unsplashImage,
       name: '1',
@@ -22,6 +23,7 @@ export const viewModel: TestimonialSectionViewModel = {
       colorReplacements: [],
     },
     {
+      id: 'testimonial-2',
       testimonials: faker.lorem.paragraphs(3),
       imageUrl: unsplashImage,
       name: '2',
@@ -30,6 +32,7 @@ export const viewModel: TestimonialSectionViewModel = {
       colorReplacements: [],
     },
     {
+      id: 'testimonial-3',
       testimonials: faker.lorem.paragraphs(5),
       imageUrl: 'https://source.unsplash.com/random/200x200?3',
       name: '3',

package/src/brand-page/components/text/Text.stories.ts

@@ -34,6 +34,7 @@ const BSviewModel: TextViewModel = {
   text: 'asdasjdlkasjmdlkmsad',
   textItems: [
     {
+      id: 'text-item-1',
       text: 'lorem ipsum',
       textStyle: {
         fontSize: '1rem',
@@ -42,6 +43,7 @@ const BSviewModel: TextViewModel = {
       },
     },
     {
+      id: 'text-item-2',
       text: 'lorem ipsum',
       textStyle: {
         fontSize: '1rem',

package/src/brand-page/models/index.ts

@@ -28,6 +28,7 @@ import { TEXT_STYLE_TYPES, TextStyles } from './styles.model';
 import { EMPTY_LOGO_IMAGE_MODEL, LogoStyles } from './logo.model';
 import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
 import cloneDeep from 'lodash.clonedeep';
+import * as uuid from 'uuid';
 import type { BrandPagePaymentConfig } from './payment.model';
 
 export * from './brand-page-context.model';
@@ -234,6 +235,13 @@ export interface ImageContent extends Content {
 }
 
 export interface ImageItem {
+  /**
+   * Stable per-item identifier. Mirrors the section-level `Content.id` one
+   * level deeper so AI tool calls can reference items by id rather than by
+   * positional index. Backfilled on load for persisted data that predates
+   * item ids (see ensureItemIds), so it is always present at runtime.
+   */
+  id: string;
   imageUrl: string;
   imageTitle: string;
   width: number;
@@ -466,6 +474,8 @@ export interface ShapeItem extends ImageItem {
 }
 
 export interface TestimonialItems {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   imageUrl: string;
   name: string;
   position: string;
@@ -483,6 +493,8 @@ export interface TestimonialItems {
 }
 
 export interface TextItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   text: string;
   textStyle: TextStyleDeclaration;
 
@@ -552,6 +564,8 @@ export interface AboutSectionContent extends Content {
 }
 
 export interface LinksItem {
+  /** Stable per-item identifier. See ImageItem.id. */
+  id: string;
   imageUrl: string;
   url: string;
   size?: string;
@@ -828,6 +842,7 @@ export abstract class AbstractPageFooterStyles {
     this.logoImageWidth = options.logoImageWidth || DEFAULT_LOGO_WIDTH;
     this.socialLinks = options.socialLinks || [
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'facebook',
@@ -837,6 +852,7 @@ export abstract class AbstractPageFooterStyles {
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'instagram',
@@ -846,6 +862,7 @@ export abstract class AbstractPageFooterStyles {
         imageLink: '',
       },
       {
+        id: uuid.v4(),
         width: 0,
         height: 0,
         imageUrl: 'x',