astro-tractstack 2.0.13 → 2.0.15

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

@@ -78,7 +78,6 @@ function buildKeyNormalizationLookup(): Map<string, string> {
 
   const keyMap = new Map<string, string>();
   for (const key in tailwindClasses) {
-    // Store lowercase key -> correctly cased key
     keyMap.set(key.toLowerCase(), key);
   }
   KEY_NORMALIZATION_LOOKUP = keyMap;
@@ -97,7 +96,6 @@ function normalizeKeys(
     if (Object.prototype.hasOwnProperty.call(styleObj, key)) {
       const lowerKey = key.toLowerCase();
       const correctKey = keyMap.get(lowerKey);
-      // Use the correctly cased key if found, otherwise keep original (handles potential non-Tailwind keys)
       normalized[correctKey || key] = styleObj[key];
     }
   }
@@ -258,22 +256,16 @@ function walkDom(
 ) {
   if (domNode.nodeType === Node.TEXT_NODE) {
     const copy = domNode.textContent || '';
-    // Preserve leading/trailing spaces unless the *entire* content is just whitespace.
-    // Trim internal excessive whitespace as a basic sanitation step.
     const trimmedCopy = copy.replace(/\s+/g, ' ').trim();
 
     if (trimmedCopy.length > 0) {
-      // Use the original copy to preserve meaningful spaces, but cleaned up.
       let finalCopy = copy.replace(/\s+/g, ' ');
-      // Preserve single leading space if original had one AND previous sibling exists
       if (copy.startsWith(' ') && domNode.previousSibling) {
         finalCopy = ' ' + finalCopy.trimStart();
       }
-      // Preserve single trailing space if original had one AND next sibling exists
       if (copy.endsWith(' ') && domNode.nextSibling) {
         finalCopy = finalCopy.trimEnd() + ' ';
       }
-      // Special case: if it was ONLY space, respect if it was intended between elements
       if (
         trimmedCopy.length === 0 &&
         copy.length > 0 &&
@@ -283,15 +275,13 @@ function walkDom(
         finalCopy = ' ';
       }
 
-      // Only create node if there's actual content or a meaningful space
       if (finalCopy.trim().length > 0 || finalCopy === ' ') {
         const textNode: TemplateNode = {
           id: ulid(),
           nodeType: 'TagElement',
           parentId: parentId,
           tagName: 'text',
-          copy: finalCopy, // Use the carefully preserved copy
-          overrideClasses: {},
+          copy: finalCopy,
         };
         parsedNodes.push({
           flatNode: textNode,
@@ -326,7 +316,6 @@ function walkDom(
         nodeType: 'TagElement',
         parentId: parentId,
         tagName: 'p',
-        overrideClasses: {},
       };
       parsedNodes.push({
         flatNode: pNode,
@@ -341,8 +330,7 @@ function walkDom(
       id: ulid(),
       nodeType: 'TagElement',
       parentId: finalParentId,
-      tagName: 'a',
-      overrideClasses: {},
+      tagName: 'a', // Buttons are converted to anchor tags for our system
       href: '#',
       buttonPayload: {
         ...buttonPayload,
@@ -368,7 +356,6 @@ function walkDom(
     nodeType: 'TagElement',
     parentId: parentId,
     tagName: tagName,
-    overrideClasses: {},
   };
 
   if (tagName === 'span') {
@@ -493,14 +480,41 @@ function parseDefaultClassesFromShell(
   return sanitizedDefaults;
 }
 
+/**
+ * Parses a raw HTML string from the AI into a structured array of TemplateNodes.
+ * @param copyHtml The raw HTML string.
+ * @param markdownId The parent ID for the top-level nodes.
+ * @returns An array of TemplateNodes representing the structured content.
+ */
+export function parseAiCopyHtml(
+  copyHtml: string,
+  markdownId: string
+): TemplateNode[] {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(copyHtml, 'text/html');
+
+  const allParsedNodes: ParsedNode[] = [];
+  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
+
+  // When parsing copy in isolation, all classes are treated as potential overrides.
+  // The consumer is responsible for merging these with a set of defaults if needed.
+  return allParsedNodes.map((pNode) => {
+    if (
+      Object.keys(pNode.responsiveClasses).length > 0 &&
+      pNode.flatNode.tagName !== 'span'
+    ) {
+      pNode.flatNode.overrideClasses = pNode.responsiveClasses;
+    }
+    return pNode.flatNode;
+  });
+}
+
 export const parseAiPane = (
   shellJson: string,
   copyHtml: string,
   layout: string
 ): TemplatePane => {
   const shell: ShellJson = JSON.parse(shellJson);
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(copyHtml, 'text/html');
 
   const paneId = ulid();
   const markdownId = ulid();
@@ -527,73 +541,7 @@ export const parseAiPane = (
     defaultClasses: shellDefaults,
   };
 
-  const allParsedNodes: ParsedNode[] = [];
-  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
-
-  const templateNodes: TemplateNode[] = [];
-  const nodesByTag = new Map<string, ParsedNode[]>();
-
-  allParsedNodes.forEach((parsedNode) => {
-    templateNodes.push(parsedNode.flatNode);
-    const tagName = parsedNode.flatNode.tagName;
-
-    if (
-      tagName &&
-      tagName !== 'span' &&
-      tagName !== 'text' &&
-      tagName !== 'em' &&
-      tagName !== 'strong' &&
-      tagName !== 'a'
-    ) {
-      if (!nodesByTag.has(tagName)) {
-        nodesByTag.set(tagName, []);
-      }
-      nodesByTag.get(tagName)!.push(parsedNode);
-    }
-  });
-
-  nodesByTag.forEach((nodes, tagName) => {
-    const commonResponsiveFromCopy = findMostCommonClasses(nodes);
-    const requiredCommonFromCopy = ensureRequiredViewports(
-      commonResponsiveFromCopy
-    );
-
-    const existingShellDefault = markdownNode.defaultClasses![tagName];
-    const mergedDefault = ensureRequiredViewports(
-      mergeResponsive(existingShellDefault, commonResponsiveFromCopy)
-    );
-
-    markdownNode.defaultClasses![tagName] = mergedDefault;
-
-    nodes.forEach((parsedNode) => {
-      const requiredNodeResponsive = ensureRequiredViewports(
-        parsedNode.responsiveClasses
-      );
-
-      if (!isDeepEqual(requiredNodeResponsive, requiredCommonFromCopy)) {
-        if (!parsedNode.flatNode.overrideClasses) {
-          parsedNode.flatNode.overrideClasses = {};
-        }
-        parsedNode.flatNode.overrideClasses = parsedNode.responsiveClasses;
-      }
-    });
-  });
-
-  if (layout.includes('Image')) {
-    const imgNode: TemplateNode = {
-      id: ulid(),
-      nodeType: 'TagElement',
-      parentId: markdownId,
-      tagName: 'img',
-      src: '/static.jpg',
-      overrideClasses: {},
-    };
-    if (layout === 'Text + Image Left') {
-      templateNodes.unshift(imgNode);
-    } else {
-      templateNodes.push(imgNode);
-    }
-  }
+  const templateNodes = parseAiCopyHtml(copyHtml, markdownId);
 
   const templatePane: TemplatePane = {
     id: paneId,

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

@@ -0,0 +1,416 @@
+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,
+} from '@/types/compositorTypes';
+import type {
+  BrandConfig,
+  BrandConfigState,
+  DesignLibraryConfig,
+  DesignLibraryEntry,
+} from '@/types/tractstack';
+import { saveBrandConfig } from '@/utils/api/brandConfig';
+import {
+  convertToLocalState,
+  convertToBackendFormat,
+} from '@/utils/api/brandHelpers';
+
+type CopyMode = 'retain' | 'lorem' | 'blank';
+
+export type ExtractedCopy = StorageNode[];
+
+const LOREM_SHORT = 'Lorem ipsum dolor sit amet.';
+const LOREM_LONG =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
+function convertLiveNodeToStorageNode(
+  node: FlatNode,
+  ctx: NodesContext,
+  copyMode: CopyMode
+): StorageNode | null {
+  if (copyMode === 'lorem') {
+    if (!node.tagName || !['h2', 'h3', 'h4', 'p'].includes(node.tagName)) {
+      return null;
+    }
+  }
+
+  const storageNode: StorageNode = {
+    nodeType: node.nodeType,
+    tagName: node.tagName,
+    tagNameCustom: node.tagNameCustom,
+    overrideClasses: copyMode === 'retain' ? node.overrideClasses : undefined,
+    href: copyMode === 'retain' ? node.href : undefined,
+    src: copyMode === 'retain' ? node.src : undefined,
+    alt: copyMode === 'retain' ? node.alt : undefined,
+    fileId: copyMode === 'retain' ? node.fileId : undefined,
+    buttonPayload: copyMode === 'retain' ? node.buttonPayload : undefined,
+    codeHookParams: copyMode === 'retain' ? node.codeHookParams : undefined,
+    elementCss: copyMode === 'retain' ? node.elementCss : undefined,
+  };
+
+  const childIds = ctx.getChildNodeIDs(node.id);
+
+  if (childIds.length > 0) {
+    const childNodes = childIds
+      .map((id) => {
+        const childNode = ctx.allNodes.get().get(id) as FlatNode;
+        if (!childNode) return null;
+
+        if (childNode.tagName === 'text' && childNode.copy) {
+          if (copyMode === 'lorem') {
+            const isHeadingParent =
+              node.tagName && node.tagName.startsWith('h');
+            return {
+              nodeType: 'TagElement',
+              tagName: 'text',
+              copy: isHeadingParent ? LOREM_SHORT : LOREM_LONG,
+            };
+          }
+          if (copyMode === 'retain') {
+            return {
+              nodeType: 'TagElement',
+              tagName: 'text',
+              copy: childNode.copy,
+            };
+          }
+        }
+
+        return convertLiveNodeToStorageNode(childNode, ctx, copyMode);
+      })
+      .filter((n): n is StorageNode => n !== null);
+
+    if (childNodes.length > 0) {
+      storageNode.nodes = childNodes;
+    }
+  }
+
+  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,
+    markdown: newStorageMarkdown,
+    bgPane: newStorageBgPane,
+  };
+
+  const newLibraryEntry: DesignLibraryEntry = {
+    category: category,
+    title: title,
+    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 markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
+    | MarkdownPaneFragmentNode
+    | undefined;
+
+  if (!markdownNode) {
+    return [];
+  }
+
+  return (
+    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) || []
+  );
+}
+
+export function mergeCopyIntoTemplate(
+  template: StoragePane,
+  copy: ExtractedCopy
+): StoragePane {
+  const newTemplate = { ...template };
+  if (newTemplate.markdown) {
+    newTemplate.markdown.nodes = copy;
+  } else if (copy.length > 0) {
+    newTemplate.markdown = {
+      nodeType: 'Markdown',
+      type: 'markdown',
+      defaultClasses: {},
+      parentClasses: [],
+      nodes: copy,
+    };
+  }
+  return newTemplate;
+}
+
+function processStorageNode(
+  node: StorageNode,
+  parentId: string
+): TemplateNode[] {
+  const newId = ulid();
+  const { nodes, ...rest } = node;
+  const liveNode: TemplateNode = {
+    ...rest,
+    id: newId,
+    parentId: parentId,
+  };
+
+  const flatList: TemplateNode[] = [liveNode];
+
+  if (nodes) {
+    for (const child of nodes) {
+      const processedChildren = processStorageNode(child, newId);
+      flatList.push(...processedChildren);
+    }
+  }
+
+  return flatList;
+}
+
+export function convertStorageToLiveTemplate(
+  storagePane: StoragePane
+): TemplatePane {
+  const paneId = ulid();
+  const markdownId = ulid();
+  const flatNodeList: TemplateNode[] = [];
+
+  if (storagePane.markdown && storagePane.markdown.nodes) {
+    for (const storageNode of storagePane.markdown.nodes) {
+      const processedNodes = processStorageNode(storageNode, markdownId);
+      flatNodeList.push(...processedNodes);
+    }
+  }
+
+  let liveBgPane: ArtpackImageNode | BgImageNode | VisualBreakNode | undefined =
+    undefined;
+  if (storagePane.bgPane) {
+    const bgPaneId = ulid();
+    liveBgPane = {
+      ...storagePane.bgPane,
+      id: bgPaneId,
+      parentId: paneId,
+    };
+  }
+
+  const liveTemplatePane: TemplatePane = {
+    ...storagePane,
+    id: paneId,
+    parentId: '',
+    markdown: {
+      ...(storagePane.markdown || {
+        nodeType: 'Markdown',
+        type: 'markdown',
+        defaultClasses: {},
+        parentClasses: [],
+      }),
+      id: markdownId,
+      markdownId: markdownId,
+      parentId: paneId,
+      nodes: flatNodeList,
+    },
+    bgPane: liveBgPane,
+  };
+
+  return liveTemplatePane;
+}
+
+// Helper to convert a style object { "px": "4", "fontBOLD": "bold" } to "px-4 font-bold"
+function classObjectToString(
+  classObj: Record<string, string> | undefined
+): string {
+  if (!classObj) return '';
+
+  return Object.entries(classObj)
+    .map(([key, value]) => {
+      const definition = tailwindClasses[key];
+      if (!definition) return ''; // Ignore keys not in our definitions
+
+      if (definition.useKeyAsClass) {
+        return value; // e.g., for 'fontBOLD', value is 'font-bold'
+      }
+
+      // Handle negative values
+      if (typeof value === 'string' && value.startsWith('-')) {
+        return `-${definition.prefix}${value.substring(1)}`;
+      }
+
+      return `${definition.prefix}${value}`;
+    })
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Translates a TemplatePane from the design library into an AI-compatible JSON shell
+ * for the hybrid AI copy generation path.
+ * @param template The TemplatePane object selected by the user.
+ * @returns A JSON string compatible with the AI's second-stage prompt.
+ */
+export function convertTemplateToAIShell(template: TemplatePane): string {
+  const shell: any = {
+    bgColour: template.bgColour || '#ffffff',
+    parentClasses: [],
+    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;
+    });
+  }
+
+  // 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;
+      }
+    }
+  }
+
+  return JSON.stringify(shell, null, 2);
+}

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

@@ -63,7 +63,7 @@ Example response format:
   "slug": "short-descriptive-title"
 }`,
         input_text: markdownContent,
-        final_model: 'anthropic/claude-3-5-sonnet',
+        final_model: '',
         temperature: 0.3,
         max_tokens: 200,
       }),

package/utils/inject-files.ts

@@ -127,6 +127,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/Pane_eraser.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx'
+      ),
+      dest: 'src/components/compositor/nodes/Pane_DesignLibrary.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/Pane_layout.tsx'
@@ -429,6 +435,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/AddPanePanel_codehook.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/RestylePaneModal.tsx'
+      ),
+      dest: 'src/components/edit/pane/RestylePaneModal.tsx',
+    },
     {
       src: resolve('../templates/src/components/edit/pane/AiPaneGenerator.tsx'),
       dest: 'src/components/edit/pane/AiPaneGenerator.tsx',
@@ -437,6 +449,24 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/pane/AiPanePreview.tsx'),
       dest: 'src/components/edit/pane/AiPanePreview.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/CopyInputStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/CopyInputStep.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/DesignLibraryStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/DesignLibraryStep.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/AiDesignStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/AiDesignStep.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx'
@@ -629,6 +659,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/utils/compositor/typeGuards.ts'),
       dest: 'src/utils/compositor/typeGuards.ts',
     },
+    {
+      src: resolve('../templates/src/utils/compositor/designLibraryHelper.ts'),
+      dest: 'src/utils/compositor/designLibraryHelper.ts',
+    },
     {
       src: resolve('../templates/src/utils/compositor/domHelpers.ts'),
       dest: 'src/utils/compositor/domHelpers.ts',
@@ -1372,6 +1406,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/state/SaveModal.tsx'),
       dest: 'src/components/edit/state/SaveModal.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/state/SaveToLibraryModal.tsx'
+      ),
+      dest: 'src/components/edit/state/SaveToLibraryModal.tsx',
+    },
     {
       src: resolve('../templates/src/components/edit/state/StylesMemory.tsx'),
       dest: 'src/components/edit/state/StylesMemory.tsx',