astro-tractstack 2.0.14 → 2.0.15

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

@@ -1,10 +1,11 @@
 import { useState, useCallback } from 'react';
-import { AiPanePreview } from './AiPanePreview';
-import type { TemplatePane } from '@/types/compositorTypes';
 import prompts from '@/constants/prompts.json';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { AiPanePreview } from './AiPanePreview';
+import { CopyInputStep } from './steps/CopyInputStep';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
 import { classNames } from '@/utils/helpers';
+import type { TemplatePane } from '@/types/compositorTypes';
 import type { BrandConfig } from '@/types/tractstack';
 
 interface AiPaneGeneratorProps {
@@ -300,7 +301,7 @@ export function AiPaneGenerator({
           <div>
             <label
               htmlFor="shell-json"
-              className="block text-lg font-semibold text-gray-800"
+              className="block text-lg font-bold text-gray-800"
             >
               Shell JSON Payload
             </label>
@@ -317,7 +318,7 @@ export function AiPaneGenerator({
           <div>
             <label
               htmlFor="copy-html"
-              className="block text-lg font-semibold text-gray-800"
+              className="block text-lg font-bold text-gray-800"
             >
               Copy HTML Payload
             </label>
@@ -361,7 +362,7 @@ export function AiPaneGenerator({
     return (
       <div className="space-y-6 p-4">
         <div>
-          <label className="block text-lg font-semibold text-gray-800">
+          <label className="block text-lg font-bold text-gray-800">
             Color Harmony
           </label>
           <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -378,7 +379,7 @@ export function AiPaneGenerator({
                 />
                 <label
                   htmlFor={`harmony-${option}`}
-                  className="text-sm font-medium text-gray-700"
+                  className="text-sm font-bold text-gray-700"
                 >
                   {option}
                 </label>
@@ -409,7 +410,7 @@ export function AiPaneGenerator({
         </div>
 
         <div>
-          <label className="block text-lg font-semibold text-gray-800">
+          <label className="block text-lg font-bold text-gray-800">
             Theme / Mood
           </label>
           <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -426,7 +427,7 @@ export function AiPaneGenerator({
                 />
                 <label
                   htmlFor={`theme-${option}`}
-                  className="text-sm font-medium text-gray-700"
+                  className="text-sm font-bold text-gray-700"
                 >
                   {option}
                 </label>
@@ -438,7 +439,7 @@ export function AiPaneGenerator({
         <div>
           <label
             htmlFor="additional-notes"
-            className="block text-lg font-semibold text-gray-800"
+            className="block text-lg font-bold text-gray-800"
           >
             Additional Design Notes (Optional)
           </label>
@@ -456,78 +457,14 @@ export function AiPaneGenerator({
           />
         </div>
 
-        <div>
-          <label className="block text-lg font-semibold text-gray-800">
-            Provide Content
-          </label>
-          <div className="my-2 flex space-x-4">
-            <div className="flex items-center space-x-2">
-              <input
-                type="radio"
-                id="copy-prompt-mode"
-                name="copyModeOptions"
-                value="prompt"
-                checked={copyMode === 'prompt'}
-                onChange={(e) => setCopyMode(e.target.value as CopyMode)}
-                className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-              />
-              <label
-                htmlFor="copy-prompt-mode"
-                className="text-sm font-medium text-gray-700"
-              >
-                Write a prompt
-              </label>
-            </div>
-            <div className="flex items-center space-x-2">
-              <input
-                type="radio"
-                id="copy-raw-mode"
-                name="copyModeOptions"
-                value="raw"
-                checked={copyMode === 'raw'}
-                onChange={(e) => setCopyMode(e.target.value as CopyMode)}
-                className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
-              />
-              <label
-                htmlFor="copy-raw-mode"
-                className="text-sm font-medium text-gray-700"
-              >
-                Provide Copy
-              </label>
-            </div>
-          </div>
-
-          {copyMode === 'prompt' ? (
-            <>
-              <p className="mb-2 text-sm text-gray-500">
-                Let the AI write the copy based on your prompt.
-              </p>
-              <textarea
-                id="copy-prompt"
-                value={copyPrompt}
-                onChange={(e) => setCopyPrompt(e.target.value)}
-                placeholder="Enter copy prompt..."
-                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"
-              />
-            </>
-          ) : (
-            <>
-              <p className="mb-2 text-sm text-gray-500">
-                Provide your raw copy text here. The AI will structure and style
-                it.
-              </p>
-              <textarea
-                id="raw-copy"
-                value={rawCopy}
-                onChange={(e) => setRawCopy(e.target.value)}
-                placeholder="Paste or type your copy text..."
-                rows={6}
-                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>
+        <CopyInputStep
+          copyMode={copyMode}
+          onCopyModeChange={setCopyMode}
+          promptValue={copyPrompt}
+          onPromptValueChange={setCopyPrompt}
+          copyValue={rawCopy}
+          onCopyValueChange={setRawCopy}
+        />
 
         {error && <p className="text-sm text-red-600">{error}</p>}
 

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

@@ -0,0 +1,140 @@
+import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import type { BrandConfig } from '@/types/tractstack';
+
+export interface AiDesignConfig {
+  harmony: string;
+  baseColor: string;
+  accentColor: string;
+  theme: string;
+  additionalNotes: string;
+}
+
+interface AiDesignStepProps {
+  config: BrandConfig;
+  designConfig: AiDesignConfig;
+  onDesignConfigChange: (newConfig: AiDesignConfig) => void;
+}
+
+const harmonyOptions = [
+  'Analogous',
+  'Monochromatic',
+  'Complementary',
+  'Triadic',
+];
+const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
+
+export const AiDesignStep = ({
+  config,
+  designConfig,
+  onDesignConfigChange,
+}: AiDesignStepProps) => {
+  const updateField = <K extends keyof AiDesignConfig>(
+    field: K,
+    value: AiDesignConfig[K]
+  ) => {
+    onDesignConfigChange({ ...designConfig, [field]: value });
+  };
+
+  return (
+    <div className="space-y-6 rounded-lg bg-gray-50 p-4 shadow-inner">
+      <label className="block text-lg font-semibold text-gray-800">
+        2. Configure AI Design
+      </label>
+      <div>
+        <label className="block text-base 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={designConfig.harmony === option}
+                onChange={(e) => updateField('harmony', 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={designConfig.baseColor}
+            onColorChange={(color) => updateField('baseColor', color)}
+            allowNull={true}
+          />
+        </div>
+        <div>
+          <ColorPickerCombo
+            title="Accent Color (Optional)"
+            config={config}
+            defaultColor={designConfig.accentColor}
+            onColorChange={(color) => updateField('accentColor', color)}
+            allowNull={true}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-base 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={designConfig.theme === option}
+                onChange={(e) => updateField('theme', 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="additional-notes"
+          className="block text-base font-semibold text-gray-800"
+        >
+          Additional Design Notes (Optional)
+        </label>
+        <p className="mb-2 mt-1 text-sm text-gray-500">
+          Add specific requests like "use rounded corners", "add subtle
+          texture".
+        </p>
+        <textarea
+          id="additional-notes"
+          value={designConfig.additionalNotes}
+          onChange={(e) => updateField('additionalNotes', 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>
+    </div>
+  );
+};

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

@@ -0,0 +1,105 @@
+import { useEffect } from 'react';
+
+type CopyMode = 'prompt' | 'raw';
+
+interface CopyInputStepProps {
+  copyMode: CopyMode;
+  onCopyModeChange: (mode: CopyMode) => void;
+  promptValue: string;
+  onPromptValueChange: (value: string) => void;
+  copyValue: string;
+  onCopyValueChange: (value: string) => void;
+  defaultPrompt?: string;
+}
+
+export const CopyInputStep = ({
+  copyMode,
+  onCopyModeChange,
+  promptValue,
+  onPromptValueChange,
+  copyValue,
+  onCopyValueChange,
+  defaultPrompt,
+}: CopyInputStepProps) => {
+  useEffect(() => {
+    // Pre-populate the prompt field if a default is provided and the field is empty
+    if (defaultPrompt && !promptValue) {
+      onPromptValueChange(defaultPrompt);
+    }
+  }, [defaultPrompt, promptValue, onPromptValueChange]);
+
+  return (
+    <div className="space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
+      <label className="block text-lg font-semibold text-gray-800">
+        1. Provide Content
+      </label>
+      <div className="my-2 flex space-x-4">
+        <div className="flex items-center space-x-2">
+          <input
+            type="radio"
+            id="copy-prompt-mode"
+            name="copyModeOptions"
+            value="prompt"
+            checked={copyMode === 'prompt'}
+            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-prompt-mode"
+            className="text-sm font-medium text-gray-700"
+          >
+            Write a prompt
+          </label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <input
+            type="radio"
+            id="copy-raw-mode"
+            name="copyModeOptions"
+            value="raw"
+            checked={copyMode === 'raw'}
+            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-raw-mode"
+            className="text-sm font-medium text-gray-700"
+          >
+            Provide Copy (Markdown)
+          </label>
+        </div>
+      </div>
+
+      {copyMode === 'prompt' ? (
+        <>
+          <p className="mb-2 text-sm text-gray-500">
+            Let the AI write the copy based on your prompt.
+          </p>
+          <textarea
+            id="copy-prompt"
+            value={promptValue}
+            onChange={(e) => onPromptValueChange(e.target.value)}
+            placeholder="e.g., A hero section for a SaaS product that helps teams collaborate..."
+            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"
+          />
+        </>
+      ) : (
+        <>
+          <p className="mb-2 text-sm text-gray-500">
+            Provide your raw copy here. Use Markdown for formatting (e.g., ##
+            Headline, **bold**).
+          </p>
+          <textarea
+            id="raw-copy"
+            value={copyValue}
+            onChange={(e) => onCopyValueChange(e.target.value)}
+            placeholder="## My Awesome Headline..."
+            rows={6}
+            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>
+  );
+};