astro-tractstack 2.0.18 → 2.0.20

package/templates/src/types/compositorTypes.ts

@@ -43,6 +43,7 @@ export enum PaneAddMode {
   BREAK = 'BREAK',
   REUSE = 'REUSE',
   CODEHOOK = 'CODEHOOK',
+  PASTE = 'PASTE',
 }
 
 export enum PaneConfigMode {
@@ -424,10 +425,15 @@ export type TemplateMarkdown = MarkdownPaneFragmentNode & {
   markdownBody?: string;
 };
 
+export type TemplateGridLayout = GridLayoutNode & {
+  nodes?: TemplateMarkdown[];
+};
+
 export type TemplatePane = PaneNode & {
   id?: string;
   parentId?: string;
   markdown?: TemplateMarkdown;
+  gridLayout?: TemplateGridLayout;
   bgPane?: VisualBreakNode | ArtpackImageNode | BgImageNode;
 };
 
@@ -463,6 +469,19 @@ export type StorageMarkdown = Omit<
   nodes?: StorageNode[];
 };
 
+export type StorageGridLayoutNode = {
+  nodeType: string;
+  type: string;
+  defaultClasses?: Record<string, any>;
+  parentClasses?: Record<string, any>[];
+  gridColumns: {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+  };
+  nodes?: StorageMarkdown[];
+};
+
 export type StoragePane = Omit<
   PaneNode,
   | 'id'
@@ -476,7 +495,8 @@ export type StoragePane = Omit<
   | 'codeHookPayload'
   | 'markdown'
 > & {
-  markdown?: StorageMarkdown;
+  markdowns?: StorageMarkdown[];
+  gridLayout?: StorageGridLayoutNode;
   bgPane?: StorageBgPane;
 };
 

package/templates/src/types/tractstack.ts

@@ -3,6 +3,7 @@ import type { StoragePane } from './compositorTypes';
 export type DesignLibraryEntry = {
   category: string;
   title: string;
+  markdownCount: number;
   template: StoragePane;
 };
 

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

@@ -1,13 +1,4 @@
-import {
-  //TemplateAsideNode,
-  TemplateH2Node,
-  TemplateH3Node,
-  TemplatePNode,
-} from './TemplateNodes';
-import { getTemplateSimpleMarkdown } from './TemplateMarkdowns';
-import { getColor, tailwindToHex } from './tailwindColors';
 import type { TemplatePane } from '@/types/compositorTypes';
-import type { Theme } from '@/types/tractstack';
 
 export const getTemplateVisualBreakPane = (variant: string) => {
   // colour will be set on insert based on adjacent nodes
@@ -31,70 +22,3 @@ export const getTemplateVisualBreakPane = (variant: string) => {
     },
   } as TemplatePane;
 };
-
-export const getTemplateSimplePane = (
-  theme: Theme,
-  brand: string,
-  useOdd: boolean = false
-) => {
-  return {
-    nodeType: 'Pane',
-    title: '',
-    slug: '',
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      ...getTemplateSimpleMarkdown(theme),
-      nodes: [
-        { ...TemplateH2Node, copy: 'H2 node in simple pane' },
-        { ...TemplatePNode, copy: 'P node in simple pane' },
-        { ...TemplateH3Node, copy: 'H3 node in simple pane' },
-        //{ ...TemplateAsideNode, copy: "Aside node in simple pane" },
-      ],
-    },
-  } as TemplatePane;
-};
-
-export const getTemplateMarkdownPane = (
-  theme: Theme,
-  variant: string,
-  brand: string,
-  useOdd: boolean = false
-) => {
-  console.log(`variant: ${variant}`);
-  return {
-    nodeType: 'Pane',
-    title: '',
-    slug: '',
-    bgColour: tailwindToHex(
-      getColor(
-        {
-          light: !useOdd ? 'brand-2' : 'white',
-          'light-bw': !useOdd ? 'white' : 'brand-2',
-          'light-bold': !useOdd ? 'brand-2' : 'white',
-          dark: !useOdd ? 'black' : 'brand-1',
-          'dark-bw': !useOdd ? 'black' : 'brand-1',
-          'dark-bold': !useOdd ? 'brand-1' : 'black',
-        },
-        theme
-      ),
-      brand
-    ),
-    markdown: {
-      ...getTemplateSimpleMarkdown(theme),
-      markdownBody: `## add a catchy title here\n\nyour story continues... and continues... and continues... and continues... and continues... and continues... with nice layout and typography.\n\n[Try it now!](try)   [Learn more](learn)\n`,
-    },
-  } as TemplatePane;
-};

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

