@designcrowd/library.brand-page 5.18.7 → 5.18.8-ast-padding-1

package/src/composables/useSnapshot.ts

@@ -5,6 +5,68 @@ const HTML2CANVAS_CDN_URL =
 
 let html2canvasLoadPromise: Promise<void> | null = null;
 
+// Capture is sized to the rendered content (scrollHeight), not the clipped
+// viewport box. An empty page yields a short capture; a long page captures its
+// full height up to the cap.
+const MIN_SNAPSHOT_HEIGHT = 200;
+// The snapshot is consumed by the AI pipeline's OpenAI vision model, which
+// normalises the SHORT side to ~768px and tiles the long side — so token cost
+// is driven by page HEIGHT, not absolute resolution. This cap bounds that cost
+// AND, more importantly, the html2canvas render work (CPU/memory) — taller pages
+// are truncated. The render is the dominant cost on a capture, so we keep the
+// cap conservative, and lower still on mobile where memory/CPU are tighter.
+const MAX_SNAPSHOT_HEIGHT_DESKTOP = 4096;
+const MAX_SNAPSHOT_HEIGHT_MOBILE = 2560;
+// OpenAI's vision short-side target. Rendering at this width avoids the
+// down-then-up resample blur you'd get from scaling smaller (OpenAI upscales
+// the short side back to 768 regardless) while keeping the payload tight.
+const SNAPSHOT_TARGET_WIDTH = 768;
+
+/**
+ * Extracts the YouTube video id from an embed URL, or null for non-YouTube
+ * iframes. Handles youtube.com/embed/<id> and youtube-nocookie.com variants.
+ */
+function getYouTubeId(src: string): string | null {
+  const match = src.match(
+    /(?:youtube(?:-nocookie)?\.com\/embed\/)([A-Za-z0-9_-]{6,})/,
+  );
+
+  return match ? match[1] : null;
+}
+
+/**
+ * Fetches a YouTube thumbnail and returns it as a data URI, or null on failure.
+ * Inlining as a data URI avoids cross-origin canvas tainting in html2canvas.
+ * Tries maxres first, falls back to hq (maxres 404s on some videos).
+ */
+async function fetchYouTubeThumbnail(id: string): Promise<string | null> {
+  for (const quality of ['maxresdefault', 'hqdefault']) {
+    try {
+      const response = await fetch(
+        `https://img.youtube.com/vi/${id}/${quality}.jpg`,
+      );
+
+      if (!response.ok) continue;
+
+      const blob = await response.blob();
+
+      // YouTube returns a tiny placeholder for missing qualities; skip those.
+      if (blob.size < 2000) continue;
+
+      return await new Promise<string>((resolve) => {
+        const reader = new FileReader();
+
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(blob);
+      });
+    } catch {
+      /* try next quality */
+    }
+  }
+
+  return null;
+}
+
 /**
  * Dynamically loads html2canvas from CDN if not already loaded
  */
@@ -67,22 +129,74 @@ export function useSnapshot() {
         throw new Error('html2canvas failed to load');
       }
 
