astro-tractstack 2.0.43 → 2.0.45

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

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import BooleanToggle from '@/components/form/BooleanToggle';
 import EnumSelect from '@/components/form/EnumSelect';
 
@@ -10,13 +9,32 @@ interface PromptOption {
 }
 
 interface CopyInputStepProps {
+  layoutChoice: 'standard' | 'grid';
   copyMode: CopyMode;
   onCopyModeChange: (mode: CopyMode) => void;
+
+  topic: string;
+  onTopicChange: (value: string) => void;
+
+  showAdvancedPrompts: boolean;
+  onShowAdvancedPromptsChange: (value: boolean) => void;
+
   promptValue: string;
   onPromptValueChange: (value: string) => void;
   copyValue: string;
   onCopyValueChange: (value: string) => void;
-  defaultPrompt?: string;
+
+  overallPrompt: string;
+  onOverallPromptChange: (value: string) => void;
+  promptValueCol1: string;
+  onPromptValueCol1Change: (value: string) => void;
+  promptValueCol2: string;
+  onPromptValueCol2Change: (value: string) => void;
+  col1Copy: string;
+  onCol1CopyChange: (value: string) => void;
+  col2Copy: string;
+  onCol2CopyChange: (value: string) => void;
+
   hasRetainedContent?: boolean;
   promptOptions: PromptOption[];
   selectedPromptId: string;
@@ -27,13 +45,27 @@ interface CopyInputStepProps {
 }
 
 export const CopyInputStep = ({
+  layoutChoice,
   copyMode,
   onCopyModeChange,
+  topic,
+  onTopicChange,
+  showAdvancedPrompts,
+  onShowAdvancedPromptsChange,
   promptValue,
   onPromptValueChange,
   copyValue,
   onCopyValueChange,
-  defaultPrompt,
+  overallPrompt,
+  onOverallPromptChange,
+  promptValueCol1,
+  onPromptValueCol1Change,
+  promptValueCol2,
+  onPromptValueCol2Change,
+  col1Copy,
+  onCol1CopyChange,
+  col2Copy,
+  onCol2CopyChange,
   hasRetainedContent = false,
   promptOptions,
   selectedPromptId,
@@ -42,77 +74,182 @@ export const CopyInputStep = ({
   onIsAiStylingChange,
   showStyleToggle = true,
 }: CopyInputStepProps) => {
-  useEffect(() => {
-    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-bold text-gray-800">
-        1. Provide Content
-      </label>
-      <div className="my-2 flex flex-wrap gap-4">
+  const renderModeSelection = () => (
+    <div className="my-2 flex flex-wrap gap-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-bold 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-bold text-gray-700"
+        >
+          Provide Copy (Markdown)
+        </label>
+      </div>
+      {hasRetainedContent && (
         <div className="flex items-center space-x-2">
           <input
             type="radio"
-            id="copy-prompt-mode"
+            id="copy-original-mode"
             name="copyModeOptions"
-            value="prompt"
-            checked={copyMode === 'prompt'}
+            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-prompt-mode"
+            htmlFor="copy-original-mode"
             className="text-sm font-bold text-gray-700"
           >
-            Write a prompt
+            Use Original
           </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-bold text-gray-700"
-          >
-            Provide Copy (Markdown)
-          </label>
+      )}
+    </div>
+  );
+
+  const renderPromptMode = () => (
+    <>
+      <div className="mb-4">
+        <EnumSelect
+          label="Section Type"
+          value={selectedPromptId}
+          onChange={onSelectedPromptIdChange}
+          options={promptOptions}
+          placeholder="Select a type..."
+          className="w-full"
+        />
+      </div>
+
+      <div className="mb-4">
+        <label className="mb-2 block text-sm font-bold text-gray-700">
+          Topic / Context
+        </label>
+        <textarea
+          value={topic}
+          onChange={(e) => onTopicChange(e.target.value)}
+          placeholder="e.g. a SaaS product for team collaboration"
+          rows={2}
+          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="mb-4 flex items-center">
+        <BooleanToggle
+          label="Advanced: Edit Full Prompts"
+          value={showAdvancedPrompts}
+          onChange={onShowAdvancedPromptsChange}
+          size="sm"
+        />
+      </div>
+
+      {showAdvancedPrompts && (
+        <div className="mt-4 space-y-4 rounded-md border border-gray-200 bg-white p-4">
+          {layoutChoice === 'standard' ? (
+            <div>
+              <label className="mb-2 block text-sm font-bold text-gray-700">
+                Full Prompt
+              </label>
+              <textarea
+                value={promptValue}
+                onChange={(e) => onPromptValueChange(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"
+              />
+              <p className="mt-1 text-xs text-gray-500">
+                Leave [topic] as it will be replaced with your prompt.
+              </p>
+            </div>
+          ) : (
+            <>
+              <div>
+                <label className="mb-2 block text-sm font-bold text-gray-700">
+                  Overall Component Brief
+                </label>
+                <textarea
+                  value={overallPrompt}
+                  onChange={(e) => onOverallPromptChange(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"
+                />
+              </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) => onPromptValueCol1Change(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) => onPromptValueCol2Change(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>
+            </>
+          )}
         </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"
+      )}
+    </>
+  );
+
+  const renderRawMode = () => (
+    <>
+      <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"
             />
-            <label
-              htmlFor="copy-original-mode"
-              className="text-sm font-bold text-gray-700"
-            >
-              Use Original
-            </label>
           </div>
         )}
       </div>
 
-      {(copyMode === 'prompt' || (copyMode === 'raw' && isAiStyling)) && (
+      {isAiStyling && (
         <div className="mb-4">
           <EnumSelect
-            label="Section Type"
+            label="Section Type (for Styling)"
             value={selectedPromptId}
             onChange={onSelectedPromptIdChange}
             options={promptOptions}
@@ -122,49 +259,54 @@ export const CopyInputStep = ({
         </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"
-          />
-        </>
-      )}
-
-      {copyMode === 'raw' && (
-        <>
-          <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>
-            )}
+      {layoutChoice === 'standard' ? (
+        <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 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) => onCol1CopyChange(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>
-          <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>
+            <label className="mb-2 block text-sm font-bold text-gray-700">
+              Right Column Markdown
+            </label>
+            <textarea
+              value={col2Copy}
+              onChange={(e) => onCol2CopyChange(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>
       )}
+    </>
+  );
+
+  return (
+    <>
+      <label className="block text-lg font-bold text-gray-800">
+        Content Configuration
+      </label>
+
+      {renderModeSelection()}
+
+      {copyMode === 'prompt' && renderPromptMode()}
+      {copyMode === 'raw' && renderRawMode()}
 
       {copyMode === 'original' && (
         <div className="rounded-md border border-blue-200 bg-blue-50 p-4 text-blue-700">
@@ -173,6 +315,6 @@ export const CopyInputStep = ({
           </p>
         </div>
       )}
-    </div>
+    </>
   );
 };

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

@@ -1,8 +1,12 @@
 import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { Portal } from '@ark-ui/react';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import { selectionStore } from '@/stores/selection';
 import {
   settingsPanelStore,
   stylePanelTargetMemoryStore,
@@ -18,6 +22,7 @@ import {
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import BackgroundImageWrapper from '@/components/fields/BackgroundImageWrapper';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { AiRestylePaneModal } from '@/components/edit/pane/AiRestylePaneModal';
 import { cloneDeep } from '@/utils/helpers';
 import {
   convertToGrid,
@@ -60,6 +65,7 @@ const StyleParentPanel = ({
   const [selectedTargetIndex, setSelectedTargetIndex] = useState(0);
 
   const ctx = getCtx();
+  const { isAiRestyleModalOpen } = useStore(selectionStore);
 
   useEffect(() => {
     if (
@@ -518,6 +524,19 @@ const StyleParentPanel = ({
             })}
           </div>
         </div>
+        <div className="space-y-3 border-t border-gray-200 pt-4">
+          <button
+            onClick={() => {
+              ctx.toolModeValStore.set({ value: 'styles' });
+              selectionStore.setKey('paneToRestyleId', paneNode.id);
+              selectionStore.setKey('isAiRestyleModalOpen', true);
+            }}
+            className="flex w-full items-center justify-center gap-2 rounded bg-purple-600 px-4 py-2 text-sm font-bold text-white hover:bg-purple-700"
+          >
+            <SparklesIcon className="h-5 w-5" />
+            Re-Color this Pane
+          </button>
+        </div>
       </div>
     );
   };
@@ -645,7 +664,16 @@ const StyleParentPanel = ({
     }
   };
 
-  return <div className="space-y-4">{renderContent()}</div>;
+  return (
+    <div className="space-y-4">
+      {renderContent()}
+      {isAiRestyleModalOpen && (
+        <Portal>
+          <AiRestylePaneModal />
+        </Portal>
+      )}
+    </div>
+  );
 };
 
 export default StyleParentPanel;

package/templates/src/stores/nodes.ts

@@ -560,6 +560,71 @@ export class NodesContext {
     );
   }
 
+  applyShellToPane(paneId: string, template: TemplatePane) {
+    const allNodes = new Map(this.allNodes.get());
+    const paneNode = allNodes.get(paneId) as PaneNode;
+    if (!paneNode) return;
+
+    if (template.bgColour) {
+      paneNode.bgColour = template.bgColour;
+      paneNode.isChanged = true;
+    }
+
+    const childrenIds = this.getChildNodeIDs(paneId);
+
+    const gridLayoutNode = childrenIds
+      .map((id) => allNodes.get(id))
+      .find((n) => n?.nodeType === 'GridLayoutNode') as
+      | GridLayoutNode
+      | undefined;
+
+    const markdownNodes = childrenIds
+      .map((id) => allNodes.get(id))
+      .filter((n) => n?.nodeType === 'Markdown') as MarkdownPaneFragmentNode[];
+
+    if (gridLayoutNode && template.gridLayout) {
+      if (template.gridLayout.parentClasses) {
+        gridLayoutNode.parentClasses = template.gridLayout.parentClasses;
+      }
+      if (template.gridLayout.defaultClasses) {
+        gridLayoutNode.defaultClasses = template.gridLayout.defaultClasses;
+      }
+      gridLayoutNode.isChanged = true;
+
+      if (
+        template.gridLayout.nodes &&
+        Array.isArray(template.gridLayout.nodes)
+      ) {
+        const columnIds = this.getChildNodeIDs(gridLayoutNode.id);
+
+        columnIds.forEach((colId, index) => {
+          const templateCol = template.gridLayout!.nodes![index];
+          if (templateCol && templateCol.gridClasses) {
+            const liveColNode = allNodes.get(colId) as MarkdownPaneFragmentNode;
+            if (liveColNode) {
+              liveColNode.gridClasses = templateCol.gridClasses;
+              liveColNode.isChanged = true;
+            }
+          }
+        });
+      }
+    } else if (markdownNodes.length > 0 && template.markdown) {
+      const primaryMarkdown = markdownNodes[0];
+
+      if (template.markdown.parentClasses) {
+        primaryMarkdown.parentClasses = template.markdown.parentClasses;
+      }
+      if (template.markdown.defaultClasses) {
+        primaryMarkdown.defaultClasses = template.markdown.defaultClasses;
+      }
+      primaryMarkdown.isChanged = true;
+    }
+
+    this.allNodes.set(allNodes);
+    this.notifyNode(paneId);
+    this.notifyNode('root');
+  }
+
   /**
    * Splits a text node at a given character offset.
    * This is a robust function that correctly handles splits at offset 0

package/templates/src/stores/selection.ts

@@ -20,6 +20,7 @@ export interface SelectionStoreState extends SelectionRange {
   selectionBox: SelectionBox | null;
   pendingAction: 'style' | 'link' | 'carousel' | null;
   isRestyleModalOpen: boolean;
+  isAiRestyleModalOpen: boolean;
   paneToRestyleId: string | null;
 }
 
@@ -35,6 +36,7 @@ const DEFAULT_SELECTION_STATE: SelectionStoreState = {
   selectionBox: null,
   pendingAction: null,
   isRestyleModalOpen: false,
+  isAiRestyleModalOpen: false,
   paneToRestyleId: null,
 };
 

package/utils/inject-files.ts

@@ -477,6 +477,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/RestylePaneModal.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/AiRestylePaneModal.tsx'
+      ),
+      dest: 'src/components/edit/pane/AiRestylePaneModal.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/steps/CopyInputStep.tsx'