astro-tractstack 2.0.19 → 2.0.21

package/templates/src/utils/compositor/designLibraryHelper.ts

@@ -1,19 +1,24 @@
 import { ulid } from 'ulid';
 import { getCtx, type NodesContext } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import {
-  type PaneNode,
-  type FlatNode,
-  type MarkdownPaneFragmentNode,
-  type StoragePane,
-  type StorageNode,
-  type StorageMarkdown,
-  type StorageBgPane,
-  type ArtpackImageNode,
-  type BgImageNode,
-  type VisualBreakNode,
-  type TemplatePane,
-  type TemplateNode,
+import type {
+  PaneNode,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  StoragePane,
+  StorageNode,
+  StorageMarkdown,
+  StorageGridLayoutNode,
+  StorageBgPane,
+  ArtpackImageNode,
+  BgImageNode,
+  VisualBreakNode,
+  TemplatePane,
+  TemplateNode,
+  TemplateGridLayout,
+  TemplateMarkdown,
+  ParentClassesPayload,
 } from '@/types/compositorTypes';
 import type {
   BrandConfig,
@@ -29,7 +34,7 @@ import {
 
 type CopyMode = 'retain' | 'lorem' | 'blank';
 
-export type ExtractedCopy = StorageNode[];
+export type ExtractedCopy = StorageNode[][];
 
 const LOREM_SHORT = 'Lorem ipsum dolor sit amet.';
 const LOREM_LONG =
@@ -99,128 +104,34 @@ function convertLiveNodeToStorageNode(
   return storageNode;
 }
 
-export async function savePaneToLibrary(
-  paneId: string,
-  tenantId: string,
-  config: BrandConfig,
-  formData: {
-    title: string;
-    category: string;
-    copyMode: CopyMode;
-  }
-): Promise<boolean> {
-  const ctx = getCtx();
-  const { title, category, copyMode } = formData;
-  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
-
-  if (!paneNode) {
-    console.error('savePaneToLibrary: PaneNode not found.');
-    return false;
-  }
-
-  const childNodes = ctx
-    .getChildNodeIDs(paneId)
-    .map((id) => ctx.allNodes.get().get(id));
-
-  const markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
-    | MarkdownPaneFragmentNode
-    | undefined;
-
-  const bgPaneNode = childNodes.find((n) => n?.nodeType === 'BgPane') as
-    | ArtpackImageNode
-    | BgImageNode
-    | VisualBreakNode
-    | undefined;
-
-  const newStorageMarkdown: StorageMarkdown | undefined = markdownNode
-    ? {
-        nodeType: 'Markdown',
-        type: 'markdown',
-        defaultClasses: markdownNode.defaultClasses || {},
-        parentClasses: markdownNode.parentClasses || [],
-        nodes:
-          copyMode !== 'blank'
-            ? ctx
-                .getChildNodeIDs(markdownNode.id)
-                .map((childId) => {
-                  const childNode = ctx.allNodes.get().get(childId) as FlatNode;
-                  return convertLiveNodeToStorageNode(childNode, ctx, copyMode);
-                })
-                .filter((n): n is StorageNode => n !== null)
-            : [],
-      }
-    : undefined;
-
-  const newStorageBgPane: StorageBgPane | undefined = bgPaneNode
-    ? { ...bgPaneNode }
-    : undefined;
-
-  if (newStorageBgPane) {
-    delete (newStorageBgPane as any).id;
-    delete (newStorageBgPane as any).parentId;
-  }
-
-  const newStoragePane: StoragePane = {
-    nodeType: 'Pane',
-    title: title,
-    slug: '',
-    bgColour: paneNode.bgColour,
-    isDecorative: paneNode.isDecorative,
-    heightOffsetDesktop: paneNode.heightOffsetDesktop,
-    heightOffsetMobile: paneNode.heightOffsetMobile,
-    heightOffsetTablet: paneNode.heightOffsetTablet,
-    heightRatioDesktop: paneNode.heightRatioDesktop,
-    heightRatioMobile: paneNode.heightRatioMobile,
-    heightRatioTablet: paneNode.heightRatioTablet,
-    ...(newStorageMarkdown ? { markdowns: [newStorageMarkdown] } : {}),
-    ...(newStorageBgPane ? { bgPane: newStorageBgPane } : {}),
-  };
-
-  const newLibraryEntry: DesignLibraryEntry = {
-    category: category,
-    title: title,
-    markdownCount: 1,
-    template: newStoragePane,
-  };
-
-  const currentState: BrandConfigState = convertToLocalState(config);
-  const currentLibrary =
-    (currentState.designLibrary as DesignLibraryConfig) || [];
-
-  const existingEntryIndex = currentLibrary.findIndex(
-    (entry) => entry.title === title && entry.category === category
-  );
-
-  let newLibrary: DesignLibraryConfig;
-  if (existingEntryIndex !== -1) {
-    newLibrary = [...currentLibrary];
-    newLibrary[existingEntryIndex] = newLibraryEntry;
-  } else {
-    newLibrary = [...currentLibrary, newLibraryEntry];
-  }
-
-  const updatedState: BrandConfigState = {
-    ...currentState,
-    designLibrary: newLibrary,
-  };
-
-  const backendDTO: BrandConfig = convertToBackendFormat(updatedState);
-
-  try {
-    await saveBrandConfig(tenantId, backendDTO);
-    return true;
-  } catch (error) {
-    console.error('Failed to save design library:', error);
-    return false;
-  }
-}
-
 export function extractPaneCopy(paneNode: PaneNode): ExtractedCopy {
   const ctx = getCtx();
   const childNodes = ctx
     .getChildNodeIDs(paneNode.id)
     .map((id) => ctx.allNodes.get().get(id));
 
+  const gridLayoutNode = childNodes.find(
+    (n) => n?.nodeType === 'GridLayoutNode'
+  ) as GridLayoutNode | undefined;
+
+  if (gridLayoutNode) {
+    const columns = ctx
+      .getChildNodeIDs(gridLayoutNode.id)
+      .map((id) => ctx.allNodes.get().get(id) as MarkdownPaneFragmentNode);
+
+    return columns.map((col) => {
+      return (
+        ctx
+          .getChildNodeIDs(col.id)
+          .map((childId) => {
+            const childNode = ctx.allNodes.get().get(childId) as FlatNode;
+            return convertLiveNodeToStorageNode(childNode, ctx, 'retain');
+          })
+          .filter((n): n is StorageNode => n !== null) || []
+      );
+    });
+  }
+
   const markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
     | MarkdownPaneFragmentNode
     | undefined;
@@ -229,34 +140,37 @@ export function extractPaneCopy(paneNode: PaneNode): ExtractedCopy {
     return [];
   }
 
-  return (
+  const nodes =
     ctx
       .getChildNodeIDs(markdownNode.id)
       .map((childId) => {
         const childNode = ctx.allNodes.get().get(childId) as FlatNode;
         return convertLiveNodeToStorageNode(childNode, ctx, 'retain');
       })
-      .filter((n): n is StorageNode => n !== null) || []
-  );
+      .filter((n): n is StorageNode => n !== null) || [];
+
+  return [nodes];
 }
 
 export function mergeCopyIntoTemplate(
   template: StoragePane,
   copy: ExtractedCopy
 ): StoragePane {
-  const newTemplate = { ...template };
-  if (newTemplate.markdowns) {
-    newTemplate.markdowns[0].nodes = copy;
-  } else if (copy.length > 0) {
-    if (!newTemplate.markdowns) newTemplate.markdowns = [];
-    newTemplate.markdowns[0] = {
-      nodeType: 'Markdown',
-      type: 'markdown',
-      defaultClasses: {},
-      parentClasses: [],
-      nodes: copy,
-    };
+  const newTemplate = JSON.parse(JSON.stringify(template)) as StoragePane;
+
+  if (newTemplate.gridLayout && newTemplate.gridLayout.nodes) {
+    newTemplate.gridLayout.nodes.forEach((column, index) => {
+      if (copy[index] && copy[index].length > 0) {
+        column.nodes = copy[index];
+      }
+    });
+  } else if (newTemplate.markdowns && newTemplate.markdowns[0]) {
+    const flatCopy = copy.flat();
+    if (flatCopy.length > 0) {
+      newTemplate.markdowns[0].nodes = flatCopy;
+    }
   }
+
   return newTemplate;
 }
 
@@ -288,18 +202,63 @@ export function convertStorageToLiveTemplate(
   storagePane: StoragePane
 ): TemplatePane {
   const paneId = ulid();
-  const markdownId = ulid();
-  const flatNodeList: TemplateNode[] = [];
+  let liveMarkdown: TemplateMarkdown | undefined = undefined;
+  let liveGridLayout: TemplateGridLayout | undefined = undefined;
+  let liveBgPane: ArtpackImageNode | BgImageNode | VisualBreakNode | undefined =
+    undefined;
 
-  if (storagePane.markdowns && storagePane.markdowns[0].nodes) {
-    for (const storageNode of storagePane.markdowns[0].nodes) {
-      const processedNodes = processStorageNode(storageNode, markdownId);
-      flatNodeList.push(...processedNodes);
-    }
+  if (storagePane.gridLayout) {
+    const gridId = ulid();
+    const storageGrid = storagePane.gridLayout;
+
+    liveGridLayout = {
+      id: gridId,
+      parentId: paneId,
+      nodeType: 'GridLayoutNode',
+      type: 'grid-layout',
+      gridColumns: storageGrid.gridColumns,
+      parentClasses: storageGrid.parentClasses as ParentClassesPayload,
+      defaultClasses: storageGrid.defaultClasses,
+      nodes:
+        storageGrid.nodes?.map((storageColumn) => {
+          const columnId = ulid();
+          const columnNodes =
+            storageColumn.nodes?.flatMap((storageNode) =>
+              processStorageNode(storageNode, columnId)
+            ) || [];
+          return {
+            id: columnId,
+            parentId: gridId,
+            nodeType: 'Markdown',
+            type: 'markdown',
+            markdownId: columnId,
+            defaultClasses: storageColumn.defaultClasses,
+            parentClasses: storageColumn.parentClasses,
+            gridClasses: storageColumn.gridClasses,
+            nodes: columnNodes,
+          };
+        }) || [],
+    };
+  } else if (storagePane.markdowns && storagePane.markdowns[0]) {
+    const markdownId = ulid();
+    const storageMarkdown = storagePane.markdowns[0];
+    const flatNodeList =
+      storageMarkdown.nodes?.flatMap((storageNode) =>
+        processStorageNode(storageNode, markdownId)
+      ) || [];
+
+    liveMarkdown = {
+      id: markdownId,
+      parentId: paneId,
+      nodeType: 'Markdown',
+      type: 'markdown',
+      markdownId: markdownId,
+      defaultClasses: storageMarkdown.defaultClasses,
+      parentClasses: storageMarkdown.parentClasses,
+      nodes: flatNodeList,
+    };
   }
 
-  let liveBgPane: ArtpackImageNode | BgImageNode | VisualBreakNode | undefined =
-    undefined;
   if (storagePane.bgPane) {
     const bgPaneId = ulid();
     liveBgPane = {
@@ -309,23 +268,14 @@ export function convertStorageToLiveTemplate(
     };
   }
 
-  const { gridLayout, ...restOfStoragePane } = storagePane;
+  const { markdowns, gridLayout, bgPane, ...restOfStoragePane } = storagePane;
+
   const liveTemplatePane: TemplatePane = {
     ...restOfStoragePane,
     id: paneId,
     parentId: '',
-    markdown: {
-      ...((storagePane.markdowns && storagePane.markdowns[0]) || {
-        nodeType: 'Markdown',
-        type: 'markdown',
-        defaultClasses: {},
-        parentClasses: [],
-      }),
-      id: markdownId,
-      markdownId: markdownId,
-      parentId: paneId,
-      nodes: flatNodeList,
-    },
+    markdown: liveMarkdown,
+    gridLayout: liveGridLayout,
     bgPane: liveBgPane,
   };
 
@@ -371,49 +321,419 @@ export function convertTemplateToAIShell(template: TemplatePane): string {
     defaultClasses: {},
   };
 
-  // 1. Process parentClasses (layout)
-  if (template.markdown?.parentClasses) {
-    shell.parentClasses = template.markdown.parentClasses.map((layer) => {
-      const newLayer: { mobile?: string; tablet?: string; desktop?: string } =
-        {};
-      if (layer.mobile && Object.keys(layer.mobile).length > 0) {
-        newLayer.mobile = classObjectToString(layer.mobile);
-      }
-      if (layer.tablet && Object.keys(layer.tablet).length > 0) {
-        newLayer.tablet = classObjectToString(layer.tablet);
-      }
-      if (layer.desktop && Object.keys(layer.desktop).length > 0) {
-        newLayer.desktop = classObjectToString(layer.desktop);
-      }
-      return newLayer;
-    });
-  }
+  if (template.gridLayout) {
+    // 1. Process parentClasses (layout)
+    if (template.gridLayout.parentClasses) {
+      shell.parentClasses = template.gridLayout.parentClasses.map((layer) => {
+        const newLayer: { mobile?: string; tablet?: string; desktop?: string } =
+          {};
+        if (layer.mobile && Object.keys(layer.mobile).length > 0) {
+          newLayer.mobile = classObjectToString(layer.mobile);
+        }
+        if (layer.tablet && Object.keys(layer.tablet).length > 0) {
+          newLayer.tablet = classObjectToString(layer.tablet);
+        }
+        if (layer.desktop && Object.keys(layer.desktop).length > 0) {
+          newLayer.desktop = classObjectToString(layer.desktop);
+        }
+        return newLayer;
+      });
+    }
 
-  // 2. Process defaultClasses (typography, etc.)
-  if (template.markdown?.defaultClasses) {
-    for (const tag in template.markdown.defaultClasses) {
-      const styles = template.markdown.defaultClasses[tag];
-      const newTagStyles: {
-        mobile?: string;
-        tablet?: string;
-        desktop?: string;
-      } = {};
+    // 2. Process defaultClasses (typography, etc.)
+    if (template.gridLayout.defaultClasses) {
+      for (const tag in template.gridLayout.defaultClasses) {
+        const styles = template.gridLayout.defaultClasses[tag];
+        const newTagStyles: {
+          mobile?: string;
+          tablet?: string;
+          desktop?: string;
+        } = {};
+
+        if (styles.mobile && Object.keys(styles.mobile).length > 0) {
+          newTagStyles.mobile = classObjectToString(styles.mobile);
+        }
+        if (styles.tablet && Object.keys(styles.tablet).length > 0) {
+          newTagStyles.tablet = classObjectToString(styles.tablet);
+        }
+        if (styles.desktop && Object.keys(styles.desktop).length > 0) {
+          newTagStyles.desktop = classObjectToString(styles.desktop);
+        }
 
-      if (styles.mobile && Object.keys(styles.mobile).length > 0) {
-        newTagStyles.mobile = classObjectToString(styles.mobile);
-      }
-      if (styles.tablet && Object.keys(styles.tablet).length > 0) {
-        newTagStyles.tablet = classObjectToString(styles.tablet);
-      }
-      if (styles.desktop && Object.keys(styles.desktop).length > 0) {
-        newTagStyles.desktop = classObjectToString(styles.desktop);
+        if (Object.keys(newTagStyles).length > 0) {
+          shell.defaultClasses[tag] = newTagStyles;
+        }
       }
+    }
+
+    // 3. Process columns
+    if (template.gridLayout.nodes) {
+      shell.columns = template.gridLayout.nodes.map((column) => {
+        const newColumn: {
+          gridClasses: { mobile?: string; tablet?: string; desktop?: string };
+        } = {
+          gridClasses: {},
+        };
+
+        if (column.gridClasses) {
+          const styles = column.gridClasses;
+          const newGridClasses: {
+            mobile?: string;
+            tablet?: string;
+            desktop?: string;
+          } = {};
+
+          if (styles.mobile && Object.keys(styles.mobile).length > 0) {
+            newGridClasses.mobile = classObjectToString(styles.mobile);
+          }
+          if (styles.tablet && Object.keys(styles.tablet).length > 0) {
+            newGridClasses.tablet = classObjectToString(styles.tablet);
+          }
+          if (styles.desktop && Object.keys(styles.desktop).length > 0) {
+            newGridClasses.desktop = classObjectToString(styles.desktop);
+          }
+          newColumn.gridClasses = newGridClasses;
+        }
+        return newColumn;
+      });
+    }
+  } else if (template.markdown) {
+    // 1. Process parentClasses (layout)
+    if (template.markdown.parentClasses) {
+      shell.parentClasses = template.markdown.parentClasses.map((layer) => {
+        const newLayer: { mobile?: string; tablet?: string; desktop?: string } =
+          {};
+        if (layer.mobile && Object.keys(layer.mobile).length > 0) {
+          newLayer.mobile = classObjectToString(layer.mobile);
+        }
+        if (layer.tablet && Object.keys(layer.tablet).length > 0) {
+          newLayer.tablet = classObjectToString(layer.tablet);
+        }
+        if (layer.desktop && Object.keys(layer.desktop).length > 0) {
+          newLayer.desktop = classObjectToString(layer.desktop);
+        }
+        return newLayer;
+      });
+    }
+
+    // 2. Process defaultClasses (typography, etc.)
+    if (template.markdown.defaultClasses) {
+      for (const tag in template.markdown.defaultClasses) {
+        const styles = template.markdown.defaultClasses[tag];
+        const newTagStyles: {
+          mobile?: string;
+          tablet?: string;
+          desktop?: string;
+        } = {};
+
+        if (styles.mobile && Object.keys(styles.mobile).length > 0) {
+          newTagStyles.mobile = classObjectToString(styles.mobile);
+        }
+        if (styles.tablet && Object.keys(styles.tablet).length > 0) {
+          newTagStyles.tablet = classObjectToString(styles.tablet);
+        }
+        if (styles.desktop && Object.keys(styles.desktop).length > 0) {
+          newTagStyles.desktop = classObjectToString(styles.desktop);
+        }
 
-      if (Object.keys(newTagStyles).length > 0) {
-        shell.defaultClasses[tag] = newTagStyles;
+        if (Object.keys(newTagStyles).length > 0) {
+          shell.defaultClasses[tag] = newTagStyles;
+        }
       }
     }
   }
 
   return JSON.stringify(shell, null, 2);
 }
+
+function convertLivePaneToStoragePane(
+  paneId: string,
+  ctx: NodesContext,
+  options: {
+    title: string;
+    copyMode: CopyMode;
+  }
+): StoragePane | null {
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+  if (!paneNode) {
+    console.error('convertLivePaneToStoragePane: PaneNode not found.');
+    return null;
+  }
+
+  const { title, copyMode } = options;
+  const childNodes = ctx
+    .getChildNodeIDs(paneId)
+    .map((id) => ctx.allNodes.get().get(id));
+
+  const markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
+    | MarkdownPaneFragmentNode
+    | undefined;
+
+  const gridLayoutNode = childNodes.find(
+    (n) => n?.nodeType === 'GridLayoutNode'
+  ) as GridLayoutNode | undefined;
+
+  const bgPaneNode = childNodes.find((n) => n?.nodeType === 'BgPane') as
+    | ArtpackImageNode
+    | BgImageNode
+    | VisualBreakNode
+    | undefined;
+
+  let storageMarkdown: StorageMarkdown | undefined;
+  let storageGridLayout: StorageGridLayoutNode | undefined;
+
+  if (markdownNode) {
+    storageMarkdown = {
+      nodeType: 'Markdown',
+      type: 'markdown',
+      defaultClasses: markdownNode.defaultClasses || {},
+      parentClasses: markdownNode.parentClasses || [],
+      nodes:
+        copyMode !== 'blank'
+          ? ctx
+              .getChildNodeIDs(markdownNode.id)
+              .map((childId) => {
+                const childNode = ctx.allNodes.get().get(childId) as FlatNode;
+                return convertLiveNodeToStorageNode(childNode, ctx, copyMode);
+              })
+              .filter((n): n is StorageNode => n !== null)
+          : [],
+    };
+  } else if (gridLayoutNode) {
+    const { id, parentId, isChanged, ...restOfGrid } = gridLayoutNode;
+    storageGridLayout = {
+      ...restOfGrid,
+      nodes: ctx
+        .getChildNodeIDs(gridLayoutNode.id)
+        .map((columnId) => {
+          const columnNode = ctx.allNodes
+            .get()
+            .get(columnId) as MarkdownPaneFragmentNode;
+          if (!columnNode) return null;
+
+          const {
+            id,
+            parentId,
+            isChanged,
+            markdownId,
+            parentCss,
+            ...restOfColumn
+          } = columnNode;
+
+          const storageColumn: StorageMarkdown = {
+            ...restOfColumn,
+            nodeType: 'Markdown',
+            type: 'markdown',
+            nodes:
+              copyMode !== 'blank'
+                ? ctx
+                    .getChildNodeIDs(columnNode.id)
+                    .map((childId) => {
+                      const childNode = ctx.allNodes
+                        .get()
+                        .get(childId) as FlatNode;
+                      return convertLiveNodeToStorageNode(
+                        childNode,
+                        ctx,
+                        copyMode
+                      );
+                    })
+                    .filter((n): n is StorageNode => n !== null)
+                : [],
+          };
+          return storageColumn;
+        })
+        .filter((n): n is StorageMarkdown => n !== null),
+    };
+  }
+
+  const storageBgPane: StorageBgPane | undefined = bgPaneNode
+    ? { ...bgPaneNode }
+    : undefined;
+
+  if (storageBgPane) {
+    delete (storageBgPane as any).id;
+    delete (storageBgPane as any).parentId;
+  }
+
+  const storagePane: StoragePane = {
+    nodeType: 'Pane',
+    title: title,
+    slug: '',
+    bgColour: paneNode.bgColour,
+    isDecorative: paneNode.isDecorative,
+    heightOffsetDesktop: paneNode.heightOffsetDesktop,
+    heightOffsetMobile: paneNode.heightOffsetMobile,
+    heightOffsetTablet: paneNode.heightOffsetTablet,
+    heightRatioDesktop: paneNode.heightRatioDesktop,
+    heightRatioMobile: paneNode.heightRatioMobile,
+    heightRatioTablet: paneNode.heightRatioTablet,
+    ...(storageMarkdown ? { markdowns: [storageMarkdown] } : {}),
+    ...(storageGridLayout ? { gridLayout: storageGridLayout } : {}),
+    ...(storageBgPane ? { bgPane: storageBgPane } : {}),
+  };
+
+  return storagePane;
+}
+
+export async function savePaneToLibrary(
+  paneId: string,
+  tenantId: string,
+  config: BrandConfig,
+  formData: {
+    title: string;
+    category: string;
+    copyMode: CopyMode;
+  }
+): Promise<BrandConfigState | null> {
+  const ctx = getCtx();
+  const { title, category, copyMode } = formData;
+
+  const newStoragePane = convertLivePaneToStoragePane(paneId, ctx, {
+    title,
+    copyMode,
+  });
+
+  if (!newStoragePane) {
+    console.error(
+      'savePaneToLibrary: Failed to convert pane to storage format.'
+    );
+    return null;
+  }
+
+  let actualMarkdownCount = 0;
+  if (newStoragePane.gridLayout && newStoragePane.gridLayout.nodes) {
+    actualMarkdownCount = newStoragePane.gridLayout.nodes.length;
+  } else if (newStoragePane.markdowns) {
+    actualMarkdownCount = newStoragePane.markdowns.length;
+  }
+
+  const newLibraryEntry: DesignLibraryEntry = {
+    category: category,
+    title: title,
+    markdownCount: actualMarkdownCount,
+    template: newStoragePane,
+  };
+
+  const currentState: BrandConfigState = convertToLocalState(config);
+  const currentLibrary =
+    (currentState.designLibrary as DesignLibraryConfig) || [];
+
+  const existingEntryIndex = currentLibrary.findIndex(
+    (entry) => entry.title === title && entry.category === category
+  );
+
+  let newLibrary: DesignLibraryConfig;
+  if (existingEntryIndex !== -1) {
+    newLibrary = [...currentLibrary];
+    newLibrary[existingEntryIndex] = newLibraryEntry;
+  } else {
+    newLibrary = [...currentLibrary, newLibraryEntry];
+  }
+
+  const updatedState: BrandConfigState = {
+    ...currentState,
+    designLibrary: newLibrary,
+  };
+
+  const backendDTO: BrandConfig = convertToBackendFormat(updatedState);
+
+  try {
+    await saveBrandConfig(tenantId, backendDTO);
+    return updatedState;
+  } catch (error) {
+    console.error('Failed to save design library:', error);
+    return null;
+  }
+}
+
+export async function copyPaneToClipboard(paneId: string): Promise<boolean> {
+  const ctx = getCtx();
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+
+  const storagePane = convertLivePaneToStoragePane(paneId, ctx, {
+    title: paneNode?.title || 'Pasted Pane',
+    copyMode: 'retain',
+  });
+
+  if (!storagePane) {
+    return false;
+  }
+
+  try {
+    const jsonPayload = JSON.stringify(storagePane, null, 2);
+    await navigator.clipboard.writeText(jsonPayload);
+    return true;
+  } catch (error) {
+    console.error('Failed to copy pane to clipboard:', error);
+    return false;
+  }
+}
+
+function buildIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && !map.has(node.id)) {
+    map.set(node.id, ulid());
+  }
+  // Markdown nodes have a second unique identifier
+  if (node.markdownId && !map.has(node.markdownId)) {
+    map.set(node.markdownId, ulid());
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    buildIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.bgPane) {
+    buildIdMap(node.bgPane, map);
+  }
+}
+
+function applyIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && map.has(node.id)) {
+    node.id = map.get(node.id);
+  }
+  if (node.parentId && map.has(node.parentId)) {
+    node.parentId = map.get(node.parentId);
+  }
+  if (node.markdownId && map.has(node.markdownId)) {
+    node.markdownId = map.get(node.markdownId);
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    applyIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.bgPane) {
+    applyIdMap(node.bgPane, map);
+  }
+}
+
+export function remapPaneIds(pane: StoragePane): StoragePane {
+  const idMap = new Map<string, string>();
+  // The input object may have come from JSON.parse, so we treat it as 'any' internally
+  const clone = JSON.parse(JSON.stringify(pane as any));
+
+  // First pass: Traverse the entire structure to build a complete map of old IDs to new IDs.
+  buildIdMap(clone, idMap);
+
+  // Second pass: Traverse again to apply the new IDs, ensuring parent-child relationships are correct.
+  applyIdMap(clone, idMap);
+
+  return clone as StoragePane;
+}