astro-tractstack 2.0.19 → 2.0.21

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

@@ -9,7 +9,7 @@ import { NodesContext, getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import { hasAssemblyAIStore } from '@/stores/storykeep';
 import prompts from '@/constants/prompts.json';
-import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
+import type { DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
 import { CopyInputStep } from './steps/CopyInputStep';
@@ -18,7 +18,6 @@ import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
 import {
   convertStorageToLiveTemplate,
-  mergeCopyIntoTemplate,
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 import { DirectInjectStep } from './steps/DirectInjectStep';
@@ -120,7 +119,6 @@ interface AddPaneNewPanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
-  config?: BrandConfig;
   isSandboxMode?: boolean;
 }
 
@@ -131,7 +129,6 @@ const AddPaneNewPanel = ({
   ctx: providedCtx,
   isStoryFragment = false,
   isContextPane = false,
-  config,
   isSandboxMode = false,
 }: AddPaneNewPanelProps) => {
   const ctx = providedCtx || getCtx();
@@ -143,19 +140,21 @@ const AddPaneNewPanel = ({
   const [layoutChoice, setLayoutChoice] = useState<LayoutChoice>('standard');
   const [error, setError] = useState<string | null>(null);
 
+  // Standard / Single Column State
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
 
+  // Grid / 2-Column State (Strictly Prompt-Only)
   const [overallPrompt, setOverallPrompt] = useState(
     prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.default
   );
-  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 [promptValueCol1, setPromptValueCol1] = useState(
+    prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.left.prompt
+  );
+  const [promptValueCol2, setPromptValueCol2] = useState(
+    prompts.aiPaneCopyPrompt_2cols.presets.heroDefault.right.prompt
+  );
 
   const [selectedLibraryEntry, setSelectedLibraryEntry] =
     useState<DesignLibraryEntry | null>(null);
@@ -228,11 +227,6 @@ const AddPaneNewPanel = ({
     handleApplyTemplate(blankTemplate);
   };
 
-  const handleDesignLibrarySelect = (entry: DesignLibraryEntry) => {
-    setSelectedLibraryEntry(entry);
-    setStep('copyInput');
-  };
-
   const handleAiDesignContinue = () => {
     setStep('copyInput');
   };
@@ -276,6 +270,18 @@ const AddPaneNewPanel = ({
     }
   };
 
+  const handleDesignLibrarySelect = (entry: DesignLibraryEntry) => {
+    setSelectedLibraryEntry(entry);
+
+    if (entry.template.gridLayout) {
+      setLayoutChoice('grid');
+    } else {
+      setLayoutChoice('standard');
+    }
+
+    setStep('copyInput');
+  };
+
   const handleFinalGenerate = useCallback(async () => {
     setError(null);
     setStep('loading');
@@ -286,59 +292,99 @@ const AddPaneNewPanel = ({
           throw new Error('No design library item was selected.');
         }
 
-        if (copyMode === 'raw') {
-          const liveTemplate = convertStorageToLiveTemplate(
-            mergeCopyIntoTemplate(selectedLibraryEntry.template, [])
-          );
-          if (liveTemplate.markdown) {
-            liveTemplate.markdown.markdownBody = copyValue;
-          }
-          handleApplyTemplate(liveTemplate);
-          return;
-        }
+        const liveTemplate = convertStorageToLiveTemplate(
+          selectedLibraryEntry.template
+        );
+        const shellResult = convertTemplateToAIShell(liveTemplate);
+        const layout = 'Text Only';
 
-        if (copyMode === 'prompt') {
-          const liveTemplate = convertStorageToLiveTemplate(
-            selectedLibraryEntry.template
-          );
-          if (!liveTemplate.markdown) {
-            throw new Error(
-              'The selected design library item is not compatible with this workflow as it has no markdown section.'
+        if (layoutChoice === 'grid' && liveTemplate.gridLayout) {
+          const copyPromptDetails = prompts.aiPaneCopyPrompt_2cols;
+          const preset = copyPromptDetails.presets.heroDefault;
+          const copyResults: string[] = [];
+
+          // Only prompt mode supported for grid now
+          const promptsToRun: {
+            prompt: string;
+            presetKey: ColumnPresetKey;
+          }[] = [
+            {
+              prompt: promptValueCol1,
+              presetKey: 'left',
+            },
+            {
+              prompt: promptValueCol2,
+              presetKey: 'right',
+            },
+          ];
+
+          for (const item of promptsToRun) {
+            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}}',
+                "N/A - Use the provided Shell JSON's design."
+              )
+              .replace('{{LAYOUT_TYPE}}', layout)
+              .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
+
+            const copyResult = await callAskLemurAPI(
+              formattedCopyPrompt,
+              copyPromptDetails.system || '',
+              false,
+              isSandboxMode
             );
+            copyResults.push(copyResult);
           }
 
-          const shellJson = convertTemplateToAIShell(liveTemplate);
-          if (!shellJson || shellJson === '{}') {
-            throw new Error(
-              'Could not generate a valid AI shell from this design.'
-            );
+          const finalPane = parseAiPane(shellResult, copyResults, layout);
+          handleApplyTemplate(finalPane);
+        } else if (layoutChoice === 'standard' && liveTemplate.markdown) {
+          if (copyMode === 'raw') {
+            liveTemplate.markdown.markdownBody = copyValue;
+            handleApplyTemplate(liveTemplate);
+            return;
           }
 
-          const copyPromptDetails = prompts.aiPaneCopyPrompt;
-          const layout = 'Text Only';
-          const formattedCopyPrompt = copyPromptDetails.user_template
-            .replace('{{COPY_INPUT}}', promptValue)
-            .replace(
-              '{{DESIGN_INPUT}}',
-              "N/A - Use the provided Shell JSON's design."
-            )
-            .replace('{{LAYOUT_TYPE}}', layout)
-            .replace('{{SHELL_JSON}}', shellJson);
+          if (copyMode === 'prompt') {
+            if (!shellResult || shellResult === '{}') {
+              throw new Error(
+                'Could not generate a valid AI shell from this design.'
+              );
+            }
 
-          const copyResult = await callAskLemurAPI(
-            formattedCopyPrompt,
-            copyPromptDetails.system || '',
-            false,
-            isSandboxMode
-          );
+            const copyPromptDetails = prompts.aiPaneCopyPrompt;
+            const formattedCopyPrompt = copyPromptDetails.user_template
+              .replace('{{COPY_INPUT}}', promptValue)
+              .replace(
+                '{{DESIGN_INPUT}}',
+                "N/A - Use the provided Shell JSON's design."
+              )
+              .replace('{{LAYOUT_TYPE}}', layout)
+              .replace('{{SHELL_JSON}}', shellResult);
 
-          const newNodes = parseAiCopyHtml(
-            copyResult,
-            liveTemplate.markdown.id
+            const copyResult = await callAskLemurAPI(
+              formattedCopyPrompt,
+              copyPromptDetails.system || '',
+              false,
+              isSandboxMode
+            );
+
+            const newNodes = parseAiCopyHtml(
+              copyResult,
+              liveTemplate.markdown.id
+            );
+            const finalPane = cloneDeep(liveTemplate);
+            finalPane.markdown!.nodes = newNodes;
+            handleApplyTemplate(finalPane);
+          }
+        } else {
+          throw new Error(
+            'Template and layout mismatch. Please go back and try again.'
           );
-          const finalPane = cloneDeep(liveTemplate);
-          finalPane.markdown!.nodes = newNodes;
-          handleApplyTemplate(finalPane);
         }
       } else if (initialChoice === 'ai') {
         let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
@@ -398,32 +444,22 @@ const AddPaneNewPanel = ({
           const preset = copyPromptDetails.presets.heroDefault;
           const copyResults: string[] = [];
 
+          // Grid is strictly prompt-based
           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)
@@ -456,12 +492,8 @@ const AddPaneNewPanel = ({
     promptValue,
     copyValue,
     overallPrompt,
-    copyModeCol1,
     promptValueCol1,
-    copyValueCol1,
-    copyModeCol2,
     promptValueCol2,
-    copyValueCol2,
     isSandboxMode,
     initialChoice,
     layoutChoice,
@@ -552,58 +584,47 @@ const AddPaneNewPanel = ({
   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();
+        !overallPrompt.trim() ||
+        !promptValueCol1.trim() ||
+        !promptValueCol2.trim();
 
       return (
         <div className="space-y-4 p-4">
           <div>
-            <h4 className="mb-2 block text-sm font-bold text-gray-700">
+            <label className="mb-2 block text-sm font-bold text-gray-700">
               Overall Component Brief
-            </h4>
+            </label>
             <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"
             />
+            <p className="mt-1 text-xs text-gray-500">
+              This context is applied to both columns.
+            </p>
           </div>
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
             <div>
-              <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
-                }
+              <label className="mb-2 block text-sm font-bold text-gray-700">
+                Left Column Prompt
+              </label>
+              <textarea
+                value={promptValueCol1}
+                onChange={(e) => setPromptValueCol1(e.target.value)}
+                rows={4}
+                className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
               />
             </div>
             <div>
-              <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
-                }
+              <label className="mb-2 block text-sm font-bold text-gray-700">
+                Right Column Prompt
+              </label>
+              <textarea
+                value={promptValueCol2}
+                onChange={(e) => setPromptValueCol2(e.target.value)}
+                rows={4}
+                className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
               />
             </div>
           </div>
@@ -672,17 +693,13 @@ const AddPaneNewPanel = ({
           ← Back to Choice
         </button>
       </div>
-      <DesignLibraryStep
-        config={config!}
-        onSelect={handleDesignLibrarySelect}
-      />
+      <DesignLibraryStep onSelect={handleDesignLibrarySelect} />
     </div>
   );
 
   const renderAiDesignStep = () => (
     <div className="space-y-4 p-4">
       <AiDesignStep
-        config={config!}
         designConfig={aiDesignConfig}
         onDesignConfigChange={setAiDesignConfig}
       />
@@ -765,25 +782,15 @@ const AddPaneNewPanel = ({
   return (
     <div className="bg-white p-2 shadow-inner">
       <div className="group mb-2 flex w-full items-center gap-1 rounded-md bg-white p-1.5">
-        {first ? (
-          <div className="w-full text-center">
-            <h2 className="font-action py-1.5 text-lg font-bold text-gray-800">
-              Welcome to Tract Stack
-            </h2>
-          </div>
-        ) : (
-          <>
-            <button
-              onClick={() => setParentMode(PaneAddMode.DEFAULT, first)}
-              className="w-fit rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 transition-colors hover:bg-gray-200"
-            >
-              ← Go Back
-            </button>
-            <div className="font-action ml-4 flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
-              + Design New Pane
-            </div>
-          </>
-        )}
+        <button
+          onClick={() => setParentMode(PaneAddMode.DEFAULT, first)}
+          className="w-fit rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 transition-colors hover:bg-gray-200"
+        >
+          ← Go Back
+        </button>
+        <div className="font-action ml-4 flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
+          + Design New Pane
+        </div>
       </div>
       <div className="min-h-96 rounded-md border bg-gray-50">
         {renderStep()}

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

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { getCtx, type NodesContext } from '@/stores/nodes';
+import { PaneAddMode, type StoragePane } from '@/types/compositorTypes';
+import {
+  remapPaneIds,
+  convertStorageToLiveTemplate,
+} from '@/utils/compositor/designLibraryHelper';
+
+interface AddPanePanelPasteProps {
+  nodeId: string;
+  first: boolean;
+  setMode: (mode: PaneAddMode, reset?: boolean) => void;
+  ctx?: NodesContext;
+  isStoryFragment?: boolean;
+  isContextPane?: boolean;
+}
+
+const AddPanePanel_paste = ({
+  nodeId,
+  first,
+  setMode,
+  ctx: providedCtx,
+  isStoryFragment,
+  isContextPane,
+}: AddPanePanelPasteProps) => {
+  const [jsonInput, setJsonInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const ctx = providedCtx || getCtx();
+
+  const handleCreate = () => {
+    setError(null);
+    if (!jsonInput.trim()) {
+      setError('Paste content cannot be empty.');
+      return;
+    }
+
+    try {
+      const parsedPane = JSON.parse(jsonInput) as StoragePane;
+      if (parsedPane.nodeType !== 'Pane') {
+        throw new Error('Pasted content is not a valid Pane object.');
+      }
+
+      const remappedPane = remapPaneIds(parsedPane);
+      const liveTemplate = convertStorageToLiveTemplate(remappedPane);
+
+      const ownerId =
+        isStoryFragment || isContextPane
+          ? nodeId
+          : ctx.getClosestNodeTypeFromId(nodeId, 'StoryFragment');
+
+      ctx.addTemplatePane(
+        ownerId,
+        liveTemplate,
+        nodeId,
+        first ? 'before' : 'after'
+      );
+      ctx.notifyNode('root');
+      setMode(PaneAddMode.DEFAULT, true);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An unknown error occurred during parsing.';
+      setError(`Invalid Pane JSON: ${message}`);
+    }
+  };
+
+  return (
+    <div className="p-2 shadow-inner">
+      <div className="rounded-md border bg-gray-50 p-4">
+        <div className="flex items-center justify-between pb-4">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setMode(PaneAddMode.DEFAULT)}
+              className="w-fit rounded bg-gray-200 px-3 py-1 text-sm text-gray-800 transition-colors hover:bg-gray-300"
+            >
+              ← Go Back
+            </button>
+            <h3 className="font-action text-sm font-bold text-cyan-700">
+              Paste Pane
+            </h3>
+          </div>
+        </div>
+        <div className="space-y-4">
+          <p className="text-sm text-gray-600">
+            Paste the JSON content of a copied pane into the text area below.
+          </p>
+          <textarea
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+            placeholder="Paste pane JSON here..."
+            className="h-48 w-full rounded-md border border-gray-300 bg-white p-2 font-mono text-xs focus:border-cyan-500 focus:ring-cyan-500"
+            spellCheck={false}
+          />
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <div className="flex justify-end">
+            <button
+              onClick={handleCreate}
+              disabled={!jsonInput.trim()}
+              className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
+            >
+              Create Pane from Paste
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddPanePanel_paste;