astro-tractstack 2.0.18 → 2.0.20

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

@@ -1,19 +1,21 @@
 import { ulid } from 'ulid';
 import { getCtx, type NodesContext } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
-import {
-  type PaneNode,
-  type FlatNode,
-  type MarkdownPaneFragmentNode,
-  type StoragePane,
-  type StorageNode,
-  type StorageMarkdown,
-  type StorageBgPane,
-  type ArtpackImageNode,
-  type BgImageNode,
-  type VisualBreakNode,
-  type TemplatePane,
-  type TemplateNode,
+import type {
+  PaneNode,
+  FlatNode,
+  MarkdownPaneFragmentNode,
+  GridLayoutNode,
+  StoragePane,
+  StorageNode,
+  StorageMarkdown,
+  StorageBgPane,
+  StorageGridLayoutNode,
+  ArtpackImageNode,
+  BgImageNode,
+  VisualBreakNode,
+  TemplatePane,
+  TemplateNode,
 } from '@/types/compositorTypes';
 import type {
   BrandConfig,
@@ -108,14 +110,14 @@ export async function savePaneToLibrary(
     category: string;
     copyMode: CopyMode;
   }
-): Promise<boolean> {
+): Promise<BrandConfigState | null> {
   const ctx = getCtx();
   const { title, category, copyMode } = formData;
   const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
 
   if (!paneNode) {
     console.error('savePaneToLibrary: PaneNode not found.');
-    return false;
+    return null;
   }
 
   const childNodes = ctx
@@ -172,13 +174,14 @@ export async function savePaneToLibrary(
     heightRatioDesktop: paneNode.heightRatioDesktop,
     heightRatioMobile: paneNode.heightRatioMobile,
     heightRatioTablet: paneNode.heightRatioTablet,
-    markdown: newStorageMarkdown,
-    bgPane: newStorageBgPane,
+    ...(newStorageMarkdown ? { markdowns: [newStorageMarkdown] } : {}),
+    ...(newStorageBgPane ? { bgPane: newStorageBgPane } : {}),
   };
 
   const newLibraryEntry: DesignLibraryEntry = {
     category: category,
     title: title,
+    markdownCount: 1,
     template: newStoragePane,
   };
 
@@ -207,10 +210,10 @@ export async function savePaneToLibrary(
 
   try {
     await saveBrandConfig(tenantId, backendDTO);
-    return true;
+    return updatedState;
   } catch (error) {
     console.error('Failed to save design library:', error);
-    return false;
+    return null;
   }
 }
 
@@ -244,10 +247,11 @@ export function mergeCopyIntoTemplate(
   copy: ExtractedCopy
 ): StoragePane {
   const newTemplate = { ...template };
-  if (newTemplate.markdown) {
-    newTemplate.markdown.nodes = copy;
+  if (newTemplate.markdowns) {
+    newTemplate.markdowns[0].nodes = copy;
   } else if (copy.length > 0) {
-    newTemplate.markdown = {
+    if (!newTemplate.markdowns) newTemplate.markdowns = [];
+    newTemplate.markdowns[0] = {
       nodeType: 'Markdown',
       type: 'markdown',
       defaultClasses: {},
@@ -289,8 +293,8 @@ export function convertStorageToLiveTemplate(
   const markdownId = ulid();
   const flatNodeList: TemplateNode[] = [];
 
-  if (storagePane.markdown && storagePane.markdown.nodes) {
-    for (const storageNode of storagePane.markdown.nodes) {
+  if (storagePane.markdowns && storagePane.markdowns[0].nodes) {
+    for (const storageNode of storagePane.markdowns[0].nodes) {
       const processedNodes = processStorageNode(storageNode, markdownId);
       flatNodeList.push(...processedNodes);
     }
@@ -307,12 +311,13 @@ export function convertStorageToLiveTemplate(
     };
   }
 
+  const { gridLayout, ...restOfStoragePane } = storagePane;
   const liveTemplatePane: TemplatePane = {
-    ...storagePane,
+    ...restOfStoragePane,
     id: paneId,
     parentId: '',
     markdown: {
-      ...(storagePane.markdown || {
+      ...((storagePane.markdowns && storagePane.markdowns[0]) || {
         nodeType: 'Markdown',
         type: 'markdown',
         defaultClasses: {},
@@ -414,3 +419,224 @@ export function convertTemplateToAIShell(template: TemplatePane): string {
 
   return JSON.stringify(shell, null, 2);
 }
+
+export async function copyPaneToClipboard(paneId: string): Promise<boolean> {
+  const ctx = getCtx();
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+
+  const storagePane = convertLivePaneToStoragePane(paneId, ctx, {
+    title: paneNode?.title || 'Pasted Pane',
+    copyMode: 'retain',
+  });
+
+  if (!storagePane) {
+    return false;
+  }
+
+  try {
+    const jsonPayload = JSON.stringify(storagePane, null, 2);
+    await navigator.clipboard.writeText(jsonPayload);
+    return true;
+  } catch (error) {
+    console.error('Failed to copy pane to clipboard:', error);
+    return false;
+  }
+}
+
+function buildIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && !map.has(node.id)) {
+    map.set(node.id, ulid());
+  }
+  // Markdown nodes have a second unique identifier
+  if (node.markdownId && !map.has(node.markdownId)) {
+    map.set(node.markdownId, ulid());
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    buildIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => buildIdMap(n, map));
+  }
+  if (node.bgPane) {
+    buildIdMap(node.bgPane, map);
+  }
+}
+
+function applyIdMap(node: any, map: Map<string, string>) {
+  if (!node || typeof node !== 'object') return;
+
+  if (node.id && map.has(node.id)) {
+    node.id = map.get(node.id);
+  }
+  if (node.parentId && map.has(node.parentId)) {
+    node.parentId = map.get(node.parentId);
+  }
+  if (node.markdownId && map.has(node.markdownId)) {
+    node.markdownId = map.get(node.markdownId);
+  }
+
+  // Recursively traverse all possible child arrays/objects
+  if (node.markdowns) {
+    node.markdowns.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.gridLayout) {
+    applyIdMap(node.gridLayout, map);
+  }
+  if (node.nodes) {
+    node.nodes.forEach((n: any) => applyIdMap(n, map));
+  }
+  if (node.bgPane) {
+    applyIdMap(node.bgPane, map);
+  }
+}
+
+export function remapPaneIds(pane: StoragePane): StoragePane {
+  const idMap = new Map<string, string>();
+  // The input object may have come from JSON.parse, so we treat it as 'any' internally
+  const clone = JSON.parse(JSON.stringify(pane as any));
+
+  // First pass: Traverse the entire structure to build a complete map of old IDs to new IDs.
+  buildIdMap(clone, idMap);
+
+  // Second pass: Traverse again to apply the new IDs, ensuring parent-child relationships are correct.
+  applyIdMap(clone, idMap);
+
+  return clone as StoragePane;
+}
+
+function convertLivePaneToStoragePane(
+  paneId: string,
+  ctx: NodesContext,
+  options: {
+    title: string;
+    copyMode: CopyMode;
+  }
+): StoragePane | null {
+  const paneNode = ctx.allNodes.get().get(paneId) as PaneNode;
+  if (!paneNode) {
+    console.error('convertLivePaneToStoragePane: PaneNode not found.');
+    return null;
+  }
+
+  const { title, copyMode } = options;
+  const childNodes = ctx
+    .getChildNodeIDs(paneId)
+    .map((id) => ctx.allNodes.get().get(id));
+
+  const markdownNode = childNodes.find((n) => n?.nodeType === 'Markdown') as
+    | MarkdownPaneFragmentNode
+    | undefined;
+
+  const gridLayoutNode = childNodes.find(
+    (n) => n?.nodeType === 'GridLayoutNode'
+  ) as GridLayoutNode | undefined;
+
+  const bgPaneNode = childNodes.find((n) => n?.nodeType === 'BgPane') as
+    | ArtpackImageNode
+    | BgImageNode
+    | VisualBreakNode
+    | undefined;
+
+  let storageMarkdown: StorageMarkdown | undefined;
+  let storageGridLayout: StorageGridLayoutNode | undefined;
+
+  if (markdownNode) {
+    storageMarkdown = {
+      nodeType: 'Markdown',
+      type: 'markdown',
+      defaultClasses: markdownNode.defaultClasses || {},
+      parentClasses: markdownNode.parentClasses || [],
+      nodes:
+        copyMode !== 'blank'
+          ? ctx
+              .getChildNodeIDs(markdownNode.id)
+              .map((childId) => {
+                const childNode = ctx.allNodes.get().get(childId) as FlatNode;
+                return convertLiveNodeToStorageNode(childNode, ctx, copyMode);
+              })
+              .filter((n): n is StorageNode => n !== null)
+          : [],
+    };
+  } else if (gridLayoutNode) {
+    const { id, parentId, isChanged, ...restOfGrid } = gridLayoutNode;
+    storageGridLayout = {
+      ...restOfGrid,
+      nodes: ctx
+        .getChildNodeIDs(gridLayoutNode.id)
+        .map((columnId) => {
+          const columnNode = ctx.allNodes
+            .get()
+            .get(columnId) as MarkdownPaneFragmentNode;
+          if (!columnNode) return null;
+
+          const {
+            id,
+            parentId,
+            isChanged,
+            markdownId,
+            parentCss,
+            ...restOfColumn
+          } = columnNode;
+
+          const storageColumn: StorageMarkdown = {
+            ...restOfColumn,
+            nodeType: 'Markdown',
+            type: 'markdown',
+            nodes:
+              copyMode !== 'blank'
+                ? ctx
+                    .getChildNodeIDs(columnNode.id)
+                    .map((childId) => {
+                      const childNode = ctx.allNodes
+                        .get()
+                        .get(childId) as FlatNode;
+                      return convertLiveNodeToStorageNode(
+                        childNode,
+                        ctx,
+                        copyMode
+                      );
+                    })
+                    .filter((n): n is StorageNode => n !== null)
+                : [],
+          };
+          return storageColumn;
+        })
+        .filter((n): n is StorageMarkdown => n !== null),
+    };
+  }
+
+  const storageBgPane: StorageBgPane | undefined = bgPaneNode
+    ? { ...bgPaneNode }
+    : undefined;
+
+  if (storageBgPane) {
+    delete (storageBgPane as any).id;
+    delete (storageBgPane as any).parentId;
+  }
+
+  const storagePane: StoragePane = {
+    nodeType: 'Pane',
+    title: title,
+    slug: '',
+    bgColour: paneNode.bgColour,
+    isDecorative: paneNode.isDecorative,
+    heightOffsetDesktop: paneNode.heightOffsetDesktop,
+    heightOffsetMobile: paneNode.heightOffsetMobile,
+    heightOffsetTablet: paneNode.heightOffsetTablet,
+    heightRatioDesktop: paneNode.heightRatioDesktop,
+    heightRatioMobile: paneNode.heightRatioMobile,
+    heightRatioTablet: paneNode.heightRatioTablet,
+    ...(storageMarkdown ? { markdowns: [storageMarkdown] } : {}),
+    ...(storageGridLayout ? { gridLayout: storageGridLayout } : {}),
+    ...(storageBgPane ? { bgPane: storageBgPane } : {}),
+  };
+
+  return storagePane;
+}

package/templates/src/utils/helpers.ts

@@ -291,14 +291,15 @@ export function titleToSlug(title: string, maxLength: number = 50): string {
 }
 
 export function findUniqueSlug(slug: string, existingSlugs: string[]): string {
-  if (!existingSlugs.includes(slug)) {
-    return slug;
+  const tempSlug = slug || `story`;
+  if (!existingSlugs.includes(tempSlug)) {
+    return tempSlug;
   }
   let counter = 1;
-  let newSlug = `${slug}-${counter}`;
+  let newSlug = `${tempSlug}-${counter}`;
   while (existingSlugs.includes(newSlug)) {
     counter++;
-    newSlug = `${slug}-${counter}`;
+    newSlug = `${tempSlug}-${counter}`;
   }
   return newSlug;
 }

package/utils/inject-files.ts

@@ -453,6 +453,12 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/pane/AddPanePanel.tsx'),
       dest: 'src/components/edit/pane/AddPanePanel.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/AddPanePanel_paste.tsx'
+      ),
+      dest: 'src/components/edit/pane/AddPanePanel_paste.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_break.tsx'
@@ -549,22 +555,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/context/ContextPaneConfig_slug.tsx',
     },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGenSelector.tsx'),
-      dest: 'src/components/edit/pane/PageGenSelector.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGenSpecial.tsx'),
-      dest: 'src/components/edit/pane/PageGenSpecial.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGen.tsx'),
-      dest: 'src/components/edit/pane/PageGen.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/PageGen_preview.tsx'),
-      dest: 'src/components/edit/pane/PageGen_preview.tsx',
-    },
     // Compositor previews
     {
       src: resolve(
@@ -584,12 +574,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/preview/OgImagePreview.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/compositor/preview/VisualBreakPreview.tsx'
-      ),
-      dest: 'src/components/compositor/preview/VisualBreakPreview.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/compositor/preview/ListContentPreview.tsx'
@@ -653,16 +637,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/utils/compositor/aiPaneParser.ts'),
       dest: 'src/utils/compositor/aiPaneParser.ts',
     },
-    {
-      src: resolve('../templates/src/utils/compositor/processMarkdown.ts'),
-      dest: 'src/utils/compositor/processMarkdown.ts',
-    },
-    {
-      src: resolve(
-        '../templates/src/utils/compositor/templateMarkdownStyles.ts'
-      ),
-      dest: 'src/utils/compositor/templateMarkdownStyles.ts',
-    },
     {
       src: resolve(
         '../templates/src/utils/compositor/nodesMarkdownGenerator.ts'

package/templates/src/components/compositor/preview/VisualBreakPreview.tsx

@@ -1,154 +0,0 @@
-import { useEffect, useState } from 'react';
-import { NodesContext } from '@/stores/nodes';
-import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
-import { getTemplateVisualBreakPane } from '@/utils/compositor/TemplatePanes';
-import {
-  PanesPreviewGenerator,
-  type PanePreviewRequest,
-  type PaneFragmentResult,
-} from '@/components/compositor/preview/PanesPreviewGenerator';
-import {
-  PaneSnapshotGenerator,
-  type SnapshotData,
-} from '@/components/compositor/preview/PaneSnapshotGenerator';
-
-interface VisualBreakPreviewProps {
-  bgColour: string;
-  fillColour: string;
-  variant?: string; // Optional variant name for the visual break
-  height?: number; // Optional height for the container
-}
-
-// The state is managed as a single object since this component only ever handles one preview at a time.
-// This is slightly simpler than managing an array with a single item.
-type PreviewState = {
-  htmlFragment?: string;
-  snapshot?: SnapshotData;
-  error?: string;
-};
-
-/**
- * Renders a preview of a single visual break variant.
- *
- * This component uses a modern two-step process for efficiency:
- * 1. It uses PanesPreviewGenerator to fetch an HTML fragment of the break.
- * 2. It then uses PaneSnapshotGenerator to convert that HTML into an image snapshot.
- */
-export const VisualBreakPreview = ({
-  bgColour,
-  fillColour,
-  variant = 'cutwide2', // Default to cutwide2 as it's a commonly used break
-  height = 120, // Default height that works well for most breaks
-}: VisualBreakPreviewProps) => {
-  const [previewState, setPreviewState] = useState<PreviewState | null>(null);
-  const [fragmentRequest, setFragmentRequest] = useState<PanePreviewRequest[]>(
-    []
-  );
-
-  useEffect(() => {
-    // Reset state whenever the props change to trigger a full regeneration
-    setPreviewState(null);
-
-    // STEP 1: Create a temporary NodesContext for the preview.
-    const ctx = new NodesContext();
-    ctx.addNode(createEmptyStorykeep('tmp')); // Add root node
-
-    // Get the template for the specified variant and apply the dynamic colours
-    const template = getTemplateVisualBreakPane(variant);
-    if (template) {
-      if (template.bgColour) template.bgColour = bgColour;
-      if (template.bgPane && template.bgPane.type === 'visual-break') {
-        if (template.bgPane.breakDesktop) {
-          template.bgPane.breakDesktop.svgFill = fillColour;
-        }
-        if (template.bgPane.breakTablet) {
-          template.bgPane.breakTablet.svgFill = fillColour;
-        }
-        if (template.bgPane.breakMobile) {
-          template.bgPane.breakMobile.svgFill = fillColour;
-        }
-      }
-      ctx.addTemplatePane('tmp', template); // Add the template to the context
-    }
-
-    // Prepare a request for the PanesPreviewGenerator to get the HTML.
-    setFragmentRequest([{ id: 'visual-break-preview', ctx }]);
-  }, [variant, bgColour, fillColour]);
-
-  // Handler for when the HTML fragment has been generated
-  const handleFragmentComplete = (results: PaneFragmentResult[]) => {
-    const result = results[0];
-    if (result?.htmlString) {
-      setPreviewState({ htmlFragment: result.htmlString });
-    } else {
-      setPreviewState({
-        error: result?.error || 'Failed to generate HTML fragment.',
-      });
-    }
-    setFragmentRequest([]); // Clear the request to prevent re-fetching
-  };
-
-  // Handler for when the image snapshot has been generated from the HTML.
-  // The 'id' parameter is unused here as we only manage one snapshot at a time.
-  const handleSnapshotComplete = (data: SnapshotData) => {
-    setPreviewState((prev) => (prev ? { ...prev, snapshot: data } : null));
-  };
-
-  // Display a pulsing placeholder while the process is running
-  if (!previewState) {
-    return <div className="my-4 h-12 animate-pulse bg-gray-200" />;
-  }
-
-  // Display an error message if something went wrong
-  if (previewState.error) {
-    return (
-      <div className="flex items-center justify-center rounded-md border border-red-200 bg-red-50 p-4 text-sm text-red-700">
-        Preview could not be generated: {previewState.error}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="relative w-full overflow-hidden"
-      style={!previewState.snapshot ? { height: `${height}px` } : undefined}
-    >
-      {/* STEP 2: Render the generator to fetch the HTML fragment. This component renders nothing itself. */}
-      {fragmentRequest.length > 0 && (
-        <PanesPreviewGenerator
-          requests={fragmentRequest}
-          onComplete={handleFragmentComplete}
-          onError={(err) => setPreviewState({ error: err })}
-        />
-      )}
-
-      {/* STEP 3: Once HTML is available, render the snapshot generator to create the image. This component also renders nothing. */}
-      {previewState.htmlFragment && !previewState.snapshot && (
-        <PaneSnapshotGenerator
-          id="visual-break-snapshot"
-          htmlString={previewState.htmlFragment}
-          outputWidth={800} // Matches the original output width
-          onComplete={(_id, data) => handleSnapshotComplete(data)}
-          onError={(_id, err) =>
-            setPreviewState((prev) =>
-              prev ? { ...prev, error: err } : { error: err }
-            )
-          }
-        />
-      )}
-
-      {/* STEP 4: Once the snapshot is complete, display the final image. */}
-      {previewState.snapshot && (
-        <div className="w-full">
-          <img
-            src={previewState.snapshot.imageData}
-            alt={`Visual break ${variant}`}
-            className="w-full"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default VisualBreakPreview;