astro-tractstack 2.1.2 → 2.2.0

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

@@ -1,3 +1,5 @@
+import type { CreativePanePayload } from '@/types/compositorTypes';
+
 export interface BackendSavePayload {
   id: string;
   title: string;
@@ -23,6 +25,7 @@ export interface OptionsPayload {
   heldBeliefs?: any;
   withheldBeliefs?: any;
   codeHookPayload?: object;
+  htmlAst?: CreativePanePayload;
 
   // Flattened nodes array - ALL child nodes in flat structure
   nodes: Array<{

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

@@ -45,6 +45,16 @@ export function transformToOptionsPayload(
       })),
     });
 
+  if (subtree.paneNode.htmlAst) {
+    return {
+      isDecorative: false,
+      heldBeliefs: subtree.paneNode.heldBeliefs ?? {},
+      withheldBeliefs: subtree.paneNode.withheldBeliefs ?? {},
+      htmlAst: subtree.paneNode.htmlAst,
+      nodes: [],
+    };
+  }
+
   const flattenedNodes = subtree.allChildNodes
     .map((node) => {
       if (VERBOSE)

package/templates/src/utils/helpers.ts

@@ -435,3 +435,104 @@ export function getSettingsPanelTitle(action: string): string {
       return 'Settings';
   }
 }
+
+export const resolveCollisions = () => {
+  const paneEls = Array.from(
+    document.querySelectorAll<HTMLElement>('.pane-overlay')
+  );
+  const nodeEls = Array.from(
+    document.querySelectorAll<HTMLElement>('.node-overlay')
+  );
+
+  // 1. Reset Panes to natural state to get accurate measurements
+  paneEls.forEach((el) => (el.style.transform = ''));
+
+  if (paneEls.length === 0) return;
+
+  const paneItems = paneEls.map((el) => ({
+    el,
+    rect: el.getBoundingClientRect(),
+    layer: parseInt(el.getAttribute('data-layer') || '1', 10),
+    x: 0,
+    y: 0,
+  }));
+
+  const nodeRects = nodeEls.map((el) => el.getBoundingClientRect());
+
+  // 2. Y-Axis Logic: Pane vs. Node Collision (Move UP)
+  paneItems.forEach((pane) => {
+    let maxOverlapY = 0;
+
+    for (const nodeRect of nodeRects) {
+      // Check AABB intersection
+      const intersects =
+        pane.rect.left < nodeRect.right &&
+        pane.rect.right > nodeRect.left &&
+        pane.rect.top < nodeRect.bottom &&
+        pane.rect.bottom > nodeRect.top;
+
+      if (intersects) {
+        // Calculate intersection height
+        const overlap =
+          Math.min(pane.rect.bottom, nodeRect.bottom) -
+          Math.max(pane.rect.top, nodeRect.top);
+        if (overlap > maxOverlapY) {
+          maxOverlapY = overlap;
+        }
+      }
+    }
+
+    if (maxOverlapY > 0) {
+      // Move up by overlap + buffer, capped at 48px
+      const shift = Math.min(maxOverlapY + 2, 48);
+      pane.y = -shift;
+    }
+  });
+
+  // 3. X-Axis Logic: Pane vs. Pane Collision (Move LEFT)
+  // Sort by physical top position to find vertical clusters
+  paneItems.sort((a, b) => a.rect.top - b.rect.top);
+
+  const clusters: (typeof paneItems)[] = [];
+  if (paneItems.length > 0) {
+    let currentCluster = [paneItems[0]];
+    for (let i = 1; i < paneItems.length; i++) {
+      const current = paneItems[i];
+      const prev = currentCluster[currentCluster.length - 1];
+
+      // Check if they occupy the same vertical space (with small buffer)
+      const isOverlappingY =
+        current.rect.top < prev.rect.bottom - 4 &&
+        current.rect.bottom > prev.rect.top + 4;
+
+      if (isOverlappingY) {
+        currentCluster.push(current);
+      } else {
+        clusters.push(currentCluster);
+        currentCluster = [current];
+      }
+    }
+    clusters.push(currentCluster);
+  }
+
+  // Apply X-shifts to clusters
+  clusters.forEach((cluster) => {
+    if (cluster.length > 1) {
+      // Sort by Layer ID (Layer 1 stays right, Layer 2 moves left, etc.)
+      cluster.sort((a, b) => a.layer - b.layer);
+
+      cluster.forEach((item, index) => {
+        if (index > 0) {
+          item.x = -(index * 32); // Shift left 32px per layer index
+        }
+      });
+    }
+  });
+
+  // 4. Apply Final Transforms
+  paneItems.forEach((item) => {
+    if (item.x !== 0 || item.y !== 0) {
+      item.el.style.transform = `translate(${item.x}px, ${item.y}px)`;
+    }
+  });
+};

package/utils/inject-files.ts

@@ -96,8 +96,16 @@ export async function injectTemplateFiles(
       dest: 'src/components/compositor/Node.tsx',
     },
     {
-      src: resolve('../templates/src/components/compositor/NodeWithGuid.tsx'),
-      dest: 'src/components/compositor/NodeWithGuid.tsx',
+      src: resolve(
+        '../templates/src/components/compositor/tools/NodeOverlay.tsx'
+      ),
+      dest: 'src/components/compositor/tools/NodeOverlay.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/compositor/tools/PaneOverlay.tsx'
+      ),
+      dest: 'src/components/compositor/tools/PaneOverlay.tsx',
     },
     {
       src: resolve(
@@ -107,15 +115,15 @@ export async function injectTemplateFiles(
     },
     {
       src: resolve(
-        '../templates/src/components/compositor/nodes/GridLayout.tsx'
+        '../templates/src/components/compositor/nodes/CreativePane.tsx'
       ),
-      dest: 'src/components/compositor/nodes/GridLayout.tsx',
+      dest: 'src/components/compositor/nodes/CreativePane.tsx',
     },
     {
       src: resolve(
-        '../templates/src/components/compositor/nodes/GridLayout_eraser.tsx'
+        '../templates/src/components/compositor/nodes/GridLayout.tsx'
       ),
-      dest: 'src/components/compositor/nodes/GridLayout_eraser.tsx',
+      dest: 'src/components/compositor/nodes/GridLayout.tsx',
     },
     {
       src: resolve(
@@ -133,24 +141,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/compositor/nodes/Pane.tsx'),
       dest: 'src/components/compositor/nodes/Pane.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/Pane_eraser.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/Pane_eraser.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/Pane_DesignLibrary.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/Pane_layout.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/Pane_layout.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/codehooks/SandboxRegisterForm.tsx'
@@ -161,12 +151,6 @@ 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'
@@ -195,24 +179,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/tagElements/NodeBasicTag.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_eraser.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/tagElements/NodeBasicTag_eraser.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/tagElements/NodeText.tsx'
@@ -231,24 +197,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/tagElements/NodeA.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/tagElements/NodeA_eraser.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/tagElements/NodeA_eraser.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/tagElements/NodeButton.tsx'
       ),
       dest: 'src/components/compositor/nodes/tagElements/NodeButton.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx'
-      ),
-      dest: 'src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/compositor/nodes/tagElements/NodeImg.tsx'
@@ -483,6 +437,30 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/steps/CopyInputStep.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/AiCreativeDesignStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/AiCreativeDesignStep.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/AiStandardDesignStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/AiStandardDesignStep.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/AiLibraryCopyStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/AiLibraryCopyStep.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/AiRefineDesignStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/AiRefineDesignStep.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/steps/DesignLibraryStep.tsx'
@@ -501,6 +479,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/steps/DirectInjectStep.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/CreativeInjectStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/CreativeInjectStep.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx'
@@ -633,10 +617,22 @@ export async function injectTemplateFiles(
       dest: 'src/utils/etl/loader.ts',
     },
     // Compositor utils
+    {
+      src: resolve('../templates/src/utils/compositor/savePipeline.ts'),
+      dest: 'src/utils/compositor/savePipeline.ts',
+    },
     {
       src: resolve('../templates/src/utils/compositor/aiPaneParser.ts'),
       dest: 'src/utils/compositor/aiPaneParser.ts',
     },
+    {
+      src: resolve('../templates/src/utils/compositor/aiGeneration.ts'),
+      dest: 'src/utils/compositor/aiGeneration.ts',
+    },
+    {
+      src: resolve('../templates/src/utils/compositor/htmlAst.ts'),
+      dest: 'src/utils/compositor/htmlAst.ts',
+    },
     {
       src: resolve(
         '../templates/src/utils/compositor/nodesMarkdownGenerator.ts'
@@ -715,6 +711,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/stores/storykeep.ts'),
       dest: 'src/stores/storykeep.ts',
     },
+    {
+      src: resolve('../templates/src/stores/previews.ts'),
+      dest: 'src/stores/previews.ts',
+    },
     {
       src: resolve('../templates/src/stores/analytics.ts'),
       dest: 'src/stores/analytics.ts',
@@ -888,6 +888,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/pages/api/tailwind.ts'),
       dest: 'src/pages/api/tailwind.ts',
     },
+    {
+      src: resolve('../templates/src/pages/api/css.ts'),
+      dest: 'src/pages/api/css.ts',
+    },
     {
       src: resolve('../templates/src/pages/api/sandbox.ts'),
       dest: 'src/pages/api/sandbox.ts',
@@ -959,6 +963,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/search/SearchResults.tsx'),
       dest: 'src/components/search/SearchResults.tsx',
     },
+    {
+      src: resolve('../templates/src/hooks/usePaneFragments.ts'),
+      dest: 'src/hooks/usePaneFragments.ts',
+    },
     {
       src: resolve('../templates/src/hooks/useSearch.ts'),
       dest: 'src/hooks/useSearch.ts',
@@ -1186,6 +1194,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/storykeep/controls/content/StoryFragmentTable.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/controls/content/PaneTable.tsx'
+      ),
+      dest: 'src/components/storykeep/controls/content/PaneTable.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/storykeep/controls/content/ContentBrowser.tsx'
@@ -1420,6 +1434,18 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/state/StylesMemory.tsx'),
       dest: 'src/components/edit/state/StylesMemory.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/panels/CreativeImagePanel.tsx'
+      ),
+      dest: 'src/components/edit/panels/CreativeImagePanel.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/edit/panels/CreativeLinkPanel.tsx'
+      ),
+      dest: 'src/components/edit/panels/CreativeLinkPanel.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/panels/StyleWordCarouselPanel.tsx'
@@ -2029,8 +2055,20 @@ export async function injectTemplateFiles(
       dest: 'public/icons/image.svg',
     },
     {
-      src: resolve('../templates/icons/text.svg'),
-      dest: 'public/icons/text.svg',
+      src: resolve('../templates/icons/link.svg'),
+      dest: 'public/icons/link.svg',
+    },
+    {
+      src: resolve('../templates/icons/p.svg'),
+      dest: 'public/icons/p.svg',
+    },
+    {
+      src: resolve('../templates/icons/li.svg'),
+      dest: 'public/icons/li.svg',
+    },
+    {
+      src: resolve('../templates/icons/code.svg'),
+      dest: 'public/icons/code.svg',
     },
 
     // Social Icons

package/templates/icons/text.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-     viewBox="0 0 100.16 122.88" width="512" height="273.292" preserveAspectRatio="xMidYMid meet">
-<style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style>
-<path class="st0" d="M89.06,18.28v101c0,1.98-1.64,3.6-3.66,3.6H74.43c-2.01,0-3.66-1.62-3.66-3.6v-101H58.24v100.99 c0,1.98-1.64,3.6-3.66,3.6H43.62c-2.01,0-3.66-1.62-3.66-3.6V79l-0.39,0C17.72,79,0,61.28,0,39.44C0,14.12,20.45,0,43.75,0H96.5 c2.01,0,3.66,1.64,3.66,3.66v10.97c0,2.01-1.65,3.66-3.66,3.66H89.06L89.06,18.28z"/>
-</svg>

package/templates/src/components/compositor/NodeWithGuid.tsx

@@ -1,69 +0,0 @@
-import { memo, type ReactElement } from 'react';
-import { getCtx, type NodesContext } from '@/stores/nodes';
-import { getType } from '@/utils/compositor/typeGuards';
-import type { BaseNode, FlatNode } from '@/types/compositorTypes';
-import type { NodeProps } from '@/types/nodeProps';
-import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
-
-const getNodeTree = (nodeId: string, ctx: NodesContext): BaseNode | null => {
-  const allNodesMap = ctx.allNodes.get();
-  const node = allNodesMap.get(nodeId);
-
-  if (!node) {
-    return null;
-  }
-
-  // Use JSON stringify/parse to get a deep clone, breaking any proxies/reactivity
-  const clonedNode = JSON.parse(JSON.stringify(node));
-
-  const childIds = ctx.getChildNodeIDs(nodeId);
-
-  if (childIds.length > 0) {
-    clonedNode.children = childIds
-      .map((childId) => getNodeTree(childId, ctx))
-      .filter((child): child is BaseNode => child !== null);
-  }
-
-  return clonedNode;
-};
-
-export type RenderableNodes = NodeProps & { element: ReactElement };
-
-export const NodeWithGuid = memo((props: RenderableNodes) => {
-  const ctx = getCtx(props);
-  const node = ctx.allNodes.get().get(props.nodeId) as FlatNode;
-
-  const handleDumpTree = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const nodeTree = getNodeTree(props.nodeId, ctx);
-    console.log(
-      `%c--- Dumping Node Tree for ${getType(node)}: ${props.nodeId} ---`,
-      'color: #0891b2; font-weight: bold;'
-    );
-    console.log(nodeTree);
-  };
-
-  return (
-    <div className="relative">
-      <div
-        className="outline-dotted outline-2 outline-cyan-600"
-        data-node-id={props.nodeId}
-        data-node-type={getType(node)}
-      >
-        <div className="flex items-center justify-between border-b border-dotted border-cyan-600 p-1 font-mono text-xs text-cyan-600">
-          <span className="truncate pr-2">
-            {getType(node)}: {props.nodeId}
-          </span>
-          <button
-            onClick={handleDumpTree}
-            title={`Log tree for ${props.nodeId}`}
-            className="flex-shrink-0 rounded p-0.5 hover:bg-cyan-100"
-          >
-            <ArrowDownTrayIcon className="h-4 w-4 text-cyan-700" />
-          </button>
-        </div>
-        <div className="p-0.5">{props.element}</div>
-      </div>
-    </div>
-  );
-});

