@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -628,15 +628,15 @@ export const useRichTextEditor = (
       );
       fontSettings.selectedTextColor = hasLogoColorVar(globalStyles.color ?? '')
         ? '#000000'
-        : globalStyles?.color ?? '#000000';
+        : (globalStyles?.color ?? '#000000');
       fontSettings.selectedBackgroundColor = hasLogoColorVar(
         globalStyles?.backgroundColor ?? '',
       )
         ? 'transparent'
-        : globalStyles?.backgroundColor ?? 'transparent';
+        : (globalStyles?.backgroundColor ?? 'transparent');
       lineHeight.value = globalStyles?.lineHeight?.includes('em')
         ? emToPx(globalStyles?.lineHeight ?? '1em')
-        : globalStyles?.lineHeight ?? '1';
+        : (globalStyles?.lineHeight ?? '1');
       letterSpacing.value = letterSpacingValueConvertor.convert(
         globalStyles ?? {},
       );
@@ -658,15 +658,15 @@ export const useRichTextEditor = (
         props.styles?.color ?? '#000000',
       )
         ? '#000000'
-        : props.styles?.color ?? '#000000';
+        : (props.styles?.color ?? '#000000');
       fontSettings.selectedBackgroundColor = hasLogoColorVar(
         props.styles?.backgroundColor ?? '',
       )
         ? 'transparent'
-        : props.styles?.backgroundColor ?? 'transparent';
+        : (props.styles?.backgroundColor ?? 'transparent');
       lineHeight.value = props.styles?.lineHeight?.includes('em')
         ? emToPx(props.styles?.lineHeight ?? '1em')
-        : props.styles?.lineHeight ?? '1';
+        : (props.styles?.lineHeight ?? '1');
       letterSpacing.value = letterSpacingValueConvertor.convert(
         props.styles ?? {},
       );

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -103,6 +103,7 @@ export const UPGRADE_CTA_LOCATIONS = {
 
 export const AI_CTA_LOCATIONS = {
   AI_BUILDER_TAB: 'ai_builder_tab',
+  AI_BUILDER_CHAT_UPSELL: 'ai_builder_chat_upsell',
 };
 
 export const TRIGGER_TYPE = {

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -217,14 +217,14 @@ const PADDING_CONTROL_FIELDS = (
     type: 'slider',
     title: contentSettingsTr(`topPaddingTitle`),
     minLength: 0,
-    maxLength: 100,
+    maxLength: 200,
     groupId,
   },
   bottomPadding: {
     type: 'slider',
     title: contentSettingsTr(`bottomPaddingTitle`),
     minLength: 0,
-    maxLength: 100,
+    maxLength: 200,
     groupId,
   },
 });
@@ -446,9 +446,9 @@ const shopReplaceImageSettings =
     titleReplace: contentSettingsTr(`imageReplaceTitle`),
     contentMediaFieldName: MediaFieldNames.requestPaymentConfig,
     setContentMedia: (
-      content: ShopContent,
-      value: SetContentMediaPayload,
-      index?: number,
+      _content: ShopContent,
+      _value: SetContentMediaPayload,
+      _index?: number,
     ) => '',
     openByDefault: false,
     mediaType: null,

package/src/brand-page-maker/convertors/text-image-display-style.convertor.ts

