astro-tractstack 2.1.3 → 2.2.1

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

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import BooleanToggle from '@/components/form/BooleanToggle';
 import EnumSelect from '@/components/form/EnumSelect';
 
@@ -17,7 +18,7 @@ interface CopyInputStepProps {
   onTopicChange: (value: string) => void;
 
   showAdvancedPrompts: boolean;
-  onShowAdvancedPromptsChange: (value: boolean) => void;
+  onShowAdvancedPromptsChange?: (value: boolean) => void;
 
   promptValue: string;
   onPromptValueChange: (value: string) => void;
@@ -42,6 +43,18 @@ interface CopyInputStepProps {
   isAiStyling: boolean;
   onIsAiStylingChange: (checked: boolean) => void;
   showStyleToggle?: boolean;
+  onDirectInject?: () => void;
+
+  masterShellSystem?: string;
+  setMasterShellSystem?: (val: string) => void;
+  masterShellUser?: string;
+  setMasterShellUser?: (val: string) => void;
+  masterCopySystem?: string;
+  setMasterCopySystem?: (val: string) => void;
+  masterCopyUser?: string;
+  setMasterCopyUser?: (val: string) => void;
+
+  children?: ReactNode;
 }
 
 export const CopyInputStep = ({
@@ -73,6 +86,16 @@ export const CopyInputStep = ({
   isAiStyling,
   onIsAiStylingChange,
   showStyleToggle = true,
+  onDirectInject,
+  masterShellSystem,
+  setMasterShellSystem,
+  masterShellUser,
+  setMasterShellUser,
+  masterCopySystem,
+  setMasterCopySystem,
+  masterCopyUser,
+  setMasterCopyUser,
+  children,
 }: CopyInputStepProps) => {
   const renderModeSelection = () => (
     <div className="my-2 flex flex-wrap gap-4">
@@ -132,99 +155,190 @@ export const CopyInputStep = ({
     </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>
+  const renderAdvancedEditors = () => {
+    if (
+      masterShellSystem !== undefined &&
+      masterShellUser !== undefined &&
+      masterCopySystem !== undefined &&
+      masterCopyUser !== undefined &&
+      setMasterShellSystem &&
+      setMasterShellUser &&
+      setMasterCopySystem &&
+      setMasterCopyUser
+    ) {
+      return (
+        <div className="mt-4 space-y-6 rounded-md border border-yellow-200 bg-yellow-50 p-4">
+          <div className="flex items-start gap-2">
+            <div className="mt-0.5 text-xl">⚡</div>
+            <div>
+              <p className="font-bold text-gray-900">Master Template Mode</p>
+              <p className="text-xs text-gray-600">
+                You are editing the raw source prompts. Variables like{' '}
+                <code className="bg-gray-100 px-1 font-mono font-bold">{`{{DESIGN_INPUT}}`}</code>{' '}
+                will be replaced by your settings unless you remove them.
+              </p>
+            </div>
+          </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="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-        />
-      </div>
+          <div>
+            <label className="mb-2 block text-sm font-bold text-gray-800">
+              Shell System Prompt
+            </label>
+            <textarea
+              value={masterShellSystem}
+              onChange={(e) => setMasterShellSystem(e.target.value)}
+              rows={4}
+              className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
 
-      <div className="mb-4 flex items-center">
-        <BooleanToggle
-          label="Advanced: Edit Full Prompts"
-          value={showAdvancedPrompts}
-          onChange={onShowAdvancedPromptsChange}
-          size="sm"
-        />
-      </div>
+          <div>
+            <label className="mb-2 block text-sm font-bold text-gray-800">
+              Shell User Template
+            </label>
+            <textarea
+              value={masterShellUser}
+              onChange={(e) => setMasterShellUser(e.target.value)}
+              rows={10}
+              className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </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-800">
+              Copy System Prompt
+            </label>
+            <textarea
+              value={masterCopySystem}
+              onChange={(e) => setMasterCopySystem(e.target.value)}
+              rows={4}
+              className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
+
+          <div>
+            <label className="mb-2 block text-sm font-bold text-gray-800">
+              Copy User Template
+            </label>
+            <textarea
+              value={masterCopyUser}
+              onChange={(e) => setMasterCopyUser(e.target.value)}
+              rows={10}
+              className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="mt-4 space-y-4 rounded-md border border-gray-200 bg-white p-4">
+        <p className="mb-3 text-xs text-gray-600">
+          Edit the raw prompts sent to the AI. Variables like{' '}
+          <code className="bg-gray-100 px-1 font-mono font-bold">
+            {`{{TOPIC}}`}
+          </code>{' '}
+          will still be replaced.
+        </p>
+        {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={12}
+              className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            />
+          </div>
+        ) : (
+          <>
             <div>
               <label className="mb-2 block text-sm font-bold text-gray-700">
-                Full Prompt
+                Overall Component Brief
               </label>
               <textarea
-                value={promptValue}
-                onChange={(e) => onPromptValueChange(e.target.value)}
-                rows={4}
-                className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                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 md:text-sm"
               />
-              <p className="mt-1 text-xs text-gray-500">
-                Leave [topic] as it will be replaced with your prompt.
-              </p>
             </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">
-                  Overall Component Brief
+                  Left Column Prompt
                 </label>
                 <textarea
-                  value={overallPrompt}
-                  onChange={(e) => onOverallPromptChange(e.target.value)}
-                  rows={3}
-                  className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                  value={promptValueCol1}
+                  onChange={(e) => onPromptValueCol1Change(e.target.value)}
+                  rows={8}
+                  className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
                 />
               </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="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-                  />
-                </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="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-                  />
-                </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={8}
+                  className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                />
               </div>
-            </>
-          )}
+            </div>
+          </>
+        )}
+      </div>
+    );
+  };
+
+  const renderPromptMode = () => (
+    <>
+      {!showAdvancedPrompts && (
+        <>
+          <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 md:text-sm"
+            />
+          </div>
+
+          {children}
+        </>
+      )}
+
+      {onShowAdvancedPromptsChange && (
+        <div className="mt-4 flex items-center border-t border-gray-100 pt-4">
+          <BooleanToggle
+            label="Advanced: Edit Full Prompts"
+            value={showAdvancedPrompts}
+            onChange={onShowAdvancedPromptsChange}
+            size="sm"
+          />
         </div>
       )}
+
+      {showAdvancedPrompts && renderAdvancedEditors()}
     </>
   );
 
@@ -315,6 +429,17 @@ export const CopyInputStep = ({
           </p>
         </div>
       )}
+
+      {onDirectInject && (
+        <div className="mt-4 text-center">
+          <button
+            onClick={onDirectInject}
+            className="text-xs text-gray-400 underline hover:text-gray-600"
+          >
+            Direct Inject HTML+CSS
+          </button>
+        </div>
+      )}
     </>
   );
 };

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

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import { getCtx } from '@/stores/nodes';
+import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface CreativeInjectStepProps {
+  onBack: () => void;
+  onCreatePane: (template: TemplatePane) => void;
+}
+
+export const CreativeInjectStep = ({
+  onBack,
+  onCreatePane,
+}: CreativeInjectStepProps) => {
+  const [html, setHtml] = useState('');
+  const [css, setCss] = useState('');
+  const [isCompiling, setIsCompiling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = async () => {
+    setError(null);
+    if (!html.trim()) {
+      setError('HTML content is required.');
+      return;
+    }
+
+    setIsCompiling(true);
+
+    try {
+      const htmlAst = await htmlToHtmlAst(html, css);
+
+      const template: TemplatePane = {
+        id: '',
+        nodeType: 'Pane',
+        parentId: '',
+        title: 'Creative Pane',
+        slug: '',
+        isDecorative: false,
+        htmlAst,
+        markdown: {
+          id: '',
+          nodeType: 'Markdown',
+          parentId: '',
+          type: 'markdown',
+          markdownId: '',
+          defaultClasses: {},
+          parentClasses: [],
+          nodes: [],
+        },
+      };
+
+      onCreatePane(template);
+      const ctx = getCtx();
+      ctx.showSaveBypass.set(true);
+    } catch (err: any) {
+      console.error('Compiler Error:', err);
+      setError(`Compilation failed: ${err.message}`);
+    } finally {
+      setIsCompiling(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="rounded-md bg-blue-50 p-4">
+        <p className="text-sm text-blue-800">
+          <strong>Creative Mode:</strong> Input raw HTML and CSS. Tailwind
+          classes will be compiled and bucketed into an optimized structure.
+        </p>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="space-y-2">
+          <label
+            htmlFor="htmlInput"
+            className="block text-sm font-bold text-gray-700"
+          >
+            HTML Structure
+          </label>
+          <textarea
+            id="htmlInput"
+            rows={15}
+            value={html}
+            onChange={(e) => setHtml(e.target.value)}
+            disabled={isCompiling}
+            className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500 disabled:bg-gray-100"
+            placeholder={`<div class="p-8 bg-blue-500 hover:bg-blue-600">\n  <h1 class="text-white text-4xl">Hello</h1>\n</div>`}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <label
+            htmlFor="cssInput"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Custom CSS Styles
+          </label>
+          <textarea
+            id="cssInput"
+            rows={15}
+            value={css}
+            onChange={(e) => setCss(e.target.value)}
+            disabled={isCompiling}
+            className="block w-full rounded-md border-gray-300 p-2 font-mono text-xs shadow-sm focus:border-cyan-500 focus:ring-cyan-500 disabled:bg-gray-100"
+            placeholder={`.my-class {\n  border: 1px solid red;\n}`}
+          />
+        </div>
+      </div>
+
+      {error && (
+        <div className="rounded-md bg-red-50 p-4">
+          <p className="text-sm font-bold text-red-800">{error}</p>
+        </div>
+      )}
+
+      <div className="flex justify-between border-t pt-4">
+        <button
+          onClick={onBack}
+          disabled={isCompiling}
+          className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50 disabled:opacity-50"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={handleCreate}
+          disabled={isCompiling}
+          className="flex items-center gap-2 rounded-md bg-cyan-600 px-6 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:opacity-50"
+        >
+          {isCompiling ? (
+            <>
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"></span>
+              Compiling...
+            </>
+          ) : (
+            'Compile & Create'
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};