astro-tractstack 2.0.17 → 2.0.19

package/templates/src/stores/storykeep.ts

@@ -157,7 +157,9 @@ export const resetStoryKeepState = () => {
 };
 
 export const settingsPanelStore = atom<SettingsPanelSignal | null>(null);
-
+export const stylePanelTargetMemoryStore = atom<Map<string, number>>(
+  new Map<string, number>()
+);
 export const styleElementInfoStore = map<{
   markdownParentId: string | null;
   tagName: string | null;

package/templates/src/types/compositorTypes.ts

@@ -76,6 +76,7 @@ export type SettingsPanelSignal = {
   minimized?: boolean;
   expanded?: boolean;
   editLock?: number;
+  targetProperty?: 'parentClasses' | 'gridClasses';
 };
 
 export interface OgImageParams {
@@ -173,6 +174,7 @@ export type NodeType =
   | 'Pane'
   | 'StoryFragment'
   | 'BgPane'
+  | 'GridLayoutNode'
   | 'Markdown'
   | 'TagElement'
   | 'TractStack'
@@ -253,7 +255,12 @@ export interface TractStackNode extends BaseNode {
 }
 
 export interface PaneFragmentNode extends BaseNode {
-  type: 'markdown' | 'visual-break' | 'background-image' | 'artpack-image';
+  type:
+    | 'markdown'
+    | 'visual-break'
+    | 'background-image'
+    | 'artpack-image'
+    | 'grid-layout';
   hiddenViewportMobile?: boolean;
   hiddenViewportTablet?: boolean;
   hiddenViewportDesktop?: boolean;
@@ -272,6 +279,22 @@ export interface MarkdownPaneFragmentNode extends PaneFragmentNode {
   >;
   parentClasses?: ParentClassesPayload;
   parentCss?: string[];
+  gridClasses?: DefaultClassValue;
+}
+
+export interface GridLayoutNode extends PaneFragmentNode {
+  nodeType: 'GridLayoutNode';
+  type: 'grid-layout';
+  parentClasses?: ParentClassesPayload;
+  defaultClasses?: Record<
+    string,
+    {
+      mobile: Record<string, string>;
+      tablet: Record<string, string>;
+      desktop: Record<string, string>;
+    }
+  >;
+  gridColumns: { mobile: number; tablet: number; desktop: number };
 }
 
 export interface ArtpackImageNode extends PaneFragmentNode {
@@ -401,10 +424,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;
 };
 
@@ -440,6 +468,18 @@ 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;
+  };
+};
+
 export type StoragePane = Omit<
   PaneNode,
   | 'id'
@@ -453,7 +493,8 @@ export type StoragePane = Omit<
   | 'codeHookPayload'
   | 'markdown'
 > & {
-  markdown?: StorageMarkdown;
+  markdowns?: StorageMarkdown[];
+  gridLayout?: StorageGridLayoutNode;
   bgPane?: StorageBgPane;
 };
 
@@ -481,7 +522,7 @@ export type LoadData = {
   paneNodes?: PaneNode[];
   tractstackNodes?: TractStackNode[];
   childNodes?: (BaseNode | FlatNode)[];
-  paneFragmentNodes?: PaneFragmentNode[];
+  paneFragmentNodes?: (PaneFragmentNode | GridLayoutNode)[];
   flatNodes?: FlatNode[];
   impressionNodes?: ImpressionNode[];
   beliefNodes?: BeliefNode[];
@@ -511,6 +552,18 @@ export interface BasePanelProps {
   onTitleChange?: (title: string) => void;
 }
 
+export type ParentBasePanelProps = {
+  node: MarkdownPaneFragmentNode | GridLayoutNode | null;
+  parentNode?: FlatNode | PaneNode;
+  config?: BrandConfig | null;
+  layer?: number;
+  className?: string;
+  childId?: string;
+  availableCodeHooks?: string[];
+  onTitleChange?: (title: string) => void;
+  targetProperty?: 'parentClasses' | 'gridClasses';
+};
+
 interface WidgetParameterDefinition {
   label: string;
   defaultValue: string;

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/TemplateNodes.ts

@@ -7,6 +7,7 @@ export const TemplateH2Node = {
     {
       copy: 'Catchy title',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -18,6 +19,7 @@ export const TemplateH3Node = {
     {
       copy: 'Catchy sub-title',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -29,6 +31,7 @@ export const TemplateH4Node = {
     {
       copy: 'Catchy sub-title',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -40,6 +43,7 @@ export const TemplatePNode = {
     {
       copy: '...',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -51,6 +55,7 @@ export const TemplateOLNode = {
     {
       copy: '...',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -62,6 +67,7 @@ export const TemplateULNode = {
     {
       copy: '...',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -73,6 +79,7 @@ export const TemplateLINode = {
     {
       copy: '...',
       tagName: 'text',
+      nodeType: 'TagElement',
     },
   ],
 } as TemplateNode;
@@ -84,6 +91,7 @@ export const TemplateLINode = {
 //    {
 //      copy: "aside node",
 //      tagName: "text",
+//nodeType: 'TagElement',
 //    },
 //  ],
 //} as TemplateNode;

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,148 @@ 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');
 };

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

@@ -172,13 +172,14 @@ export async function savePaneToLibrary(
     heightRatioDesktop: paneNode.heightRatioDesktop,
     heightRatioMobile: paneNode.heightRatioMobile,
     heightRatioTablet: paneNode.heightRatioTablet,
-    markdown: newStorageMarkdown,
-    bgPane: newStorageBgPane,
+    ...(newStorageMarkdown ? { markdowns: [newStorageMarkdown] } : {}),
+    ...(newStorageBgPane ? { bgPane: newStorageBgPane } : {}),
   };
 
   const newLibraryEntry: DesignLibraryEntry = {
     category: category,
     title: title,
+    markdownCount: 1,
     template: newStoragePane,
   };
 
@@ -244,10 +245,11 @@ export function mergeCopyIntoTemplate(
   copy: ExtractedCopy
 ): StoragePane {
   const newTemplate = { ...template };
-  if (newTemplate.markdown) {
-    newTemplate.markdown.nodes = copy;
+  if (newTemplate.markdowns) {
+    newTemplate.markdowns[0].nodes = copy;
   } else if (copy.length > 0) {
-    newTemplate.markdown = {
+    if (!newTemplate.markdowns) newTemplate.markdowns = [];
+    newTemplate.markdowns[0] = {
       nodeType: 'Markdown',
       type: 'markdown',
       defaultClasses: {},
@@ -289,8 +291,8 @@ export function convertStorageToLiveTemplate(
   const markdownId = ulid();
   const flatNodeList: TemplateNode[] = [];
 
-  if (storagePane.markdown && storagePane.markdown.nodes) {
-    for (const storageNode of storagePane.markdown.nodes) {
+  if (storagePane.markdowns && storagePane.markdowns[0].nodes) {
+    for (const storageNode of storagePane.markdowns[0].nodes) {
       const processedNodes = processStorageNode(storageNode, markdownId);
       flatNodeList.push(...processedNodes);
     }
@@ -307,12 +309,13 @@ export function convertStorageToLiveTemplate(
     };
   }
 
+  const { gridLayout, ...restOfStoragePane } = storagePane;
   const liveTemplatePane: TemplatePane = {
-    ...storagePane,
+    ...restOfStoragePane,
     id: paneId,
     parentId: '',
     markdown: {
-      ...(storagePane.markdown || {
+      ...((storagePane.markdowns && storagePane.markdowns[0]) || {
         nodeType: 'Markdown',
         type: 'markdown',
         defaultClasses: {},