astro-tractstack 2.0.16 → 2.0.18

package/templates/src/stores/nodes.ts

@@ -15,6 +15,7 @@ import {
   hasTagName,
   isDefined,
   isValidTag,
+  isGridLayoutNode,
   toTag,
 } from '@/utils/compositor/typeGuards';
 import { startLoadingAnimation } from '@/utils/helpers';
@@ -29,6 +30,7 @@ import type {
   BaseNode,
   FlatNode,
   ImpressionNode,
+  GridLayoutNode,
   MarkdownPaneFragmentNode,
   MenuNode,
   NodeType,
@@ -1390,6 +1392,30 @@ export class NodesContext {
     if (!node) return '';
 
     switch (node.nodeType) {
+      case 'GridLayoutNode': {
+        const gridNode = node as GridLayoutNode;
+        if (gridNode.parentClasses) {
+          const [all, mobile, tablet, desktop] = processClassesForViewports(
+            gridNode.parentClasses[depth],
+            {}, // No override classes for GridLayout parent case
+            1
+          );
+
+          if (isPreview) return desktop[0];
+          switch (viewport) {
+            case 'desktop':
+              return desktop[0];
+            case 'tablet':
+              return tablet[0];
+            case 'mobile':
+              return mobile[0];
+            default:
+              return all[0];
+          }
+        }
+        break;
+      }
+
       case 'Markdown':
         {
           const markdownFragment = node as MarkdownPaneFragmentNode;
@@ -1485,33 +1511,54 @@ export class NodesContext {
             }
           }
 
-          const closestPaneId = this.getClosestNodeTypeFromId(
+          // Begin Default Class Lookup Logic
+          const markdownParentId = this.getClosestNodeTypeFromId(
             nodeId,
             'Markdown'
           );
-          const paneNode = this.allNodes
+          if (!markdownParentId) break;
+
+          const markdownParentNode = this.allNodes
             .get()
-            .get(closestPaneId) as MarkdownPaneFragmentNode;
-          if (paneNode && 'tagName' in node) {
-            const tagNameStr = node.tagName as string;
-            const styles = paneNode.defaultClasses![tagNameStr];
-            if (styles && styles.mobile) {
-              const [all, mobile, tablet, desktop] = processClassesForViewports(
-                styles,
-                (node as FlatNode)?.overrideClasses || {},
-                1
-              );
-              if (isPreview) return desktop[0];
-              switch (viewport) {
-                case 'desktop':
-                  return desktop[0];
-                case 'tablet':
-                  return tablet[0];
-                case 'mobile':
-                  return mobile[0];
-                default:
-                  return all[0];
-              }
+            .get(markdownParentId) as MarkdownPaneFragmentNode;
+          if (!markdownParentNode) break;
+
+          const tagNameStr = (node as FlatNode).tagName as string;
+
+          // By default, assume the markdown node is the source of styles.
+          let styleSourceNode: MarkdownPaneFragmentNode | GridLayoutNode =
+            markdownParentNode;
+          let styles = styleSourceNode.defaultClasses?.[tagNameStr];
+
+          // If the markdown node has no styles for this tag, check for a GridLayout grandparent.
+          // This handles the case where the MarkdownNode is a column.
+          if (!styles || Object.keys(styles.mobile).length === 0) {
+            const grandparent = markdownParentNode.parentId
+              ? this.allNodes.get().get(markdownParentNode.parentId)
+              : null;
+
+            if (grandparent && isGridLayoutNode(grandparent)) {
+              styleSourceNode = grandparent;
+              styles = styleSourceNode.defaultClasses?.[tagNameStr];
+            }
+          }
+
+          if (styles && styles.mobile) {
+            const [all, mobile, tablet, desktop] = processClassesForViewports(
+              styles,
+              (node as FlatNode)?.overrideClasses || {},
+              1
+            );
+            if (isPreview) return desktop[0];
+            switch (viewport) {
+              case 'desktop':
+                return desktop[0];
+              case 'tablet':
+                return tablet[0];
+              case 'mobile':
+                return mobile[0];
+              default:
+                return all[0];
             }
           }
         }
@@ -1584,19 +1631,44 @@ export class NodesContext {
       }
 
       switch (node.nodeType) {
-        case `TagElement`:
-        case `BgPane`:
-        case `Markdown`: {
+        case 'GridLayoutNode':
+        case 'TagElement':
+        case 'BgPane':
+        case 'Markdown': {
+          const nodesToDirty: BaseNode[] = [];
           const paneNodeId = this.getClosestNodeTypeFromId(node.id, 'Pane');
-          const paneNode = cloneDeep(
-            this.allNodes.get().get(paneNodeId)
-          ) as PaneNode;
-          this.modifyNodes([{ ...paneNode, isChanged: true }], {
-            notify: false,
-          });
+
+          if (paneNodeId) {
+            const paneNode = this.allNodes.get().get(paneNodeId);
+            if (paneNode && !paneNode.isChanged) {
+              nodesToDirty.push({ ...paneNode, isChanged: true });
+            }
+          }
+
+          if (node.parentId) {
+            const parentNode = this.allNodes.get().get(node.parentId);
+            if (
+              parentNode &&
+              parentNode.nodeType === 'GridLayoutNode' &&
+              !parentNode.isChanged
+            ) {
+              if (!nodesToDirty.some((n) => n.id === parentNode.id)) {
+                nodesToDirty.push({ ...parentNode, isChanged: true });
+              }
+            }
+          }
+
+          if (nodesToDirty.length > 0) {
+            this.modifyNodes(nodesToDirty, {
+              notify: false,
+              recordHistory: false,
+            });
+          }
+
           this.notifyNode(ROOT_NODE_NAME);
           break;
         }
+
         case `Menu`:
         case `Pane`:
         case `StoryFragment`:
@@ -1970,7 +2042,9 @@ export class NodesContext {
         });
         break;
     }
-    this.toolModeValStore.set({ value: 'styles' });
+    if ([`p`, `h2`, `h3`, `h4`, `li`].includes(tagName))
+      this.toolModeValStore.set({ value: 'text' });
+    else this.toolModeValStore.set({ value: 'styles' });
     this.notifyNode('root');
   }
 
@@ -2024,6 +2098,7 @@ export class NodesContext {
 
     let autoCreatedMarkdownNode: MarkdownPaneFragmentNode | null = null;
 
+    console.log(`--- [TRAP - TEMPLATE BEFORE] ---`, cloneDeep(node));
     // 3. HANDLE EMPTY PANE BY AUTO-CREATING A MARKDOWN NODE
     if (targetNode.nodeType === 'Pane') {
       // Create a minimal markdown node to act as the container
@@ -2101,6 +2176,8 @@ export class NodesContext {
       );
     }
 
+    console.log(`--- [TRAP - FLATTENED AFTER] ---`, cloneDeep(flattenedNodes));
+
     // 5. PERFORM REMAINING STATE MUTATIONS
     if (originalPaneNode) {
       this.modifyNodes([{ ...originalPaneNode, isChanged: true }], {

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 {
@@ -481,7 +504,7 @@ export type LoadData = {
   paneNodes?: PaneNode[];
   tractstackNodes?: TractStackNode[];
   childNodes?: (BaseNode | FlatNode)[];
-  paneFragmentNodes?: PaneFragmentNode[];
+  paneFragmentNodes?: (PaneFragmentNode | GridLayoutNode)[];
   flatNodes?: FlatNode[];
   impressionNodes?: ImpressionNode[];
   beliefNodes?: BeliefNode[];
@@ -511,6 +534,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/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

@@ -60,6 +60,8 @@ let BUTTON_CLASS_LOOKUP: Map<string, { key: string; value: string }> | null =
   null;
 
 const ALLOWED_TAGS = new Set([
+  'ul',
+  'li',
   'h2',
   'h3',
   'h4',
@@ -69,6 +71,7 @@ const ALLOWED_TAGS = new Set([
   'em',
   'strong',
   'button',
+  'a',
 ]);
 
 function buildKeyNormalizationLookup(): Map<string, string> {
@@ -309,7 +312,10 @@ function walkDom(
   if (tagName === 'button') {
     let finalParentId = parentId;
 
-    if (parentId === markdownId) {
+    const parentDomEl = el.parentNode as Element;
+    const parentTagName = parentDomEl?.tagName?.toLowerCase();
+
+    if (parentId === markdownId || parentTagName === 'li') {
       const pNodeId = ulid();
       const pNode: TemplateNode = {
         id: pNodeId,
@@ -330,7 +336,7 @@ function walkDom(
       id: ulid(),
       nodeType: 'TagElement',
       parentId: finalParentId,
-      tagName: 'a', // Buttons are converted to anchor tags for our system
+      tagName: 'a',
       href: '#',
       buttonPayload: {
         ...buttonPayload,

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

@@ -14,13 +14,19 @@ import {
   TemplateYoutubeNode,
 } from './TemplateNodes';
 import { getCtx, NodesContext } from '@/stores/nodes';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { PatchOp } from '@/stores/nodesHistory';
 import { cloneDeep } from '@/utils/helpers';
+import { isPaneNode } from './typeGuards';
 import type {
   BaseNode,
   FlatNode,
   StoryFragmentNode,
   TemplateNode,
   ToolAddMode,
+  MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  PaneNode,
 } from '@/types/compositorTypes';
 import type { NodeTagProps } from '@/types/nodeProps';
 
@@ -512,3 +518,226 @@ export function extractClassesFromNodes(dirtyNodes: BaseNode[]): string[] {
 
   return Array.from(uniqueClasses);
 }
+
+export function revertFromGrid(gridLayoutId: string) {
+  const ctx = getCtx();
+  const originalAllNodes = new Map(ctx.allNodes.get());
+  const originalParentNodes = new Map(ctx.parentNodes.get());
+
+  const gridLayoutNode = originalAllNodes.get(gridLayoutId) as GridLayoutNode;
+  if (!gridLayoutNode || !gridLayoutNode.parentId) return;
+
+  const paneNode = originalAllNodes.get(gridLayoutNode.parentId) as PaneNode;
+  if (!paneNode || !isPaneNode(paneNode)) return;
+
+  const childIds = originalParentNodes.get(gridLayoutId) || [];
+
+  const redoLogic = () => {
+    const newAllNodes = new Map(originalAllNodes);
+    const newParentNodes = new Map(originalParentNodes);
+
+    if (childIds.length === 0) {
+      const paneChildren = [...(newParentNodes.get(paneNode.id) || [])];
+      const gridIndex = paneChildren.indexOf(gridLayoutId);
+      if (gridIndex > -1) {
+        paneChildren.splice(gridIndex, 1);
+      }
+      newParentNodes.set(paneNode.id, paneChildren);
+      newAllNodes.delete(gridLayoutId);
+      newParentNodes.delete(gridLayoutId);
+    } else {
+      const markdownNodeToKeepId = childIds[0];
+      const markdownNodeToKeep = cloneDeep(
+        newAllNodes.get(markdownNodeToKeepId)
+      ) as MarkdownPaneFragmentNode;
+
+      markdownNodeToKeep.parentId = paneNode.id;
+      markdownNodeToKeep.parentClasses = gridLayoutNode.parentClasses || [];
+      markdownNodeToKeep.defaultClasses = gridLayoutNode.defaultClasses || {};
+      markdownNodeToKeep.isChanged = true;
+      newAllNodes.set(markdownNodeToKeepId, markdownNodeToKeep);
+
+      const paneChildren = [...(newParentNodes.get(paneNode.id) || [])];
+      const gridIndex = paneChildren.indexOf(gridLayoutId);
+      if (gridIndex > -1) {
+        paneChildren.splice(gridIndex, 1, markdownNodeToKeepId);
+      }
+      newParentNodes.set(paneNode.id, paneChildren);
+
+      const nodesToDeleteIds = [gridLayoutId, ...childIds.slice(1)];
+      nodesToDeleteIds.forEach((id) => {
+        newAllNodes.delete(id);
+        newParentNodes.delete(id);
+      });
+    }
+
+    const updatedPaneNode = cloneDeep(paneNode);
+    updatedPaneNode.isChanged = true;
+    newAllNodes.set(paneNode.id, updatedPaneNode);
+
+    ctx.allNodes.set(newAllNodes);
+    ctx.parentNodes.set(newParentNodes);
+    ctx.notifyNode('root');
+    settingsPanelStore.set(null);
+  };
+
+  const undoLogic = () => {
+    ctx.allNodes.set(originalAllNodes);
+    ctx.parentNodes.set(originalParentNodes);
+    ctx.notifyNode('root');
+  };
+
+  ctx.history.addPatch({
+    op: PatchOp.REPLACE,
+    undo: undoLogic,
+    redo: redoLogic,
+  });
+
+  redoLogic();
+}
+
+export function convertToGrid(markdownNodeId: string) {
+  const ctx = getCtx();
+
+  const originalAllNodes = new Map(ctx.allNodes.get());
+  const originalParentNodes = new Map(ctx.parentNodes.get());
+
+  const markdownNode = originalAllNodes.get(
+    markdownNodeId
+  ) as MarkdownPaneFragmentNode;
+  if (!markdownNode || !markdownNode.parentId) return;
+
+  const paneNode = originalAllNodes.get(markdownNode.parentId) as PaneNode & {
+    markdownId?: string;
+    markdownBody?: string;
+  };
+  if (!paneNode || !isPaneNode(paneNode)) return;
+
+  const gridLayoutId = ulid();
+
+  const redoLogic = () => {
+    const newAllNodes = new Map(originalAllNodes);
+    const newParentNodes = new Map(originalParentNodes);
+
+    const newGridLayoutNode: GridLayoutNode = {
+      id: gridLayoutId,
+      parentId: paneNode.id,
+      nodeType: 'GridLayoutNode',
+      type: 'grid-layout',
+      parentClasses: markdownNode.parentClasses || [],
+      defaultClasses: markdownNode.defaultClasses || {},
+      gridColumns: { mobile: 1, tablet: 2, desktop: 2 },
+      isChanged: true,
+    };
+
+    const updatedMarkdownNode = cloneDeep(markdownNode);
+    updatedMarkdownNode.parentId = gridLayoutId;
+    updatedMarkdownNode.parentClasses = [];
+    updatedMarkdownNode.parentCss = [];
+    updatedMarkdownNode.defaultClasses = {};
+    updatedMarkdownNode.isChanged = true;
+
+    // Create a new, truly empty MarkdownNode for the second column.
+    const newColumnNodeId = ulid();
+    const newColumnNode: MarkdownPaneFragmentNode = {
+      id: newColumnNodeId,
+      parentId: gridLayoutId,
+      nodeType: 'Markdown',
+      type: 'markdown',
+      markdownId: ulid(),
+      defaultClasses: {},
+      parentClasses: [],
+      isChanged: true,
+    };
+
+    newAllNodes.set(gridLayoutId, newGridLayoutNode);
+    newAllNodes.set(markdownNodeId, updatedMarkdownNode);
+    newAllNodes.set(paneNode.id, { ...cloneDeep(paneNode), isChanged: true });
+    newAllNodes.set(newColumnNodeId, newColumnNode);
+
+    const paneChildren = [...(newParentNodes.get(paneNode.id) || [])];
+    const mdIndex = paneChildren.indexOf(markdownNodeId);
+    if (mdIndex > -1) {
+      paneChildren.splice(mdIndex, 1, gridLayoutId);
+    }
+    newParentNodes.set(paneNode.id, paneChildren);
+    newParentNodes.set(gridLayoutId, [markdownNodeId, newColumnNodeId]);
+    newParentNodes.set(newColumnNodeId, []); // Set children to an empty array
+
+    ctx.allNodes.set(newAllNodes);
+    ctx.parentNodes.set(newParentNodes);
+    ctx.notifyNode('root');
+    settingsPanelStore.set(null);
+  };
+
+  const undoLogic = () => {
+    ctx.allNodes.set(originalAllNodes);
+    ctx.parentNodes.set(originalParentNodes);
+    ctx.notifyNode('root');
+  };
+
+  ctx.history.addPatch({
+    op: PatchOp.REPLACE,
+    undo: undoLogic,
+    redo: redoLogic,
+  });
+
+  redoLogic();
+}
+
+export function addColumn(gridLayoutId: string) {
+  const ctx = getCtx();
+  const originalAllNodes = new Map(ctx.allNodes.get());
+  const originalParentNodes = new Map(ctx.parentNodes.get());
+
+  const gridLayoutNode = originalAllNodes.get(gridLayoutId);
+  if (!gridLayoutNode) return;
+
+  const newMarkdownNodeId = ulid();
+
+  const redoLogic = () => {
+    const newAllNodes = new Map(originalAllNodes);
+    const newParentNodes = new Map(originalParentNodes);
+
+    const newColumnNode: MarkdownPaneFragmentNode = {
+      id: newMarkdownNodeId,
+      parentId: gridLayoutId,
+      nodeType: 'Markdown',
+      type: 'markdown',
+      markdownId: ulid(),
+      defaultClasses: {},
+      parentClasses: [],
+      gridClasses: { mobile: {}, tablet: {}, desktop: {} },
+      isChanged: true,
+    };
+
+    newAllNodes.set(newMarkdownNodeId, newColumnNode);
+
+    const gridChildren = [...(newParentNodes.get(gridLayoutId) || [])];
+    gridChildren.push(newMarkdownNodeId);
+    newParentNodes.set(gridLayoutId, gridChildren);
+    newParentNodes.set(newMarkdownNodeId, []); // Set children to an empty array
+
+    const updatedGridLayoutNode = cloneDeep(gridLayoutNode);
+    updatedGridLayoutNode.isChanged = true;
+    newAllNodes.set(gridLayoutId, updatedGridLayoutNode);
+
+    ctx.allNodes.set(newAllNodes);
+    ctx.parentNodes.set(newParentNodes);
+    ctx.notifyNode('root');
+  };
+
+  const undoLogic = () => {
+    ctx.allNodes.set(originalAllNodes);
+    ctx.parentNodes.set(originalParentNodes);
+    ctx.notifyNode('root');
+  };
+
+  ctx.history.addPatch({
+    op: PatchOp.ADD,
+    undo: undoLogic,
+    redo: redoLogic,
+  });
+
+  redoLogic();
+}

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

@@ -1,5 +1,9 @@
 import { tailwindClasses, tailwindCoreLayoutClasses } from './tailwindClasses';
-import type { TupleValue, ViewportKey } from '@/types/compositorTypes';
+import type {
+  TupleValue,
+  ViewportKey,
+  DefaultClassValue,
+} from '@/types/compositorTypes';
 
 const tailwindModifier = ['', 'md:', 'xl:'];
 const tailwindCoreModifier = ['xs:', 'md:', 'xl:'];
@@ -194,3 +198,38 @@ function getTailwindClassInfo(selector: string): {
     useKeyAsClass: classInfo.useKeyAsClass,
   };
 }
+
+export function processGridClassesToString(
+  classes?: DefaultClassValue
+): string {
+  if (!classes) {
+    return '';
+  }
+
+  const finalClasses: string[] = [];
+  const mobileStyles = classes.mobile || {};
+  const tabletStyles = classes.tablet || {};
+  const desktopStyles = classes.desktop || {};
+
+  for (const [selector, value] of Object.entries(mobileStyles)) {
+    if (value) {
+      finalClasses.push(reduceClassName(selector, value, 0));
+    }
+  }
+
+  for (const [selector, value] of Object.entries(tabletStyles)) {
+    if (value && mobileStyles[selector] !== value) {
+      finalClasses.push(reduceClassName(selector, value, 1));
+    }
+  }
+
+  for (const [selector, value] of Object.entries(desktopStyles)) {
+    const tabletValue = tabletStyles[selector];
+    const mobileValue = mobileStyles[selector];
+    if (value && tabletValue !== value && mobileValue !== value) {
+      finalClasses.push(reduceClassName(selector, value, 2));
+    }
+  }
+
+  return finalClasses.filter(Boolean).join(' ');
+}