astro-tractstack 2.0.42 → 2.0.44

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

@@ -211,7 +211,8 @@ export const RestylePaneModal = () => {
       (entry: DesignLibraryEntry) =>
         (selectedCategory === 'all' || entry.category === selectedCategory) &&
         entry.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
-        entry.markdownCount === targetMarkdownCount
+        entry.markdownCount === targetMarkdownCount &&
+        !entry.locked
     );
   }, [designLibrary, selectedCategory, searchTerm, targetMarkdownCount]);
 
@@ -350,14 +351,15 @@ export const RestylePaneModal = () => {
     <Dialog.Root
       open={isRestyleModalOpen}
       onOpenChange={handleDialogStateChange}
-      modal={false}
+      modal={true}
+      preventScroll={true}
     >
-      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
+      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
       <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
         <Dialog.Content
           ref={contentRef}
-          className="flex flex-col rounded-lg bg-white shadow-2xl"
-          style={{ maxHeight: '90vw', width: '90vw' }}
+          className="flex max-w-5xl flex-col rounded-lg bg-white shadow-2xl xl:max-w-7xl"
+          style={{ maxHeight: '90vh', width: '90vw' }}
         >
           <header className="flex items-center justify-between border-b p-4">
             <Dialog.Title className="text-xl font-bold">

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

@@ -33,10 +33,7 @@ export const AiDesignStep = ({
   };
 
   return (
-    <div className="space-y-6 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-bold text-gray-800">
-        2. Configure AI Design
-      </label>
+    <div className="space-y-6">
       <div>
         <label className="block text-base font-bold text-gray-800">
           Color Harmony

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/pages/storykeep/init.astro

@@ -46,30 +46,32 @@ const mainStylesUrl = isDev
       )
     }
 
-    <script>
-      (function initCleanSlate() {
-        try {
-          document.cookie =
-            'admin_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
-          document.cookie =
-            'editor_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
-          document.cookie =
-            'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+    <script is:inline>
+      if (typeof document !== 'undefined') {
+        (function initCleanSlate() {
+          try {
+            document.cookie =
+              'admin_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+            document.cookie =
+              'editor_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+            document.cookie =
+              'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
 
-          const tractStackKeys = [];
-          for (let i = 0; i < localStorage.length; i++) {
-            const key = localStorage.key(i);
-            if (key && key.startsWith('tractstack_')) {
-              tractStackKeys.push(key);
+            const tractStackKeys = [];
+            for (let i = 0; i < localStorage.length; i++) {
+              const key = localStorage.key(i);
+              if (key && key.startsWith('tractstack_')) {
+                tractStackKeys.push(key);
+              }
             }
-          }
-          tractStackKeys.forEach((key) => localStorage.removeItem(key));
+            tractStackKeys.forEach((key) => localStorage.removeItem(key));
 
-          console.log('TractStack: Clean slate initialization complete');
-        } catch (error) {
-          console.warn('TractStack: Error during clean slate init:', error);
-        }
-      })();
+            console.log('TractStack: Clean slate initialization complete');
+          } catch (error) {
+            console.warn('TractStack: Error during clean slate init:', error);
+          }
+        })();
+      }
     </script>
   </body>
 </html>