astro-tractstack 2.2.1 → 2.2.3

package/templates/src/stores/nodesHistory.ts

@@ -1,5 +1,8 @@
 import { atom, type WritableAtom } from 'nanostores';
-import type { NodesContext } from '@/stores/nodes.ts';
+import type { NodesContext } from '@/stores/nodes';
+
+export const VERBOSE = false;
+const COALESCE_WINDOW = 16000;
 
 export enum PatchOp {
   ADD,
@@ -19,8 +22,7 @@ export class NodesHistory {
 
   protected _ctx: NodesContext;
   protected _maxBuffer: number;
-  private _debounceTimer: ReturnType<typeof setTimeout> | null = null;
-  private _pendingPatch: HistoryPatch | null = null;
+  public lastPatchTime: number = 0;
 
   constructor(ctx: NodesContext, maxBuffer: number) {
     this._ctx = ctx;
@@ -38,30 +40,62 @@ export class NodesHistory {
     return this.history.get().length > 0 && this.headIndex.get() > 0;
   }
 
-  addPatch(patch: HistoryPatch) {
-    this._pendingPatch = patch;
+  addPatch(patch: HistoryPatch, options?: { merge?: boolean }) {
+    const now = Date.now();
+    const timeDelta = now - this.lastPatchTime;
+    const shouldMerge =
+      options?.merge !== false &&
+      timeDelta < COALESCE_WINDOW &&
+      this.headIndex.get() === 0 && // Only merge if we are at the tip of history
+      this.history.get().length > 0;
 
-    if (this._debounceTimer) {
-      clearTimeout(this._debounceTimer);
-    }
+    if (shouldMerge) {
+      if (VERBOSE) {
+        console.log(
+          `[History] Merging patch (Delta: ${timeDelta}ms < ${COALESCE_WINDOW}ms)`
+        );
+      }
 
-    this._debounceTimer = setTimeout(() => {
-      if (this._pendingPatch) {
-        // Original addPatch logic
-        while (this.headIndex.get() !== 0) {
-          this.history.get().shift();
-          this.headIndex.set(this.headIndex.get() - 1);
-        }
-
-        this.history.get().unshift(this._pendingPatch);
-        if (this.history.get().length > this._maxBuffer) {
-          this.history.get().pop();
-        }
-        this.history.set([...this.history.get()]);
-
-        this._pendingPatch = null;
+      const currentHistory = [...this.history.get()];
+      const previousPatch = currentHistory[0];
+
+      // Create a composite patch that executes both actions
+      const mergedPatch: HistoryPatch = {
+        op: PatchOp.REPLACE, // Merged operations are generally treated as complex replacements
+        undo: (ctx) => {
+          // Reverse order: Undo the new action, then undo the old action
+          patch.undo(ctx);
+          previousPatch.undo(ctx);
+        },
+        redo: (ctx) => {
+          // Forward order: Redo the old action, then redo the new action
+          previousPatch.redo(ctx);
+          patch.redo(ctx);
+        },
+      };
+
+      currentHistory[0] = mergedPatch;
+      this.history.set(currentHistory);
+      // We do NOT update lastPatchTime on merge. This keeps the window anchored to the start of the "thought".
+    } else {
+      if (VERBOSE) {
+        console.log(`[History] Pushing new patch (Delta: ${timeDelta}ms)`);
       }
-    }, 300);
+
+      // If we are not at the tip (we undid something), verify we clear the future
+      while (this.headIndex.get() !== 0) {
+        this.history.get().shift();
+        this.headIndex.set(this.headIndex.get() - 1);
+      }
+
+      const newHistory = [patch, ...this.history.get()];
+      if (newHistory.length > this._maxBuffer) {
+        newHistory.pop();
+      }
+
+      this.history.set(newHistory);
+      this.lastPatchTime = now;
+    }
   }
 
   undo() {
@@ -81,5 +115,6 @@ export class NodesHistory {
   clearHistory() {
     this.history.set([]);
     this.headIndex.set(0);
+    this.lastPatchTime = 0;
   }
 }

package/templates/src/utils/api/setupHelpers.ts

@@ -164,7 +164,7 @@ function forceMarkAllDirty(ctx: any) {
   if (VERBOSE)
     console.log('[forceMarkAllDirty] Flagging all nodes for SaveModal...');
   const allNodes = Array.from(ctx.allNodes.get().values());
-  const dirtyUpdates = allNodes.map((n: any) => ({ ...n, isChanged: true }));
+  const dirtyUpdates = allNodes.map((n: any) => ({ ...n }));
   ctx.modifyNodes(dirtyUpdates);
 }
 

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

@@ -747,3 +747,60 @@ export const parseAiPane = (
   // Fallback for invalid input
   throw new Error('Invalid input for parseAiPane');
 };
+
+/**
+ * Generates a default design shell when AI styling is disabled.
+ * Provides a clean, white-label structure compatible with the parser.
+ */
+export function createDefaultShell(layout: 'standard' | 'grid'): ShellJson {
+  const baseDefaults: LLMDefaultClasses = {
+    h2: {
+      mobile: 'text-3xl font-bold tracking-tight text-gray-900',
+      tablet: 'text-4xl',
+    },
+    h3: {
+      mobile: 'text-2xl font-bold tracking-tight text-gray-900',
+    },
+    p: {
+      mobile: 'mt-6 text-lg leading-8 text-gray-600',
+    },
+    ul: {
+      mobile: 'mt-6 list-disc list-outside ml-6 text-gray-600',
+    },
+    li: {
+      mobile: 'mb-2',
+    },
+    a: {
+      mobile: 'text-indigo-600 hover:text-indigo-500 font-semibold',
+    },
+    button: {
+      mobile:
+        'rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+    },
+  };
+
+  if (layout === 'grid') {
+    return {
+      bgColour: '#ffffff',
+      parentClasses: [
+        { mobile: 'mx-auto max-w-7xl' },
+        { mobile: 'px-6 py-24', tablet: 'px-8 py-32' },
+      ],
+      defaultClasses: baseDefaults,
+      columns: [
+        { gridClasses: { mobile: 'flex flex-col gap-y-4' } }, // Left Column
+        { gridClasses: { mobile: 'flex flex-col gap-y-4' } }, // Right Column
+      ],
+    };
+  }
+
+  // Standard Layout
+  return {
+    bgColour: '#ffffff',
+    parentClasses: [
+      { mobile: 'mx-auto max-w-3xl text-base leading-7' },
+      { mobile: 'px-6 py-24', tablet: 'px-8 py-32' },
+    ],
+    defaultClasses: baseDefaults,
+  };
+}

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

@@ -500,8 +500,7 @@ function convertLivePaneToStoragePane(
           : [],
     };
   } else if (gridLayoutNode) {
-    const { id, parentId, isChanged, parentCss, gridCss, ...restOfGrid } =
-      gridLayoutNode;
+    const { id, parentId, parentCss, gridCss, ...restOfGrid } = gridLayoutNode;
     storageGridLayout = {
       ...restOfGrid,
       nodes: ctx
@@ -515,7 +514,6 @@ function convertLivePaneToStoragePane(
           const {
             id,
             parentId,
-            isChanged,
             markdownId,
             parentCss,
             gridCss,

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

@@ -562,10 +562,13 @@ export async function regenerateCreativePane(
     } else if (updates.image === null) {
       delete targetNode.attrs['data-image'];
     }
-
     if (updates.src && updates.tagName === 'img') {
       targetNode.attrs.src = updates.src;
-      if (updates.srcSet) targetNode.attrs.srcset = updates.srcSet;
+      if (updates.srcSet) {
+        targetNode.attrs.srcset = updates.srcSet;
+      } else {
+        delete targetNode.attrs.srcset;
+      }
     }
     if (updates.alt) {
       targetNode.attrs.alt = updates.alt;
@@ -702,3 +705,107 @@ export function extractFileIdsFromAst(payload: CreativePanePayload): string[] {
   }
   return results;
 }
+
+/**
+ * Simple Markdown to HTML converter.
+ * Handles:
+ * - Headers (## through ######)
+ * - Unordered lists (- item)
+ * - Bold (**text**)
+ * - Italic (*text*)
+ * - Links ([text](url))
+ * - Paragraphs (everything else)
+ */
+export function markdownToHtml(markdown: string): string {
+  const lines = markdown.split('\n');
+  let html = '';
+  let inList = false;
+
+  const parseInline = (text: string): string => {
+    return (
+      text
+        // Bold: **text**
+        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+        // Italic: *text*
+        .replace(/\*(.*?)\*/g, '<em>$1</em>')
+        // Link: [text](url)
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>')
+    );
+  };
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+
+    // Skip empty lines, but close list if open
+    if (!trimmed) {
+      if (inList) {
+        html += '</ul>';
+        inList = false;
+      }
+      continue;
+    }
+
+    // Headers (## to ######) - Note: Ignoring # (h1) as per standard rules
+    const headerMatch = trimmed.match(/^(#{2,6})\s+(.*)$/);
+    if (headerMatch) {
+      if (inList) {
+        html += '</ul>';
+        inList = false;
+      }
+      const level = headerMatch[1].length;
+      const content = parseInline(headerMatch[2]);
+      html += `<h${level}>${content}</h${level}>`;
+      continue;
+    }
+
+    // Unordered Lists (- item)
+    const listMatch = trimmed.match(/^-\s+(.*)$/);
+    if (listMatch) {
+      if (!inList) {
+        html += '<ul>';
+        inList = true;
+      }
+      const content = parseInline(listMatch[1]);
+      html += `<li>${content}</li>`;
+      continue;
+    }
+
+    // Paragraphs (default block)
+    if (inList) {
+      html += '</ul>';
+      inList = false;
+    }
+    html += `<p>${parseInline(trimmed)}</p>`;
+  }
+
+  // Close any remaining open list
+  if (inList) {
+    html += '</ul>';
+  }
+
+  return html;
+}
+
+/**
+ * Sanitizes HTML for AI processing or other non-editor contexts.
+ * Strips editor-specific guards, metadata, and heavy base64 data.
+ */
+export function cleanHtml(html: string): string {
+  if (!html) return '';
+
+  return (
+    html
+      // 1. Revert Base64 images to static placeholder to save tokens and avoid confusion
+      .replace(/src="data:[^"]*"/g, 'src="/static.jpg"')
+      // 2. Remove Content Editable attribute
+      .replace(/contenteditable="true"/g, '')
+      .replace(/contenteditable="false"/g, '')
+      // 3. Remove Editor Interaction Guards
+      .replace(/onclick="return false;"/g, '')
+      .replace(/style="pointer-events: none;"/g, '')
+      // 4. Remove Internal Upload Metadata
+      .replace(/data-file-id="[^"]*"/g, '')
+      // 5. Clean up resulting double spaces
+      .replace(/\s{2,}/g, ' ')
+  );
+}

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

@@ -304,7 +304,6 @@ export function createEmptyStorykeep(id: string) {
     nodeType: 'StoryFragment',
     tractStackId: 'temp',
     parentId: null,
-    isChanged: false,
     paneIds: [],
     changed: undefined,
     slug: 'temp',
@@ -549,7 +548,6 @@ export function revertFromGrid(gridLayoutId: string) {
       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) || [])];
@@ -567,7 +565,6 @@ export function revertFromGrid(gridLayoutId: string) {
     }
 
     const updatedPaneNode = cloneDeep(paneNode);
-    updatedPaneNode.isChanged = true;
     newAllNodes.set(paneNode.id, updatedPaneNode);
 
     ctx.allNodes.set(newAllNodes);
@@ -622,7 +619,6 @@ export function convertToGrid(markdownNodeId: string) {
       parentClasses: markdownNode.parentClasses || [],
       defaultClasses: markdownNode.defaultClasses || {},
       gridColumns: { mobile: 1, tablet: 2, desktop: 2 },
-      isChanged: true,
     };
 
     const updatedMarkdownNode = cloneDeep(markdownNode);
@@ -630,7 +626,6 @@ export function convertToGrid(markdownNodeId: string) {
     updatedMarkdownNode.parentClasses = [];
     updatedMarkdownNode.parentCss = [];
     updatedMarkdownNode.defaultClasses = {};
-    updatedMarkdownNode.isChanged = true;
 
     // Create a new, truly empty MarkdownNode for the second column.
     const newColumnNodeId = ulid();
@@ -642,12 +637,11 @@ export function convertToGrid(markdownNodeId: string) {
       markdownId: ulid(),
       defaultClasses: {},
       parentClasses: [],
-      isChanged: true,
     };
 
     newAllNodes.set(gridLayoutId, newGridLayoutNode);
     newAllNodes.set(markdownNodeId, updatedMarkdownNode);
-    newAllNodes.set(paneNode.id, { ...cloneDeep(paneNode), isChanged: true });
+    newAllNodes.set(paneNode.id, { ...cloneDeep(paneNode) });
     newAllNodes.set(newColumnNodeId, newColumnNode);
 
     const paneChildren = [...(newParentNodes.get(paneNode.id) || [])];
@@ -703,7 +697,6 @@ export function addColumn(gridLayoutId: string) {
       defaultClasses: {},
       parentClasses: [],
       gridClasses: { mobile: {}, tablet: {}, desktop: {} },
-      isChanged: true,
     };
 
     newAllNodes.set(newMarkdownNodeId, newColumnNode);
@@ -714,7 +707,6 @@ export function addColumn(gridLayoutId: string) {
     newParentNodes.set(newMarkdownNodeId, []); // Set children to an empty array
 
     const updatedGridLayoutNode = cloneDeep(gridLayoutNode);
-    updatedGridLayoutNode.isChanged = true;
     newAllNodes.set(gridLayoutId, updatedGridLayoutNode);
 
     ctx.allNodes.set(newAllNodes);

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

@@ -211,7 +211,6 @@ export async function executeSavePipeline(
         updatedNode.fileId = result.fileId;
         updatedNode.src = result.src;
         if (result.srcSet) updatedNode.srcSet = result.srcSet;
-        updatedNode.isChanged = true;
         ctx.modifyNodes([updatedNode]);
 
         const localRef = fileNode as PendingFileNode;
@@ -286,9 +285,7 @@ export async function executeSavePipeline(
           }
         );
 
-        ctx.modifyNodes([
-          { ...pane, htmlAst: cleanAst, isChanged: true } as PaneNode,
-        ]);
+        ctx.modifyNodes([{ ...pane, htmlAst: cleanAst } as PaneNode]);
         logDebug(`Creative Pane ${pane.id} assets processed and node updated.`);
       } catch (err) {
         console.error('Creative Pane Asset Upload Error:', err);