astro-tractstack 2.0.18 → 2.0.20

package/templates/src/stores/nodes.ts

@@ -38,6 +38,7 @@ import type {
   PaneNode,
   StoryFragmentNode,
   Tag,
+  TemplateGridLayout,
   TemplateMarkdown,
   TemplateNode,
   TemplatePane,
@@ -102,7 +103,6 @@ export class NodesContext {
   toolAddModeStore = map<{ value: ToolAddMode }>({
     value: 'p',
   });
-  showGuids = atom<boolean>(false);
 
   /**
    * Sets an edit lock on a specific node to prevent re-renders during editing
@@ -1445,124 +1445,126 @@ export class NodesContext {
         }
         break;
 
-      case 'TagElement':
-        {
-          const getButtonClasses = (node: FlatNode) => {
-            return {
-              mobile: strippedStyles(node.buttonPayload?.buttonClasses || {}),
-              tablet: {},
-              desktop: {},
-            };
+      case 'TagElement': {
+        const getButtonClasses = (node: FlatNode) => {
+          return {
+            mobile: strippedStyles(node.buttonPayload?.buttonClasses || {}),
+            tablet: {},
+            desktop: {},
           };
+        };
 
-          const getHoverClasses = (node: FlatNode) => {
-            return {
-              mobile: strippedStyles(
-                node.buttonPayload?.buttonHoverClasses || {}
-              ),
-              tablet: {},
-              desktop: {},
-            };
+        const getHoverClasses = (node: FlatNode) => {
+          return {
+            mobile: strippedStyles(
+              node.buttonPayload?.buttonHoverClasses || {}
+            ),
+            tablet: {},
+            desktop: {},
           };
+        };
 
-          if (hasButtonPayload(node)) {
-            const [classesPayload] = processClassesForViewports(
-              getButtonClasses(node),
-              {},
-              1
-            );
-            const [classesHoverPayload] = processClassesForViewports(
-              getHoverClasses(node),
-              {},
-              1
-            );
-            return `${classesPayload?.length ? classesPayload[0] : ``} ${
-              classesHoverPayload?.length
-                ? addHoverPrefix(classesHoverPayload[0])
-                : ``
-            }`;
-          }
+        if (hasButtonPayload(node)) {
+          const [classesPayload] = processClassesForViewports(
+            getButtonClasses(node),
+            {},
+            1
+          );
+          const [classesHoverPayload] = processClassesForViewports(
+            getHoverClasses(node),
+            {},
+            1
+          );
+          return `${classesPayload?.length ? classesPayload[0] : ``} ${
+            classesHoverPayload?.length
+              ? addHoverPrefix(classesHoverPayload[0])
+              : ``
+          }`;
+        }
 
-          if ('tagName' in node && node.tagName === 'span') {
-            const spanNode = node as FlatNode;
-            const [all, mobile, tablet, desktop] = processClassesForViewports(
-              { mobile: {}, tablet: {}, desktop: {} },
-              spanNode.overrideClasses || {},
-              1
-            );
-            const outlineClass =
-              this.toolModeValStore.get().value === 'styles'
-                ? ' outline outline-1 outline-dotted outline-gray-400/60'
-                : '';
+        if ('tagName' in node && node.tagName === 'span') {
+          const spanNode = node as FlatNode;
+          const [all, mobile, tablet, desktop] = processClassesForViewports(
+            { mobile: {}, tablet: {}, desktop: {} },
+            spanNode.overrideClasses || {},
+            1
+          );
+          const outlineClass =
+            this.toolModeValStore.get().value === 'styles'
+              ? ' outline outline-1 outline-dotted outline-gray-400/60'
+              : '';
 
-            const getClassString = (classes: string[]): string =>
-              classes && classes.length > 0 ? classes[0] : '';
+          const getClassString = (classes: string[]): string =>
+            classes && classes.length > 0 ? classes[0] : '';
 
-            if (isPreview) return getClassString(desktop) + outlineClass;
-            switch (viewport) {
-              case 'desktop':
-                return getClassString(desktop) + outlineClass;
-              case 'tablet':
-                return getClassString(tablet) + outlineClass;
-              case 'mobile':
-                return getClassString(mobile) + outlineClass;
-              default:
-                return getClassString(all) + outlineClass;
-            }
+          if (isPreview) return getClassString(desktop) + outlineClass;
+          switch (viewport) {
+            case 'desktop':
+              return getClassString(desktop) + outlineClass;
+            case 'tablet':
+              return getClassString(tablet) + outlineClass;
+            case 'mobile':
+              return getClassString(mobile) + outlineClass;
+            default:
+              return getClassString(all) + outlineClass;
           }
+        }
 
-          // Begin Default Class Lookup Logic
-          const markdownParentId = this.getClosestNodeTypeFromId(
-            nodeId,
-            'Markdown'
-          );
-          if (!markdownParentId) break;
+        // Begin Default Class Lookup Logic
+        const markdownParentId = this.getClosestNodeTypeFromId(
+          nodeId,
+          'Markdown'
+        );
+        if (!markdownParentId) break;
 
-          const markdownParentNode = this.allNodes
-            .get()
-            .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];
-            }
+        const markdownParentNode = this.allNodes
+          .get()
+          .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];
-            }
-          }
+        const baseStyles =
+          styles && styles.mobile
+            ? styles
+            : { mobile: {}, tablet: {}, desktop: {} };
+
+        const [all, mobile, tablet, desktop] = processClassesForViewports(
+          baseStyles,
+          (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];
         }
-        break;
+      }
 
       case 'StoryFragment': {
         const storyFragment = node as StoryFragmentNode;
@@ -1775,39 +1777,20 @@ export class NodesContext {
     duplicatedPane.isChanged = true;
 
     // Track all nodes that need to be added
-    let allNodes: BaseNode[] = [];
+    // Call the new helper to process markdown, gridLayout, and bgPane
+    const allNodes: BaseNode[] = this._processPaneTemplate(
+      duplicatedPane,
+      ownerId
+    );
 
-    // must generate nodes from markdown
+    if (duplicatedPane.bgPane) {
+      delete duplicatedPane.bgPane;
+    }
     if (duplicatedPane.markdown) {
-      duplicatedPane.markdown = cloneDeep(pane.markdown) as TemplateMarkdown;
-      duplicatedPane.markdown.id = pane?.markdown?.id || ulid();
-      duplicatedPane.markdown.markdownId = pane?.markdown?.markdownId || ulid();
-      duplicatedPane.markdown.parentId = ownerId;
-
-      let markdownNodes: TemplateNode[] = [];
-      if (duplicatedPane.markdown.markdownBody) {
-        const markdownGen = new MarkdownGenerator(this);
-        markdownNodes = markdownGen.markdownToFlatNodes(
-          duplicatedPane.markdown.markdownBody,
-          duplicatedPane.markdown.id
-        ) as TemplateNode[];
-        allNodes = [...allNodes, duplicatedPane.markdown, ...markdownNodes];
-      }
-
-      // Markdown already as nodes
-      else if (
-        typeof duplicatedPane.markdown !== `undefined` &&
-        typeof duplicatedPane.markdown.id === `string`
-      ) {
-        duplicatedPane?.markdown.nodes?.forEach((node) => {
-          const childrenNodes = this.setupTemplateNodeRecursively(
-            node,
-            duplicatedPane?.markdown?.id || ''
-          );
-          markdownNodes.push(...childrenNodes);
-        });
-        allNodes = [...allNodes, duplicatedPane.markdown, ...markdownNodes];
-      }
+      delete duplicatedPane.markdown;
+    }
+    if (duplicatedPane.gridLayout) {
+      delete duplicatedPane.gridLayout;
     }
 
     this.addNode(duplicatedPane as PaneNode);
@@ -1852,87 +1835,21 @@ export class NodesContext {
       }
     }
 
-    let allNodes: BaseNode[] = [];
-
-    if (duplicatedPane.markdown) {
-      duplicatedPane.markdown = cloneDeep(pane.markdown) as TemplateMarkdown;
-      duplicatedPane.markdown.id = pane?.markdown?.id || ulid();
-      duplicatedPane.markdown.markdownId = pane?.markdown?.markdownId || ulid();
-      duplicatedPane.markdown.parentId = duplicatedPaneId;
-
-      let markdownNodes: TemplateNode[] = [];
-      if (duplicatedPane.markdown.markdownBody) {
-        const markdownGen = new MarkdownGenerator(this);
-        markdownNodes = markdownGen.markdownToFlatNodes(
-          duplicatedPane.markdown.markdownBody,
-          duplicatedPane.markdown.id
-        ) as TemplateNode[];
-        allNodes = [...allNodes, duplicatedPane.markdown, ...markdownNodes];
-      } else if (
-        typeof duplicatedPane.markdown !== `undefined` &&
-        typeof duplicatedPane.markdown.id === `string`
-      ) {
-        // Create a map to track the original node ID to its duplicated node ID
-        const oldToNewIdMap = new Map<string, string>();
-        // First pass: Clone nodes and generate new IDs
-        const nodesClone =
-          duplicatedPane?.markdown?.nodes?.map((originalNode) => {
-            const newNode = cloneDeep(originalNode);
-            newNode.id = ulid();
-            oldToNewIdMap.set(originalNode.id, newNode.id);
-            return newNode;
-          }) || [];
-        // Second pass: Update parent IDs using the mapping
-        nodesClone.forEach((node) => {
-          // Special case for direct children of markdown
-          if (node.parentId === pane?.markdown?.id) {
-            node.parentId = duplicatedPane?.markdown?.id || '';
-          } else {
-            // For all other nodes, use the mapping to find the new parent ID
-            const newParentId = oldToNewIdMap.get(node.parentId || '');
-            if (newParentId) {
-              node.parentId = newParentId;
-            }
-          }
-          markdownNodes.push(node);
-        });
-        allNodes = [...allNodes, duplicatedPane.markdown, ...markdownNodes];
-      }
-    }
+    // Call the new helper to process markdown, gridLayout, and bgPane
+    const allNodes: BaseNode[] = this._processPaneTemplate(
+      duplicatedPane,
+      duplicatedPaneId
+    );
 
     if (duplicatedPane.bgPane) {
-      const bgPaneId = ulid();
-
-      if (duplicatedPane.bgPane.type === 'visual-break') {
-        const visualBreakPane = duplicatedPane.bgPane as VisualBreakNode;
-        const bgPaneNode: VisualBreakNode = {
-          id: bgPaneId,
-          nodeType: 'BgPane',
-          parentId: duplicatedPaneId,
-          type: 'visual-break',
-          breakDesktop: visualBreakPane.breakDesktop,
-          breakTablet: visualBreakPane.breakTablet,
-          breakMobile: visualBreakPane.breakMobile,
-        };
-        allNodes.push(bgPaneNode);
-      } else if (duplicatedPane.bgPane.type === 'artpack-image') {
-        const artpackBgPane = duplicatedPane.bgPane as ArtpackImageNode;
-        const bgPaneNode: ArtpackImageNode = {
-          id: bgPaneId,
-          nodeType: 'BgPane',
-          parentId: duplicatedPaneId,
-          type: 'artpack-image',
-          collection: artpackBgPane.collection,
-          image: artpackBgPane.image,
-          src: artpackBgPane.src,
-          srcSet: artpackBgPane.srcSet,
-          alt: artpackBgPane.alt || `Artpack image`,
-          objectFit: artpackBgPane.objectFit || 'cover',
-        };
-        allNodes.push(bgPaneNode);
-      }
       delete duplicatedPane.bgPane;
     }
+    if (duplicatedPane.markdown) {
+      delete duplicatedPane.markdown;
+    }
+    if (duplicatedPane.gridLayout) {
+      delete duplicatedPane.gridLayout;
+    }
 
     const storyFragmentNode = ownerNode as StoryFragmentNode;
     let specificIdx = -1;
@@ -1973,10 +1890,14 @@ export class NodesContext {
     this.addNodes(allNodes);
     this.notifyNode(ownerId);
 
+    // Combine the pane and all its child nodes for the history patch
+    const nodesToHistory = [duplicatedPane as BaseNode, ...allNodes];
+
     this.history.addPatch({
       op: PatchOp.ADD,
       undo: (ctx) => {
-        ctx.deleteNodes(allNodes);
+        // Delete all nodes created (pane + children)
+        ctx.deleteNodes(nodesToHistory);
 
         if (
           storyFragmentNode &&
@@ -1988,8 +1909,6 @@ export class NodesContext {
           );
           storyFragmentNode.isChanged = storyFragmentWasChanged;
         }
-
-        ctx.deleteNodes([duplicatedPane]);
       },
       redo: (ctx) => {
         if (storyFragmentNode?.nodeType === 'StoryFragment') {
@@ -2005,13 +1924,13 @@ export class NodesContext {
           storyFragmentNode.isChanged = true;
         }
 
-        ctx.addNodes([duplicatedPane]);
+        // Add all nodes back (pane + children)
+        ctx.addNodes(nodesToHistory);
         ctx.linkChildToParent(
           duplicatedPane.id,
           duplicatedPane.parentId,
           specificIdx
         );
-        ctx.addNodes(allNodes);
       },
     });
 
@@ -2098,7 +2017,7 @@ export class NodesContext {
 
     let autoCreatedMarkdownNode: MarkdownPaneFragmentNode | null = null;
 
-    console.log(`--- [TRAP - TEMPLATE BEFORE] ---`, cloneDeep(node));
+    //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
@@ -2176,7 +2095,7 @@ export class NodesContext {
       );
     }
 
-    console.log(`--- [TRAP - FLATTENED AFTER] ---`, cloneDeep(flattenedNodes));
+    //console.log(`--- [TRAP - FLATTENED AFTER] ---`, cloneDeep(flattenedNodes));
 
     // 5. PERFORM REMAINING STATE MUTATIONS
     if (originalPaneNode) {
@@ -2275,7 +2194,9 @@ export class NodesContext {
 
     node.id = ulid();
     node.parentId = parentId;
-    result.push(node);
+    const thisNode = cloneDeep(node);
+    delete thisNode.nodes;
+    result.push(thisNode);
     if ('nodes' in node && node.nodes) {
       for (let i = 0; i < node.nodes.length; ++i) {
         result = result.concat(
@@ -3224,6 +3145,160 @@ export class NodesContext {
 
     return deletedNodes;
   }
+
+  /**
+   * Processes a TemplatePane's content (markdown, grid, or bgPane) and
+   * returns a flat list of all nodes to be added to the store.
+   * This is a de-duplicated helper used by addTemplatePane and addContextTemplatePane.
+   * @param paneTemplate - The TemplatePane object to process.
+   * @param newPaneId - The ID of the parent Pane node.
+   * @returns An array of BaseNode objects to be added to allNodes.
+   */
+  private _processPaneTemplate(
+    paneTemplate: TemplatePane,
+    newPaneId: string
+  ): BaseNode[] {
+    let allNodes: BaseNode[] = [];
+
+    // 1. Process Markdown Content
+    if (paneTemplate.markdown) {
+      const duplicatedMarkdown = cloneDeep(
+        paneTemplate.markdown
+      ) as TemplateMarkdown;
+      duplicatedMarkdown.id = paneTemplate.markdown.id || ulid();
+      duplicatedMarkdown.markdownId =
+        paneTemplate.markdown.markdownId || ulid();
+      duplicatedMarkdown.parentId = newPaneId;
+
+      let markdownNodes: TemplateNode[] = [];
+      if (duplicatedMarkdown.markdownBody) {
+        const markdownGen = new MarkdownGenerator(this);
+        markdownNodes = markdownGen.markdownToFlatNodes(
+          duplicatedMarkdown.markdownBody,
+          duplicatedMarkdown.id
+        ) as TemplateNode[];
+        allNodes = [...allNodes, duplicatedMarkdown, ...markdownNodes];
+      } else if (
+        typeof duplicatedMarkdown !== `undefined` &&
+        typeof duplicatedMarkdown.id === `string`
+      ) {
+        // Create a map to track the original node ID to its duplicated node ID
+        const oldToNewIdMap = new Map<string, string>();
+        // First pass: Clone nodes and generate new IDs
+        const nodesClone =
+          duplicatedMarkdown.nodes?.map((originalNode) => {
+            const newNode = cloneDeep(originalNode);
+            newNode.id = ulid();
+            oldToNewIdMap.set(originalNode.id, newNode.id);
+            return newNode;
+          }) || [];
+        // Second pass: Update parent IDs using the mapping
+        nodesClone.forEach((node) => {
+          // Special case for direct children of markdown
+          if (node.parentId === paneTemplate.markdown?.id) {
+            node.parentId = duplicatedMarkdown.id;
+          } else {
+            // For all other nodes, use the mapping to find the new parent ID
+            const newParentId = oldToNewIdMap.get(node.parentId || '');
+            if (newParentId) {
+              node.parentId = newParentId;
+            }
+          }
+          markdownNodes.push(node);
+        });
+        allNodes = [...allNodes, duplicatedMarkdown, ...markdownNodes];
+      }
+
+      // 2. Process GridLayout Content
+    } else if (paneTemplate.gridLayout) {
+      const duplicatedGrid = cloneDeep(
+        paneTemplate.gridLayout
+      ) as TemplateGridLayout;
+      duplicatedGrid.id = paneTemplate.gridLayout.id || ulid();
+      duplicatedGrid.parentId = newPaneId;
+      allNodes.push(duplicatedGrid as GridLayoutNode);
+
+      // Map for all nodes within the grid
+      const oldToNewIdMap = new Map<string, string>();
+
+      // First pass: Collect all column nodes and their descendant nodes
+      const allOriginalNodes: TemplateNode[] = [];
+      const columnNodes: TemplateMarkdown[] = [];
+
+      duplicatedGrid.nodes?.forEach((originalColumn) => {
+        const newColumn = cloneDeep(originalColumn);
+        newColumn.id = ulid();
+        newColumn.markdownId = ulid();
+        oldToNewIdMap.set(originalColumn.id, newColumn.id);
+        columnNodes.push(newColumn);
+
+        originalColumn.nodes?.forEach((colNode) => {
+          allOriginalNodes.push(colNode);
+        });
+      });
+
+      // Second pass: Clone all descendant nodes
+      const allClonedDescendants = allOriginalNodes.map((originalNode) => {
+        const newNode = cloneDeep(originalNode);
+        newNode.id = ulid();
+        oldToNewIdMap.set(originalNode.id, newNode.id);
+        return newNode;
+      });
+
+      // Third pass: Re-map parent IDs for columns
+      columnNodes.forEach((col) => {
+        col.parentId = duplicatedGrid.id;
+        allNodes.push(col as MarkdownPaneFragmentNode);
+      });
+
+      // Fourth pass: Re-map parent IDs for all descendants
+      allClonedDescendants.forEach((node) => {
+        const newParentId = oldToNewIdMap.get(node.parentId || '');
+        if (newParentId) {
+          node.parentId = newParentId;
+        }
+        allNodes.push(node);
+      });
+    }
+
+    // 3. Process Background Pane
+    if (paneTemplate.bgPane) {
+      const bgPaneId = ulid();
+
+      if (paneTemplate.bgPane.type === 'visual-break') {
+        const visualBreakPane = paneTemplate.bgPane as VisualBreakNode;
+        const bgPaneNode: VisualBreakNode = {
+          id: bgPaneId,
+          nodeType: 'BgPane',
+          parentId: newPaneId,
+          type: 'visual-break',
+          breakDesktop: visualBreakPane.breakDesktop,
+          breakTablet: visualBreakPane.breakTablet,
+          breakMobile: visualBreakPane.breakMobile,
+        };
+        allNodes.push(bgPaneNode);
+      } else if (paneTemplate.bgPane.type === 'artpack-image') {
+        const artpackBgPane = paneTemplate.bgPane as ArtpackImageNode;
+        const bgPaneNode: ArtpackImageNode = {
+          id: bgPaneId,
+          nodeType: 'BgPane',
+          parentId: newPaneId,
+          type: 'artpack-image',
+          collection: artpackBgPane.collection,
+          image: artpackBgPane.image,
+          src: artpackBgPane.src,
+          srcSet: artpackBgPane.srcSet,
+          alt: artpackBgPane.alt || `Artpack image`,
+          objectFit: artpackBgPane.objectFit || 'cover',
+        };
+        allNodes.push(bgPaneNode);
+      }
+      // This helper only processes nodes, it doesn't modify the paneTemplate.
+      // The deletion of `duplicatedPane.bgPane` will remain in `addTemplatePane`.
+    }
+
+    return allNodes;
+  }
 }
 
 export const globalCtx: NodesContext = new NodesContext();

package/templates/src/stores/storykeep.ts

@@ -6,6 +6,7 @@ import type {
   FullContentMapItem,
   Theme,
   ArtpacksStore,
+  BrandConfig,
 } from '@/types/tractstack';
 import type { SettingsPanelSignal, ViewportKey } from '@/types/compositorTypes';
 import type {
@@ -21,9 +22,6 @@ export const fullContentMapStore = atom<FullContentMapItem[]>([]);
 export const hasArtpacksStore = map<ArtpacksStore>({});
 export const urlParamsStore = atom<Record<string, string | boolean>>({});
 export const canonicalURLStore = atom<string>('');
-export const brandColourStore = atom<string>(
-  '10120d,fcfcfc,f58333,c8df8c,293f58,a7b1b7,393d34,e3e3e3'
-);
 export const preferredThemeStore = atom<Theme>('light');
 
 export const hasAssemblyAIStore = atom<boolean>(false);
@@ -156,6 +154,8 @@ export const resetStoryKeepState = () => {
   canRedoStore.set(false);
 };
 
+export const brandConfigStore = atom<BrandConfig | null>(null);
+
 export const settingsPanelStore = atom<SettingsPanelSignal | null>(null);
 export const stylePanelTargetMemoryStore = atom<Map<string, number>>(
   new Map<string, number>()