astro-tractstack 2.0.16 → 2.0.18

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

@@ -10,6 +10,7 @@ import type {
   ArtpackImageNode,
   BgImageNode,
   Tag,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
 interface BreakData {
@@ -192,3 +193,9 @@ export function hasPlayerJS(
 ): window is Window & { playerjs: PlayerJS } {
   return 'playerjs' in window;
 }
+
+export function isGridLayoutNode(
+  node: BaseNode | undefined | null
+): node is GridLayoutNode {
+  return node?.nodeType === 'GridLayoutNode';
+}

package/templates/src/utils/etl/extractor.ts

@@ -52,11 +52,8 @@ export function extractPaneSubtree(
       bgColour: paneNode.bgColour,
     });
 
-  // --- START: REPLACEMENT FOR getNodesRecursively ---
-  // Use a safe, non-recursive breadth-first traversal to gather all descendant
-  // nodes, which preserves the correct sibling order.
   const allDescendantNodes: BaseNode[] = [];
-  const queue: string[] = [...ctx.getChildNodeIDs(paneNode.id)]; // Start queue with direct children
+  const queue: string[] = [...ctx.getChildNodeIDs(paneNode.id)];
 
   while (queue.length > 0) {
     const currentId = queue.shift();
@@ -70,7 +67,6 @@ export function extractPaneSubtree(
       queue.push(...childrenIds);
     }
   }
-  // --- END: REPLACEMENT FOR getNodesRecursively ---
 
   if (VERBOSE)
     console.log(

package/templates/src/utils/etl/index.ts

@@ -75,6 +75,7 @@ export interface OptionsPayload {
       | undefined;
     parentClasses?: any | undefined;
     parentCss?: string[] | undefined;
+    gridCss?: string | undefined;
     hiddenViewportMobile?: boolean | undefined;
     hiddenViewportTablet?: boolean | undefined;
     hiddenViewportDesktop?: boolean | undefined;

package/templates/src/utils/etl/transformer.ts

@@ -11,6 +11,7 @@ import type {
   ArtpackImageNode,
   BgImageNode,
   StoryFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 import type {
   OptionsPayload,
@@ -21,7 +22,9 @@ import {
   isBreakNode,
   isArtpackImageNode,
   isBgImageNode,
+  isGridLayoutNode,
 } from '@/utils/compositor/typeGuards';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
 
 const VERBOSE = false;
 
@@ -42,7 +45,6 @@ export function transformToOptionsPayload(
       })),
     });
 
-  // 1. Generate flattened nodes array with computed CSS
   const flattenedNodes = subtree.allChildNodes
     .map((node) => {
       if (VERBOSE)
@@ -58,11 +60,8 @@ export function transformToOptionsPayload(
         parentId: node.parentId,
       };
 
-      // Add type-specific fields based on node type
       if (node.nodeType === 'TagElement') {
         const flatNode = node as FlatNode;
-
-        // Compute CSS using existing NodesContext methods
         let computedCSS: string | undefined;
         try {
           computedCSS = ctx.getNodeClasses(node.id, 'auto', 0);
@@ -91,10 +90,55 @@ export function transformToOptionsPayload(
         return transformedNode;
       }
 
+      if (isGridLayoutNode(node)) {
+        const gridLayoutNode = node as GridLayoutNode;
+        let gridCss = '';
+        if (gridLayoutNode.gridColumns) {
+          const { mobile, tablet, desktop } = gridLayoutNode.gridColumns;
+          gridCss = `grid grid-cols-${mobile}`;
+          if (tablet !== mobile) {
+            gridCss += ` md:grid-cols-${tablet}`;
+          }
+          if (desktop !== tablet) {
+            gridCss += ` xl:grid-cols-${desktop}`;
+          }
+        }
+
+        let parentCss: string[] | undefined;
+        if (gridLayoutNode.parentClasses) {
+          try {
+            parentCss = gridLayoutNode.parentClasses.map((_, index) =>
+              ctx.getNodeClasses(node.id, 'auto', index)
+            );
+          } catch (error) {
+            console.warn(
+              `Failed to compute parent CSS for grid node ${node.id}:`,
+              error
+            );
+          }
+        }
+
+        const transformedNode = {
+          ...baseNode,
+          type: gridLayoutNode.type,
+          gridCss: gridCss,
+          gridColumns: gridLayoutNode.gridColumns,
+          parentClasses: gridLayoutNode.parentClasses,
+          parentCss: parentCss,
+          defaultClasses: gridLayoutNode.defaultClasses,
+          hiddenViewportMobile: gridLayoutNode.hiddenViewportMobile,
+          hiddenViewportTablet: gridLayoutNode.hiddenViewportTablet,
+          hiddenViewportDesktop: gridLayoutNode.hiddenViewportDesktop,
+        };
+
+        if (VERBOSE)
+          console.log('✅ TRANSFORMER - GridLayout result:', transformedNode);
+        return transformedNode;
+      }
+
       if (node.nodeType === 'Markdown') {
         const markdownNode = node as MarkdownPaneFragmentNode;
 
-        // Compute parentCss if parentClasses exist
         let parentCss: string[] | undefined;
         if (markdownNode.parentClasses) {
           try {
@@ -109,6 +153,25 @@ export function transformToOptionsPayload(
           }
         }
 
+        let gridCss: string | undefined;
+        if (markdownNode.gridClasses) {
+          try {
+            const [allClasses] = processClassesForViewports(
+              markdownNode.gridClasses,
+              {},
+              1
+            );
+            if (allClasses && allClasses.length > 0) {
+              gridCss = allClasses[0];
+            }
+          } catch (error) {
+            console.warn(
+              `Failed to compute grid CSS for markdown node ${node.id}:`,
+              error
+            );
+          }
+        }
+
         const transformedNode = {
           ...baseNode,
           type: markdownNode.type,
@@ -119,6 +182,8 @@ export function transformToOptionsPayload(
           hiddenViewportMobile: markdownNode.hiddenViewportMobile,
           hiddenViewportTablet: markdownNode.hiddenViewportTablet,
           hiddenViewportDesktop: markdownNode.hiddenViewportDesktop,
+          gridClasses: markdownNode.gridClasses,
+          ...(gridCss && { gridCss: gridCss }),
         };
 
         if (VERBOSE)
@@ -127,7 +192,6 @@ export function transformToOptionsPayload(
       }
 
       if (node.nodeType === 'BgPane') {
-        // Handle different BgPane types
         if (isBreakNode(node as FlatNode)) {
           const breakNode = node as VisualBreakNode;
           const transformedNode = {
@@ -188,20 +252,15 @@ export function transformToOptionsPayload(
             );
           return transformedNode;
         }
-
-        // Fallback for unknown BgPane types
         if (VERBOSE)
           console.warn('⚠️ TRANSFORMER - Unknown BgPane type:', node);
         return baseNode;
       }
-
-      // Unknown node type - return base node
       if (VERBOSE) console.warn('⚠️ TRANSFORMER - Unknown node type:', node);
       return baseNode;
     })
     .filter((node) => node !== null);
 
-  // 2. Build final OptionsPayload
   const optionsPayload: OptionsPayload = {
     bgColour: subtree.paneNode.bgColour,
     isDecorative: subtree.paneNode.isDecorative,
@@ -230,11 +289,9 @@ export async function transformStoryFragmentForSave(
   const node = ctx.allNodes.get().get(fragmentId) as StoryFragmentNode;
   const seoData = storyFragmentTopicsStore.get()[fragmentId];
 
-  // Get brand config from store to find default tractstack
   const brandConfig = await getBrandConfig(tenantId);
   const defaultTractStackSlug =
     brandConfig?.TRACTSTACK_HOME_SLUG || 'tractstack';
-  // Find the default tractstack ID from content map
   const contentMap = fullContentMapStore.get();
   const defaultTractStack = contentMap.find(
     (item) => item.type === 'TractStack' && item.slug === defaultTractStackSlug
@@ -244,12 +301,10 @@ export async function transformStoryFragmentForSave(
 
   const payload = {
     ...node,
-    // Add deferred SEO data if available
     ...(seoData && {
       topics: seoData.topics?.map((t) => t.title) || [],
       description: seoData.description || '',
     }),
-    // Ensure tractStackId is set for new StoryFragments
     tractStackId: finalTractStackId,
   };
 
@@ -261,13 +316,8 @@ export function transformLivePaneForSave(
   paneId: string,
   isContext?: boolean
 ): BackendSavePayload {
-  // 1. Extract distributed state
   const subtree = extractPaneSubtree(ctx, paneId);
-
-  // 2. Transform to flattened OptionsPayload using existing NodesContext methods
   const optionsPayload = transformToOptionsPayload(ctx, subtree);
-
-  // 3. Format for save endpoint
   return formatForSave(subtree.paneNode, optionsPayload, isContext);
 }
 
@@ -275,12 +325,7 @@ export function transformLivePaneForPreview(
   ctx: NodesContext,
   paneId: string
 ): BackendPreviewPayload {
-  // 1. Extract distributed state
   const subtree = extractPaneSubtree(ctx, paneId);
-
-  // 2. Transform to flattened OptionsPayload using existing NodesContext methods
   const optionsPayload = transformToOptionsPayload(ctx, subtree);
-
-  // 3. Format for preview endpoint
   return formatForPreview(subtree.paneNode, optionsPayload);
 }

package/utils/inject-files.ts

@@ -105,6 +105,18 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/RenderChildren.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/compositor/nodes/GridLayout.tsx'
+      ),
+      dest: 'src/components/compositor/nodes/GridLayout.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/compositor/nodes/GridLayout_eraser.tsx'
+      ),
+      dest: 'src/components/compositor/nodes/GridLayout_eraser.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/GhostInsertBlock.tsx'
@@ -155,6 +167,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/compositor/nodes/Markdown.tsx'),
       dest: 'src/components/compositor/nodes/Markdown.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/compositor/nodes/Markdown_eraser.tsx'
+      ),
+      dest: 'src/components/compositor/nodes/Markdown_eraser.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/BgPaneWrapper.tsx'
@@ -471,6 +489,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/steps/AiDesignStep.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/DirectInjectStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/DirectInjectStep.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx'