astro-tractstack 2.0.14 → 2.0.15

package/templates/src/components/edit/pane/steps/DesignLibraryStep.tsx

@@ -0,0 +1,395 @@
+import { useState, useMemo } from 'react';
+import { useStore } from '@nanostores/react';
+import {
+  Select,
+  Combobox,
+  Pagination,
+  Portal,
+  type SelectValueChangeDetails,
+  type ComboboxInputValueChangeDetails,
+  type PaginationPageChangeDetails,
+} from '@ark-ui/react';
+import { createListCollection } from '@ark-ui/react/collection';
+import { NodesContext } from '@/stores/nodes';
+import { viewportKeyStore } from '@/stores/storykeep';
+import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
+import { convertStorageToLiveTemplate } from '@/utils/compositor/designLibraryHelper';
+import type { StoragePane } from '@/types/compositorTypes';
+import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
+import {
+  PaneSnapshotGenerator,
+  type SnapshotData,
+} from '@/components/compositor/preview/PaneSnapshotGenerator';
+import {
+  PanesPreviewGenerator,
+  type PanePreviewRequest,
+  type PaneFragmentResult,
+} from '@/components/compositor/preview/PanesPreviewGenerator';
+import { classNames } from '@/utils/helpers';
+
+const PAGE_SIZE = 12;
+
+// --- Sub-component for rendering a single preview item ---
+interface TemplatePreviewItemProps {
+  storageTemplate: StoragePane;
+  config: BrandConfig;
+  onClick: () => void;
+  title: string;
+  category: string;
+}
+
+const TemplatePreviewItem = ({
+  storageTemplate,
+  config,
+  onClick,
+  title,
+  category,
+}: TemplatePreviewItemProps) => {
+  const [previewState, setPreviewState] = useState<{
+    htmlFragment?: string;
+    snapshot?: SnapshotData;
+    error?: string;
+  } | null>(null);
+
+  // Convert storage template to live template for previewing
+  const liveTemplate = useMemo(
+    () => convertStorageToLiveTemplate(storageTemplate),
+    [storageTemplate]
+  );
+
+  const fragmentRequest = useMemo((): PanePreviewRequest[] => {
+    // This preview logic is correct: it creates a *temporary* context.
+    const ctx = new NodesContext();
+    ctx.addNode(createEmptyStorykeep('tmp'));
+    ctx.addTemplatePane('tmp', liveTemplate);
+    return [{ id: liveTemplate.id, ctx }];
+  }, [liveTemplate]);
+
+  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.',
+      });
+    }
+  };
+
+  const handleSnapshotComplete = (data: SnapshotData) => {
+    setPreviewState((prev) => (prev ? { ...prev, snapshot: data } : null));
+  };
+
+  return (
+    <div
+      className="group flex cursor-pointer flex-col rounded-lg border bg-white shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
+      onClick={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="relative overflow-hidden rounded-t-lg border-b bg-gray-50">
+        {!previewState?.snapshot && (
+          <div className="flex h-48 w-full animate-pulse items-center justify-center bg-gray-200 text-sm text-gray-500">
+            Generating preview...
+          </div>
+        )}
+
+        {previewState?.error && (
+          <div className="flex h-full items-center justify-center p-4">
+            <p className="text-xs text-red-500">{previewState.error}</p>
+          </div>
+        )}
+
+        {fragmentRequest.length > 0 && !previewState?.htmlFragment && (
+          <PanesPreviewGenerator
+            requests={fragmentRequest}
+            onComplete={handleFragmentComplete}
+            onError={(err) => setPreviewState({ error: err })}
+          />
+        )}
+
+        {previewState?.htmlFragment && !previewState.snapshot && (
+          <PaneSnapshotGenerator
+            id={liveTemplate.id}
+            htmlString={previewState.htmlFragment}
+            outputWidth={800}
+            config={config}
+            onComplete={(_id, data) => handleSnapshotComplete(data)}
+            onError={(_id, err) =>
+              setPreviewState((prev) =>
+                prev ? { ...prev, error: err } : { error: err }
+              )
+            }
+          />
+        )}
+
+        {previewState?.snapshot && (
+          <img
+            src={previewState.snapshot.imageData}
+            alt={`Preview for ${title}`}
+            className="block h-auto w-full object-contain"
+          />
+        )}
+        <div className="absolute inset-0 bg-cyan-600/80 opacity-0 transition-opacity group-hover:opacity-100">
+          <div className="flex h-full items-center justify-center">
+            <span className="font-action text-xl font-bold text-white">
+              Select Design
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="flex-grow p-3">
+        <h3 className="truncate font-semibold" title={title}>
+          {title}
+        </h3>
+        <p className="text-sm capitalize text-gray-600">{category}</p>
+      </div>
+    </div>
+  );
+};
+
+// --- Main component ---
+interface DesignLibraryStepProps {
+  config: BrandConfig;
+  onSelect: (entry: DesignLibraryEntry) => void;
+}
+
+export const DesignLibraryStep = ({
+  config,
+  onSelect,
+}: DesignLibraryStepProps) => {
+  const designLibrary = config?.DESIGN_LIBRARY || [];
+  const viewport = useStore(viewportKeyStore).value;
+
+  const [selectedCategory, setSelectedCategory] = useState<string>('all');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const gridClass = useMemo(() => {
+    switch (viewport) {
+      case 'mobile':
+        return 'grid-cols-1';
+      case 'tablet':
+        return 'grid-cols-2';
+      case 'desktop':
+        return 'grid-cols-3';
+    }
+  }, [viewport]);
+
+  const categories = useMemo(() => {
+    const allCategories = new Set(
+      designLibrary.map((entry: DesignLibraryEntry) => entry.category)
+    );
+    return ['all', ...Array.from(allCategories)];
+  }, [designLibrary]);
+
+  const filteredEntries = useMemo(() => {
+    return designLibrary
+      .filter(
+        (entry: DesignLibraryEntry) =>
+          (selectedCategory === 'all' || entry.category === selectedCategory) &&
+          entry.title.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+      .sort((a, b) => a.title.localeCompare(b.title));
+  }, [designLibrary, selectedCategory, searchTerm]);
+
+  const paginatedEntries = useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE;
+    const end = start + PAGE_SIZE;
+    return filteredEntries.slice(start, end);
+  }, [filteredEntries, currentPage]);
+
+  const totalPages = Math.ceil(filteredEntries.length / PAGE_SIZE);
+
+  const comboboxCollection = useMemo(
+    () =>
+      createListCollection({
+        items: filteredEntries,
+        itemToValue: (item) => item.title,
+        itemToString: (item) => item.title,
+      }),
+    [filteredEntries]
+  );
+
+  const selectCollection = useMemo(
+    () =>
+      createListCollection({
+        items: categories.map((c) => ({
+          label: c.charAt(0).toUpperCase() + c.slice(1),
+          value: c,
+        })),
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label,
+      }),
+    [categories]
+  );
+
+  return (
+    <div className="flex h-full flex-col space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
+      <label className="block text-lg font-semibold text-gray-800">
+        2. Choose a Design
+      </label>
+
+      {/* --- Filters --- */}
+      <nav className="flex items-center gap-x-4 rounded-md border bg-white p-3">
+        <Select.Root
+          collection={selectCollection}
+          value={[selectedCategory]}
+          onValueChange={(details: SelectValueChangeDetails) =>
+            setSelectedCategory(details.value[0])
+          }
+          className="w-48"
+          positioning={{ gutter: 4 }}
+        >
+          <Select.Label className="mb-1 text-sm font-medium text-gray-700">
+            Category
+          </Select.Label>
+          <Select.Control>
+            <Select.Trigger className="flex w-full items-center justify-between rounded-md border bg-white p-2 text-left shadow-sm">
+              <Select.ValueText />
+              <Select.Indicator>▼</Select.Indicator>
+            </Select.Trigger>
+          </Select.Control>
+          <Portal>
+            <Select.Positioner>
+              <Select.Content className="z-50 rounded-md border bg-white shadow-lg">
+                {categories.map((c) => (
+                  <Select.Item
+                    key={c}
+                    item={{
+                      label: c.charAt(0).toUpperCase() + c.slice(1),
+                      value: c,
+                    }}
+                    className="cursor-pointer p-2 hover:bg-gray-100"
+                  >
+                    <Select.ItemText>
+                      {c.charAt(0).toUpperCase() + c.slice(1)}
+                    </Select.ItemText>
+                  </Select.Item>
+                ))}
+              </Select.Content>
+            </Select.Positioner>
+          </Portal>
+        </Select.Root>
+
+        <Combobox.Root
+          collection={comboboxCollection}
+          onInputValueChange={(e: ComboboxInputValueChangeDetails) =>
+            setSearchTerm(e.inputValue)
+          }
+          className="flex-1"
+          positioning={{ gutter: 4 }}
+        >
+          <Combobox.Label className="mb-1 text-sm font-medium text-gray-700">
+            Filter by Title
+          </Combobox.Label>
+          <Combobox.Control>
+            <Combobox.Input
+              placeholder="Search by title..."
+              className="w-full rounded-md border p-2 shadow-sm"
+            />
+          </Combobox.Control>
+          <Portal>
+            <Combobox.Positioner>
+              <Combobox.Content className="z-50 rounded-md border bg-white shadow-lg">
+                {filteredEntries.map((entry: DesignLibraryEntry) => (
+                  <Combobox.Item
+                    key={entry.title}
+                    item={entry}
+                    className="cursor-pointer p-2 hover:bg-gray-100"
+                  >
+                    <Combobox.ItemText>{entry.title}</Combobox.ItemText>
+                  </Combobox.Item>
+                ))}
+              </Combobox.Content>
+            </Combobox.Positioner>
+          </Portal>
+        </Combobox.Root>
+      </nav>
+
+      {/* --- Previews Grid --- */}
+      <main className="flex-1 overflow-y-auto">
+        {paginatedEntries.length === 0 ? (
+          <div className="flex h-full items-center justify-center rounded-md bg-white p-6">
+            <p className="text-gray-500">
+              No designs found matching your criteria.
+            </p>
+          </div>
+        ) : (
+          <div className={classNames('grid gap-6', gridClass)}>
+            {paginatedEntries.map((entry) => (
+              <TemplatePreviewItem
+                key={entry.title}
+                storageTemplate={entry.template}
+                config={config}
+                onClick={() => onSelect(entry)}
+                title={entry.title}
+                category={entry.category}
+              />
+            ))}
+          </div>
+        )}
+      </main>
+
+      {/* --- Pagination --- */}
+      {totalPages > 1 && (
+        <footer className="flex items-center justify-center border-t pt-4">
+          <Pagination.Root
+            count={totalPages * PAGE_SIZE}
+            pageSize={PAGE_SIZE}
+            siblingCount={1}
+            page={currentPage}
+            onPageChange={(details: PaginationPageChangeDetails) =>
+              setCurrentPage(details.page)
+            }
+            className="flex items-center gap-x-2"
+          >
+            <Pagination.PrevTrigger
+              type="button"
+              className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
+              disabled={currentPage === 1}
+            >
+              Previous
+            </Pagination.PrevTrigger>
+            <Pagination.Context>
+              {(pagination) =>
+                pagination.pages.map((page, index: number) =>
+                  page.type === 'page' ? (
+                    <Pagination.Item
+                      key={index}
+                      {...page}
+                      type="page"
+                      className={classNames(
+                        'flex h-9 w-9 items-center justify-center rounded-md text-sm',
+                        page.value === currentPage
+                          ? 'bg-cyan-600 font-bold text-white'
+                          : 'hover:bg-gray-100'
+                      )}
+                    >
+                      {page.value}
+                    </Pagination.Item>
+                  ) : (
+                    <Pagination.Ellipsis
+                      key={index}
+                      index={index}
+                      className="px-2 text-sm"
+                    >
+                      ...
+                    </Pagination.Ellipsis>
+                  )
+                )
+              }
+            </Pagination.Context>
+            <Pagination.NextTrigger
+              type="button"
+              className="rounded p-2 text-sm hover:bg-gray-100 disabled:text-gray-400"
+              disabled={currentPage === totalPages}
+            >
+              Next
+            </Pagination.NextTrigger>
+          </Pagination.Root>
+        </footer>
+      )}
+    </div>
+  );
+};