package/templates/src/components/compositor/nodes/GridLayout_eraser.tsx

@@ -1,33 +0,0 @@
-import { getCtx } from '@/stores/nodes';
-import type { NodeProps } from '@/types/nodeProps';
-import { GridLayout } from './GridLayout';
-import type { MouseEvent } from 'react';
-
-export function GridLayoutEraser(props: NodeProps) {
-  const ctx = getCtx(props);
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-
-    const node = ctx.allNodes.get().get(props.nodeId);
-    if (!node) return;
-
-    if (
-      window.confirm(
-        'Are you sure you want to delete this grid layout and all its columns?'
-      )
-    ) {
-      ctx.deleteNode(props.nodeId);
-    }
-  };
-
-  return (
-    <div
-      className="outline-dashed outline-2 outline-red-500 hover:bg-red-500/10"
-      onClick={handleClick}
-    >
-      <GridLayout {...props} />
-    </div>
-  );
-}

package/templates/src/components/compositor/nodes/Markdown_eraser.tsx

@@ -1,56 +0,0 @@
-import { getCtx } from '@/stores/nodes';
-import { Markdown } from './Markdown';
-import { isGridLayoutNode } from '@/utils/compositor/typeGuards';
-import { revertFromGrid } from '@/utils/compositor/nodesHelper';
-import type { NodeProps } from '@/types/nodeProps';
-import type { MouseEvent } from 'react';
-
-export function MarkdownEraser(props: NodeProps) {
-  const ctx = getCtx(props);
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-
-    const node = ctx.allNodes.get().get(props.nodeId);
-    if (!node || !node.parentId) return;
-
-    const parentNode = ctx.allNodes.get().get(node.parentId);
-    if (!parentNode || !isGridLayoutNode(parentNode)) {
-      ctx.deleteNode(props.nodeId);
-      return;
-    }
-
-    const children = ctx.getChildNodeIDs(parentNode.id);
-    const columnCount = children.length;
-
-    if (columnCount === 1) {
-      if (
-        window.confirm(
-          'This is the last column. Do you want to delete it and revert to a standard pane layout?'
-        )
-      ) {
-        revertFromGrid(parentNode.id);
-      }
-    } else {
-      if (
-        window.confirm(
-          `Are you sure you want to delete this column? ${
-            columnCount - 1
-          } columns will remain.`
-        )
-      ) {
-        ctx.deleteNode(props.nodeId);
-      }
-    }
-  };
-
-  return (
-    <div
-      className="outline-dashed outline-2 outline-red-500 hover:bg-red-500/10"
-      onClick={handleClick}
-    >
-      <Markdown {...props} />
-    </div>
-  );
-}