astro-tractstack 2.0.29 → 2.0.31

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

@@ -1,6 +1,13 @@
 import { useEffect } from 'react';
+import BooleanToggle from '@/components/form/BooleanToggle';
+import EnumSelect from '@/components/form/EnumSelect';
 
-type CopyMode = 'prompt' | 'raw';
+export type CopyMode = 'prompt' | 'raw' | 'original';
+
+interface PromptOption {
+  label: string;
+  value: string;
+}
 
 interface CopyInputStepProps {
   copyMode: CopyMode;
@@ -10,6 +17,13 @@ interface CopyInputStepProps {
   copyValue: string;
   onCopyValueChange: (value: string) => void;
   defaultPrompt?: string;
+  hasRetainedContent?: boolean;
+  promptOptions: PromptOption[];
+  selectedPromptId: string;
+  onSelectedPromptIdChange: (id: string) => void;
+  isAiStyling: boolean;
+  onIsAiStylingChange: (checked: boolean) => void;
+  showStyleToggle?: boolean;
 }
 
 export const CopyInputStep = ({
@@ -20,9 +34,15 @@ export const CopyInputStep = ({
   copyValue,
   onCopyValueChange,
   defaultPrompt,
+  hasRetainedContent = false,
+  promptOptions,
+  selectedPromptId,
+  onSelectedPromptIdChange,
+  isAiStyling,
+  onIsAiStylingChange,
+  showStyleToggle = true,
 }: CopyInputStepProps) => {
   useEffect(() => {
-    // Pre-populate the prompt field if a default is provided and the field is empty
     if (defaultPrompt && !promptValue) {
       onPromptValueChange(defaultPrompt);
     }
@@ -33,7 +53,7 @@ export const CopyInputStep = ({
       <label className="block text-lg font-bold text-gray-800">
         1. Provide Content
       </label>
-      <div className="my-2 flex space-x-4">
+      <div className="my-2 flex flex-wrap gap-4">
         <div className="flex items-center space-x-2">
           <input
             type="radio"
@@ -68,9 +88,41 @@ export const CopyInputStep = ({
             Provide Copy (Markdown)
           </label>
         </div>
+        {hasRetainedContent && (
+          <div className="flex items-center space-x-2">
+            <input
+              type="radio"
+              id="copy-original-mode"
+              name="copyModeOptions"
+              value="original"
+              checked={copyMode === 'original'}
+              onChange={(e) => onCopyModeChange(e.target.value as CopyMode)}
+              className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+            />
+            <label
+              htmlFor="copy-original-mode"
+              className="text-sm font-bold text-gray-700"
+            >
+              Use Original
+            </label>
+          </div>
+        )}
       </div>
 
-      {copyMode === 'prompt' ? (
+      {(copyMode === 'prompt' || (copyMode === 'raw' && isAiStyling)) && (
+        <div className="mb-4">
+          <EnumSelect
+            label="Section Type"
+            value={selectedPromptId}
+            onChange={onSelectedPromptIdChange}
+            options={promptOptions}
+            placeholder="Select a type..."
+            className="w-full"
+          />
+        </div>
+      )}
+
+      {copyMode === 'prompt' && (
         <>
           <p className="mb-2 text-sm text-gray-500">
             Let the AI write the copy based on your prompt.
@@ -84,12 +136,25 @@ export const CopyInputStep = ({
             className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
           />
         </>
-      ) : (
+      )}
+
+      {copyMode === 'raw' && (
         <>
-          <p className="mb-2 text-sm text-gray-500">
-            Provide your raw copy here. Use Markdown for formatting (e.g., ##
-            Headline, **bold**).
-          </p>
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-sm text-gray-500">
+              Provide your raw copy here. Use Markdown.
+            </p>
+            {showStyleToggle && (
+              <div className="flex items-center">
+                <BooleanToggle
+                  label="Style with AI"
+                  value={isAiStyling}
+                  onChange={onIsAiStylingChange}
+                  size="sm"
+                />
+              </div>
+            )}
+          </div>
           <textarea
             id="raw-copy"
             value={copyValue}
@@ -100,6 +165,14 @@ export const CopyInputStep = ({
           />
         </>
       )}
+
+      {copyMode === 'original' && (
+        <div className="rounded-md border border-blue-200 bg-blue-50 p-4 text-blue-700">
+          <p className="text-sm">
+            The original text saved with this design will be used.
+          </p>
+        </div>
+      )}
     </div>
   );
 };

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

@@ -5,25 +5,41 @@ import type { TemplatePane } from '@/types/compositorTypes';
 interface DirectInjectStepProps {
   onBack: () => void;
   onCreatePane: (template: TemplatePane) => void;
+  layout: 'standard' | 'grid';
 }
 
 export const DirectInjectStep = ({
   onBack,
   onCreatePane,
+  layout,
 }: DirectInjectStepProps) => {
   const [shellJson, setShellJson] = useState('');
-  const [copyHtml, setCopyHtml] = useState('');
+  const [columnContent, setColumnContent] = useState<string[]>(
+    layout === 'grid' ? ['', ''] : ['']
+  );
   const [error, setError] = useState<string | null>(null);
 
+  const handleContentChange = (index: number, value: string) => {
+    const newContent = [...columnContent];
+    newContent[index] = value;
+    setColumnContent(newContent);
+  };
+
   const handleCreate = () => {
     setError(null);
-    if (!shellJson.trim() || !copyHtml.trim()) {
-      setError('Both Shell JSON and Inner HTML must be provided.');
+    if (!shellJson.trim()) {
+      setError('Shell JSON must be provided.');
+      return;
+    }
+    if (columnContent.some((c) => !c.trim())) {
+      setError('All content fields must be filled.');
       return;
     }
 
     try {
-      const finalPane = parseAiPane(shellJson, copyHtml, 'DirectInject');
+      const contentPayload =
+        layout === 'standard' ? columnContent[0] : columnContent;
+      const finalPane = parseAiPane(shellJson, contentPayload, 'DirectInject');
       onCreatePane(finalPane);
     } catch (err: any) {
       console.error('Direct Inject Error:', err);
@@ -52,22 +68,27 @@ export const DirectInjectStep = ({
             placeholder={`{ "bgColour": "#ffffff", "parentClasses": [...], "defaultClasses": {...} }`}
           />
         </div>
-        <div>
-          <label
-            htmlFor="copyHtml"
-            className="block text-sm font-bold text-gray-700"
-          >
-            Inner HTML
-          </label>
-          <textarea
-            id="copyHtml"
-            rows={10}
-            value={copyHtml}
-            onChange={(e) => setCopyHtml(e.target.value)}
-            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-            placeholder={`<h2 class="...">...</h2>\n<p class="...">...</p>`}
-          />
-        </div>
+
+        {columnContent.map((content, index) => (
+          <div key={index}>
+            <label
+              htmlFor={`copyHtml-${index}`}
+              className="block text-sm font-bold text-gray-700"
+            >
+              {layout === 'grid'
+                ? `Inner HTML (Column ${index + 1})`
+                : 'Inner HTML'}
+            </label>
+            <textarea
+              id={`copyHtml-${index}`}
+              rows={layout === 'grid' ? 6 : 10}
+              value={content}
+              onChange={(e) => handleContentChange(index, e.target.value)}
+              className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+              placeholder={`<h2 class="...">...</h2>\n<p class="...">...</p>`}
+            />
+          </div>
+        ))}
       </div>
 
       {error && (
@@ -85,7 +106,6 @@ export const DirectInjectStep = ({
         </button>
         <button
           onClick={handleCreate}
-          disabled={!shellJson.trim() || !copyHtml.trim()}
           className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
         >
           Create Pane

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -4,6 +4,8 @@ import { savePaneToLibrary } from '@/utils/compositor/designLibraryHelper';
 import { convertToBackendFormat } from '@/utils/api/brandHelpers';
 import StringInput from '@/components/form/StringInput';
 import { brandConfigStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import type { FlatNode } from '@/types/compositorTypes';
 
 interface SaveToLibraryModalProps {
   paneId: string;
@@ -42,6 +44,7 @@ export function SaveToLibraryModal({
   const [selectedCategory, setSelectedCategory] = useState(OTHER_CATEGORY);
   const [customCategory, setCustomCategory] = useState('');
   const [copyMode, setCopyMode] = useState<CopyMode>('retain');
+  const [locked, setLocked] = useState(false);
   const [saveState, setSaveState] = useState<SaveState>('idle');
   const [error, setError] = useState('');
 
@@ -54,6 +57,34 @@ export function SaveToLibraryModal({
     return [...cats, OTHER_CATEGORY];
   }, [designLibrary]);
 
+  useEffect(() => {
+    const ctx = getCtx();
+    const childIds = ctx.getChildNodeIDs(paneId);
+
+    const hasWidget = (ids: string[]): boolean => {
+      for (const id of ids) {
+        const node = ctx.allNodes.get().get(id) as FlatNode;
+        if (!node) continue;
+
+        // Strict check for widget based on tagName being 'code'
+        if (node.tagName === 'code') {
+          return true;
+        }
+
+        const children = ctx.getChildNodeIDs(id);
+        if (children.length > 0 && hasWidget(children)) {
+          return true;
+        }
+      }
+      return false;
+    };
+
+    if (hasWidget(childIds)) {
+      setLocked(true);
+      setCopyMode('retain');
+    }
+  }, [paneId]);
+
   useEffect(() => {
     if (saveState === 'saved') {
       const timer = setTimeout(() => {
@@ -77,6 +108,7 @@ export function SaveToLibraryModal({
       title: title,
       category: finalCategory,
       copyMode: copyMode,
+      locked: locked,
     };
     const brandConfig = brandConfigStore.get();
 
@@ -90,7 +122,7 @@ export function SaveToLibraryModal({
       if (newBrandConfig) {
         const backendDTO = convertToBackendFormat(newBrandConfig);
         brandConfigStore.set({
-          ...backendDTO, // Use the converted DTO
+          ...backendDTO,
           TENANT_ID: brandConfig.TENANT_ID,
         });
         setSaveState('saved');
@@ -106,7 +138,7 @@ export function SaveToLibraryModal({
 
   return (
     <div
-      className="z-105 fixed inset-0 flex items-center justify-center bg-black/50"
+      className="z-105 fixed inset-0 flex items-center justify-center bg-black bg-opacity-75"
       onClick={saveState === 'idle' ? onClose : undefined}
     >
       <div
@@ -151,38 +183,40 @@ export function SaveToLibraryModal({
             )}
           </div>
 
-          <div>
-            <label className="block text-sm font-bold text-gray-700">
-              Content Mode
-            </label>
-            <fieldset className="mt-2">
-              <legend className="sr-only">Copy Mode</legend>
-              <div className="space-y-2">
-                {copyOptions.map((option) => (
-                  <div key={option.id} className="flex items-center">
-                    <input
-                      id={option.id}
-                      name="copy-mode"
-                      type="radio"
-                      value={option.id}
-                      checked={copyMode === option.id}
-                      onChange={() => setCopyMode(option.id)}
-                      className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-                    />
-                    <label
-                      htmlFor={option.id}
-                      className="ml-3 block text-sm font-bold text-gray-700"
-                    >
-                      {option.title}
-                      <p className="text-xs text-gray-500">
-                        {option.description}
-                      </p>
-                    </label>
-                  </div>
-                ))}
-              </div>
-            </fieldset>
-          </div>
+          {!locked && (
+            <div>
+              <label className="block text-sm font-bold text-gray-700">
+                Content Mode
+              </label>
+              <fieldset className="mt-2">
+                <legend className="sr-only">Copy Mode</legend>
+                <div className="space-y-2">
+                  {copyOptions.map((option) => (
+                    <div key={option.id} className="flex items-center">
+                      <input
+                        id={option.id}
+                        name="copy-mode"
+                        type="radio"
+                        value={option.id}
+                        checked={copyMode === option.id}
+                        onChange={() => setCopyMode(option.id)}
+                        className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                      />
+                      <label
+                        htmlFor={option.id}
+                        className="ml-3 block text-sm font-bold text-gray-700"
+                      >
+                        {option.title}
+                        <p className="text-xs text-gray-500">
+                          {option.description}
+                        </p>
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </fieldset>
+            </div>
+          )}
 
           {error && <p className="text-sm text-red-600">{error}</p>}
         </div>

package/templates/src/constants/prompts.json

@@ -1,43 +1,69 @@
 {
-  "formatPrompt": "Format the response as markdown suitable for a single web page section. Use headings (##, ###, ####), paragraphs, bold (**text**), italics (*text*), and simple links ([text](url)). Do NOT include images, lists, blockquotes, code blocks, horizontal rules, or any complex markdown.",
-  "pagePrompts": {
-    "landing": "Write compelling copy for a landing page section. Focus on a strong headline, clear value proposition, and a call to action. Keep paragraphs concise.",
-    "feature": "Describe a key feature or benefit. Use a clear heading, explain the feature, highlight its advantages, and optionally include a brief user testimonial.",
-    "about": "Write an 'About Us' section. Include a brief company history or mission, introduce key team members (optional), and convey company values.",
-    "contact": "Create a contact section. Provide essential contact information (address, phone, email), potentially include a simple contact form description (no actual form code), and mention business hours.",
-    "faq": "Generate a Frequently Asked Questions (FAQ) section. List common questions as headings (###) and provide clear, concise answers below each.",
-    "testimonial": "Write a customer testimonial section. Include a quote highlighting a positive experience, attribute it to a customer (name/company), and potentially add a brief context.",
-    "cta": "Craft a strong Call to Action (CTA) section. Use an urgent headline, clearly state the desired action, and provide a compelling reason to act now."
-  },
-  "pagePromptsDetails": {
-    "landing": {
-      "title": "Landing Page",
-      "description": "Headline, value prop, CTA"
-    },
-    "feature": {
-      "title": "Feature Section",
-      "description": "Describe a product feature"
-    },
-    "about": {
-      "title": "About Us",
-      "description": "Company mission/values"
+  "aiPromptsIndex": [
+    {
+      "id": "hero_standard",
+      "label": "Hero Section (Standard)",
+      "layout": "standard",
+      "columns": 1,
+      "prompts": {
+        "shell": "aiPaneShellPrompt",
+        "copy": "aiPaneCopyPrompt",
+        "style": "aiPaneStyleOnlyPrompt"
+      },
+      "variants": ["heroDefault"]
     },
-    "contact": {
-      "title": "Contact Info",
-      "description": "How to get in touch"
+    {
+      "id": "hero_2col",
+      "label": "Hero Section (2-Column)",
+      "layout": "grid",
+      "columns": 2,
+      "prompts": {
+        "shell": "aiPaneShellPrompt_2cols",
+        "copy": "aiPaneCopyPrompt_2cols",
+        "style": "aiPaneStyleOnlyPrompt"
+      },
+      "variants": ["heroDefault"]
     },
-    "faq": {
-      "title": "FAQ",
-      "description": "Common questions & answers"
+    {
+      "id": "article_intro",
+      "label": "Article Intro (Standard)",
+      "layout": "standard",
+      "columns": 1,
+      "prompts": {
+        "shell": "aiPaneShellPrompt",
+        "copy": "aiPaneCopyPrompt",
+        "style": "aiPaneStyleOnlyPrompt"
+      },
+      "variants": ["articleIntro"]
     },
-    "testimonial": {
-      "title": "Testimonial",
-      "description": "Customer quote/story"
+    {
+      "id": "article_body",
+      "label": "Article Body (Standard)",
+      "layout": "standard",
+      "columns": 1,
+      "prompts": {
+        "shell": "aiPaneShellPrompt",
+        "copy": "aiPaneCopyPrompt",
+        "style": "aiPaneStyleOnlyPrompt"
+      },
+      "variants": ["articleBody"]
     },
-    "cta": {
-      "title": "Call to Action",
-      "description": "Encourage user action"
+    {
+      "id": "section_header",
+      "label": "Section Header (Standard)",
+      "layout": "standard",
+      "columns": 1,
+      "prompts": {
+        "shell": "aiPaneShellPrompt",
+        "copy": "aiPaneCopyPrompt",
+        "style": "aiPaneStyleOnlyPrompt"
+      },
+      "variants": ["sectionHeader"]
     }
+  ],
+  "aiPaneStyleOnlyPrompt": {
+    "system": "You are an expert **frontend developer**. Your task is to convert **raw Markdown** text into semantic HTML with Tailwind CSS classes based on a provided design theme. **CRITICAL: DO NOT REWRITE, SUMMARIZE, OR CHANGE THE TEXT CONTENT.** Your job is purely structural translation (Markdown -> HTML) and aesthetic formatting.",
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must use. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nHere is the **RAW MARKDOWN** content you must style:\n\"{{COPY_INPUT}}\"\n\nCRITICAL RULES:\n1. **Parse the Markdown:** Convert headings (`##`, `###`) to tags (`<h2>`, `<h3>`), lists (`-`, `1.`) to (`<ul>`, `<ol>`), and formatting (`**`, `*`) to (`<strong>`, `<em>`). **DO NOT use `<h1>` tags.**\n2. **Apply Theme:** Add the Tailwind classes from the Shell's `defaultClasses` to the corresponding HTML tags.\n3. **Visual Rhythm:** 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 to ensure they do not touch.\n4. **Responsive Styles:** For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n5. **Interactive Elements:** If the markdown contains a link `[text](url)` or a clear Call-to-Action phrase, style it as a `<button>` or styled `<a>` tag using the theme's button styles (if available) or high-contrast styling.\n6. **Block Wrapping:** **All text** must be wrapped in a block element like `<p>`, `<h2>`, `<h3>`, or `<li>`.\n7. **Contrast:** Verify that **all text elements** maintain **high contrast** against the `bgColour` provided in the `SHELL_JSON`. Prioritize readability.\n8. **OUTPUT ONLY THE RAW HTML.**"
   },
   "aiPaneShellPrompt": {
     "system": "You are an expert web designer. Your task is to generate the structural design for a component as a single JSON object. Respond *only* with the JSON.",
@@ -47,11 +73,14 @@
     "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-bold 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."
+    "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.",
+    "articleIntro": "A powerful introductory paragraph (Lede) for an article about [topic]. Use large, legible typography (e.g. text-xl or text-2xl) to hook the reader immediately.",
+    "articleBody": "A semantic article body section about [topic]. Use H3 subheadings, prose-style paragraphs, and unordered lists to structure the content for high readability.",
+    "sectionHeader": "A distinct section header (sub-hero) for [topic]. Use a high-contrast background, a prominent H2 title, and a short descriptive lead paragraph to act as a visual divider."
   },
   "aiPaneShellPrompt_2cols": {
     "system": "You are an expert web designer. Your task is to generate the structural design for a component as a single JSON object. Respond *only* with the JSON.",
-    "user_template": "Generate the design JSON for the following component. The component is a 2-column grid layout where the columns stack vertically on mobile. Your task is to design the outer container shell (`parentClasses`), the shared typography theme (`defaultClasses`), and the specific styles for the individual columns (`columns`).\n\nComponent Brief: \"{{COPY_INPUT}}\"\n\nDesign Style: \"{{DESIGN_INPUT}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with the top-level keys: `bgColour`, `parentClasses`, `defaultClasses`, and `columns`.\n2. The `parentClasses` value is for the OUTER container's spacing and width ONLY (e.g. `max-w-7xl`, `py-24`). It is **FORBIDDEN** to include `grid`, `grid-cols-*`, or `gap-*` properties in `parentClasses`. The application will handle the grid creation. Any response violating this rule will be rejected. The `parentClasses` value *must* be an ARRAY of objects.\n3. The `defaultClasses` value defines the theme and *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. The `columns` key *must* be an array containing exactly **two** objects. Each object represents an individual column and must have a `gridClasses` key. The value for `gridClasses` is a responsive object where each key's value is a string of Tailwind classes. This is used to style the column's wrapper. Crucially, you must remember that Tailwind is mobile-first, so you must reset styles at larger breakpoints if needed. For example, to add spacing for the mobile stack that is removed on larger screens, you would use `{ \"mobile\": \"mt-12\", \"tablet\": \"mt-0\" }`.\n5. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards) with the primary text colors defined in `defaultClasses`. Prioritize readability.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#0d1117\",\n  \"parentClasses\": [\n    { \n      \"mobile\": \"mx-auto max-w-7xl\"\n    },\n    {\n      \"mobile\": \"px-6 py-24\",\n      \"tablet\": \"px-8 py-32\"\n    }\n  ],\n  \"defaultClasses\": {\n    \"h2\": {\n      \"mobile\": \"text-4xl font-bold tracking-tight text-white\",\n      \"tablet\": \"text-6xl\"\n    },\n    \"p\": {\n      \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\"\n    }\n  },\n  \"columns\": [\n    {\n      \"gridClasses\": {\n        \"mobile\": \"text-center\",\n        \"tablet\": \"text-left\"\n      }\n    },\n    {\n      \"gridClasses\": {\n        \"mobile\": \"flex flex-col items-center mt-12\",\n        \"tablet\": \"items-start mt-0\"\n      }\n    }\n  ]\n}"
+    "user_template": "Generate the design JSON for the following component. The component is a 2-column grid layout where the columns stack vertically on mobile. Your task is to design the outer container shell (`parentClasses`), the shared typography theme (`defaultClasses`), and the specific styles for the individual columns (`columns`).\n\nComponent Brief: {{COPY_INPUT}}\n\nDesign Style: {{DESIGN_INPUT}}\n\nCRITICAL RULES:\n1. You must respond with a JSON object with the top-level keys: `bgColour`, `parentClasses`, `defaultClasses`, and `columns`.\n2. The `parentClasses` value is for the OUTER container's spacing and width ONLY (e.g. `max-w-7xl`, `py-24`). It is **FORBIDDEN** to include `grid`, `grid-cols-*`, or `gap-*` properties in `parentClasses`. The application will handle the grid creation. Any response violating this rule will be rejected. The `parentClasses` value *must* be an ARRAY of objects.\n3. The `defaultClasses` value defines the theme and *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. The `columns` key *must* be an array containing exactly **two** objects. Each object represents an individual column and must have a `gridClasses` key. The value for `gridClasses` is a responsive object where each key's value is a string of Tailwind classes. This is used to style the column's wrapper. Crucially, you must remember that Tailwind is mobile-first, so you must reset styles at larger breakpoints if needed. For example, to add spacing for the mobile stack that is removed on larger screens, you would use `{ \"mobile\": \"mt-12\", \"tablet\": \"mt-0\" }`.\n5. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards) with the primary text colors defined in `defaultClasses`. Prioritize readability.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#0d1117\",\n  \"parentClasses\": [\n    { \n      \"mobile\": \"mx-auto max-w-7xl\"\n    },\n    {\n      \"mobile\": \"px-6 py-24\",\n      \"tablet\": \"px-8 py-32\"\n    }\n  ],\n  \"defaultClasses\": {\n    \"h2\": {\n      \"mobile\": \"text-4xl font-bold tracking-tight text-white\",\n      \"tablet\": \"text-6xl\"\n    },\n    \"p\": {\n      \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\"\n    }\n  },\n  \"columns\": [\n    {\n      \"gridClasses\": {\n        \"mobile\": \"text-center\",\n        \"tablet\": \"text-left\"\n      }\n    },\n    {\n      \"gridClasses\": {\n        \"mobile\": \"flex flex-col items-center mt-12\",\n        \"tablet\": \"items-start mt-0\"\n      }\n    }\n  ]\n}"
   },
   "aiPaneCopyPrompt_2cols": {
     "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**.",

package/templates/src/constants.ts

@@ -141,6 +141,9 @@ export const toolAddModes = [
   //"aside",
 ] as const;
 
+export const regexpHook =
+  /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|interactiveDisclosure|signup)\((.*)\)$/;
+
 export const toolAddModeTitles: Record<ToolAddMode, string> = {
   p: 'Paragraph',
   h2: 'Heading 2',
@@ -293,9 +296,6 @@ export const contactPersona = [
   },
 ];
 
-export const regexpHook =
-  /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|interactiveDisclosure|signup)\((.*)\)$/;
-
 export const biIcons = [
   '0-circle',
   '0-circle-fill',

package/templates/src/stores/nodes.ts

@@ -35,6 +35,7 @@ import type {
   MenuNode,
   NodeType,
   PaneFragmentNode,
+  BgImageNode,
   PaneNode,
   StoryFragmentNode,
   Tag,
@@ -3199,6 +3200,9 @@ export class NodesContext {
       const allOriginalNodes: TemplateNode[] = [];
       const columnNodes: TemplateMarkdown[] = [];
 
+      // Instantiate generator for column markdown parsing
+      const markdownGen = new MarkdownGenerator(this);
+
       duplicatedGrid.nodes?.forEach((originalColumn) => {
         const newColumn = cloneDeep(originalColumn);
         newColumn.id = ulid();
@@ -3206,12 +3210,22 @@ export class NodesContext {
         oldToNewIdMap.set(originalColumn.id, newColumn.id);
         columnNodes.push(newColumn);
 
-        originalColumn.nodes?.forEach((colNode) => {
-          allOriginalNodes.push(colNode);
-        });
+        if (originalColumn.markdownBody) {
+          const columnContentNodes = markdownGen.markdownToFlatNodes(
+            originalColumn.markdownBody,
+            newColumn.id
+          ) as TemplateNode[];
+          // Add generated nodes directly to allNodes
+          allNodes.push(...columnContentNodes);
+        } else {
+          // Standard flow: collect existing nodes for remapping
+          originalColumn.nodes?.forEach((colNode) => {
+            allOriginalNodes.push(colNode);
+          });
+        }
       });
 
-      // Second pass: Clone all descendant nodes
+      // Second pass: Clone all descendant nodes (only those from the standard flow)
       const allClonedDescendants = allOriginalNodes.map((originalNode) => {
         const newNode = cloneDeep(originalNode);
         newNode.id = ulid();
@@ -3251,6 +3265,15 @@ export class NodesContext {
           breakMobile: visualBreakPane.breakMobile,
         };
         allNodes.push(bgPaneNode);
+      } else if (paneTemplate.bgPane.type === 'background-image') {
+        const bgImagePane = paneTemplate.bgPane as BgImageNode;
+        const bgPaneNode: BgImageNode = {
+          ...bgImagePane,
+          id: bgPaneId,
+          nodeType: 'BgPane',
+          parentId: newPaneId,
+        };
+        allNodes.push(bgPaneNode);
       } else if (paneTemplate.bgPane.type === 'artpack-image') {
         const artpackBgPane = paneTemplate.bgPane as ArtpackImageNode;
         const bgPaneNode: ArtpackImageNode = {

package/templates/src/types/compositorTypes.ts

@@ -281,12 +281,15 @@ export interface MarkdownPaneFragmentNode extends PaneFragmentNode {
   parentClasses?: ParentClassesPayload;
   parentCss?: string[];
   gridClasses?: DefaultClassValue;
+  gridCss?: string;
 }
 
 export interface GridLayoutNode extends PaneFragmentNode {
   nodeType: 'GridLayoutNode';
   type: 'grid-layout';
   parentClasses?: ParentClassesPayload;
+  parentCss?: string;
+  gridCss?: string;
   defaultClasses?: Record<
     string,
     {

package/templates/src/types/tractstack.ts

@@ -4,6 +4,8 @@ export type DesignLibraryEntry = {
   category: string;
   title: string;
   markdownCount: number;
+  retain?: boolean;
+  locked?: boolean;
   template: StoragePane;
 };