package/templates/src/constants/prompts.json

@@ -45,6 +45,8 @@
   },
   "aiPaneCopyPrompt": {
     "system": "You are an expert **web designer and copywriter**. Your task is to generate a single, visually compelling block of HTML content. You must ensure the content is well-written, engaging, **beautifully spaced**, and **highly readable**.",
-    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>"
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>",
+    "heroDefault": "A compelling hero section for a website about [topic]. It should have a strong, attention-grabbing headline, a brief paragraph explaining the core value proposition, and a clear call-to-action.",
+    "contentDefault": "A content section that follows a hero. It should elaborate on a key feature or benefit related to [topic]. Include a sub-headline and a descriptive paragraph."
   }
 }

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

@@ -78,7 +78,6 @@ function buildKeyNormalizationLookup(): Map<string, string> {
 
   const keyMap = new Map<string, string>();
   for (const key in tailwindClasses) {
-    // Store lowercase key -> correctly cased key
     keyMap.set(key.toLowerCase(), key);
   }
   KEY_NORMALIZATION_LOOKUP = keyMap;
@@ -97,7 +96,6 @@ function normalizeKeys(
     if (Object.prototype.hasOwnProperty.call(styleObj, key)) {
       const lowerKey = key.toLowerCase();
       const correctKey = keyMap.get(lowerKey);
-      // Use the correctly cased key if found, otherwise keep original (handles potential non-Tailwind keys)
       normalized[correctKey || key] = styleObj[key];
     }
   }
@@ -258,22 +256,16 @@ function walkDom(
 ) {
   if (domNode.nodeType === Node.TEXT_NODE) {
     const copy = domNode.textContent || '';
-    // Preserve leading/trailing spaces unless the *entire* content is just whitespace.
-    // Trim internal excessive whitespace as a basic sanitation step.
     const trimmedCopy = copy.replace(/\s+/g, ' ').trim();
 
     if (trimmedCopy.length > 0) {
-      // Use the original copy to preserve meaningful spaces, but cleaned up.
       let finalCopy = copy.replace(/\s+/g, ' ');
-      // Preserve single leading space if original had one AND previous sibling exists
       if (copy.startsWith(' ') && domNode.previousSibling) {
         finalCopy = ' ' + finalCopy.trimStart();
       }
-      // Preserve single trailing space if original had one AND next sibling exists
       if (copy.endsWith(' ') && domNode.nextSibling) {
         finalCopy = finalCopy.trimEnd() + ' ';
       }
-      // Special case: if it was ONLY space, respect if it was intended between elements
       if (
         trimmedCopy.length === 0 &&
         copy.length > 0 &&
@@ -283,15 +275,13 @@ function walkDom(
         finalCopy = ' ';
       }
 
-      // Only create node if there's actual content or a meaningful space
       if (finalCopy.trim().length > 0 || finalCopy === ' ') {
         const textNode: TemplateNode = {
           id: ulid(),
           nodeType: 'TagElement',
           parentId: parentId,
           tagName: 'text',
-          copy: finalCopy, // Use the carefully preserved copy
-          overrideClasses: {},
+          copy: finalCopy,
         };
         parsedNodes.push({
           flatNode: textNode,
@@ -326,7 +316,6 @@ function walkDom(
         nodeType: 'TagElement',
         parentId: parentId,
         tagName: 'p',
-        overrideClasses: {},
       };
       parsedNodes.push({
         flatNode: pNode,
@@ -341,8 +330,7 @@ function walkDom(
       id: ulid(),
       nodeType: 'TagElement',
       parentId: finalParentId,
-      tagName: 'a',
-      overrideClasses: {},
+      tagName: 'a', // Buttons are converted to anchor tags for our system
       href: '#',
       buttonPayload: {
         ...buttonPayload,
@@ -368,7 +356,6 @@ function walkDom(
     nodeType: 'TagElement',
     parentId: parentId,
     tagName: tagName,
-    overrideClasses: {},
   };
 
   if (tagName === 'span') {
@@ -493,14 +480,41 @@ function parseDefaultClassesFromShell(
   return sanitizedDefaults;
 }
 
+/**
+ * Parses a raw HTML string from the AI into a structured array of TemplateNodes.
+ * @param copyHtml The raw HTML string.
+ * @param markdownId The parent ID for the top-level nodes.
+ * @returns An array of TemplateNodes representing the structured content.
+ */
+export function parseAiCopyHtml(
+  copyHtml: string,
+  markdownId: string
+): TemplateNode[] {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(copyHtml, 'text/html');
+
+  const allParsedNodes: ParsedNode[] = [];
+  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
+
+  // When parsing copy in isolation, all classes are treated as potential overrides.
+  // The consumer is responsible for merging these with a set of defaults if needed.
+  return allParsedNodes.map((pNode) => {
+    if (
+      Object.keys(pNode.responsiveClasses).length > 0 &&
+      pNode.flatNode.tagName !== 'span'
+    ) {
+      pNode.flatNode.overrideClasses = pNode.responsiveClasses;
+    }
+    return pNode.flatNode;
+  });
+}
+
 export const parseAiPane = (
   shellJson: string,
   copyHtml: string,
   layout: string
 ): TemplatePane => {
   const shell: ShellJson = JSON.parse(shellJson);
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(copyHtml, 'text/html');
 
   const paneId = ulid();
   const markdownId = ulid();
@@ -527,73 +541,7 @@ export const parseAiPane = (
     defaultClasses: shellDefaults,
   };
 
-  const allParsedNodes: ParsedNode[] = [];
-  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
-
-  const templateNodes: TemplateNode[] = [];
-  const nodesByTag = new Map<string, ParsedNode[]>();
-
-  allParsedNodes.forEach((parsedNode) => {
-    templateNodes.push(parsedNode.flatNode);
-    const tagName = parsedNode.flatNode.tagName;
-
-    if (
-      tagName &&
-      tagName !== 'span' &&
-      tagName !== 'text' &&
-      tagName !== 'em' &&
-      tagName !== 'strong' &&
-      tagName !== 'a'
-    ) {
-      if (!nodesByTag.has(tagName)) {
-        nodesByTag.set(tagName, []);
-      }
-      nodesByTag.get(tagName)!.push(parsedNode);
-    }
-  });
-
-  nodesByTag.forEach((nodes, tagName) => {
-    const commonResponsiveFromCopy = findMostCommonClasses(nodes);
-    const requiredCommonFromCopy = ensureRequiredViewports(
-      commonResponsiveFromCopy
-    );
-
-    const existingShellDefault = markdownNode.defaultClasses![tagName];
-    const mergedDefault = ensureRequiredViewports(
-      mergeResponsive(existingShellDefault, commonResponsiveFromCopy)
-    );
-
-    markdownNode.defaultClasses![tagName] = mergedDefault;
-
-    nodes.forEach((parsedNode) => {
-      const requiredNodeResponsive = ensureRequiredViewports(
-        parsedNode.responsiveClasses
-      );
-
-      if (!isDeepEqual(requiredNodeResponsive, requiredCommonFromCopy)) {
-        if (!parsedNode.flatNode.overrideClasses) {
-          parsedNode.flatNode.overrideClasses = {};
-        }
-        parsedNode.flatNode.overrideClasses = parsedNode.responsiveClasses;
-      }
-    });
-  });
-
-  if (layout.includes('Image')) {
-    const imgNode: TemplateNode = {
-      id: ulid(),
-      nodeType: 'TagElement',
-      parentId: markdownId,
-      tagName: 'img',
-      src: '/static.jpg',
-      overrideClasses: {},
-    };
-    if (layout === 'Text + Image Left') {
-      templateNodes.unshift(imgNode);
-    } else {
-      templateNodes.push(imgNode);
-    }
-  }
+  const templateNodes = parseAiCopyHtml(copyHtml, markdownId);
 
   const templatePane: TemplatePane = {
     id: paneId,