astro-tractstack 2.0.18 → 2.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "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

@@ -3,6 +3,8 @@ import { useState, useCallback } 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';
+import SquaresPlusIcon from '@heroicons/react/24/outline/SquaresPlusIcon';
+import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
 import { NodesContext, getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import { hasAssemblyAIStore } from '@/stores/storykeep';
@@ -25,6 +27,7 @@ type Step =
   | 'initial'
   | 'copyInput'
   | 'designLibrary'
+  | 'layoutChoice'
   | 'aiDesign'
   | 'loading'
   | 'error'
@@ -32,6 +35,8 @@ type Step =
 
 type InitialChoice = 'library' | 'ai' | 'blank';
 type CopyMode = 'prompt' | 'raw';
+type LayoutChoice = 'standard' | 'grid';
+type ColumnPresetKey = 'left' | 'right';
 
 interface GenerationResponse {
   success: boolean;
@@ -135,10 +140,23 @@ const AddPaneNewPanel = ({
   const [initialChoice, setInitialChoice] = useState<InitialChoice | null>(
     null
   );
+  const [layoutChoice, setLayoutChoice] = useState<LayoutChoice>('standard');
   const [error, setError] = useState<string | null>(null);
+
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
+
+  const [overallPrompt, setOverallPrompt] = useState(
+    prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.default
+  );
+  const [copyModeCol1, setCopyModeCol1] = useState<CopyMode>('prompt');
+  const [promptValueCol1, setPromptValueCol1] = useState('');
+  const [copyValueCol1, setCopyValueCol1] = useState('');
+  const [copyModeCol2, setCopyModeCol2] = useState<CopyMode>('prompt');
+  const [promptValueCol2, setPromptValueCol2] = useState('');
+  const [copyValueCol2, setCopyValueCol2] = useState('');
+
   const [selectedLibraryEntry, setSelectedLibraryEntry] =
     useState<DesignLibraryEntry | null>(null);
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
@@ -158,10 +176,15 @@ const AddPaneNewPanel = ({
     } else if (choice === 'library') {
       setStep('designLibrary');
     } else if (choice === 'ai') {
-      setStep('aiDesign');
+      setStep('layoutChoice');
     }
   };
 
+  const handleLayoutChoice = (choice: LayoutChoice) => {
+    setLayoutChoice(choice);
+    setStep('aiDesign');
+  };
+
   const handleBack = () => {
     setError(null);
     if (step === 'copyInput') {
@@ -172,13 +195,13 @@ const AddPaneNewPanel = ({
       } else {
         setStep('initial');
       }
+    } else if (step === 'aiDesign') {
+      setStep('layoutChoice');
     } else if (step === 'directInject') {
       setStep('aiDesign');
-    } else if (
-      step === 'designLibrary' ||
-      step === 'aiDesign' ||
-      step === 'error'
-    ) {
+    } else if (step === 'layoutChoice') {
+      setStep('initial');
+    } else if (step === 'designLibrary' || step === 'error') {
       setStep('initial');
     }
   };
@@ -214,7 +237,7 @@ const AddPaneNewPanel = ({
     setStep('copyInput');
   };
 
-  const handleApplyTemplate = async (template: TemplatePane) => {
+  const handleApplyTemplate = async (template: any) => {
     if (!ctx) return;
     try {
       const insertTemplate = cloneDeep(template);
@@ -326,38 +349,102 @@ const AddPaneNewPanel = ({
         if (aiDesignConfig.additionalNotes)
           designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
 
-        const shellPromptDetails = prompts.aiPaneShellPrompt;
-        const copyPromptDetails = prompts.aiPaneCopyPrompt;
         const layout = 'Text Only';
 
-        const formattedShellPrompt = shellPromptDetails.user_template
-          .replace('{{DESIGN_INPUT}}', designInput)
-          .replace('{{LAYOUT_TYPE}}', layout);
-
-        const shellResult = await callAskLemurAPI(
-          formattedShellPrompt,
-          shellPromptDetails.system || '',
-          true,
-          isSandboxMode
-        );
-
-        const copyInputContent =
-          copyMode === 'prompt' ? promptValue : copyValue;
-        const formattedCopyPrompt = copyPromptDetails.user_template
-          .replace('{{COPY_INPUT}}', copyInputContent)
-          .replace('{{DESIGN_INPUT}}', designInput)
-          .replace('{{LAYOUT_TYPE}}', layout)
-          .replace('{{SHELL_JSON}}', shellResult);
-
-        const copyResult = await callAskLemurAPI(
-          formattedCopyPrompt,
-          copyPromptDetails.system || '',
-          false,
-          isSandboxMode
-        );
-
-        const finalPane = parseAiPane(shellResult, copyResult, layout);
-        handleApplyTemplate(finalPane);
+        if (layoutChoice === 'standard') {
+          const shellPromptDetails = prompts.aiPaneShellPrompt;
+          const formattedShellPrompt = shellPromptDetails.user_template
+            .replace('{{DESIGN_INPUT}}', designInput)
+            .replace('{{LAYOUT_TYPE}}', layout);
+
+          const shellResult = await callAskLemurAPI(
+            formattedShellPrompt,
+            shellPromptDetails.system || '',
+            true,
+            isSandboxMode
+          );
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt;
+          const copyInputContent =
+            copyMode === 'prompt' ? promptValue : copyValue;
+          const formattedCopyPrompt = copyPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', copyInputContent)
+            .replace('{{DESIGN_INPUT}}', designInput)
+            .replace('{{LAYOUT_TYPE}}', layout)
+            .replace('{{SHELL_JSON}}', shellResult);
+
+          const copyResult = await callAskLemurAPI(
+            formattedCopyPrompt,
+            copyPromptDetails.system || '',
+            false,
+            isSandboxMode
+          );
+          const finalPane = parseAiPane(shellResult, copyResult, layout);
+          handleApplyTemplate(finalPane);
+        } else if (layoutChoice === 'grid') {
+          const shellPromptDetails = prompts.aiPaneShellPrompt_2cols;
+          const formattedShellPrompt = shellPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', overallPrompt)
+            .replace('{{DESIGN_INPUT}}', designInput);
+
+          const shellResult = await callAskLemurAPI(
+            formattedShellPrompt,
+            shellPromptDetails.system || '',
+            true,
+            isSandboxMode
+          );
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt_2cols;
+          const preset = copyPromptDetails.presets.heroDefault;
+          const copyResults: string[] = [];
+
+          const promptsToRun: {
+            prompt: string;
+            copy: string;
+            mode: CopyMode;
+            presetKey: ColumnPresetKey;
+          }[] = [
+            {
+              prompt: promptValueCol1,
+              copy: copyValueCol1,
+              mode: copyModeCol1,
+              presetKey: 'left',
+            },
+            {
+              prompt: promptValueCol2,
+              copy: copyValueCol2,
+              mode: copyModeCol2,
+              presetKey: 'right',
+            },
+          ];
+
+          for (const item of promptsToRun) {
+            if (item.mode === 'raw') {
+              copyResults.push(item.copy);
+              continue;
+            }
+
+            const columnPreset = preset[item.presetKey];
+            const formattedCopyPrompt = copyPromptDetails.user_template
+              .replace('{{SHELL_JSON}}', shellResult)
+              .replace('{{COPY_INPUT}}', overallPrompt)
+              .replace('{{COLUMN_PROMPT}}', item.prompt)
+              .replace('{{DESIGN_INPUT}}', designInput)
+              .replace('{{LAYOUT_TYPE}}', layout)
+              .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
+
+            const copyResult = await callAskLemurAPI(
+              formattedCopyPrompt,
+              copyPromptDetails.system || '',
+              false,
+              isSandboxMode
+            );
+            copyResults.push(copyResult);
+          }
+
+          const finalPane = parseAiPane(shellResult, copyResults, layout);
+          handleApplyTemplate(finalPane);
+        }
       }
     } catch (err: any) {
       setError(err.message || 'Failed to generate AI pane.');
@@ -368,8 +455,16 @@ const AddPaneNewPanel = ({
     copyMode,
     promptValue,
     copyValue,
+    overallPrompt,
+    copyModeCol1,
+    promptValueCol1,
+    copyValueCol1,
+    copyModeCol2,
+    promptValueCol2,
+    copyValueCol2,
     isSandboxMode,
     initialChoice,
+    layoutChoice,
     selectedLibraryEntry,
     handleApplyTemplate,
   ]);
@@ -416,41 +511,157 @@ const AddPaneNewPanel = ({
     </div>
   );
 
-  const renderContentStep = () => (
-    <div className="space-y-4 p-4">
-      <CopyInputStep
-        copyMode={copyMode}
-        onCopyModeChange={setCopyMode}
-        promptValue={promptValue}
-        onPromptValueChange={setPromptValue}
-        copyValue={copyValue}
-        onCopyValueChange={setCopyValue}
-        defaultPrompt={
-          first
-            ? prompts.aiPaneCopyPrompt.heroDefault
-            : prompts.aiPaneCopyPrompt.contentDefault
-        }
-      />
-      <div className="flex justify-between">
+  const renderLayoutChoiceStep = () => (
+    <div className="p-4">
+      <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
+        Choose a Layout Structure
+      </h3>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         <button
-          onClick={handleBack}
-          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+          onClick={() => handleLayoutChoice('standard')}
+          className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
-          ← Back
+          <DocumentIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
+          <h4 className="font-bold text-gray-800">Standard Layout</h4>
+          <p className="text-sm text-gray-600">
+            A single, continuous column of content.
+          </p>
         </button>
         <button
-          onClick={handleFinalGenerate}
-          disabled={
-            copyMode === 'prompt' ? !promptValue.trim() : !copyValue.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"
+          onClick={() => handleLayoutChoice('grid')}
+          className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
-          ✨ Generate Pane
+          <SquaresPlusIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
+          <h4 className="font-bold text-gray-800">2-Column Grid</h4>
+          <p className="text-sm text-gray-600">
+            Side-by-side content that stacks on mobile.
+          </p>
+        </button>
+      </div>
+      <div className="mt-6 flex justify-center">
+        <button
+          onClick={handleBack}
+          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+        >
+          ← Back
         </button>
       </div>
     </div>
   );
 
+  const renderContentStep = () => {
+    if (layoutChoice === 'grid') {
+      const isGenerateDisabled =
+        (copyModeCol1 === 'prompt' && !promptValueCol1.trim()) ||
+        (copyModeCol1 === 'raw' && !copyValueCol1.trim()) ||
+        (copyModeCol2 === 'prompt' && !promptValueCol2.trim()) ||
+        (copyModeCol2 === 'raw' && !copyValueCol2.trim()) ||
+        !overallPrompt.trim();
+
+      return (
+        <div className="space-y-4 p-4">
+          <div>
+            <h4 className="mb-2 block text-sm font-bold text-gray-700">
+              Overall Component Brief
+            </h4>
+            <textarea
+              value={overallPrompt}
+              onChange={(e) => setOverallPrompt(e.target.value)}
+              placeholder="e.g., A compelling hero section for a website about Tract Stack..."
+              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"
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div>
+              <h4 className="mb-2 block text-sm font-bold text-gray-700">
+                Left Column Content
+              </h4>
+              <CopyInputStep
+                copyMode={copyModeCol1}
+                onCopyModeChange={setCopyModeCol1}
+                promptValue={promptValueCol1}
+                onPromptValueChange={setPromptValueCol1}
+                copyValue={copyValueCol1}
+                onCopyValueChange={setCopyValueCol1}
+                defaultPrompt={
+                  prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.left.prompt
+                }
+              />
+            </div>
+            <div>
+              <h4 className="mb-2 block text-sm font-bold text-gray-700">
+                Right Column Content
+              </h4>
+              <CopyInputStep
+                copyMode={copyModeCol2}
+                onCopyModeChange={setCopyModeCol2}
+                promptValue={promptValueCol2}
+                onPromptValueChange={setPromptValueCol2}
+                copyValue={copyValueCol2}
+                onCopyValueChange={setCopyValueCol2}
+                defaultPrompt={
+                  prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.right
+                    .prompt
+                }
+              />
+            </div>
+          </div>
+          <div className="flex justify-between">
+            <button
+              onClick={handleBack}
+              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+            >
+              ← Back
+            </button>
+            <button
+              onClick={handleFinalGenerate}
+              disabled={isGenerateDisabled}
+              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"
+            >
+              ✨ Generate Pane
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="space-y-4 p-4">
+        <CopyInputStep
+          copyMode={copyMode}
+          onCopyModeChange={setCopyMode}
+          promptValue={promptValue}
+          onPromptValueChange={setPromptValue}
+          copyValue={copyValue}
+          onCopyValueChange={setCopyValue}
+          defaultPrompt={
+            first
+              ? prompts.aiPaneCopyPrompt.heroDefault
+              : prompts.aiPaneCopyPrompt.contentDefault
+          }
+        />
+        <div className="flex justify-between">
+          <button
+            onClick={handleBack}
+            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
+          >
+            ← Back
+          </button>
+          <button
+            onClick={handleFinalGenerate}
+            disabled={
+              copyMode === 'prompt' ? !promptValue.trim() : !copyValue.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"
+          >
+            ✨ Generate Pane
+          </button>
+        </div>
+      </div>
+    );
+  };
+
   const renderDesignLibraryStep = () => (
     <div className="space-y-4 p-4">
       <div className="flex justify-start">
@@ -532,6 +743,8 @@ const AddPaneNewPanel = ({
     switch (step) {
       case 'initial':
         return renderInitialStep();
+      case 'layoutChoice':
+        return renderLayoutChoiceStep();
       case 'copyInput':
         return renderContentStep();
       case 'designLibrary':

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

@@ -406,7 +406,7 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
         <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
           <Dialog.Content
             className="flex flex-col rounded-lg bg-white shadow-2xl"
-            style={{ height: '90vw', width: '90vw' }}
+            style={{ maxHeight: '90vw', width: '90vw' }}
           >
             <header className="flex items-center justify-between border-b p-4">
               <Dialog.Title className="text-xl font-bold">

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -28,7 +28,6 @@ const StyleImagePanel = ({
   outerContainerNode,
   parentNode,
 }: StyleImagePanelProps) => {
-  console.log(`StyleImagePanel`, parentNode, node);
   const [altDescription, setAltDescription] = useState(node.alt || '');
 
   const imgDefaultClasses = parentNode.defaultClasses?.[node.tagName];

package/templates/src/constants/prompts.json

@@ -41,12 +41,33 @@
   },
   "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.",
-    "user_template": "Generate the design JSON for a component with the following characteristics:\n\nDesign Style: \"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with keys: `bgColour`, `parentClasses`, `defaultClasses`.\n2. The `parentClasses` value *must* be structured with our internal responsive object schema (e.g., `[ { \"mobile\": { \"px\": \"4\", \"py\": \"12\" } } ]`).\n3. The `defaultClasses` value *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) with the primary text colors defined in `defaultClasses`.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#050710\",\n  \"parentClasses\": [\n    { \"mobile\": { \"px\": \"6\", \"py\": \"24\" }, \"tablet\": { \"px\": \"8\", \"py\": \"32\" } },\n    { \"mobile\": { \"mx\": \"auto\", \"maxW\": \"2xl\", \"textALIGN\": \"center\" }, \"tablet\": { \"maxW\": \"4xl\" } }\n  ],\n  \"defaultClasses\": {\n    \"h2\": { \"mobile\": \"text-4xl font-bold tracking-tight text-white mt-4\", \"tablet\": \"text-6xl\", \"desktop\": \"text-7xl\" },\n    \"p\": { \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\", \"tablet\": \"text-xl\", \"desktop\": \"\" }\n  }\n}"
+    "user_template": "Generate the design JSON for a component with the following characteristics:\n\nDesign Style: \"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You must respond with a JSON object with keys: `bgColour`, `parentClasses`, `defaultClasses`.\n2. The `parentClasses` value *must* be an array of objects. Each object must have `mobile`, `tablet`, or `desktop` keys, and their values *must* be a single string of space-separated Tailwind CSS classes.\n3. The `defaultClasses` value *must* be structured with responsive keys (`mobile`, `tablet`, `desktop`) containing Tailwind class strings.\n4. Ensure the selected `bgColour` provides **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) with the primary text colors defined in `defaultClasses`.\n\nEXAMPLE:\n{\n  \"bgColour\": \"#050710\",\n  \"parentClasses\": [\n    { \"mobile\": \"mx-auto max-w-2xl text-center\", \"tablet\": \"max-w-4xl\" },\n    { \"mobile\": \"px-6 py-24\", \"tablet\": \"px-8 py-32\" }\n  ],\n  \"defaultClasses\": {\n    \"h2\": { \"mobile\": \"text-4xl font-bold tracking-tight text-white mt-4\", \"tablet\": \"text-6xl\", \"desktop\": \"text-7xl\" },\n    \"p\": { \"mobile\": \"text-lg leading-8 text-gray-300 mt-6\", \"tablet\": \"text-xl\", \"desktop\": \"\" }\n  }\n}"
   },
   "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-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."
+  },
+  "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}"
+  },
+  "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**.",
+    "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* a column defined by this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs. Your primary goal is to perform the following specific task for this single column. Use the \"Overall Component Brief\" only for context about the product or topic.\n\nSPECIFIC TASK: \"{{COLUMN_PROMPT}}\"\nOverall Component Brief (for context only): \"{{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**. Each element should be a separate block element.\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, including secondary links, must** be wrapped in a block element like `<p>` or `<button>`. Even when placing CTAs side-by-side in a `div`, this rule MUST be followed.\n6. 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**.\n7. Respond *only* with the raw HTML.\n\nEXAMPLE of a good response for THIS SPECIFIC TASK:\n{{COLUMN_EXAMPLE}}",
+    "presets": {
+      "heroDefault": {
+        "default": "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.",
+        "left": {
+          "prompt": "Generate a slogan with very large typography. Just the slogan in this column.",
+          "example": "<h2 class=\"text-4xl font-bold tracking-tight text-slate-100 md:text-5xl xl:text-6xl\">\n<span class=\"block\">Orchestrate Complexity.</span>\n<span class=\"block bg-gradient-to-r from-sky-400 to-cyan-300 bg-clip-text text-transparent md:mt-2\">Deploy with Certainty.</span>\n</h2>"
+        },
+        "right": {
+          "prompt": "Generate a small sub-heading, a brief compelling paragraph of hook text, and two vertically stacked call-to-action buttons below it.",
+          "example": "<h3 class=\"text-xl font-bold text-white\">Join us this week</h3>\n<p class=\"mt-4 text-lg leading-8 text-gray-300\">We're all about creating a place where anyone and everyone can know God & encounter Him.</p>\n<button class=\"mt-8 rounded-md bg-white px-4 py-3 text-base font-semibold text-gray-900 shadow-sm hover:bg-gray-100 w-full\">Plan a Visit</button>\n<button class=\"mt-4 rounded-md border border-white px-4 py-3 text-base font-semibold text-white shadow-sm hover:bg-white/10 w-full\">Get Involved</button>"
+        }
+      }
+    }
   }
 }