@designcrowd/library.brand-page 6.0.1 → 6.0.2

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/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -0,0 +1,13 @@
+import type { BrandPageModel } from '../../brand-page/models';
+import { BaseMetadataBuilder, type BuilderResult, type MetadataBuilderRequest } from '../models';
+import type { Logger } from '../logger';
+export interface ReorderPagesPayload {
+    pageOrder: string[];
+}
+export declare class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+    constructor(request: MetadataBuilderRequest<ReorderPagesPayload>, logger?: Logger);
+    validateAsync(): Promise<{
+        errors: string[];
+    }>;
+    buildAsync(model: BrandPageModel): Promise<BuilderResult>;
+}

package/lib/src/metadata-builder/builders/reorder-pages-builder.js

@@ -0,0 +1,49 @@
+import { BaseMetadataBuilder, } from '../models';
+export class ReorderPagesBuilder extends BaseMetadataBuilder {
+    constructor(request, logger) {
+        super(request, logger);
+    }
+    async validateAsync() {
+        const errors = [];
+        const payload = this.request.payload;
+        if (!payload?.pageOrder?.length) {
+            errors.push('page_order is required for reorder_pages');
+        }
+        return { errors };
+    }
+    async buildAsync(model) {
+        this.log('Build called');
+        const validation = await this.validateAsync();
+        if (validation.errors.length) {
+            return { request: this.request, model, errors: validation.errors };
+        }
+        const { pageOrder } = this.request.payload;
+        // Build pageId → routeId lookup from nav.routes
+        const pageIdToRouteId = new Map();
+        for (const route of model.nav.routes) {
+            pageIdToRouteId.set(route.pageId, route.id);
+        }
+        // Build new nav.orders from the flat page_order (array of pageIds)
+        const newOrders = [];
+        const seenRouteIds = new Set();
+        for (const pageId of pageOrder) {
+            const routeId = pageIdToRouteId.get(pageId);
+            if (!routeId)
+                continue;
+            newOrders.push({ routeId, subRoutes: [] });
+            seenRouteIds.add(routeId);
+        }
+        // Safety: append any routes not mentioned (don't lose pages)
+        for (const route of model.nav.routes) {
+            const routeId = pageIdToRouteId.get(route.pageId);
+            if (routeId && !seenRouteIds.has(routeId)) {
+                newOrders.push({ routeId, subRoutes: [] });
+            }
+        }
+        model.nav.orders = newOrders;
+        this.log({
+            message: `Reordered pages: ${pageOrder.join(', ')}`,
+        });
+        return { request: this.request, model };
+    }
+}

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.2",
   "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/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/metadata-builder/builders/reorder-pages-builder.ts

@@ -0,0 +1,80 @@
+import type { BrandPageModel, NavOrder } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface ReorderPagesPayload {
+  pageOrder: string[];
+}
+
+export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+  constructor(
+    request: MetadataBuilderRequest<ReorderPagesPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.pageOrder?.length) {
+      errors.push('page_order is required for reorder_pages');
+    }
+
+    return { errors };
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const { pageOrder } = this.request.payload!;
+
+    // Build pageId → routeId lookup from nav.routes
+    const pageIdToRouteId = new Map<string, string>();
+
+    for (const route of model.nav.routes) {
+      pageIdToRouteId.set(route.pageId, route.id);
+    }
+
+    // Build new nav.orders from the flat page_order (array of pageIds)
+    const newOrders: NavOrder[] = [];
+    const seenRouteIds = new Set<string>();
+
+    for (const pageId of pageOrder) {
+      const routeId = pageIdToRouteId.get(pageId);
+
+      if (!routeId) continue;
+
+      newOrders.push({ routeId, subRoutes: [] });
+      seenRouteIds.add(routeId);
+    }
+
+    // Safety: append any routes not mentioned (don't lose pages)
+    for (const route of model.nav.routes) {
+      const routeId = pageIdToRouteId.get(route.pageId);
+
+      if (routeId && !seenRouteIds.has(routeId)) {
+        newOrders.push({ routeId, subRoutes: [] });
+      }
+    }
+
+    model.nav.orders = newOrders;
+
+    this.log({
+      message: `Reordered pages: ${pageOrder.join(', ')}`,
+    });
+
+    return { request: this.request, model };
+  }
+}

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,