astro-tractstack 2.0.12 → 2.0.13

package/package.json

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

package/templates/src/components/compositor/Node.tsx

@@ -155,6 +155,7 @@ const getElement = (
               nodeId={props.nodeId}
               ctx={getCtx(props)}
               isTemplate={isTemplate}
+              config={props.config!}
             />
           ) : (
             <>
@@ -215,6 +216,7 @@ const getElement = (
                       nodeId={node.id}
                       first={true}
                       ctx={getCtx(props)}
+                      config={props.config!}
                       isContextPane={true}
                     />
                   </PanelVisibilityWrapper>
@@ -242,7 +244,12 @@ const getElement = (
               panelType="add"
               ctx={getCtx(props)}
             >
-              <AddPanePanel nodeId={node.id} first={true} ctx={getCtx(props)} />
+              <AddPanePanel
+                nodeId={node.id}
+                first={true}
+                ctx={getCtx(props)}
+                config={props.config!}
+              />
             </PanelVisibilityWrapper>
           )}
           <div className="py-0.5">
@@ -266,7 +273,12 @@ const getElement = (
             panelType="add"
             ctx={getCtx(props)}
           >
-            <AddPanePanel nodeId={node.id} first={false} ctx={getCtx(props)} />
+            <AddPanePanel
+              nodeId={node.id}
+              first={false}
+              ctx={getCtx(props)}
+              config={props.config!}
+            />
           </PanelVisibilityWrapper>
         </>
       );

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

@@ -5,8 +5,9 @@ import AddPaneNewPanel from './AddPanePanel_new';
 import AddPaneBreakPanel from './AddPanePanel_break';
 import AddPaneReUsePanel from './AddPanePanel_reuse';
 import AddPaneCodeHookPanel from './AddPanePanel_codehook';
-import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes'; // Import getCtx
+import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes';
 import { PaneAddMode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
 
 interface AddPanePanelProps {
   nodeId: string;
@@ -14,6 +15,7 @@ interface AddPanePanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
+  config?: BrandConfig;
 }
 
 const AddPanePanel = ({
@@ -22,6 +24,7 @@ const AddPanePanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
+  config,
 }: AddPanePanelProps) => {
   const [reset, setReset] = useState(false);
   const lookup = first ? `${nodeId}-0` : nodeId;
@@ -62,6 +65,7 @@ const AddPanePanel = ({
           ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
+          config={config!}
         />
       ) : mode === PaneAddMode.BREAK && !isContextPane ? (
         <AddPaneBreakPanel

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

@@ -26,7 +26,7 @@ import {
 import { templateCategories } from '@/utils/compositor/templateMarkdownStyles';
 import { AiPaneGenerator } from './AiPaneGenerator';
 import { AddPaneNewCustomCopy } from './AddPanePanel_newCustomCopy';
-import { themes, type Theme } from '@/types/tractstack';
+import { themes, type Theme, type BrandConfig } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
 
@@ -37,6 +37,7 @@ interface AddPaneNewPanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
+  config?: BrandConfig;
 }
 
 interface PreviewPane {
@@ -65,6 +66,7 @@ const AddPaneNewPanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
+  config,
 }: AddPaneNewPanelProps) => {
   const brand = useStore(brandColourStore);
   const hasAssemblyAI = useStore(hasAssemblyAIStore);
@@ -384,6 +386,7 @@ const AddPaneNewPanel = ({
                 ownerId={nodeId}
                 onComplete={handleApplyGeneratedPane}
                 onCancel={() => setMode('template')}
+                config={config!}
               />
             </div>
           )}

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

@@ -2,15 +2,19 @@ import { useState, useCallback } from 'react';
 import { AiPanePreview } from './AiPanePreview';
 import type { TemplatePane } from '@/types/compositorTypes';
 import prompts from '@/constants/prompts.json';
-import StringInput from '@/components/form/StringInput';
+import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import { classNames } from '@/utils/helpers';
+import type { BrandConfig } from '@/types/tractstack';
 
 interface AiPaneGeneratorProps {
   ownerId: string;
   onComplete: (pane: TemplatePane) => void;
   onCancel: () => void;
+  config?: BrandConfig;
 }
 
-type GenerationStep = 'layout' | 'input' | 'preview' | 'loading';
+type GenerationStep = 'input' | 'preview' | 'loading';
 type CopyMode = 'prompt' | 'raw';
 
 interface GenerationResponse {
@@ -21,25 +25,41 @@ interface GenerationResponse {
   error?: string;
 }
 
-const layoutOptions = ['Text Only', 'Text + Image Left', 'Text + Image Right'];
+const harmonyOptions = [
+  'Analogous',
+  'Monochromatic',
+  'Complementary',
+  'Triadic',
+];
+const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
 
 export function AiPaneGenerator({
   ownerId,
   onComplete,
   onCancel,
+  config,
 }: AiPaneGeneratorProps) {
-  const [currentStep, setCurrentStep] = useState<GenerationStep>('layout');
-  const [selectedLayout, setSelectedLayout] = useState<string>(
-    layoutOptions[0]
-  );
+  const [currentStep, setCurrentStep] = useState<GenerationStep>('input');
+  const [selectedLayout] = useState<string>('Text Only');
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [copyPrompt, setCopyPrompt] = useState('');
   const [rawCopy, setRawCopy] = useState('');
-  const [designPrompt, setDesignPrompt] = useState('');
   const [generatedShell, setGeneratedShell] = useState<string | null>(null);
   const [generatedCopy, setGeneratedCopy] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
+  const [selectedHarmony, setSelectedHarmony] = useState<string>(
+    harmonyOptions[0]
+  );
+  const [baseColor, setBaseColor] = useState<string>('');
+  const [accentColor, setAccentColor] = useState<string>('');
+  const [selectedTheme, setSelectedTheme] = useState<string>(themeOptions[0]);
+  const [additionalNotes, setAdditionalNotes] = useState<string>('');
+
+  const [isInjectMode, setIsInjectMode] = useState(false);
+  const [injectShell, setInjectShell] = useState('');
+  const [injectCopy, setInjectCopy] = useState('');
+
   const callAskLemurAPI = useCallback(
     async (
       prompt: string,
@@ -93,12 +113,10 @@ export function AiPaneGenerator({
 
       let rawResponseData = result.data.response;
 
-      // Handle case where API returns JSON object for shell
       if (expectJson && typeof rawResponseData === 'object') {
-        return JSON.stringify(rawResponseData); // Return as string
+        return JSON.stringify(rawResponseData);
       }
 
-      // Handle case where API returns string (potentially wrapped)
       if (typeof rawResponseData === 'string') {
         let responseString = rawResponseData;
         try {
@@ -116,10 +134,9 @@ export function AiPaneGenerator({
         } catch (e) {
           /* Ignore stripping errors */
         }
-        return responseString; // Return string directly
+        return responseString;
       }
 
-      // Fallback if response is neither expected string nor object
       throw new Error('Unexpected response format received from API.');
     },
     []
@@ -131,6 +148,17 @@ export function AiPaneGenerator({
     setGeneratedShell(null);
     setGeneratedCopy(null);
 
+    let designInput = `Generate a design using a **${selectedHarmony.toLowerCase()}** color scheme with a **${selectedTheme.toLowerCase()}** theme.`;
+    if (baseColor) {
+      designInput += ` Base the colors around **${baseColor}**.`;
+    }
+    if (accentColor) {
+      designInput += ` Use **${accentColor}** as an accent color.`;
+    }
+    if (additionalNotes) {
+      designInput += ` Refine the design with these additional notes: "${additionalNotes}"`;
+    }
+
     try {
       const shellPromptDetails = prompts.aiPaneShellPrompt;
       const copyPromptDetails = prompts.aiPaneCopyPrompt;
@@ -142,11 +170,8 @@ export function AiPaneGenerator({
         throw new Error('AI prompts not found or incomplete in prompts.json');
       }
 
-      // --- This is the updated (sequential) logic ---
-
-      // 1. Prepare and call the Shell API first
       const formattedShellPrompt = shellPromptDetails.user_template
-        .replace('{{DESIGN_INPUT}}', designPrompt)
+        .replace('{{DESIGN_INPUT}}', designInput)
         .replace('{{LAYOUT_TYPE}}', selectedLayout);
 
       const shellResult = await callAskLemurAPI(
@@ -154,35 +179,34 @@ export function AiPaneGenerator({
         shellPromptDetails.system || '',
         true
       );
-      setGeneratedShell(shellResult); // Set this for the previewer
+      setGeneratedShell(shellResult);
 
-      // 2. NOW, create the copy prompt, injecting the shellResult
       const copyInputContent = copyMode === 'prompt' ? copyPrompt : rawCopy;
-      // Note: Assumes prompts.json's aiPaneCopyPrompt.user_template now includes {{SHELL_JSON}}
       const formattedCopyPrompt = copyPromptDetails.user_template
         .replace('{{COPY_INPUT}}', copyInputContent)
-        .replace('{{DESIGN_INPUT}}', designPrompt)
+        .replace('{{DESIGN_INPUT}}', designInput)
         .replace('{{LAYOUT_TYPE}}', selectedLayout)
-        .replace('{{SHELL_JSON}}', shellResult); // <-- This is the new, critical part
+        .replace('{{SHELL_JSON}}', shellResult);
 
-      // 3. Call Copy API second, using the fully-formed prompt
       const copyResult = await callAskLemurAPI(
         formattedCopyPrompt,
         copyPromptDetails.system || '',
         false
       );
-      setGeneratedCopy(copyResult); // Should be an HTML string
+      setGeneratedCopy(copyResult);
 
       setCurrentStep('preview');
-
-      // --- End of updated logic ---
     } catch (err: any) {
       console.error('AI Pane Generation Error:', err);
       setError(err.message || 'Failed to generate AI pane.');
       setCurrentStep('input');
     }
   }, [
-    designPrompt,
+    selectedHarmony,
+    baseColor,
+    accentColor,
+    selectedTheme,
+    additionalNotes,
     selectedLayout,
     copyMode,
     copyPrompt,
@@ -190,12 +214,51 @@ export function AiPaneGenerator({
     callAskLemurAPI,
   ]);
 
+  const handleInject = useCallback(() => {
+    setError(null);
+    if (!injectShell || !injectCopy) {
+      setError('Both Shell JSON and Copy HTML must be provided.');
+      return;
+    }
+    try {
+      const shellResponse = JSON.parse(injectShell);
+      const copyResponse = JSON.parse(injectCopy);
+
+      const shellPayloadString = JSON.stringify(shellResponse?.data?.response);
+      const copyPayloadString = copyResponse?.data?.response;
+
+      if (
+        !shellPayloadString ||
+        shellPayloadString === 'null' ||
+        typeof copyPayloadString !== 'string'
+      ) {
+        throw new Error(
+          'Payloads are in an unexpected format. Could not find "data.response".'
+        );
+      }
+
+      const pane = parseAiPane(
+        shellPayloadString,
+        copyPayloadString,
+        selectedLayout
+      );
+      onComplete(pane);
+    } catch (err: any) {
+      console.error('Payload Injection Error:', err);
+      setError(err.message || 'Failed to parse payloads. Check JSON format.');
+    }
+  }, [injectShell, injectCopy, selectedLayout, onComplete]);
+
   const handleBack = () => {
     setError(null);
     if (currentStep === 'preview') {
       setCurrentStep('input');
     } else if (currentStep === 'input') {
-      setCurrentStep('layout');
+      if (isInjectMode) {
+        setIsInjectMode(false);
+      } else {
+        onCancel();
+      }
     } else if (currentStep === 'loading') {
       setCurrentStep('input');
     }
@@ -230,72 +293,166 @@ export function AiPaneGenerator({
     );
   }
 
-  if (currentStep === 'layout') {
-    return (
-      <div className="space-y-4 p-4">
-        <label className="mb-2 block text-lg font-semibold text-gray-800">
-          Choose a Layout
-        </label>
-        <div className="space-y-2">
-          {layoutOptions.map((layout) => (
-            <div key={layout} className="flex items-center space-x-2">
-              <input
-                type="radio"
-                id={`layout-${layout}`}
-                name="layoutOptions"
-                value={layout}
-                checked={selectedLayout === layout}
-                onChange={(e) => setSelectedLayout(e.target.value)}
-                className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-              />
-              <label
-                htmlFor={`layout-${layout}`}
-                className="text-sm font-medium text-gray-700"
-              >
-                {layout}
-              </label>
-            </div>
-          ))}
-        </div>
-        <div className="flex justify-end space-x-2 pt-4">
-          <button
-            type="button"
-            onClick={onCancel}
-            className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={() => setCurrentStep('input')}
-            className="rounded-md border border-transparent bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
-          >
-            Next
-          </button>
+  if (currentStep === 'input') {
+    if (isInjectMode) {
+      return (
+        <div className="space-y-6 p-4">
+          <div>
+            <label
+              htmlFor="shell-json"
+              className="block text-lg font-semibold text-gray-800"
+            >
+              Shell JSON Payload
+            </label>
+            <textarea
+              id="shell-json"
+              value={injectShell}
+              onChange={(e) => setInjectShell(e.target.value)}
+              placeholder="Paste raw API response for ShellJson here..."
+              rows={8}
+              className="mt-2 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
+              htmlFor="copy-html"
+              className="block text-lg font-semibold text-gray-800"
+            >
+              Copy HTML Payload
+            </label>
+            <textarea
+              id="copy-html"
+              value={injectCopy}
+              onChange={(e) => setInjectCopy(e.target.value)}
+              placeholder="Paste raw API response for copyHtml here..."
+              rows={8}
+              className="mt-2 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>
+
+          {error && <p className="text-sm text-red-600">{error}</p>}
+
+          <div className="flex justify-between pt-4">
+            <button
+              type="button"
+              onClick={handleBack}
+              className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
+            >
+              Back to Generator
+            </button>
+            <button
+              type="button"
+              onClick={handleInject}
+              disabled={!injectShell || !injectCopy}
+              className={`rounded-md border border-transparent px-4 py-2 text-sm font-bold text-white shadow-sm ${
+                !injectShell || !injectCopy
+                  ? 'cursor-not-allowed bg-gray-400'
+                  : 'bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2'
+              }`}
+            >
+              Create from Payloads
+            </button>
+          </div>
         </div>
-      </div>
-    );
-  }
+      );
+    }
 
-  if (currentStep === 'input') {
     return (
       <div className="space-y-6 p-4">
+        <div>
+          <label className="block text-lg font-semibold text-gray-800">
+            Color Harmony
+          </label>
+          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
+            {harmonyOptions.map((option) => (
+              <div key={option} className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  id={`harmony-${option}`}
+                  name="harmonyOptions"
+                  value={option}
+                  checked={selectedHarmony === option}
+                  onChange={(e) => setSelectedHarmony(e.target.value)}
+                  className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                />
+                <label
+                  htmlFor={`harmony-${option}`}
+                  className="text-sm font-medium text-gray-700"
+                >
+                  {option}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <ColorPickerCombo
+              title="Base Color (Optional)"
+              config={config!}
+              defaultColor={baseColor}
+              onColorChange={setBaseColor}
+              allowNull={true}
+            />
+          </div>
+          <div>
+            <ColorPickerCombo
+              title="Accent Color (Optional)"
+              config={config!}
+              defaultColor={accentColor}
+              onColorChange={setAccentColor}
+              allowNull={true}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block text-lg font-semibold text-gray-800">
+            Theme / Mood
+          </label>
+          <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
+            {themeOptions.map((option) => (
+              <div key={option} className="flex items-center space-x-2">
+                <input
+                  type="radio"
+                  id={`theme-${option}`}
+                  name="themeOptions"
+                  value={option}
+                  checked={selectedTheme === option}
+                  onChange={(e) => setSelectedTheme(e.target.value)}
+                  className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
+                />
+                <label
+                  htmlFor={`theme-${option}`}
+                  className="text-sm font-medium text-gray-700"
+                >
+                  {option}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+
         <div>
           <label
-            htmlFor="design-prompt"
+            htmlFor="additional-notes"
             className="block text-lg font-semibold text-gray-800"
           >
-            Describe the Design
+            Additional Design Notes (Optional)
           </label>
           <p className="mb-2 mt-1 text-sm text-gray-500">
-            Example: "dark, minimalist hero", "bright, playful feature box"
+            Add specific requests like "use rounded corners", "add subtle
+            texture".
           </p>
-          <StringInput
-            id="design-prompt"
-            value={designPrompt}
-            onChange={setDesignPrompt}
-            placeholder="Enter design prompt..."
-            className="block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+          <textarea
+            id="additional-notes"
+            value={additionalNotes}
+            onChange={(e) => setAdditionalNotes(e.target.value)}
+            placeholder="Enter additional notes..."
+            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>
 
@@ -380,21 +537,34 @@ export function AiPaneGenerator({
             onClick={handleBack}
             className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
           >
-            Back
+            Cancel
           </button>
           <button
             type="button"
             onClick={handleGenerate}
-            disabled={
-              !designPrompt || (copyMode === 'prompt' ? !copyPrompt : !rawCopy)
-            }
-            className={`rounded-md border border-transparent px-4 py-2 text-sm font-bold text-white shadow-sm ${
-              !designPrompt || (copyMode === 'prompt' ? !copyPrompt : !rawCopy)
-                ? 'cursor-not-allowed bg-gray-400'
-                : 'bg-cyan-600 hover:bg-cyan-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2'
-            }`}
+            disabled={copyMode === 'prompt' ? !copyPrompt : !rawCopy}
+            className={classNames(
+              `rounded-md border border-transparent px-4 py-2 text-sm font-bold shadow-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2`,
+              (copyMode === 'prompt' && !copyPrompt) ||
+                (copyMode === `raw` && !rawCopy)
+                ? 'cursor-not-allowed bg-gray-300 text-gray-500'
+                : 'bg-cyan-600 text-white hover:bg-cyan-700'
+            )}
+          >
+            Generate Pane
+          </button>
+        </div>
+
+        <div className="border-t border-gray-200 pt-4 text-center">
+          <button
+            type="button"
+            onClick={() => {
+              setError(null);
+              setIsInjectMode(true);
+            }}
+            className="text-sm text-cyan-600 hover:text-cyan-800 hover:underline"
           >
-            Generate Preview
+            Direct Inject Payload
           </button>
         </div>
       </div>

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

@@ -1,23 +1,6 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import type { TemplatePane } from '@/types/compositorTypes';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-import {
-  PaneSnapshotGenerator,
-  type SnapshotData,
-} from '@/components/compositor/preview/PaneSnapshotGenerator';
-import { ulid } from 'ulid';
-
-type LLMShellLayer = {
-  mobile?: Record<string, string>;
-  tablet?: Record<string, string>;
-  desktop?: Record<string, string>;
-};
-
-type ShellJson = {
-  bgColour: string;
-  parentClasses: LLMShellLayer[];
-  defaultClasses: Record<string, any>;
-};
 
 interface AiPanePreviewProps {
   shellJson: string;
@@ -28,49 +11,6 @@ interface AiPanePreviewProps {
   onBack: () => void;
 }
 
-function convertObjectToTailwindString(
-  styleObj: Record<string, string> | undefined
-): string {
-  if (!styleObj) return '';
-  return Object.entries(styleObj)
-    .map(([key, value]) => {
-      // Basic mapping, might need adjustment based on tailwindClasses structure if prefixes differ
-      const prefixMap: Record<string, string> = {
-        mx: 'mx',
-        my: 'my',
-        px: 'px',
-        py: 'py',
-        textALIGN: 'text',
-        textSIZE: 'text',
-        textCOLOR: 'text',
-        fontWEIGHT: 'font',
-        fontFACE: 'font',
-        letterSPACING: 'tracking',
-        lineHEIGHT: 'leading',
-        bgCOLOR: 'bg',
-        rounded: 'rounded',
-        shadow: 'shadow',
-        maxW: 'max-w',
-        // Add other mappings as needed based on keys used in compositorTypes vs tailwindClasses
-      };
-      const prefix = prefixMap[key] || key.toLowerCase();
-      if (value === '') return key; // Handle boolean classes like 'relative', 'flex'
-      return `${prefix}-${value}`;
-    })
-    .join(' ');
-}
-
-function getPreviewClasses(classes: LLMShellLayer | undefined): string {
-  if (!classes) return '';
-
-  const mobileStyles = convertObjectToTailwindString(classes.mobile);
-  const tabletStyles = convertObjectToTailwindString(classes.tablet);
-  const desktopStyles = convertObjectToTailwindString(classes.desktop);
-
-  const combined = `${mobileStyles} ${tabletStyles ? `md:${tabletStyles.split(' ').join(' md:')}` : ''} ${desktopStyles ? `xl:${desktopStyles.split(' ').join(' xl:')}` : ''}`;
-  return combined.replace(/\s+/g, ' ').trim();
-}
-
 export function AiPanePreview({
   shellJson,
   copyHtml,
@@ -78,152 +18,82 @@ export function AiPanePreview({
   onComplete,
   onBack,
 }: AiPanePreviewProps) {
-  const [parsedPaneForApply, setParsedPaneForApply] =
-    useState<TemplatePane | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [snapshotData, setSnapshotData] = useState<SnapshotData | null>(null);
-  const [isGeneratingSnapshot, setIsGeneratingSnapshot] =
-    useState<boolean>(false);
-  const previewId = useMemo(() => `ai-preview-${ulid()}`, []);
+  const [hasCompleted, setHasCompleted] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
-    let isActive = true;
     setError(null);
-    setParsedPaneForApply(null);
-    setSnapshotData(null);
-    setIsGeneratingSnapshot(false);
-    try {
-      const pane = parseAiPane(shellJson, copyHtml, layout);
-      if (isActive) {
-        setParsedPaneForApply(pane);
-      }
-    } catch (err: any) {
-      console.error('Error parsing AI Pane for apply:', err);
-      if (isActive) {
-        setError(
-          err.message || 'Failed to parse generated content for application.'
-        );
-        setParsedPaneForApply(null);
-      }
-    }
-    return () => {
-      isActive = false;
-    };
-  }, [shellJson, copyHtml, layout]);
-
-  const previewHtmlString = useMemo(() => {
-    try {
-      if (!shellJson || !copyHtml) return '';
-      const shell: ShellJson = JSON.parse(shellJson);
-
-      let currentHtml = copyHtml;
-      if (shell.parentClasses && shell.parentClasses.length > 0) {
-        [...shell.parentClasses].reverse().forEach((layer) => {
-          const layerClasses = getPreviewClasses(layer);
-          currentHtml = `<div class="${layerClasses}">${currentHtml}</div>`;
-        });
-      }
-
-      const outerStyle = shell.bgColour
-        ? `background-color: ${shell.bgColour};`
-        : '';
-      // Wrap in a div that sets width similar to snapshot generator default for better preview consistency
-      return `<div style="${outerStyle} width: 800px; padding: 1px; margin: auto;">${currentHtml}</div>`;
-    } catch (err: any) {
-      console.error('Error constructing preview HTML string:', err);
-      setError(err.message || 'Failed to construct preview HTML.');
-      return '';
-    }
-  }, [shellJson, copyHtml]);
-
-  const handleSnapshotComplete = useCallback(
-    (id: string, data: SnapshotData) => {
-      if (id === previewId) {
-        setSnapshotData(data);
-        setIsGeneratingSnapshot(false);
-      }
-    },
-    [previewId]
-  );
-
-  const handleSnapshotError = useCallback(
-    (id: string, errorMsg: string) => {
-      if (id === previewId) {
-        console.error(`Snapshot generation failed for ${id}:`, errorMsg);
-        setError(`Snapshot generation failed: ${errorMsg}`);
-        setIsGeneratingSnapshot(false);
-      }
-    },
-    [previewId]
-  );
+    setHasCompleted(false);
+    setIsLoading(true);
+    let isActive = true;
 
-  const handleApply = () => {
-    if (parsedPaneForApply) {
-      onComplete(parsedPaneForApply);
-      console.log('FINAL TEMPLATE PANE PAYLOAD:', parsedPaneForApply);
-    } else if (!error) {
-      // Attempt parsing again if it failed silently initially
+    if (shellJson && copyHtml) {
       try {
         const pane = parseAiPane(shellJson, copyHtml, layout);
-        onComplete(pane);
+        if (isActive && !hasCompleted) {
+          onComplete(pane);
+          setHasCompleted(true);
+          setIsLoading(false);
+        }
       } catch (err: any) {
-        setError(
-          err.message || 'Failed to parse generated content before applying.'
-        );
+        console.error('Error parsing AI Pane:', err);
+        if (isActive) {
+          setError(err.message || 'Failed to parse generated content.');
+          setIsLoading(false);
+        }
       }
+    } else {
+      // Handle case where inputs might be initially empty
+      setIsLoading(false);
     }
-  };
 
-  useEffect(() => {
-    if (previewHtmlString && !snapshotData && !error && !isGeneratingSnapshot) {
-      setIsGeneratingSnapshot(true);
+    return () => {
+      isActive = false;
+    };
+  }, [shellJson, copyHtml, layout, onComplete, hasCompleted]);
+
+  const displayContent = useMemo(() => {
+    if (isLoading) {
+      return (
+        <div className="p-4 text-center text-gray-500">
+          <div className="mx-auto mb-2 h-8 w-8 animate-spin rounded-full border-b-2 border-gray-400"></div>
+          <p className="text-sm">Processing...</p>
+        </div>
+      );
     }
-  }, [previewHtmlString, snapshotData, error, isGeneratingSnapshot]);
-
-  const showLoading =
-    isGeneratingSnapshot ||
-    (!previewHtmlString && !error && !parsedPaneForApply);
-  const showPreview = !isGeneratingSnapshot && snapshotData && !error;
-  const showError = !!error;
+    if (error) {
+      return (
+        <div className="p-4 text-center text-red-600">
+          <p className="font-semibold">Error:</p>
+          <p className="mt-1 text-sm">{error}</p>
+        </div>
+      );
+    }
+    if (hasCompleted) {
+      return (
+        <div className="p-4 text-center text-green-700">
+          <p className="font-semibold">Pane Applied Successfully!</p>
+          <p className="mt-1 text-sm">
+            You can now go back or continue editing.
+          </p>
+        </div>
+      );
+    }
+    // Fallback/initial state before useEffect runs if needed
+    return (
+      <div className="p-4 text-center text-gray-500">
+        <p className="text-sm">Preparing...</p>
+      </div>
+    );
+  }, [isLoading, error, hasCompleted]);
 
   return (
     <div className="flex h-full flex-col p-4">
       <div className="relative mb-4 flex min-h-[200px] flex-grow items-center justify-center overflow-auto rounded border bg-gray-50">
-        {showError && (
-          <div className="p-4 text-center text-red-600">
-            <p className="font-semibold">Error:</p>
-            <p className="mt-1 text-sm">{error}</p>
-          </div>
-        )}
-        {showLoading && !showError && (
-          <div className="p-4 text-center text-gray-500">
-            <div className="mx-auto mb-2 h-8 w-8 animate-spin rounded-full border-b-2 border-gray-400"></div>
-            <p className="text-sm">
-              {isGeneratingSnapshot
-                ? 'Generating Snapshot...'
-                : 'Constructing Preview...'}
-            </p>
-          </div>
-        )}
-        {isGeneratingSnapshot && previewHtmlString && (
-          <div className="pointer-events-none absolute left-[-9999px] top-[-9999px] w-[800px] opacity-0">
-            <PaneSnapshotGenerator
-              id={previewId}
-              htmlString={previewHtmlString}
-              onComplete={handleSnapshotComplete}
-              onError={handleSnapshotError}
-            />
-          </div>
-        )}
-        {showPreview && snapshotData && (
-          <img
-            src={snapshotData.imageData}
-            alt="AI Pane Preview"
-            className="block h-auto max-w-full"
-          />
-        )}
+        {displayContent}
       </div>
-      <div className="flex flex-shrink-0 justify-between">
+      <div className="flex flex-shrink-0 justify-start">
         <button
           onClick={onBack}
           className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
@@ -231,26 +101,6 @@ export function AiPanePreview({
         >
           Back
         </button>
-        <button
-          onClick={handleApply}
-          disabled={
-            !parsedPaneForApply ||
-            !!error ||
-            !snapshotData ||
-            isGeneratingSnapshot
-          }
-          className={`rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors duration-150 ${
-            !parsedPaneForApply ||
-            !!error ||
-            !snapshotData ||
-            isGeneratingSnapshot
-              ? 'cursor-not-allowed bg-gray-400'
-              : 'bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
-          }`}
-          type="button"
-        >
-          Apply Pane
-        </button>
       </div>
     </div>
   );

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

@@ -12,11 +12,13 @@ import {
   /* hasAssemblyAIStore,*/ fullContentMapStore,
 } from '@/stores/storykeep';
 import type { NodesContext } from '@/stores/nodes';
+import type { BrandConfig } from '@/types/tractstack';
 
 interface PageCreationSelectorProps {
   nodeId: string;
   ctx: NodesContext;
   isTemplate?: boolean;
+  config?: BrandConfig;
 }
 
 type CreationMode = {
@@ -33,6 +35,7 @@ export const PageCreationSelector = ({
   nodeId,
   ctx,
   isTemplate = false,
+  config,
 }: PageCreationSelectorProps) => {
   const [selectedMode, setSelectedMode] =
     useState<CreationMode['id']>('design');
@@ -137,6 +140,7 @@ export const PageCreationSelector = ({
         first={true}
         ctx={ctx}
         isStoryFragment={true}
+        config={config!}
       />
     );
   else if (showGen) return <PageCreationGen nodeId={nodeId} ctx={ctx} />;

package/templates/src/constants/prompts.json

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

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

@@ -250,7 +250,12 @@ function sanitizeButtonClasses(
   return buttonPayload;
 }
 
-function walkDom(domNode: Node, parentId: string, parsedNodes: ParsedNode[]) {
+function walkDom(
+  domNode: Node,
+  parentId: string,
+  parsedNodes: ParsedNode[],
+  markdownId: string
+) {
   if (domNode.nodeType === Node.TEXT_NODE) {
     const copy = domNode.textContent || '';
     // Preserve leading/trailing spaces unless the *entire* content is just whitespace.
@@ -305,17 +310,37 @@ function walkDom(domNode: Node, parentId: string, parsedNodes: ParsedNode[]) {
   const tagName = el.tagName.toLowerCase();
 
   if (!ALLOWED_TAGS.has(tagName)) {
-    el.childNodes.forEach((child) => walkDom(child, parentId, parsedNodes));
+    el.childNodes.forEach((child) =>
+      walkDom(child, parentId, parsedNodes, markdownId)
+    );
     return;
   }
 
   if (tagName === 'button') {
+    let finalParentId = parentId;
+
+    if (parentId === markdownId) {
+      const pNodeId = ulid();
+      const pNode: TemplateNode = {
+        id: pNodeId,
+        nodeType: 'TagElement',
+        parentId: parentId,
+        tagName: 'p',
+        overrideClasses: {},
+      };
+      parsedNodes.push({
+        flatNode: pNode,
+        responsiveClasses: {},
+      });
+      finalParentId = pNodeId;
+    }
+
     const buttonPayload = sanitizeButtonClasses(el.getAttribute('class'));
 
     const flatNode: TemplateNode = {
       id: ulid(),
       nodeType: 'TagElement',
-      parentId: parentId,
+      parentId: finalParentId,
       tagName: 'a',
       overrideClasses: {},
       href: '#',
@@ -330,7 +355,9 @@ function walkDom(domNode: Node, parentId: string, parsedNodes: ParsedNode[]) {
       responsiveClasses: {},
     });
 
-    el.childNodes.forEach((child) => walkDom(child, flatNode.id, parsedNodes));
+    el.childNodes.forEach((child) =>
+      walkDom(child, flatNode.id, parsedNodes, markdownId)
+    );
     return;
   }
 
@@ -353,7 +380,9 @@ function walkDom(domNode: Node, parentId: string, parsedNodes: ParsedNode[]) {
     responsiveClasses: responsive,
   });
 
-  el.childNodes.forEach((child) => walkDom(child, flatNode.id, parsedNodes));
+  el.childNodes.forEach((child) =>
+    walkDom(child, flatNode.id, parsedNodes, markdownId)
+  );
 }
 
 function findMostCommonClasses(nodes: ParsedNode[]): ResponsiveClasses {
@@ -476,18 +505,15 @@ export const parseAiPane = (
   const paneId = ulid();
   const markdownId = ulid();
 
-  // --- MODIFICATION START ---
-  // Normalize the keys within parentClasses using the new helper
   const transformedParentClasses: ParentClassesPayload = (
     shell.parentClasses || []
   ).map(
     (layer): ParentClassLayer => ({
-      mobile: normalizeKeys(layer.mobile), // Use normalizeKeys helper
-      tablet: normalizeKeys(layer.tablet), // Use normalizeKeys helper
-      desktop: normalizeKeys(layer.desktop), // Use normalizeKeys helper
+      mobile: normalizeKeys(layer.mobile),
+      tablet: normalizeKeys(layer.tablet),
+      desktop: normalizeKeys(layer.desktop),
     })
   );
-  // --- MODIFICATION END ---
 
   const shellDefaults = parseDefaultClassesFromShell(shell.defaultClasses);
 
@@ -497,12 +523,12 @@ export const parseAiPane = (
     parentId: paneId,
     type: 'markdown',
     markdownId: ulid(),
-    parentClasses: transformedParentClasses, // Use the transformed version
+    parentClasses: transformedParentClasses,
     defaultClasses: shellDefaults,
   };
 
   const allParsedNodes: ParsedNode[] = [];
-  walkDom(doc.body, markdownId, allParsedNodes);
+  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
 
   const templateNodes: TemplateNode[] = [];
   const nodesByTag = new Map<string, ParsedNode[]>();