astro-tractstack 2.0.16 → 2.0.17

package/dist/index.js

@@ -470,6 +470,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/steps/AiDesignStep.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/DirectInjectStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/DirectInjectStep.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/custom/with-examples/SandboxLauncher.tsx

@@ -31,15 +31,17 @@ export default function SandboxLauncher() {
           <p className="mt-4 text-lg text-gray-600">
             Create an interactive webpage in a sandbox! No credit card required.
           </p>
-          <p className="mt-8 text-sm text-gray-500">
-            Already connected?{' '}
-            <a
-              href="/storykeep/profile"
-              className="font-bold text-blue-600 underline hover:text-blue-500"
-            >
-              Unlock your profile
-            </a>
-          </p>
+          {!profileExists && (
+            <p className="mt-8 text-sm text-gray-500">
+              Already connected?{' '}
+              <a
+                href="/storykeep/profile"
+                className="font-bold text-blue-600 underline hover:text-blue-500"
+              >
+                Unlock your profile
+              </a>
+            </p>
+          )}
         </div>
 
         {/* Column 2: The Action (Switches between Form and Button) */}

package/templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx

@@ -68,7 +68,7 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
           }}
         >
           <div className="absolute left-2 top-2 z-10 flex flex-col gap-y-2">
-            {props.isSandboxMode && (
+            {!props.isSandboxMode && (
               <button
                 title="Save Pane to Design Library"
                 onClick={handleSaveClick}

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

@@ -19,6 +19,7 @@ import {
   mergeCopyIntoTemplate,
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
+import { DirectInjectStep } from './steps/DirectInjectStep';
 
 type Step =
   | 'initial'
@@ -26,7 +27,8 @@ type Step =
   | 'designLibrary'
   | 'aiDesign'
   | 'loading'
-  | 'error';
+  | 'error'
+  | 'directInject';
 
 type InitialChoice = 'library' | 'ai' | 'blank';
 type CopyMode = 'prompt' | 'raw';
@@ -160,6 +162,8 @@ const AddPaneNewPanel = ({
     setError(null);
     if (step === 'copyInput') {
       setStep('initial');
+    } else if (step === 'directInject') {
+      setStep('aiDesign');
     } else if (step === 'designLibrary' || step === 'aiDesign' || 'error') {
       setStep('copyInput');
     }
@@ -175,18 +179,18 @@ const AddPaneNewPanel = ({
 
   const handleBlankSlate = () => {
     const blankTemplate: TemplatePane = {
-      id: '', // ctx will assign
+      id: '',
       nodeType: 'Pane',
-      parentId: '', // ctx will assign
+      parentId: '',
       title: 'New Pane',
       slug: '',
       isDecorative: false,
       markdown: {
-        id: '', // ctx will assign
+        id: '',
         nodeType: 'Markdown',
-        parentId: '', // ctx will assign
+        parentId: '',
         type: 'markdown',
-        markdownId: '', // ctx will assign
+        markdownId: '',
         defaultClasses: {},
         parentClasses: [],
         nodes: [],
@@ -196,10 +200,9 @@ const AddPaneNewPanel = ({
   };
 
   const handleDesignLibrarySelect = async (entry: DesignLibraryEntry) => {
-    // This flow is for "Design Library + Provide Copy"
     if (copyMode === 'raw') {
       const liveTemplate = convertStorageToLiveTemplate(
-        mergeCopyIntoTemplate(entry.template, []) // Start with blank copy
+        mergeCopyIntoTemplate(entry.template, [])
       );
       if (liveTemplate.markdown) {
         liveTemplate.markdown.markdownBody = copyValue;
@@ -208,12 +211,10 @@ const AddPaneNewPanel = ({
       return;
     }
 
-    // This flow is for "Design Library + Write a Prompt" (Hybrid AI)
     if (copyMode === 'prompt') {
       setError(null);
       setStep('loading');
       try {
-        // 1. Get the full, rich template from the library
         const liveTemplate = convertStorageToLiveTemplate(entry.template);
         if (!liveTemplate.markdown) {
           throw new Error(
@@ -221,7 +222,6 @@ const AddPaneNewPanel = ({
           );
         }
 
-        // 2. Create the simplified shell for the AI
         const shellJson = convertTemplateToAIShell(liveTemplate);
         if (!shellJson || shellJson === '{}') {
           throw new Error(
@@ -229,7 +229,6 @@ const AddPaneNewPanel = ({
           );
         }
 
-        // 3. Get the AI to write copy based on the shell and prompt
         const copyPromptDetails = prompts.aiPaneCopyPrompt;
         const layout = 'Text Only';
         const formattedCopyPrompt = copyPromptDetails.user_template
@@ -248,16 +247,12 @@ const AddPaneNewPanel = ({
           isSandboxMode
         );
 
-        // 4. Parse ONLY the AI-generated HTML into content nodes
         const newNodes = parseAiCopyHtml(copyResult, liveTemplate.markdown.id);
 
-        // 5. Create the final pane by cloning the original rich template
         const finalPane = cloneDeep(liveTemplate);
 
-        // 6. Inject the new AI content, preserving the original rich design
         finalPane.markdown!.nodes = newNodes;
 
-        // 7. Apply the complete, correctly merged pane
         handleApplyTemplate(finalPane);
       } catch (err: any) {
         setError(err.message || 'Failed to generate AI copy for this design.');
@@ -281,7 +276,7 @@ const AddPaneNewPanel = ({
     try {
       const shellPromptDetails = prompts.aiPaneShellPrompt;
       const copyPromptDetails = prompts.aiPaneCopyPrompt;
-      const layout = 'Text Only'; // Hardcoded for this simplified AI path
+      const layout = 'Text Only';
 
       const formattedShellPrompt = shellPromptDetails.user_template
         .replace('{{DESIGN_INPUT}}', designInput)
@@ -317,6 +312,7 @@ const AddPaneNewPanel = ({
   }, [aiDesignConfig, copyMode, promptValue, copyValue, isSandboxMode]);
 
   const handleApplyTemplate = async (template: TemplatePane) => {
+    console.log(template);
     if (!ctx) return;
     try {
       const insertTemplate = cloneDeep(template);
@@ -356,8 +352,6 @@ const AddPaneNewPanel = ({
     }
   };
 
-  // --- Render Logic ---
-
   const renderInitialStep = () => (
     <div className="p-4">
       <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
@@ -369,7 +363,7 @@ const AddPaneNewPanel = ({
           className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
           <SwatchIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-          <h4 className="font-semibold text-gray-800">Use Design Library</h4>
+          <h4 className="font-bold text-gray-800">Use Design Library</h4>
           <p className="text-sm text-gray-600">
             Start with a pre-made design and add your own content.
           </p>
@@ -380,7 +374,7 @@ const AddPaneNewPanel = ({
             className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
           >
             <SparklesIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-            <h4 className="font-semibold text-gray-800">Design with AI</h4>
+            <h4 className="font-bold text-gray-800">Design with AI</h4>
             <p className="text-sm text-gray-600">
               Let AI generate a complete design and copy from your prompt.
             </p>
@@ -391,7 +385,7 @@ const AddPaneNewPanel = ({
           className="group flex flex-col items-center space-y-3 rounded-lg border bg-white p-6 text-center shadow-sm transition-all hover:border-cyan-600 hover:shadow-lg"
         >
           <DocumentPlusIcon className="h-10 w-10 text-gray-500 transition-colors group-hover:text-cyan-600" />
-          <h4 className="font-semibold text-gray-800">Blank Slate</h4>
+          <h4 className="font-bold text-gray-800">Blank Slate</h4>
           <p className="text-sm text-gray-600">
             Add a simple, empty pane to build from scratch.
           </p>
@@ -432,6 +426,17 @@ const AddPaneNewPanel = ({
           Continue →
         </button>
       </div>
+      {initialChoice === `ai` && !isSandboxMode && (
+        <div className="mt-6 text-center text-sm text-gray-600">
+          ADVANCED:{' '}
+          <button
+            onClick={() => setStep('directInject')}
+            className="font-bold text-cyan-700 underline hover:text-cyan-900 focus:outline-none"
+          >
+            Direct Inject
+          </button>
+        </div>
+      )}
     </div>
   );
 
@@ -476,6 +481,10 @@ const AddPaneNewPanel = ({
     </div>
   );
 
+  const renderDirectInjectStep = () => (
+    <DirectInjectStep onBack={handleBack} onCreatePane={handleApplyTemplate} />
+  );
+
   const renderLoading = () => (
     <div className="flex min-h-[300px] flex-col items-center justify-center space-y-4 p-6">
       <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
@@ -509,6 +518,8 @@ const AddPaneNewPanel = ({
         return renderAiDesignStep();
       case 'loading':
         return renderLoading();
+      case 'directInject':
+        return renderDirectInjectStep();
       case 'error':
         return renderError();
       default:

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

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import type { TemplatePane } from '@/types/compositorTypes';
+
+interface DirectInjectStepProps {
+  onBack: () => void;
+  onCreatePane: (template: TemplatePane) => void;
+}
+
+export const DirectInjectStep = ({
+  onBack,
+  onCreatePane,
+}: DirectInjectStepProps) => {
+  const [shellJson, setShellJson] = useState('');
+  const [copyHtml, setCopyHtml] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const handleCreate = () => {
+    setError(null);
+    if (!shellJson.trim() || !copyHtml.trim()) {
+      setError('Both Shell JSON and Inner HTML must be provided.');
+      return;
+    }
+
+    try {
+      const finalPane = parseAiPane(shellJson, copyHtml, 'DirectInject');
+      onCreatePane(finalPane);
+    } catch (err: any) {
+      console.error('Direct Inject Error:', err);
+      setError(
+        `Failed to parse inputs: ${err.message || 'Unknown error'}. Check console.`
+      );
+    }
+  };
+
+  return (
+    <div className="space-y-6 p-4">
+      <div className="space-y-4">
+        <div>
+          <label
+            htmlFor="shellJson"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Shell JSON
+          </label>
+          <textarea
+            id="shellJson"
+            rows={10}
+            value={shellJson}
+            onChange={(e) => setShellJson(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`{ "bgColour": "#ffffff", "parentClasses": [...], "defaultClasses": {...} }`}
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="copyHtml"
+            className="block text-sm font-bold text-gray-700"
+          >
+            Inner HTML
+          </label>
+          <textarea
+            id="copyHtml"
+            rows={10}
+            value={copyHtml}
+            onChange={(e) => setCopyHtml(e.target.value)}
+            className="mt-1 block w-full rounded-md border-gray-300 p-2 font-mono text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            placeholder={`<h2 class="...">...</h2>\n<p class="...">...</p>`}
+          />
+        </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">
+        <button
+          onClick={onBack}
+          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"
+        >
+          ← Back
+        </button>
+        <button
+          onClick={handleCreate}
+          disabled={!shellJson.trim() || !copyHtml.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
+        </button>
+      </div>
+    </div>
+  );
+};

package/templates/src/constants.ts

@@ -18,6 +18,7 @@ export const reservedSlugs = [
   `404`,
   `transcribe`,
   `sitemap`,
+  `sandbox`,
   `robots`,
   `llm`,
 ];

package/templates/src/utils/compositor/aiPaneParser.ts

@@ -60,6 +60,8 @@ let BUTTON_CLASS_LOOKUP: Map<string, { key: string; value: string }> | null =
   null;
 
 const ALLOWED_TAGS = new Set([
+  'ul',
+  'li',
   'h2',
   'h3',
   'h4',
@@ -69,6 +71,7 @@ const ALLOWED_TAGS = new Set([
   'em',
   'strong',
   'button',
+  'a',
 ]);
 
 function buildKeyNormalizationLookup(): Map<string, string> {
@@ -309,7 +312,10 @@ function walkDom(
   if (tagName === 'button') {
     let finalParentId = parentId;
 
-    if (parentId === markdownId) {
+    const parentDomEl = el.parentNode as Element;
+    const parentTagName = parentDomEl?.tagName?.toLowerCase();
+
+    if (parentId === markdownId || parentTagName === 'li') {
       const pNodeId = ulid();
       const pNode: TemplateNode = {
         id: pNodeId,
@@ -330,7 +336,7 @@ function walkDom(
       id: ulid(),
       nodeType: 'TagElement',
       parentId: finalParentId,
-      tagName: 'a', // Buttons are converted to anchor tags for our system
+      tagName: 'a',
       href: '#',
       buttonPayload: {
         ...buttonPayload,

package/utils/inject-files.ts

@@ -471,6 +471,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/steps/AiDesignStep.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/steps/DirectInjectStep.tsx'
+      ),
+      dest: 'src/components/edit/pane/steps/DirectInjectStep.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx'