@designcrowd/library.brand-page 6.0.1 → 6.0.3

package/lib/src/lib.js

@@ -31,6 +31,16 @@ export * as brandPageUtils from './brand-page/utils';
 export { getOptimalLogoSize, calculateOptimizedLogoDimensions, applyLogoImageBase64UrlToBrandPageTemplateModel, recalculateLogoContentDimensions, recalculateHeaderLogoSizes, } from './brand-page/utils/logo.util';
 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 { 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, useBrandPageMakerUserStore, useUiStore, useBrandPageContainerStore, useEventManagerStore, useLocalisedRouteStore, useVideoStore, useRouteStore, } from './brand-page-maker/stores';
 export { useShopConfigStore } from './shared/ecommerce-settings/store/shop-settings-store';

package/lib/src/utils/build-asset-manifest.d.ts

@@ -14,6 +14,10 @@ export interface AssetEntry {
  * 2. Fall back to logoImageBase64Url if logoImage is unavailable.
  */
 export declare function resolveLogoData(logoImage: LogoImageModel | undefined, logoImageBase64Url: string | undefined): string | undefined;
+/**
+ * Look up an asset key from the manifest by matching the data content.
+ */
+export declare function findAssetKey(assets: AssetEntry[] | undefined, data: string | undefined): string | undefined;
 /**
  * Build an asset manifest from the brand page model.
  *

package/lib/src/utils/build-asset-manifest.js

@@ -23,6 +23,14 @@ export function resolveLogoData(logoImage, logoImageBase64Url) {
     // Fallback to base64 if available
     return logoImageBase64Url || undefined;
 }
+/**
+ * Look up an asset key from the manifest by matching the data content.
+ */
+export function findAssetKey(assets, data) {
+    if (!data || !assets)
+        return undefined;
+    return assets.find((a) => a.data === data)?.key;
+}
 /**
  * Hash a string using SHA-256 and return the first 16 hex characters.
  * Uses the Web Crypto API (available in browsers and modern runtimes).

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

@@ -1,7 +1,7 @@
 import { BRAND_PAGE_TYPES, } from '../brand-page/models';
 import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
-import { resolveLogoData } from './build-asset-manifest';
+import { findAssetKey, resolveLogoData, } from './build-asset-manifest';
 const BUTTON_TYPES = [
     'general-link',
     'website',
@@ -78,14 +78,6 @@ const includeBackgroundStyle = (value) => {
         return null;
     return { backgroundStyle: { backgroundColor: bg } };
 };
-/**
- * Look up an asset key from the manifest by matching the data content.
- */
-const findAssetKey = (assets, data) => {
-    if (!data || !assets)
-        return undefined;
-    return assets.find((a) => a.data === data)?.key;
-};
 const minifyContent = (content, editor, assets) => {
     const base = {
         id: content.id,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",
@@ -248,4 +248,4 @@
       "public"
     ]
   }
-}
+}

package/src/brand-page-maker/composables/ai-chat/useAiWebsiteBuilderChat.ts

@@ -19,6 +19,7 @@ import {
 } from '../../../clients/websocket-gateway-client';
 import { minifyBrandPageMetadata } from '../../../utils/minify-brand-page-metadata';
 import { buildAssetManifest } from '../../../utils/build-asset-manifest';
+import cloneDeep from 'lodash.clonedeep';
 import { usePageNavigationStore } from '../../../shared/page-navigation/store/page-navigation-store';
 import { navigateToPageByPageId } from '../../routing';
 import {
@@ -268,6 +269,7 @@ export function useAiWebsiteBuilderChat(): UseAiChatResult {
 
     const websiteContext = {
       metadata: minifyBrandPageMetadata(brandPageData, assets),
+      metadataFull: cloneDeep(brandPageData),
       ...(assets.length > 0 && { assets }),
       websiteTemplateToken: containerStore.designTemplateToken,
       ...(containerStore.designDraftToken && {

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,
   },
 });

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/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,

package/src/utils/build-asset-manifest.ts

@@ -41,6 +41,18 @@ export function resolveLogoData(
   return logoImageBase64Url || undefined;
 }
 
+/**
+ * Look up an asset key from the manifest by matching the data content.
+ */
+export function findAssetKey(
+  assets: AssetEntry[] | undefined,
+  data: string | undefined,
+): string | undefined {
+  if (!data || !assets) return undefined;
+
+  return assets.find((a) => a.data === data)?.key;
+}
+
 /**
  * Hash a string using SHA-256 and return the first 16 hex characters.
  * Uses the Web Crypto API (available in browsers and modern runtimes).

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

@@ -13,7 +13,11 @@ import type { TextStyleDeclaration } from '../brand-page/models/styles.model';
 import { hasRTEContent } from '../brand-page-maker/utils';
 import { useExternalRichTextEditor } from '../brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import type { Editor, JSONContent } from '@tiptap/vue-3';
-import { type AssetEntry, resolveLogoData } from './build-asset-manifest';
+import {
+  type AssetEntry,
+  findAssetKey,
+  resolveLogoData,
+} from './build-asset-manifest';
 
 type MinifiedFooterSocialLink = { imageUrl: string; url: string };
 
@@ -188,18 +192,6 @@ const includeBackgroundStyle = (
   return { backgroundStyle: { backgroundColor: bg } };
 };
 
-/**
- * Look up an asset key from the manifest by matching the data content.
- */
-const findAssetKey = (
-  assets: AssetEntry[] | undefined,
-  data: string | undefined,
-): string | undefined => {
-  if (!data || !assets) return undefined;
-
-  return assets.find((a) => a.data === data)?.key;
-};
-
 const minifyContent = (
   content: Content,
   editor: Editor,