@@ -11,7 +11,7 @@ import {
 import type { ImagesSectionContent, MediaType } from '@brand-page';
 
 export const getTextMediaOptionsConverterByMediaType = (
-  mediaType: MediaType,
+  _mediaType: MediaType,
 ): ValueConvertor<
   string | null,
   ButtonGroupConfig,

package/src/brand-page-maker/models/button-styles-config.ts

@@ -15,8 +15,10 @@ export const ButtonStyleConfigOptions = [
 
 export type ButtonStyleConfigOption = (typeof ButtonStyleConfigOptions)[number];
 
-export interface ButtonStyleConfig
-  extends Omit<ButtonStyles, 'style' | 'template' | 'selectedButtonStyleId'> {
+export interface ButtonStyleConfig extends Omit<
+  ButtonStyles,
+  'style' | 'template' | 'selectedButtonStyleId'
+> {
   readonly id: string;
   readonly hasShadow: boolean;
   readonly hasSoftShadow?: boolean;

package/src/brand-page-maker/models/content-settings-configs.ts

@@ -156,8 +156,10 @@ export interface ContentSettingsField<TContent> {
   styleName?: string;
 }
 
-export interface ContentSettingsMultiField<TContent, TField>
-  extends Omit<ContentSettingsField<TContent>, 'type' | 'role'> {
+export interface ContentSettingsMultiField<TContent, TField> extends Omit<
+  ContentSettingsField<TContent>,
+  'type' | 'role'
+> {
   type: ItemMultiFieldType;
   role: 'multi';
   fields?: {

package/src/brand-page-maker/models/navigation-style-configs.ts

@@ -14,7 +14,7 @@ import type {
 import type { PageSection } from '@shared/page-settings/models';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import type { ButtonGroupOption } from './button-group.model';
-import { tr, commonTr, modelsTr } from '@src/composables/useTranslate';
+import { commonTr, modelsTr } from '@src/composables/useTranslate';
 
 export const NavigationStyleConfigOptions = {
   defaultBorderColor: 'defaultBorderColor',
@@ -46,11 +46,10 @@ export const NAVIGATION_STYLE_CONFIG_OPTION_TITLES = (): Record<
   subNavBackgroundColor: modelsTr('subNavBackgroundColor'),
 });
 
-export interface NavigationStyleConfig
-  extends Omit<
-    NavigationDesktop | NavigationMobile,
-    'isLogoVisible' | 'hamburgerMenuStyle' | 'viewport'
-  > {
+export interface NavigationStyleConfig extends Omit<
+  NavigationDesktop | NavigationMobile,
+  'isLogoVisible' | 'hamburgerMenuStyle' | 'viewport'
+> {
   buttonGroupOption: ButtonGroupOption;
   options: NavigationStyleConfigOption[];
 }

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.ts

@@ -2,7 +2,6 @@ import {
   EMPTY_LOGO_IMAGE_MODEL,
   type FabricLogoTheme,
   type LogoContent,
-  type LogoImageModel,
   type LogoTemplateImageModel,
   type LogoTheme,
 } from '@brand-page';

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -21,7 +21,6 @@ import {
   BRAND_PAGE_TYPES,
   SENSITIVE_CONTENT_TYPES,
   getAbTestResults,
-  getValueType,
   type AbTest,
   type LogoContent,
 } from '@brand-page';
@@ -34,7 +33,6 @@ import {
   TRIGGER_TYPE,
   UPGRADE_CTA_LOCATIONS,
   useEventTracker,
-  EVENTS,
 } from '@brand-page-maker/composables/useEventTracker';
 import { navigationTr } from '@src/composables/useTranslate';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
@@ -123,6 +121,7 @@ export type InitialisePayload = Omit<
   logoDraftAssets: LogoDraftAsset[];
   gettyVideos: GettyVideoEditorViewModelResponse[];
   templateSearchTerm: string | undefined;
+  aiTemplateKeywords: string | undefined;
   onSearchTermChanged?: OnSearchTermChangedCallback;
 };
 
@@ -266,6 +265,10 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
         onSearchTermChanged: payload.onSearchTermChanged,
       });
 
+      templateSettingsStore.setAiTemplateKeywords({
+        aiTemplateKeywords: payload.aiTemplateKeywords ?? '',
+      });
+
       brandPageMakerStore.setSelectedTemplateId({
         templateId: this.designTemplateToken,
       });
@@ -446,7 +449,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
 
     async publishBrandPage({ shouldPublish, slug }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -553,7 +556,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
       isPurchasedDomain,
     }) {
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (!this.designDraftToken) {
         throw new Error(
@@ -887,7 +890,7 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
     ) {
       const userStore = useBrandPageMakerUserStore();
       const brandPageMakerStore = useBrandPageMakerStore();
-      const eventTracker = useEventTracker();
+      const _eventTracker = useEventTracker();
 
       if (userStore.isAdmin) {
         throw new Error('save brand page is not allowed in admin mode');

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -2,7 +2,6 @@ import { vi } from 'vitest';
 import {
   BRAND_PAGE,
   INITIALISE_PAYLOAD,
-  USER_FEATURES,
   userFeatures,
 } from '../../components/brand-page-maker/__fixtures__';
 import {
@@ -44,6 +43,7 @@ import { useUiBackgroundSettingsStore } from '@shared/background-settings/store'
 import { useBrandPageMakerUserStore } from '../user';
 import { useBrandPageContainerStore } from '../brandpage-container';
 import { useUiTemplateSettingsStore } from '@shared/template-settings/store';
+import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
 import {
   CONTENT_SETTINGS_MODES,
   useUiContentSettingsStore,
@@ -54,8 +54,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { PAGE_SECTIONS } from '@shared/page-settings/models';
 import { FabricRenderClient } from '../../../clients/fabric-render-client';
 import { setLocaleAsync } from '@src/composables/useTranslate';
-import { usePageNavigationStore } from '@shared/page-navigation/store/page-navigation-store';
-import type { NavModel } from '@brand-page/models';
 
 const createInitialisePayload = () => {
   const initialisePayload = {

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -23,14 +23,12 @@ import {
   CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
-  NavModel,
 } from '@brand-page';
 import type {
   DesignTemplateType,
   InitialCategories,
   TemplateCategory,
 } from '@shared/template-settings/models';
-import type { UserFeatures } from '../user';
 import { useBrandPageMakerUserStore } from '../user';
 import { defineStore } from 'pinia';
 import { toRaw } from 'vue';
@@ -125,6 +123,8 @@ export interface InitialisePayload {
   templateCategories: TemplateCategory[];
   personalisationData?: UserPersonalisationContent[];
   isPersonalisationEnabled: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   businessName: string | undefined;
   industry: string | undefined;
   layout?: string;
@@ -1230,11 +1230,13 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       templateCategories,
       personalisationData,
       isPersonalisationEnabled,
+      userPromptContentKey,
+      showAiTemplatesTab = false,
       businessName,
       industry,
       layout,
       logoVariationImageUrls,
-      shopConfigData,
+      shopConfigData: _shopConfigData,
       isServerRenderOverride = false,
     }: InitialisePayload) {
       const brandPageContainerStore = useBrandPageContainerStore();
@@ -1246,7 +1248,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const backgroundSettingsStore = useUiBackgroundSettingsStore();
       const styleSettingsStore = useUiStyleSettingsStore();
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
-      const sideBarStore = useUiSideBarStore();
+      const _sideBarStore = useUiSideBarStore();
 
       navigationStyleSettingsStore.initialise({ reset: false });
 
@@ -1353,6 +1355,10 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           });
         }
 
+        uiStore.setUserPromptContentKey({ userPromptContentKey });
+
+        uiStore.setShowAiTemplatesTab({ showAiTemplatesTab });
+
         templateSettingsStore.setTemplateCategories({
           categories: templateCategories,
         });
@@ -1800,6 +1806,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
       const shopStore = useShopConfigStore();
       const pageNavigationStore = usePageNavigationStore();
+      const uiStore = useUiStore();
 
       const pages = pageSettingsStore.pages.map((p) => ({
         ...p,
@@ -1817,6 +1824,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
 
       return {
         v: GetLatestModelVersion(),
+        userPromptContentKey: uiStore.userPromptContentKey,
         pages,
         styles: {
           logoStyles,

package/src/brand-page-maker/stores/ui/ui-store.ts

@@ -48,6 +48,8 @@ export const useUiStore = defineStore('ui', {
     },
     personalisationData: undefined,
     isPersonalisationEnabled: false,
+    userPromptContentKey: undefined,
+    showAiTemplatesTab: false,
   }),
   actions: {
     setLogoTheme(payload: { logoTheme: LogoTheme }) {
@@ -78,6 +80,20 @@ export const useUiStore = defineStore('ui', {
     }) {
       this.personalisationData = personalisationData;
     },
+    setUserPromptContentKey({
+      userPromptContentKey,
+    }: {
+      userPromptContentKey: string | undefined;
+    }) {
+      this.userPromptContentKey = userPromptContentKey;
+    },
+    setShowAiTemplatesTab({
+      showAiTemplatesTab,
+    }: {
+      showAiTemplatesTab: boolean;
+    }) {
+      this.showAiTemplatesTab = showAiTemplatesTab;
+    },
     onBackgroundChanged() {
       const brandPageMakerStore = useBrandPageMakerStore();
 

package/src/brand-page-maker/utils/content-settings.util.ts

@@ -7,7 +7,7 @@ import type {
   ContentSettingsConfig,
   CreateInitialContentOptions,
 } from '../models';
-import { SENSITIVE_CONTENT_TYPES, type Content } from '@brand-page';
+import { type Content } from '@brand-page';
 import { RESERVED_FIELD_NAMES } from '@shared/content-settings/constants';
 import { CONTENT_SETTINGS_CONFIGS } from '../constants';
 import type { UIUserFeatures } from '@src/constants/ui';

package/src/brand-page-maker/utils/rich-text-editor.util.ts

@@ -431,7 +431,7 @@ const transformRTEField = (
   if (textStyleType && (textStyleType === type || uiStyleSettingsStore)) {
     let globalContentStyle = uiStyleSettingsStore
       ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType].style
-      : newStyle ?? ({} as TextStyleDeclaration);
+      : (newStyle ?? ({} as TextStyleDeclaration));
 
     globalContentStyle = {
       ...globalContentStyle,
@@ -549,7 +549,7 @@ export const transformToRTE = (
                 ? uiStyleSettingsStore.textStyles.textStyleOptions[
                     textItemStyleType
                   ].style
-                : newStyle ?? ({} as TextStyleDeclaration);
+                : (newStyle ?? ({} as TextStyleDeclaration));
 
               globalContentStyle = {
                 ...globalContentStyle,
@@ -593,7 +593,7 @@ export const transformToRTE = (
             let globalContentStyle = uiStyleSettingsStore
               ? uiStyleSettingsStore.textStyles.textStyleOptions[textStyleType]
                   .style
-              : newStyle ?? ({} as TextStyleDeclaration);
+              : (newStyle ?? ({} as TextStyleDeclaration));
 
             globalContentStyle = {
               ...globalContentStyle,
@@ -647,7 +647,7 @@ export const switchAllContentToRTE = (
 
         if (textContent.textItems && textContent.textItems.length > 0) {
           for (const [
-            itemIndex,
+            _itemIndex,
             textItemContent,
           ] of textContent.textItems.entries()) {
             const textItemStyleType = textItemContent.textStyle.textStyleType;

package/src/clients/ai-assistant-client.ts

@@ -2,6 +2,7 @@ import axios, { type AxiosError } from 'axios';
 import { useBrandPageContainerStore } from '../brand-page-maker/stores/brandpage-container/brand-page-container-store';
 import type { MinifiedBrandPageMetadata } from '../utils/minify-brand-page-metadata';
 import type { AssetEntry } from '../utils/build-asset-manifest';
+import type { BrandPageModel } from '../brand-page/models';
 
 export interface ActiveContext {
   currentPageId: string;
@@ -14,6 +15,12 @@ export interface LogoContext {
 
 export interface WebsiteContext {
   metadata: MinifiedBrandPageMetadata;
+  /**
+   * Full structural metadata (logos externalized to `logoAssetKey`, no base64,
+   * no field-stripping) — persisted for the preview render only. The LLM uses
+   * `metadata` (minified); the preview renderer uses this for full fidelity.
+   */
+  metadataFull?: BrandPageModel;
   assets?: AssetEntry[];
   activeContext?: ActiveContext;
   businessName?: string;

package/src/clients/design-template-client.ts

@@ -11,6 +11,7 @@ interface DesignTemplateClientOptions {}
 interface GetTemplatesAsyncOptions {
   categoryName?: string;
   searchTerm?: string;
+  keywords?: string;
   side?: string;
   logoDraftToken?: string;
   logoVariation?: number;
@@ -22,6 +23,8 @@ interface GetTemplatesAsyncOptions {
   locale?: string;
   logoS3Token?: string;
   logoTemplateToken?: string;
+  pageSection?: string;
+  pageName?: string;
 }
 
 export const getTemplatesEndpoint = (templateTypeName: string) =>

package/src/clients/models.ts

@@ -4,6 +4,7 @@ export interface Paginated<T> {
   pageSize: number;
   pageCount: number;
   totalResultCount: number;
+  abTestValuesToBePushed?: Record<string, string>;
 }
 
 export interface DesignTemplate {
@@ -14,6 +15,7 @@ export interface DesignTemplate {
 
 export interface PaginatedDesignTemplateItem {
   designTemplateToken: string;
+  isPersonalisable?: boolean;
   previewImageUrl?: string;
 }
 

package/src/composables/useSnapshot.ts

@@ -180,15 +180,19 @@ export function useSnapshot() {
       const captureWidth = target.clientWidth || target.offsetWidth || 1;
       const scale = Math.min(1, SNAPSHOT_TARGET_WIDTH / captureWidth);
 
-      // Pre-fetch blob-backed SVGs from content shape <object> elements so they
-      // can be rendered as <img> in the clone (html2canvas can't reach into the
-      // isolated DOM inside <object>). Background-shape blob <img>s are NOT
-      // converted: html2canvas renders them no differently with or without the
-      // conversion, so it'd just be wasted fetches.
+      // Inline every shape's blob-backed SVG as a data: URI up front. Shapes
+      // (content + background) render their coloured SVG via an <img> whose src
+      // is a `blob:` URL from URL.createObjectURL. The owning component revokes
+      // that blob on re-render (colour/size/imageUrl change) and on unmount —
+      // exactly what an AI "change all my contents" run triggers right before we
+      // capture. html2canvas fetches each <img> src ASYNCHRONOUSLY while
+      // rendering, so a concurrent revoke leaves it fetching a dead blob URL →
+      // the shape 404s and snapshots blank. A data: URI can't be revoked, so
+      // swapping the blob for one in the clone removes the race.
       const blobSvgUris = new Map<string, string>();
       const blobSources = Array.from(
-        element.querySelectorAll<HTMLObjectElement>('.c-shape-object object'),
-      ).map((o) => o.getAttribute('data'));
+        element.querySelectorAll<HTMLImageElement>('.c-shape-object img'),
+      ).map((img) => img.getAttribute('src'));
 
       for (const src of blobSources) {
         if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
@@ -340,23 +344,16 @@ export function useSnapshot() {
             overflow: 'visible',
           });
 
-          // Swap content shape <object>s for <img> using the pre-fetched data
-          // URIs (html2canvas can't render <object> SVGs directly).
+          // Repoint each shape <img> from its (revocable) blob: src to the
+          // pre-fetched data: URI so html2canvas never fetches a blob that may
+          // have been revoked mid-capture.
           _doc
-            .querySelectorAll<HTMLObjectElement>('.c-shape-object object')
-            .forEach((obj) => {
-              const dataUrl = obj.getAttribute('data');
+            .querySelectorAll<HTMLImageElement>('.c-shape-object img')
+            .forEach((img) => {
+              const src = img.getAttribute('src');
 
-              if (dataUrl && blobSvgUris.has(dataUrl)) {
-                const img = _doc.createElement('img');
-
-                img.src = blobSvgUris.get(dataUrl)!;
-
-                const style = obj.getAttribute('style');
-
-                if (style) img.setAttribute('style', style);
-
-                obj.parentNode?.replaceChild(img, obj);
+              if (src && blobSvgUris.has(src)) {
+                img.src = blobSvgUris.get(src)!;
               }
             });
 

package/src/lib.ts

@@ -87,6 +87,18 @@ export {
 export { sanitizeRTEHtml } from './brand-page-maker/utils';
 export { getPageSlugFromPageTitle } from './brand-page-maker/utils/slug.util';
 
+// AI-pipeline preview (longclaw per-turn snapshots): web-renderer's
+// /preview/ai-pipeline render page + manifest server route apply the agent's
+// tool calls to a brand-page metadata snapshot server-side and resolve the
+// target page by slug. These three symbols are otherwise internal to the
+// metadata-builder / route utils.
+export { executeToolCallsAsync } from './metadata-builder/ai-metadata-executor';
+export type { ParsedToolCall } from './metadata-builder/parsers/ai-toolcall-parser';
+export { findNavItemByPageSlug } from './brand-page/utils/route.util';
+// Tiptap-JSON RTE -> HTML (same converter the metadata builders use). Lets the
+// preview render the agent's raw Tiptap fields, which the renderer expects as HTML.
+export { tiptapJsonToHtml } from './metadata-builder/helpers/rte.helpers';
+
 // stores
 export {
   useBrandPageMakerStore,