astro-tractstack 2.0.15 → 2.0.16

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

@@ -10,7 +10,6 @@ import prompts from '@/constants/prompts.json';
 import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
-
 import { CopyInputStep } from './steps/CopyInputStep';
 import { DesignLibraryStep } from './steps/DesignLibraryStep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
@@ -21,7 +20,6 @@ import {
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 
-// --- Types for Workflow State ---
 type Step =
   | 'initial'
   | 'copyInput'
@@ -33,7 +31,6 @@ type Step =
 type InitialChoice = 'library' | 'ai' | 'blank';
 type CopyMode = 'prompt' | 'raw';
 
-// --- API Call Helper ---
 interface GenerationResponse {
   success: boolean;
   data?: { response: string | object };
@@ -43,7 +40,8 @@ interface GenerationResponse {
 const callAskLemurAPI = async (
   prompt: string,
   context: string,
-  expectJson: boolean
+  expectJson: boolean,
+  isSandboxMode: boolean
 ): Promise<string> => {
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
@@ -56,12 +54,22 @@ const callAskLemurAPI = async (
     max_tokens: 2000,
   };
 
-  const response = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
-    credentials: 'include',
-    body: JSON.stringify(requestBody),
-  });
+  let response: Response;
+  if (isSandboxMode) {
+    response = await fetch(`/api/sandbox`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      credentials: 'include',
+      body: JSON.stringify({ action: 'askLemur', payload: requestBody }),
+    });
+  } else {
+    response = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      credentials: 'include',
+      body: JSON.stringify(requestBody),
+    });
+  }
 
   if (!response.ok) {
     const errorText = await response.text();
@@ -98,7 +106,6 @@ const callAskLemurAPI = async (
   throw new Error('Unexpected response format received from API.');
 };
 
-// --- Main Component ---
 interface AddPaneNewPanelProps {
   nodeId: string;
   first: boolean;
@@ -107,6 +114,7 @@ interface AddPaneNewPanelProps {
   isStoryFragment?: boolean;
   isContextPane?: boolean;
   config?: BrandConfig;
+  isSandboxMode?: boolean;
 }
 
 const AddPaneNewPanel = ({
@@ -117,23 +125,18 @@ const AddPaneNewPanel = ({
   isStoryFragment = false,
   isContextPane = false,
   config,
+  isSandboxMode = false,
 }: AddPaneNewPanelProps) => {
   const ctx = providedCtx || getCtx();
   const hasAssemblyAI = useStore(hasAssemblyAIStore);
-
-  // --- State Machine and Data Stores ---
   const [step, setStep] = useState<Step>('initial');
   const [initialChoice, setInitialChoice] = useState<InitialChoice | null>(
     null
   );
   const [error, setError] = useState<string | null>(null);
-
-  // State for CopyInputStep
-  const [copyMode, setCopyMode] = useState<CopyMode>('raw');
+  const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
-
-  // State for AiDesignStep
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
     baseColor: '',
@@ -142,8 +145,6 @@ const AddPaneNewPanel = ({
     additionalNotes: '',
   });
 
-  // --- Handlers & Logic ---
-
   const handleInitialChoice = (choice: InitialChoice) => {
     setInitialChoice(choice);
     setError(null);
@@ -243,7 +244,8 @@ const AddPaneNewPanel = ({
         const copyResult = await callAskLemurAPI(
           formattedCopyPrompt,
           copyPromptDetails.system || '',
-          false
+          false,
+          isSandboxMode
         );
 
         // 4. Parse ONLY the AI-generated HTML into content nodes
@@ -288,7 +290,8 @@ const AddPaneNewPanel = ({
       const shellResult = await callAskLemurAPI(
         formattedShellPrompt,
         shellPromptDetails.system || '',
-        true
+        true,
+        isSandboxMode
       );
 
       const copyInputContent = copyMode === 'prompt' ? promptValue : copyValue;
@@ -301,7 +304,8 @@ const AddPaneNewPanel = ({
       const copyResult = await callAskLemurAPI(
         formattedCopyPrompt,
         copyPromptDetails.system || '',
-        false
+        false,
+        isSandboxMode
       );
 
       const finalPane = parseAiPane(shellResult, copyResult, layout);
@@ -310,7 +314,7 @@ const AddPaneNewPanel = ({
       setError(err.message || 'Failed to generate AI pane.');
       setStep('error');
     }
-  }, [aiDesignConfig, copyMode, promptValue, copyValue]);
+  }, [aiDesignConfig, copyMode, promptValue, copyValue, isSandboxMode]);
 
   const handleApplyTemplate = async (template: TemplatePane) => {
     if (!ctx) return;

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

@@ -25,14 +25,7 @@ const StyleImagePanel = ({
   parentNode,
 }: StyleImagePanelProps) => {
   const [altDescription, setAltDescription] = useState(node.alt || '');
-  if (
-    !node?.tagName ||
-    !containerNode?.tagName ||
-    !outerContainerNode?.tagName ||
-    !isMarkdownPaneFragmentNode(parentNode)
-  ) {
-    return null;
-  }
+
   const imgDefaultClasses = parentNode.defaultClasses?.[node.tagName];
   const imgOverrideClasses = node.overrideClasses;
   const containerDefaultClasses =
@@ -303,6 +296,15 @@ const StyleImagePanel = ({
     ctx.modifyNodes([{ ...imgNode, isChanged: true }]);
   };
 
+  if (
+    !node?.tagName ||
+    !containerNode?.tagName ||
+    !outerContainerNode?.tagName ||
+    !isMarkdownPaneFragmentNode(parentNode)
+  ) {
+    return null;
+  }
+
   return (
     <div className="space-y-8">
       <div className="space-y-4">

package/templates/src/components/edit/state/SaveModal.tsx

@@ -45,6 +45,7 @@ interface SaveModalProps {
   slug: string;
   isContext: boolean;
   onClose: () => void;
+  isSandboxMode?: boolean;
 }
 
 const PROGRESS_PHASES = {
@@ -61,11 +62,47 @@ const INDETERMINATE_STAGES: SaveStage[] = [
   'UPDATING_HOME_PAGE',
 ];
 
+const SandboxUpgradeNotice = ({ onClose }: { onClose: () => void }) => (
+  <Dialog.Root open={true} onOpenChange={() => onClose()} modal={true}>
+    <Portal>
+      <Dialog.Backdrop className="fixed inset-0 z-[9005] bg-black bg-opacity-75" />
+      <Dialog.Positioner className="fixed inset-0 z-[9005] flex items-center justify-center p-4">
+        <Dialog.Content className="w-full max-w-md overflow-hidden rounded-lg bg-white shadow-xl">
+          <div className="p-6 text-center">
+            <Dialog.Title className="text-xl font-bold text-gray-900">
+              Save Your Work
+            </Dialog.Title>
+            <Dialog.Description className="mt-2 text-gray-600">
+              To save your changes and get a shareable link, please sign up for
+              a full account.
+            </Dialog.Description>
+            <div className="mt-6 flex justify-center gap-3">
+              <a
+                href="/sandbox/register"
+                className="bg-myblue hover:bg-myorange rounded-md px-4 py-2 font-bold text-white"
+              >
+                Sign Up Now
+              </a>
+              <button
+                onClick={onClose}
+                className="rounded-md bg-gray-200 px-4 py-2 text-gray-800 hover:bg-gray-300"
+              >
+                Keep Editing
+              </button>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Portal>
+  </Dialog.Root>
+);
+
 export default function SaveModal({
   show,
   slug,
   isContext,
   onClose,
+  isSandboxMode = false,
 }: SaveModalProps) {
   const [stage, setStage] = useState<SaveStage>('PREPARING');
   const [progress, setProgress] = useState(0);
@@ -871,6 +908,10 @@ export default function SaveModal({
     }
   })();
 
+  if (isSandboxMode) {
+    return show ? <SandboxUpgradeNotice onClose={onClose} /> : null;
+  }
+
   return (
     <Dialog.Root
       open={show}

package/templates/src/pages/api/sandbox.ts

@@ -0,0 +1,86 @@
+import type { APIRoute } from '@/types/astro';
+
+export const POST: APIRoute = async ({ request }) => {
+  console.log(1);
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+  const sharedSecret = import.meta.env.PRIVATE_SANDBOX_SECRET;
+  const tenantId =
+    request.headers.get('X-Tenant-ID') ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+  console.log(goBackend);
+  console.log(sharedSecret);
+  console.log(tenantId);
+
+  if (!sharedSecret || sharedSecret === 'false' || sharedSecret === 'true') {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Sandbox feature is not configured on the server.',
+      }),
+      { status: 501, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
+  const profileCookie = request.headers
+    .get('cookie')
+    ?.includes('tractstack_profile');
+  if (!profileCookie) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Forbidden: Missing sandbox profile.',
+      }),
+      { status: 403, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+  console.log(profileCookie);
+
+  try {
+    const body = await request.json();
+    const { action, payload } = body;
+    console.log(action, payload);
+
+    if (action !== 'askLemur') {
+      return new Response(
+        JSON.stringify({ success: false, error: 'Invalid action.' }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+
+    const backendResponse = await fetch(`${goBackend}/api/v1/aai/askLemur`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+        Authorization: `Bearer ${sharedSecret}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!backendResponse.ok) {
+      const errorText = await backendResponse.text();
+      return new Response(errorText, {
+        status: backendResponse.status,
+        headers: { 'Content-Type': 'application/json' },
+      });
+    }
+
+    const data = await backendResponse.json();
+    return new Response(JSON.stringify(data), {
+      status: 200,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'An unknown error occurred.';
+    return new Response(
+      JSON.stringify({ success: false, error: errorMessage }),
+      {
+        status: 500,
+        headers: { 'Content-Type': 'application/json' },
+      }
+    );
+  }
+};

package/templates/src/pages/sandbox.astro

@@ -0,0 +1,137 @@
+---
+import { ulid } from 'ulid';
+import Layout from '@/layouts/Layout.astro';
+import Header from '@/components/Header.astro';
+import { getFullContentMap } from '@/stores/analytics';
+import { getBrandConfig } from '@/utils/api/brandConfig';
+import { components as codeHookComponents } from '@/custom/CodeHook.astro';
+import StoryKeepHeader from '@/components/edit/Header';
+import StoryKeepToolBar from '@/components/edit/ToolBar';
+import StoryKeepToolMode from '@/components/edit/ToolMode';
+import SettingsPanel from '@/components/edit/SettingsPanel';
+import { Compositor } from '@/components/compositor/Compositor';
+import SandboxAuthWrapper from '@/components/codehooks/SandboxAuthWrapper.tsx';
+import { preHealthCheck } from '@/utils/backend';
+
+if (!import.meta.env.PRIVATE_SANDBOX_SECRET) {
+  return Astro.redirect('/');
+}
+
+const tenantId =
+  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+
+const healthCheckRedirect = await preHealthCheck(tenantId);
+if (healthCheckRedirect !== undefined) {
+  return healthCheckRedirect;
+}
+
+const brandConfig = await getBrandConfig(tenantId);
+
+const emptyStoryFragment = {
+  id: ulid(),
+  nodeType: 'StoryFragment' as const,
+  parentId: null,
+  title: 'Sandbox Page',
+  slug: 'sandbox-page',
+  paneIds: [],
+  isChanged: false,
+  created: new Date(),
+  changed: new Date(),
+};
+const loadData = {
+  storyfragmentNodes: [emptyStoryFragment],
+};
+const title = 'Sandbox - TractStack Editor';
+const storyFragmentID = emptyStoryFragment.id;
+
+const fullContentMap = await getFullContentMap(tenantId);
+const urlParams: Record<string, string | boolean> = {};
+for (const [key, value] of Astro.url.searchParams) {
+  urlParams[key] = value === '' ? true : value;
+}
+---
+
+<Layout
+  title={title}
+  slug="sandbox"
+  brandConfig={brandConfig}
+  storyfragmentId={storyFragmentID}
+  isStoryKeep={true}
+  isEditor={true}
+>
+  <SandboxAuthWrapper client:load />
+  <Header
+    title={title}
+    slug="sandbox"
+    brandConfig={brandConfig}
+    isContext={false}
+    isStoryKeep={true}
+    isEditable={false}
+    menu={null}
+  />
+
+  <section
+    id="storykeepHeader"
+    role="banner"
+    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
+  >
+    <StoryKeepHeader
+      slug="sandbox"
+      isContext={false}
+      isSandboxMode={true}
+      client:only="react"
+    />
+  </section>
+
+  <div class="flex min-h-screen">
+    <StoryKeepToolMode isContext={false} client:only="react" />
+
+    <main id="mainContent" class="relative flex-1 overflow-x-auto">
+      <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
+        <div
+          class="h-fit min-h-screen pb-96"
+          style={{
+            backgroundImage:
+              'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
+          }}
+        >
+          <Compositor
+            id={storyFragmentID}
+            nodes={loadData}
+            config={brandConfig}
+            fullContentMap={fullContentMap}
+            fullCanonicalURL="/sandbox"
+            urlParams={urlParams}
+            availableCodeHooks={Object.keys(codeHookComponents)}
+            isSandboxMode={true}
+            client:only="react"
+          />
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <aside
+    id="settingsControls"
+    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
+  >
+    <div class="pointer-events-none flex-grow"></div>
+
+    <div class="pointer-events-auto flex-shrink-0">
+      <StoryKeepToolBar client:only="react" />
+    </div>
+
+    <div class="pointer-events-auto max-h-full">
+      <SettingsPanel
+        config={brandConfig}
+        availableCodeHooks={Object.keys(codeHookComponents)}
+        client:only="react"
+      />
+    </div>
+  </aside>
+</Layout>
+
+<script>
+  import { setupLayoutObservers } from '@/utils/layout';
+  document.addEventListener('astro:page-load', setupLayoutObservers);
+</script>

package/templates/src/types/nodeProps.ts

@@ -27,6 +27,7 @@ export type NodeProps = {
   ctx?: NodesContext;
   first?: boolean;
   onDragStart?: (origin: SelectionOrigin, e: MouseEvent<HTMLElement>) => void;
+  isSandboxMode?: boolean;
   isSelectableText?: boolean;
 };
 

package/templates/src/utils/profileStorage.ts

@@ -148,6 +148,13 @@ export class ProfileStorage {
     StorageManager.set(this.STORAGE_KEYS.profileToken, token);
     StorageManager.set(this.STORAGE_KEYS.hasProfile, '1');
     StorageManager.set(this.STORAGE_KEYS.unlockedProfile, '1');
+
+    try {
+      const maxAge = 60 * 60 * 24;
+      document.cookie = `tractstack_profile=true; path=/; SameSite=Lax; max-age=${maxAge}`;
+    } catch {
+      // Silently fail if cookies are blocked
+    }
   }
 
   /**
@@ -157,6 +164,12 @@ export class ProfileStorage {
     StorageManager.remove(this.STORAGE_KEYS.profileToken);
     StorageManager.remove(this.STORAGE_KEYS.hasProfile);
     StorageManager.remove(this.STORAGE_KEYS.unlockedProfile);
+    try {
+      document.cookie =
+        'tractstack_profile=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+    } catch {
+      // Silently fail
+    }
   }
 
   /**

package/utils/inject-files.ts

@@ -139,6 +139,18 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/Pane_layout.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/codehooks/SandboxAuthWrapper.tsx'
+      ),
+      dest: 'src/components/codehooks/SandboxAuthWrapper.tsx',
+    },
+    {
+      src: resolve(
+        '../templates/src/components/codehooks/SandboxRegisterForm.tsx'
+      ),
+      dest: 'src/components/codehooks/SandboxRegisterForm.tsx',
+    },
     {
       src: resolve('../templates/src/components/compositor/nodes/Markdown.tsx'),
       dest: 'src/components/compositor/nodes/Markdown.tsx',
@@ -441,14 +453,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/RestylePaneModal.tsx',
     },
-    {
-      src: resolve('../templates/src/components/edit/pane/AiPaneGenerator.tsx'),
-      dest: 'src/components/edit/pane/AiPaneGenerator.tsx',
-    },
-    {
-      src: resolve('../templates/src/components/edit/pane/AiPanePreview.tsx'),
-      dest: 'src/components/edit/pane/AiPanePreview.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/steps/CopyInputStep.tsx'
@@ -603,12 +607,6 @@ export async function injectTemplateFiles(
       dest: 'src/stores/selection.ts',
     },
 
-    // AAI utils
-    {
-      src: resolve('../templates/src/utils/aai/getTitleSlug.ts'),
-      dest: 'src/utils/aai/getTitleSlug.ts',
-    },
-
     // Compositor utils - etl
     {
       src: resolve('../templates/src/utils/etl/index.ts'),
@@ -844,6 +842,10 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/pages/context/[...contextSlug]/edit.astro',
     },
+    {
+      src: resolve('../templates/src/pages/sandbox.astro'),
+      dest: 'src/pages/sandbox.astro',
+    },
     {
       src: resolve('../templates/src/pages/storykeep.astro'),
       dest: 'src/pages/storykeep.astro',
@@ -888,6 +890,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/pages/api/tailwind.ts'),
       dest: 'src/pages/api/tailwind.ts',
     },
+    {
+      src: resolve('../templates/src/pages/api/sandbox.ts'),
+      dest: 'src/pages/api/sandbox.ts',
+    },
 
     // Authentication Pages
     {
@@ -2156,6 +2162,13 @@ export async function injectTemplateFiles(
     // Example Components (Conditional)
     ...(config?.includeExamples
       ? [
+          {
+            src: resolve(
+              '../templates/custom/with-examples/SandboxLauncher.tsx'
+            ),
+            dest: 'src/custom/SandboxLauncher.tsx',
+            protected: true,
+          },
           {
             src: resolve('../templates/custom/with-examples/CustomHero.astro'),
             dest: 'src/custom/CustomHero.astro',