-      // Pre-fetch blob URLs from shape <object> elements so they can be
-      // rendered as <img> in the html2canvas clone (html2canvas cannot
-      // traverse the isolated DOM inside <object> elements).
-      const shapeDataUris = new Map<string, string>();
-      const shapeObjects = element.querySelectorAll('.c-shape-object object');
-
-      for (const obj of Array.from(shapeObjects)) {
-        const dataUrl = obj.getAttribute('data');
-
-        if (dataUrl && dataUrl.startsWith('blob:')) {
+      // Wait for fonts and in-flight images to finish before capturing —
+      // otherwise html2canvas snapshots a half-rendered page (missing images,
+      // fallback fonts) and the measured content height is wrong.
+      await document.fonts?.ready;
+      await Promise.all(
+        Array.from(element.querySelectorAll('img'))
+          .filter((img) => !img.complete)
+          .map(
+            (img) =>
+              new Promise<void>((resolve) => {
+                img.onload = img.onerror = () => resolve();
+              }),
+          ),
+      );
+
+      // The maker renders the full website inside `.c-preview-container`
+      // (position: fixed + transform: scale). The page background — solid
+      // colour, gradient, or image — lives on `.brand-page-root-background`,
+      // which sits OUTSIDE the scrolling content. Capturing the content alone
+      // drops that background, so transparent sections fall back to white and
+      // their (often light) text becomes invisible. Capture the whole preview
+      // (`[data-test-tag="editor-preview"]`) so the background layer is
+      // included, and size the canvas to the real page length, which only the
+      // inner scroll container `.brand-page__inner` reports via scrollHeight.
+      const target =
+        element.querySelector<HTMLElement>(
+          '[data-test-tag="editor-preview"]',
+        ) ?? element;
+      const scrollEl =
+        element.querySelector<HTMLElement>('.brand-page__inner') ?? target;
+
+      // Keep the render light on mobile (tighter CPU/memory) by truncating
+      // taller there than on desktop.
+      const isMobileViewport =
+        typeof window !== 'undefined' &&
+        window.matchMedia?.('(max-width: 768px)').matches;
+      const maxHeight = isMobileViewport
+        ? MAX_SNAPSHOT_HEIGHT_MOBILE
+        : MAX_SNAPSHOT_HEIGHT_DESKTOP;
+
+      const captureHeight = Math.min(
+        Math.max(scrollEl.scrollHeight, MIN_SNAPSHOT_HEIGHT),
+        maxHeight,
+      );
+
+      // Render at OpenAI's short-side target width (never upscaling). Token cost
+      // is set by height/aspect ratio, not by scaling down the width, so we keep
+      // the width crisp and let MAX_SNAPSHOT_HEIGHT bound the cost.
+      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.
+      const blobSvgUris = new Map<string, string>();
+      const blobSources = Array.from(
+        element.querySelectorAll<HTMLObjectElement>('.c-shape-object object'),
+      ).map((o) => o.getAttribute('data'));
+
+      for (const src of blobSources) {
+        if (src && src.startsWith('blob:') && !blobSvgUris.has(src)) {
           try {
-            const response = await fetch(dataUrl);
-            const svgText = await response.text();
+            const svgText = await (await fetch(src)).text();
 
-            shapeDataUris.set(
-              dataUrl,
+            blobSvgUris.set(
+              src,
               `data:image/svg+xml,${encodeURIComponent(svgText)}`,
             );
           } catch {
@@ -91,34 +205,205 @@ export function useSnapshot() {
         }
       }
 
-      const canvas = await window.html2canvas(element, {
-        allowTaint: true,
+      // html2canvas ignores `object-fit`, so it stretches images to their box
+      // instead of cropping/containing them — section images (cover) come out
+      // distorted. Record the rendered box + fit of every object-fit image from
+      // the live (laid-out) DOM, keyed by src, so the clone can swap them for a
+      // background-size div, which html2canvas renders correctly.
+      interface ObjectFitInfo {
+        fit: string;
+        position: string;
+        width: number;
+        height: number;
+      }
+
+      const objectFitImages = new Map<string, ObjectFitInfo>();
+
+      for (const img of Array.from(
+        element.querySelectorAll<HTMLImageElement>('img'),
+      )) {
+        const { objectFit, objectPosition } = getComputedStyle(img);
+
+        if (objectFit !== 'cover' && objectFit !== 'contain') continue;
+
+        const rect = img.getBoundingClientRect();
+        const src = img.currentSrc || img.src;
+
+        if (src && rect.width > 2 && rect.height > 2) {
+          objectFitImages.set(src, {
+            fit: objectFit,
+            position: objectPosition || 'center',
+            width: Math.round(rect.width),
+            height: Math.round(rect.height),
+          });
+        }
+      }
+
+      // html2canvas can't render <iframe> embeds (e.g. YouTube videos) — they
+      // come out blank. Pre-fetch each embed's thumbnail as a data URI, keyed by
+      // video id, so the clone can swap the iframe for a poster image.
+      interface VideoThumb {
+        dataUri: string;
+        width: number;
+        height: number;
+      }
+
+      const videoThumbs = new Map<string, VideoThumb>();
+
+      for (const iframe of Array.from(
+        element.querySelectorAll<HTMLIFrameElement>('iframe'),
+      )) {
+        const id = getYouTubeId(iframe.src);
+
+        if (!id || videoThumbs.has(id)) continue;
+
+        const dataUri = await fetchYouTubeThumbnail(id);
+
+        if (!dataUri) continue;
+
+        const rect = iframe.getBoundingClientRect();
+
+        videoThumbs.set(id, {
+          dataUri,
+          width: Math.round(rect.width) || iframe.clientWidth,
+          height: Math.round(rect.height) || iframe.clientHeight,
+        });
+      }
+
+      const canvas = await window.html2canvas(target, {
+        // Must stay false: with allowTaint, html2canvas draws cross-origin
+        // media that lacks CORS (e.g. a Getty background <video>), which taints
+        // the canvas and makes toDataURL throw — failing the whole snapshot.
+        // With it off, such content is skipped (rendered blank) instead, so the
+        // snapshot always exports. CORS-enabled images (Unsplash, user uploads)
+        // still render via useCORS.
+        allowTaint: false,
         useCORS: true,
-        scale: 0.8, // Reduce quality to decrease file size
+        scale, // fit the full page into the vision model's image budget
         logging: false,
         backgroundColor: '#ffffff',
-        onclone: (_doc: Document, clonedElement: HTMLElement) => {
-          const clonedObjects = clonedElement.querySelectorAll(
-            '.c-shape-object object',
-          );
+        // Capture the full page, not just the scroll viewport.
+        height: captureHeight,
+        windowHeight: captureHeight,
+        scrollX: 0,
+        scrollY: 0,
+        x: 0,
+        y: 0,
+        onclone: (_doc: Document) => {
+          const setStyle = (
+            selector: string,
+            styles: Partial<CSSStyleDeclaration>,
+          ) => {
+            const el = _doc.querySelector<HTMLElement>(selector);
+
+            if (el) Object.assign(el.style, styles);
+          };
+
+          // Neutralise the fixed-position + scale wrapper and the scroll clip so
+          // the clone lays out at full content height; otherwise html2canvas
+          // honours the viewport-height box and the page is cut off.
+          setStyle('.c-preview-container', {
+            position: 'static',
+            transform: 'none',
+            height: 'auto',
+            overflow: 'visible',
+          });
+          setStyle('[data-test-tag="editor-preview"]', {
+            position: 'relative',
+            height: `${captureHeight}px`,
+            overflow: 'visible',
+          });
+          // Stretch the (normally fixed, viewport-height) background and shape
+          // layers to cover the full page so transparent sections render their
+          // intended background instead of the white fallback.
+          setStyle('.brand-page-root-background', {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+          });
+          setStyle('.brand-page__background-shapes-layer', {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+          });
+          setStyle('.brand-page-root', {
+            position: 'relative',
+            height: 'auto',
+          });
+          setStyle('.brand-page', { height: 'auto' });
+          setStyle('.brand-page__inner', {
+            height: 'auto',
+            overflow: 'visible',
+          });
 
-          clonedObjects.forEach((obj) => {
-            const dataUrl = obj.getAttribute('data');
+          // Swap content shape <object>s for <img> using the pre-fetched data
+          // URIs (html2canvas can't render <object> SVGs directly).
+          _doc
+            .querySelectorAll<HTMLObjectElement>('.c-shape-object object')
+            .forEach((obj) => {
+              const dataUrl = obj.getAttribute('data');
 
-            if (dataUrl && shapeDataUris.has(dataUrl)) {
-              const img = _doc.createElement('img');
+              if (dataUrl && blobSvgUris.has(dataUrl)) {
+                const img = _doc.createElement('img');
 
-              img.src = shapeDataUris.get(dataUrl)!;
+                img.src = blobSvgUris.get(dataUrl)!;
 
-              const style = (obj as HTMLElement).getAttribute('style');
+                const style = obj.getAttribute('style');
 
-              if (style) {
-                img.setAttribute('style', style);
-              }
+                if (style) img.setAttribute('style', style);
 
-              obj.parentNode?.replaceChild(img, obj);
+                obj.parentNode?.replaceChild(img, obj);
+              }
+            });
+
+          // Replace object-fit images with a background-size div so they
+          // render cropped/contained instead of stretched.
+          _doc.querySelectorAll<HTMLImageElement>('img').forEach((img) => {
+            const src = img.currentSrc || img.src;
+            const fitInfo = objectFitImages.get(src);
+
+            if (fitInfo) {
+              const div = _doc.createElement('div');
+
+              div.className = img.className;
+              div.style.cssText = img.getAttribute('style') || '';
+              div.style.backgroundImage = `url("${img.src}")`;
+              div.style.backgroundSize = fitInfo.fit;
+              div.style.backgroundPosition = fitInfo.position;
+              div.style.backgroundRepeat = 'no-repeat';
+              div.style.width = `${fitInfo.width}px`;
+              div.style.height = `${fitInfo.height}px`;
+
+              img.parentNode?.replaceChild(div, img);
             }
           });
+
+          // Replace video iframes (blank in html2canvas) with their poster
+          // thumbnail rendered as a background-size div.
+          _doc
+            .querySelectorAll<HTMLIFrameElement>('iframe')
+            .forEach((iframe) => {
+              const id = getYouTubeId(iframe.src);
+              const thumb = id ? videoThumbs.get(id) : undefined;
+
+              if (!thumb) return;
+
+              const div = _doc.createElement('div');
+
+              div.style.cssText = iframe.getAttribute('style') || '';
+              div.style.width = `${thumb.width}px`;
+              div.style.height = `${thumb.height}px`;
+              div.style.backgroundImage = `url("${thumb.dataUri}")`;
+              div.style.backgroundSize = 'cover';
+              div.style.backgroundPosition = 'center';
+              div.style.backgroundColor = '#000000';
+
+              iframe.parentNode?.replaceChild(div, iframe);
+            });
         },
       });
 

package/src/shared/content-settings/components/content-settings/i18n/content-settings.de-DE.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Farbe der Symbolfüllung",
     "iconBackgroundColorTitle": "Symbolhintergrundfarbe",
     "paddingTitle": "Polsterung",
+    "topPaddingTitle": "Polsterung oben",
+    "bottomPaddingTitle": "Polsterung unten",
     "dividerStyleTitle": "Trennlinienstil",
     "dividerColorTitle": "Trennlinienfarbe",
     "addItemTitle": "Artikel hinzufügen",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.es-ES.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Color de relleno del icono",
     "iconBackgroundColorTitle": "Color de fondo del icono",
     "paddingTitle": "Relleno",
+    "topPaddingTitle": "Relleno superior",
+    "bottomPaddingTitle": "Relleno inferior",
     "dividerStyleTitle": "Estilo del divisor",
     "dividerColorTitle": "Color del separador",
     "addItemTitle": "Añadir artículo",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-CA.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marge intérieure supérieure",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.fr-FR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Couleur de remplissage de l’icône",
     "iconBackgroundColorTitle": "Couleur d’arrière-plan de l’icône",
     "paddingTitle": "Marges intérieures",
+    "topPaddingTitle": "Marges intérieures supérieures",
+    "bottomPaddingTitle": "Marges intérieures inférieures",
     "dividerStyleTitle": "Style de séparateur",
     "dividerColorTitle": "Couleur du séparateur",
     "addItemTitle": "Ajouter un article",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Icon fill color",
     "iconBackgroundColorTitle": "Icon background color",
     "paddingTitle": "Padding",
+    "topPaddingTitle": "Top padding",
+    "bottomPaddingTitle": "Bottom padding",
     "dividerStyleTitle": "Divider Style",
     "dividerColorTitle": "Divider color",
     "addItemTitle": "Add Item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.vue

@@ -56,7 +56,7 @@
     >
       <li
         v-for="(field, index) in fields"
-        :key="`content-settings-item-field-${id}-${index}`"
+        :key="`content-settings-item-field-${id}-${field.name}`"
         class="tw-cursor-pointer"
         :class="{
           'tw-mb-3': index !== fields.length - 1,

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -25,8 +25,8 @@
     >
       <ul>
         <li
-          v-for="(field, fieldIndex) in group.fields"
-          :key="`content-settings-item-group-field-${id}-${group.id}-${fieldIndex}`"
+          v-for="field in group.fields"
+          :key="`content-settings-item-group-field-${id}-${group.id}-${field.name}`"
         >
           <ContentSettingsItemField
             v-if="

package/src/shared/content-settings/components/slider-field/SliderField.mixin.ts

@@ -45,6 +45,15 @@ export default defineComponent({
       sliderValue: value,
     };
   },
+  watch: {
+    // The value can change outside the slider (e.g. a layout switch
+    // re-applying default padding, or undo) — keep the display in sync.
+    value(newValue: string | undefined) {
+      this.sliderValue = this.valueConvertor
+        ? this.valueConvertor.convert(newValue as any)
+        : newValue;
+    },
+  },
   computed: {
     innerMinLength(): number {
       return this.minLength ?? 0;

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

@@ -205,7 +205,17 @@ const minifyContent = (
   editor: Editor,
   assets?: AssetEntry[],
 ): MinifiedContent => {
-  const base: MinifiedContent = { id: content.id, type: content.type };
+  const base: MinifiedContent = {
+    id: content.id,
+    type: content.type,
+    // Padding Control (BP-5687) — shared across every block, persist when set.
+    ...(typeof content.topPadding === 'number' && {
+      topPadding: content.topPadding,
+    }),
+    ...(typeof content.bottomPadding === 'number' && {
+      bottomPadding: content.bottomPadding,
+    }),
+  };
   const c = content as any;
 
   // Helper: include imageUrl and its asset key if available

package/lib/src/metadata-builder/builders/reorder-pages-builder.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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/src/metadata-builder/builders/reorder-pages-builder.ts

@@ -1,80 +0,0 @@
-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 };
-  }
-}