astro-tractstack 2.0.29 → 2.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import DocumentPlusIcon from '@heroicons/react/24/outline/DocumentPlusIcon';
 import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import SwatchIcon from '@heroicons/react/24/outline/SwatchIcon';
@@ -12,7 +12,7 @@ import prompts from '@/constants/prompts.json';
 import type { DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
-import { CopyInputStep } from './steps/CopyInputStep';
+import { CopyInputStep, type CopyMode } from './steps/CopyInputStep';
 import { DesignLibraryStep } from './steps/DesignLibraryStep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
@@ -21,6 +21,8 @@ import {
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 import { DirectInjectStep } from './steps/DirectInjectStep';
+import BooleanToggle from '@/components/form/BooleanToggle';
+import EnumSelect from '@/components/form/EnumSelect';
 
 type Step =
   | 'initial'
@@ -33,7 +35,6 @@ type Step =
   | 'directInject';
 
 type InitialChoice = 'library' | 'ai' | 'blank';
-type CopyMode = 'prompt' | 'raw';
 type LayoutChoice = 'standard' | 'grid';
 type ColumnPresetKey = 'left' | 'right';
 
@@ -140,12 +141,13 @@ const AddPaneNewPanel = ({
   const [layoutChoice, setLayoutChoice] = useState<LayoutChoice>('standard');
   const [error, setError] = useState<string | null>(null);
 
-  // Standard / Single Column State
+  const [selectedPromptId, setSelectedPromptId] = useState<string>('');
+  const [isAiStyling, setIsAiStyling] = useState(false);
+
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
 
-  // Grid / 2-Column State (Strictly Prompt-Only)
   const [overallPrompt, setOverallPrompt] = useState(
     prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.default
   );
@@ -155,6 +157,8 @@ const AddPaneNewPanel = ({
   const [promptValueCol2, setPromptValueCol2] = useState(
     prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.right.prompt
   );
+  const [col1Copy, setCol1Copy] = useState('');
+  const [col2Copy, setCol2Copy] = useState('');
 
   const [selectedLibraryEntry, setSelectedLibraryEntry] =
     useState<DesignLibraryEntry | null>(null);
@@ -166,6 +170,52 @@ const AddPaneNewPanel = ({
     additionalNotes: '',
   });
 
+  const promptOptions = useMemo(() => {
+    return prompts.aiPromptsIndex
+      .filter((p) => p.layout === layoutChoice)
+      .map((p) => ({ label: p.label, value: p.id }));
+  }, [layoutChoice]);
+
+  useEffect(() => {
+    if (promptOptions.length > 0) {
+      const currentValid = promptOptions.find(
+        (p) => p.value === selectedPromptId
+      );
+      if (!currentValid) {
+        setSelectedPromptId(promptOptions[0].value);
+      }
+    }
+  }, [promptOptions, selectedPromptId]);
+
+  useEffect(() => {
+    if (!selectedPromptId) return;
+
+    const activeConfig = prompts.aiPromptsIndex.find(
+      (p) => p.id === selectedPromptId
+    );
+    if (!activeConfig) return;
+
+    const promptKey = activeConfig.prompts.copy;
+    const copyPromptGroup = (prompts as any)[promptKey];
+    if (!copyPromptGroup) return;
+
+    const variant = activeConfig.variants
+      ? activeConfig.variants[0]
+      : 'default';
+
+    if (layoutChoice === 'standard') {
+      const newText = copyPromptGroup[variant] || '';
+      setPromptValue(newText);
+    } else if (layoutChoice === 'grid') {
+      const preset = copyPromptGroup.presets?.[variant];
+      if (preset) {
+        setOverallPrompt(preset.default || '');
+        setPromptValueCol1(preset.left?.prompt || '');
+        setPromptValueCol2(preset.right?.prompt || '');
+      }
+    }
+  }, [selectedPromptId, layoutChoice]);
+
   const handleInitialChoice = (choice: InitialChoice) => {
     setInitialChoice(choice);
     setError(null);
@@ -279,6 +329,18 @@ const AddPaneNewPanel = ({
       setLayoutChoice('standard');
     }
 
+    if (entry.locked) {
+      const liveTemplate = convertStorageToLiveTemplate(entry.template);
+      handleApplyTemplate(liveTemplate);
+      return;
+    }
+
+    if (entry.retain) {
+      setCopyMode('original');
+    } else {
+      setCopyMode('prompt');
+    }
+
     setStep('copyInput');
   };
 
@@ -295,27 +357,60 @@ const AddPaneNewPanel = ({
         const liveTemplate = convertStorageToLiveTemplate(
           selectedLibraryEntry.template
         );
+
+        if (copyMode === 'original') {
+          handleApplyTemplate(liveTemplate);
+          return;
+        }
+
         const shellResult = convertTemplateToAIShell(liveTemplate);
         const layout = 'Text Only';
 
         if (layoutChoice === 'grid' && liveTemplate.gridLayout) {
+          if (copyMode === 'raw' && isAiStyling) {
+            const activeConfig =
+              prompts.aiPromptsIndex.find((p) => p.id === selectedPromptId) ||
+              prompts.aiPromptsIndex.find((p) => p.layout === 'grid') ||
+              prompts.aiPromptsIndex[0];
+
+            const stylePromptKey = activeConfig.prompts.style;
+            const stylePromptDetails = (prompts as any)[stylePromptKey];
+
+            const copyResults: string[] = [];
+            const rawContents = [col1Copy, col2Copy];
+
+            for (const rawContent of rawContents) {
+              const formattedStylePrompt = stylePromptDetails.user_template
+                .replace('{{SHELL_JSON}}', shellResult)
+                .replace('{{COPY_INPUT}}', rawContent);
+
+              const styledResult = await callAskLemurAPI(
+                formattedStylePrompt,
+                stylePromptDetails.system || '',
+                false,
+                isSandboxMode
+              );
+              copyResults.push(styledResult);
+            }
+            const finalPane = parseAiPane(shellResult, copyResults, layout);
+            handleApplyTemplate(finalPane);
+            return;
+          }
+
+          if (copyMode === 'raw') {
+            const nodes = liveTemplate.gridLayout.nodes;
+            if (nodes && nodes[0]) nodes[0].markdownBody = col1Copy;
+            if (nodes && nodes[1]) nodes[1].markdownBody = col2Copy;
+            handleApplyTemplate(liveTemplate);
+            return;
+          }
+
           const copyPromptDetails = prompts.aiPaneCopyPrompt_2cols;
           const preset = copyPromptDetails.presets.heroDefault;
           const copyResults: string[] = [];
-
-          // Only prompt mode supported for grid now
-          const promptsToRun: {
-            prompt: string;
-            presetKey: ColumnPresetKey;
-          }[] = [
-            {
-              prompt: promptValueCol1,
-              presetKey: 'left',
-            },
-            {
-              prompt: promptValueCol2,
-              presetKey: 'right',
-            },
+          const promptsToRun = [
+            { prompt: promptValueCol1, presetKey: 'left' as ColumnPresetKey },
+            { prompt: promptValueCol2, presetKey: 'right' as ColumnPresetKey },
           ];
 
           for (const item of promptsToRun) {
@@ -339,16 +434,36 @@ const AddPaneNewPanel = ({
             );
             copyResults.push(copyResult);
           }
-
           const finalPane = parseAiPane(shellResult, copyResults, layout);
           handleApplyTemplate(finalPane);
         } else if (layoutChoice === 'standard' && liveTemplate.markdown) {
+          if (copyMode === 'raw' && isAiStyling) {
+            const activeConfig =
+              prompts.aiPromptsIndex.find((p) => p.id === selectedPromptId) ||
+              prompts.aiPromptsIndex[0];
+            const stylePromptKey = activeConfig.prompts.style;
+            const stylePromptDetails = (prompts as any)[stylePromptKey];
+
+            const formattedStylePrompt = stylePromptDetails.user_template
+              .replace('{{SHELL_JSON}}', shellResult)
+              .replace('{{COPY_INPUT}}', copyValue);
+
+            const styledResult = await callAskLemurAPI(
+              formattedStylePrompt,
+              stylePromptDetails.system || '',
+              false,
+              isSandboxMode
+            );
+            const finalPane = parseAiPane(shellResult, styledResult, layout);
+            handleApplyTemplate(finalPane);
+            return;
+          }
+
           if (copyMode === 'raw') {
             liveTemplate.markdown.markdownBody = copyValue;
             handleApplyTemplate(liveTemplate);
             return;
           }
-
           if (copyMode === 'prompt') {
             if (!shellResult || shellResult === '{}') {
               throw new Error(
@@ -387,6 +502,11 @@ const AddPaneNewPanel = ({
           );
         }
       } else if (initialChoice === 'ai') {
+        const activeConfig = prompts.aiPromptsIndex.find(
+          (p) => p.id === selectedPromptId
+        );
+        if (!activeConfig) throw new Error('Selected prompt type not found.');
+
         let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
         if (aiDesignConfig.baseColor)
           designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
@@ -396,9 +516,11 @@ const AddPaneNewPanel = ({
           designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
 
         const layout = 'Text Only';
+        const promptMap = prompts as any;
 
         if (layoutChoice === 'standard') {
-          const shellPromptDetails = prompts.aiPaneShellPrompt;
+          const shellPromptKey = activeConfig.prompts.shell;
+          const shellPromptDetails = promptMap[shellPromptKey];
           const formattedShellPrompt = shellPromptDetails.user_template
             .replace('{{DESIGN_INPUT}}', designInput)
             .replace('{{LAYOUT_TYPE}}', layout);
@@ -410,7 +532,8 @@ const AddPaneNewPanel = ({
             isSandboxMode
           );
 
-          const copyPromptDetails = prompts.aiPaneCopyPrompt;
+          const copyPromptKey = activeConfig.prompts.copy;
+          const copyPromptDetails = promptMap[copyPromptKey];
           const copyInputContent =
             copyMode === 'prompt' ? promptValue : copyValue;
           const formattedCopyPrompt = copyPromptDetails.user_template
@@ -428,7 +551,8 @@ const AddPaneNewPanel = ({
           const finalPane = parseAiPane(shellResult, copyResult, layout);
           handleApplyTemplate(finalPane);
         } else if (layoutChoice === 'grid') {
-          const shellPromptDetails = prompts.aiPaneShellPrompt_2cols;
+          const shellPromptKey = activeConfig.prompts.shell;
+          const shellPromptDetails = promptMap[shellPromptKey];
           const formattedShellPrompt = shellPromptDetails.user_template
             .replace('{{COPY_INPUT}}', overallPrompt)
             .replace('{{DESIGN_INPUT}}', designInput);
@@ -440,23 +564,16 @@ const AddPaneNewPanel = ({
             isSandboxMode
           );
 
-          const copyPromptDetails = prompts.aiPaneCopyPrompt_2cols;
-          const preset = copyPromptDetails.presets.heroDefault;
+          const copyPromptKey = activeConfig.prompts.copy;
+          const copyPromptDetails = promptMap[copyPromptKey];
+          const preset =
+            copyPromptDetails.presets?.[activeConfig.variants[0]] ||
+            copyPromptDetails.presets?.heroDefault;
           const copyResults: string[] = [];
 
-          // Grid is strictly prompt-based
-          const promptsToRun: {
-            prompt: string;
-            presetKey: ColumnPresetKey;
-          }[] = [
-            {
-              prompt: promptValueCol1,
-              presetKey: 'left',
-            },
-            {
-              prompt: promptValueCol2,
-              presetKey: 'right',
-            },
+          const promptsToRun = [
+            { prompt: promptValueCol1, presetKey: 'left' as ColumnPresetKey },
+            { prompt: promptValueCol2, presetKey: 'right' as ColumnPresetKey },
           ];
 
           for (const item of promptsToRun) {
@@ -491,6 +608,8 @@ const AddPaneNewPanel = ({
     copyMode,
     promptValue,
     copyValue,
+    col1Copy,
+    col2Copy,
     overallPrompt,
     promptValueCol1,
     promptValueCol2,
@@ -499,6 +618,8 @@ const AddPaneNewPanel = ({
     layoutChoice,
     selectedLibraryEntry,
     handleApplyTemplate,
+    selectedPromptId,
+    isAiStyling,
   ]);
 
   const renderInitialStep = () => (
@@ -584,50 +705,160 @@ const AddPaneNewPanel = ({
   const renderContentStep = () => {
     if (layoutChoice === 'grid') {
       const isGenerateDisabled =
-        !overallPrompt.trim() ||
-        !promptValueCol1.trim() ||
-        !promptValueCol2.trim();
+        copyMode === 'prompt'
+          ? !overallPrompt.trim() ||
+            !promptValueCol1.trim() ||
+            !promptValueCol2.trim()
+          : copyMode === 'raw'
+            ? !col1Copy.trim() || !col2Copy.trim()
+            : false;
 
       return (
         <div className="space-y-4 p-4">
-          <div>
-            <label className="mb-2 block text-sm font-bold text-gray-700">
-              Overall Component Brief
-            </label>
-            <textarea
-              value={overallPrompt}
-              onChange={(e) => setOverallPrompt(e.target.value)}
-              rows={3}
-              className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
-            />
-            <p className="mt-1 text-xs text-gray-500">
-              This context is applied to both columns.
-            </p>
-          </div>
-          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-            <div>
-              <label className="mb-2 block text-sm font-bold text-gray-700">
-                Left Column Prompt
-              </label>
-              <textarea
-                value={promptValueCol1}
-                onChange={(e) => setPromptValueCol1(e.target.value)}
-                rows={4}
-                className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+          <label className="block text-lg font-bold text-gray-800">
+            1. Provide Content
+          </label>
+
+          <div className="my-2 flex flex-wrap gap-4">
+            <div className="flex items-center space-x-2">
+              <input
+                type="radio"
+                checked={copyMode === 'prompt'}
+                onChange={() => setCopyMode('prompt')}
+                className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
+              <label className="text-sm font-bold text-gray-700">Prompt</label>
             </div>
-            <div>
-              <label className="mb-2 block text-sm font-bold text-gray-700">
-                Right Column Prompt
-              </label>
-              <textarea
-                value={promptValueCol2}
-                onChange={(e) => setPromptValueCol2(e.target.value)}
-                rows={4}
-                className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            <div className="flex items-center space-x-2">
+              <input
+                type="radio"
+                checked={copyMode === 'raw'}
+                onChange={() => setCopyMode('raw')}
+                className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
+              <label className="text-sm font-bold text-gray-700">
+                Manual Markdown
+              </label>
             </div>
+            {selectedLibraryEntry?.retain && (
+              <div className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  checked={copyMode === 'original'}
+                  onChange={() => setCopyMode('original')}
+                  className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                />
+                <label className="text-sm font-bold text-gray-700">
+                  Use Original
+                </label>
+              </div>
+            )}
           </div>
+
+          {copyMode === 'raw' && initialChoice === 'library' && (
+            <div className="mb-4 flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 p-2">
+              <span className="text-sm text-gray-600">
+                Style this content with AI?
+              </span>
+              <div className="flex items-center">
+                <BooleanToggle
+                  label="AI Styles"
+                  value={isAiStyling}
+                  onChange={setIsAiStyling}
+                  size="sm"
+                />
+              </div>
+            </div>
+          )}
+
+          {copyMode === 'prompt' && (
+            <>
+              <div className="mb-4">
+                <EnumSelect
+                  label="Section Type"
+                  value={selectedPromptId}
+                  onChange={setSelectedPromptId}
+                  options={promptOptions}
+                  placeholder="Select a section type..."
+                  className="w-full"
+                />
+              </div>
+              <div>
+                <label className="mb-2 block text-sm font-bold text-gray-700">
+                  Overall Component Brief
+                </label>
+                <textarea
+                  value={overallPrompt}
+                  onChange={(e) => setOverallPrompt(e.target.value)}
+                  rows={3}
+                  className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                />
+                <p className="mt-1 text-xs text-gray-500">
+                  This context is applied to both columns.
+                </p>
+              </div>
+              <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+                <div>
+                  <label className="mb-2 block text-sm font-bold text-gray-700">
+                    Left Column Prompt
+                  </label>
+                  <textarea
+                    value={promptValueCol1}
+                    onChange={(e) => setPromptValueCol1(e.target.value)}
+                    rows={4}
+                    className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                  />
+                </div>
+                <div>
+                  <label className="mb-2 block text-sm font-bold text-gray-700">
+                    Right Column Prompt
+                  </label>
+                  <textarea
+                    value={promptValueCol2}
+                    onChange={(e) => setPromptValueCol2(e.target.value)}
+                    rows={4}
+                    className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+          {copyMode === 'raw' && (
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <div>
+                <label className="mb-2 block text-sm font-bold text-gray-700">
+                  Left Column Markdown
+                </label>
+                <textarea
+                  value={col1Copy}
+                  onChange={(e) => setCol1Copy(e.target.value)}
+                  rows={8}
+                  className="block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                />
+              </div>
+              <div>
+                <label className="mb-2 block text-sm font-bold text-gray-700">
+                  Right Column Markdown
+                </label>
+                <textarea
+                  value={col2Copy}
+                  onChange={(e) => setCol2Copy(e.target.value)}
+                  rows={8}
+                  className="block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                />
+              </div>
+            </div>
+          )}
+
+          {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 className="flex justify-between">
             <button
               onClick={handleBack}
@@ -656,11 +887,18 @@ const AddPaneNewPanel = ({
           onPromptValueChange={setPromptValue}
           copyValue={copyValue}
           onCopyValueChange={setCopyValue}
+          hasRetainedContent={selectedLibraryEntry?.retain}
           defaultPrompt={
             first
               ? prompts.aiPaneCopyPrompt.heroDefault
               : prompts.aiPaneCopyPrompt.contentDefault
           }
+          promptOptions={promptOptions}
+          selectedPromptId={selectedPromptId}
+          onSelectedPromptIdChange={setSelectedPromptId}
+          isAiStyling={isAiStyling}
+          onIsAiStylingChange={setIsAiStyling}
+          showStyleToggle={initialChoice === 'library'}
         />
         <div className="flex justify-between">
           <button
@@ -672,7 +910,11 @@ const AddPaneNewPanel = ({
           <button
             onClick={handleFinalGenerate}
             disabled={
-              copyMode === 'prompt' ? !promptValue.trim() : !copyValue.trim()
+              copyMode === 'prompt'
+                ? !promptValue.trim()
+                : copyMode === 'raw'
+                  ? !copyValue.trim()
+                  : false
             }
             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"
           >
@@ -732,7 +974,11 @@ const AddPaneNewPanel = ({
   );
 
   const renderDirectInjectStep = () => (
-    <DirectInjectStep onBack={handleBack} onCreatePane={handleApplyTemplate} />
+    <DirectInjectStep
+      onBack={handleBack}
+      onCreatePane={handleApplyTemplate}
+      layout={layoutChoice}
+    />
   );
 
   const renderLoading = () => (

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

@@ -3199,6 +3199,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 +3209,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();

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;
 };
 

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

@@ -62,7 +62,7 @@ function convertLiveNodeToStorageNode(
     fileId: copyMode === 'retain' ? node.fileId : undefined,
     buttonPayload: copyMode === 'retain' ? node.buttonPayload : undefined,
     codeHookParams: copyMode === 'retain' ? node.codeHookParams : undefined,
-    elementCss: copyMode === 'retain' ? node.elementCss : undefined,
+    copy: copyMode === 'retain' ? node.copy : undefined,
   };
 
   const childIds = ctx.getChildNodeIDs(node.id);
@@ -500,7 +500,8 @@ function convertLivePaneToStoragePane(
           : [],
     };
   } else if (gridLayoutNode) {
-    const { id, parentId, isChanged, ...restOfGrid } = gridLayoutNode;
+    const { id, parentId, isChanged, parentCss, gridCss, ...restOfGrid } =
+      gridLayoutNode;
     storageGridLayout = {
       ...restOfGrid,
       nodes: ctx
@@ -517,6 +518,7 @@ function convertLivePaneToStoragePane(
             isChanged,
             markdownId,
             parentCss,
+            gridCss,
             ...restOfColumn
           } = columnNode;
 
@@ -584,10 +586,11 @@ export async function savePaneToLibrary(
     title: string;
     category: string;
     copyMode: CopyMode;
+    locked?: boolean;
   }
 ): Promise<BrandConfigState | null> {
   const ctx = getCtx();
-  const { title, category, copyMode } = formData;
+  const { title, category, copyMode, locked } = formData;
 
   const newStoragePane = convertLivePaneToStoragePane(paneId, ctx, {
     title,
@@ -613,6 +616,8 @@ export async function savePaneToLibrary(
     title: title,
     markdownCount: actualMarkdownCount,
     template: newStoragePane,
+    retain: copyMode === 'retain',
+    locked: !!locked,
   };
 
   const currentState: BrandConfigState = convertToLocalState(config);

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

@@ -93,24 +93,6 @@ export const isMarkdownPaneFragmentNode = (
   );
 };
 
-interface WidgetNode extends FlatNode {
-  tagName: 'code';
-  codeHookParams: (string | string[])[];
-  copy: string;
-}
-
-export const isWidgetNode = (
-  node: BaseNode | FlatNode | null
-): node is WidgetNode => {
-  return (
-    node !== null &&
-    'tagName' in node &&
-    node.tagName === 'code' &&
-    'codeHookParams' in node &&
-    Array.isArray(node.codeHookParams)
-  );
-};
-
 export function hasTagName(
   node: BaseNode | null | undefined
 ): node is FlatNode {