@@ -7,14 +7,23 @@ import type {
   DefaultClasses,
   ResponsiveClasses,
   ButtonPayload,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
-import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { isDeepEqual } from '@/utils/helpers';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 
 type LLMShellLayer = {
-  mobile?: Record<string, string>;
-  tablet?: Record<string, string>;
-  desktop?: Record<string, string>;
+  mobile?: string;
+  tablet?: string;
+  desktop?: string;
+};
+
+type LLMColumnLayer = {
+  gridClasses: {
+    mobile?: string;
+    tablet?: string;
+    desktop?: string;
+  };
 };
 
 type LLMDefaultClasses = {
@@ -29,6 +38,7 @@ type ShellJson = {
   bgColour: string;
   parentClasses: LLMShellLayer[];
   defaultClasses: LLMDefaultClasses;
+  columns?: LLMColumnLayer[];
 };
 
 type ParsedNode = {
@@ -36,12 +46,6 @@ type ParsedNode = {
   responsiveClasses: ResponsiveClasses;
 };
 
-type ParentClassLayer = {
-  mobile: Record<string, string>;
-  tablet: Record<string, string>;
-  desktop: Record<string, string>;
-};
-
 type DefaultClassValue = {
   mobile: Record<string, string>;
   tablet: Record<string, string>;
@@ -54,7 +58,6 @@ type ClassLookupValue = {
   viewport: 'mobile' | 'tablet' | 'desktop';
 };
 
-let KEY_NORMALIZATION_LOOKUP: Map<string, string> | null = null;
 let RESPONSIVE_CLASS_LOOKUP: Map<string, ClassLookupValue> | null = null;
 let BUTTON_CLASS_LOOKUP: Map<string, { key: string; value: string }> | null =
   null;
@@ -74,37 +77,6 @@ const ALLOWED_TAGS = new Set([
   'a',
 ]);
 
-function buildKeyNormalizationLookup(): Map<string, string> {
-  if (KEY_NORMALIZATION_LOOKUP) {
-    return KEY_NORMALIZATION_LOOKUP;
-  }
-
-  const keyMap = new Map<string, string>();
-  for (const key in tailwindClasses) {
-    keyMap.set(key.toLowerCase(), key);
-  }
-  KEY_NORMALIZATION_LOOKUP = keyMap;
-  return keyMap;
-}
-
-function normalizeKeys(
-  styleObj: Record<string, string> | undefined
-): Record<string, string> {
-  if (!styleObj) return {};
-
-  const keyMap = buildKeyNormalizationLookup();
-  const normalized: Record<string, string> = {};
-
-  for (const key in styleObj) {
-    if (Object.prototype.hasOwnProperty.call(styleObj, key)) {
-      const lowerKey = key.toLowerCase();
-      const correctKey = keyMap.get(lowerKey);
-      normalized[correctKey || key] = styleObj[key];
-    }
-  }
-  return normalized;
-}
-
 function buildResponsiveClassLookup(): Map<string, ClassLookupValue> {
   if (RESPONSIVE_CLASS_LOOKUP) {
     return RESPONSIVE_CLASS_LOOKUP;
@@ -406,6 +378,121 @@ function findMostCommonClasses(nodes: ParsedNode[]): ResponsiveClasses {
   return classMap.get(mostCommonKey) || {};
 }
 
+/**
+ * Calculates the difference between a node's full style and the default theme for its tag.
+ * @returns An object with only the override styles, or undefined if there are no overrides.
+ */
+function calculateOverrides(
+  fullStyle: ResponsiveClasses,
+  defaultStyle: DefaultClassValue
+): ResponsiveClasses | undefined {
+  const overrides: ResponsiveClasses = {};
+  const viewports: Array<keyof ResponsiveClasses> = [
+    'mobile',
+    'tablet',
+    'desktop',
+  ];
+
+  for (const viewport of viewports) {
+    const fullVPStyle = fullStyle[viewport];
+    const defaultVPStyle = defaultStyle[viewport];
+
+    if (!fullVPStyle) {
+      continue;
+    }
+
+    for (const key in fullVPStyle) {
+      if (
+        Object.prototype.hasOwnProperty.call(fullVPStyle, key) &&
+        fullVPStyle[key] !== defaultVPStyle?.[key]
+      ) {
+        if (!overrides[viewport]) {
+          overrides[viewport] = {};
+        }
+        overrides[viewport]![key] = fullVPStyle[key];
+      }
+    }
+  }
+
+  if (Object.keys(overrides).length > 0 && !isDeepEqual(overrides, {})) {
+    return overrides;
+  }
+
+  return undefined;
+}
+
+/**
+ * Reconciles classes for a set of final TemplateNodes against a base theme.
+ * It discovers the true theme from the content, merges it into the base theme,
+ * and then mutates the nodes to only contain true override classes.
+ * @param nodes The array of TemplateNode objects to mutate.
+ * @param baseDefaults The base theme object to mutate.
+ */
+function reconcileClasses(
+  nodes: TemplateNode[],
+  baseDefaults: DefaultClasses
+): void {
+  const nodesByTag: Record<string, TemplateNode[]> = {};
+  const tempParsedNodes: ParsedNode[] = [];
+
+  nodes.forEach((node) => {
+    // Create a temporary ParsedNode structure for analysis
+    const tempParsedNode: ParsedNode = {
+      flatNode: node,
+      responsiveClasses: node.overrideClasses || {},
+    };
+    tempParsedNodes.push(tempParsedNode);
+
+    const tagName = node.tagName;
+    if (!['p', 'h2', 'h3', 'h4', 'h5'].includes(tagName)) {
+      return;
+    }
+    if (!nodesByTag[tagName]) {
+      nodesByTag[tagName] = [];
+    }
+    nodesByTag[tagName].push(node);
+  });
+
+  const finalDefaults = JSON.parse(JSON.stringify(baseDefaults));
+
+  for (const tagName in nodesByTag) {
+    const nodesForTag = nodesByTag[tagName];
+    const tempParsedForTag = nodesForTag.map((n) => ({
+      flatNode: n,
+      responsiveClasses: n.overrideClasses || {},
+    }));
+
+    const commonStyleForTag = findMostCommonClasses(tempParsedForTag);
+    const mergedDefault = mergeResponsive(
+      finalDefaults[tagName],
+      commonStyleForTag
+    );
+    finalDefaults[tagName] = ensureRequiredViewports(mergedDefault);
+  }
+
+  nodes.forEach((node) => {
+    const tagName = node.tagName;
+    const defaultStyleForTag = finalDefaults[tagName];
+    const fullStyle = node.overrideClasses || {};
+
+    if (defaultStyleForTag) {
+      const overrides = calculateOverrides(fullStyle, defaultStyleForTag);
+      node.overrideClasses = overrides;
+    } else if (Object.keys(fullStyle).length > 0 && node.tagName !== 'span') {
+      if (!isDeepEqual(fullStyle, {})) {
+        node.overrideClasses = fullStyle;
+      } else {
+        node.overrideClasses = undefined;
+      }
+    } else if (node.tagName !== 'span') {
+      node.overrideClasses = undefined;
+    }
+  });
+
+  Object.keys(baseDefaults).forEach((key) => delete baseDefaults[key]);
+  Object.assign(baseDefaults, finalDefaults);
+}
+
 function ensureRequiredViewports(
   responsive: ResponsiveClasses | undefined
 ): DefaultClassValue {
@@ -502,8 +589,6 @@ export function parseAiCopyHtml(
   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 &&
@@ -515,53 +600,150 @@ export function parseAiCopyHtml(
   });
 }
 
+function transformClassesFromShellLayer(
+  layer: LLMShellLayer | LLMColumnLayer['gridClasses']
+): DefaultClassValue {
+  const mobileClasses = sanitizeResponsiveClasses(layer.mobile);
+
+  const tabletString = layer.tablet
+    ? layer.tablet
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((c) => `md:${c}`)
+        .join(' ')
+    : undefined;
+  const tabletClasses = sanitizeResponsiveClasses(tabletString);
+
+  const desktopString = layer.desktop
+    ? layer.desktop
+        .split(/\s+/)
+        .filter(Boolean)
+        .map((c) => `xl:${c}`)
+        .join(' ')
+    : undefined;
+  const desktopClasses = sanitizeResponsiveClasses(desktopString);
+
+  let merged = mergeResponsive(mobileClasses, tabletClasses);
+  merged = mergeResponsive(merged, desktopClasses);
+
+  return ensureRequiredViewports(merged);
+}
+
+function transformParentClassesFromShell(
+  llmParentClasses: LLMShellLayer[]
+): ParentClassesPayload {
+  return llmParentClasses.map((layer) => transformClassesFromShellLayer(layer));
+}
+
 export const parseAiPane = (
   shellJson: string,
-  copyHtml: string,
+  copyHtml: string | string[],
   layout: string
-): TemplatePane => {
-  const shell: ShellJson = JSON.parse(shellJson);
+): Omit<TemplatePane, 'nodes'> & {
+  nodes?: (TemplateMarkdown | GridLayoutNode)[];
+} => {
+  //console.log('--- ENTERING parseAiPane ---', { shellJson, copyHtml, layout });
 
+  const shell: ShellJson = JSON.parse(shellJson);
   const paneId = ulid();
-  const markdownId = ulid();
-
-  const transformedParentClasses: ParentClassesPayload = (
-    shell.parentClasses || []
-  ).map(
-    (layer): ParentClassLayer => ({
-      mobile: normalizeKeys(layer.mobile),
-      tablet: normalizeKeys(layer.tablet),
-      desktop: normalizeKeys(layer.desktop),
-    })
-  );
 
-  const shellDefaults = parseDefaultClassesFromShell(shell.defaultClasses);
+  // --- GRID LAYOUT PATH ---
+  if (shell.columns && Array.isArray(copyHtml)) {
+    const gridLayoutId = ulid();
+    const shellDefaults = parseDefaultClassesFromShell(shell.defaultClasses);
+    const transformedParentClasses = transformParentClassesFromShell(
+      shell.parentClasses || []
+    );
 
-  const markdownNode: TemplateMarkdown = {
-    id: markdownId,
-    nodeType: 'Markdown',
-    parentId: paneId,
-    type: 'markdown',
-    markdownId: ulid(),
-    parentClasses: transformedParentClasses,
-    defaultClasses: shellDefaults,
-  };
+    const childMarkdownNodes = shell.columns.map((column, index) => {
+      const markdownId = ulid();
+      const gridClasses = transformClassesFromShellLayer(column.gridClasses);
+      const templateNodes = parseAiCopyHtml(copyHtml[index] || '', markdownId);
+
+      const markdownNode: TemplateMarkdown = {
+        id: markdownId,
+        nodeType: 'Markdown',
+        parentId: gridLayoutId,
+        type: 'markdown',
+        markdownId: ulid(),
+        gridClasses,
+        nodes: templateNodes,
+      };
+      return markdownNode;
+    });
+
+    const gridLayoutNode: GridLayoutNode & { nodes: TemplateMarkdown[] } = {
+      id: gridLayoutId,
+      nodeType: 'GridLayoutNode',
+      parentId: paneId,
+      type: 'grid-layout',
+      parentClasses: transformedParentClasses,
+      defaultClasses: shellDefaults,
+      gridColumns: {
+        mobile: 1,
+        tablet: 2,
+        desktop: 2,
+      },
+      nodes: childMarkdownNodes,
+    };
+
+    const templatePane = {
+      id: paneId,
+      nodeType: 'Pane' as const,
+      parentId: '',
+      title: 'AI Pane',
+      slug: `ai-${paneId.slice(-4)}`,
+      bgColour: shell.bgColour,
+      isDecorative: false,
+      gridLayout: gridLayoutNode,
+    };
+    /*
+    console.log({
+      shellDefaults: shellDefaults,
+      transformedParentClasses: transformedParentClasses,
+      childMarkdownNodes: childMarkdownNodes,
+      gridLayoutNode: gridLayoutNode,
+      templatePane: templatePane,
+    });
+    */
+    return templatePane;
+  }
 
-  const templateNodes = parseAiCopyHtml(copyHtml, markdownId);
-
-  const templatePane: TemplatePane = {
-    id: paneId,
-    nodeType: 'Pane',
-    parentId: '',
-    title: 'AI Pane',
-    slug: `ai-${paneId.slice(-4)}`,
-    bgColour: shell.bgColour,
-    isDecorative: false,
-    markdown: {
-      ...markdownNode,
+  // --- SINGLE-COLUMN LAYOUT PATH ---
+  if (typeof copyHtml === 'string') {
+    const markdownId = ulid();
+    const shellDefaults = parseDefaultClassesFromShell(shell.defaultClasses);
+    const transformedParentClasses = transformParentClassesFromShell(
+      shell.parentClasses || []
+    );
+    const templateNodes = parseAiCopyHtml(copyHtml, markdownId);
+
+    reconcileClasses(templateNodes, shellDefaults);
+
+    const markdownNode: TemplateMarkdown = {
+      id: markdownId,
+      nodeType: 'Markdown',
+      parentId: paneId,
+      type: 'markdown',
+      markdownId: ulid(),
+      parentClasses: transformedParentClasses,
+      defaultClasses: shellDefaults,
       nodes: templateNodes,
-    },
-  };
+    };
+
+    const templatePane = {
+      id: paneId,
+      nodeType: 'Pane' as const,
+      parentId: '',
+      title: 'AI Pane',
+      slug: `ai-${paneId.slice(-4)}`,
+      bgColour: shell.bgColour,
+      isDecorative: false,
+      markdown: markdownNode,
+    };
+    return templatePane;
+  }
 
-  return templatePane;
+  // Fallback for invalid input
+  throw new Error('Invalid input for parseAiPane');
 };