astro-tractstack 2.0.14 → 2.0.16

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/constants/prompts.json

@@ -45,6 +45,8 @@
   },
   "aiPaneCopyPrompt": {
     "system": "You are an expert **web designer and copywriter**. Your task is to generate a single, visually compelling block of HTML content. You must ensure the content is well-written, engaging, **beautifully spaced**, and **highly readable**.",
-    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>"
+    "user_template": "Here is the design 'shell' and 'theme' (bgColour, parentClasses, and defaultClasses) you must write your HTML for. Your HTML will be placed *inside* this shell. Use the `defaultClasses` as your base theme for styling:\n{{SHELL_JSON}}\n\nNow, generate the HTML content based on these inputs:\n\nContent Prompt: \"{{COPY_INPUT}}\"\nDesign Style: **strictly for visual reference** when choosing element styles **DO NOT** include any words or concepts from the `Design Style` input in the written copy text itself.\"{{DESIGN_INPUT}}\"\nLayout Type: \"{{LAYOUT_TYPE}}\"\n\nCRITICAL RULES:\n1. You are responsible for the **inner layout and visual rhythm**. You MUST add appropriate vertical margins (e.g., `mt-4`, `mt-6`, `mt-8`) directly to any HTML block elements that *deviate* from the default spacing. **Elements must not touch.**\n2. You **MUST NOT** use `<h1>` tags. You must use `<h2>`, `<h3>`, and `<p>` tags for all text content.\n3. For responsive styles, you *must* only use `md:` and `xl:` prefixes.\n4. To make headlines pop, you MUST wrap key words in `<span>` tags with creative classes (e.g., gradient text, different colors).\n5. **All text**, even short links or phrases (like 'Learn more →'), **must** be wrapped in a block element like `<p>` or `<button>`.\n6. You MUST include at least one `<button>` tag for the primary call-to-action.\n7. Verify that **all text elements**, including text within `<span>` tags, `<button>` elements, and any elements using override classes, maintain **high contrast** (meeting at least WCAG AA standards - 4.5:1 for normal text, 3:1 for large text) against the `bgColour` provided in the `SHELL_JSON`. **Prioritize readability above all else**.\n8. Respond *only* with the raw HTML.\n\nEXAMPLE of a good, well-spaced response:\n<h2 class=\"text-4xl font-bold tracking-tight text-white md:text-6xl\"><span class=\"bg-gradient-to-r from-purple-500 to-indigo-400 bg-clip-text text-transparent\">Own the Art.</span> Possess the Reality.</h2>\n<p class=\"mt-6 text-lg leading-8 text-gray-300 md:text-xl\">Every Sneaky Productions NFT is your key. This is where digital rarity meets tangible legacy.</p>\n<button class=\"mt-8 rounded-md bg-indigo-600 px-5 py-3 text-base font-semibold text-white shadow-sm hover:bg-indigo-500\">Secure Your Drop</button>\n<p class=\"mt-4 text-sm text-gray-400\">Learn more <span>→</span></p>",
+    "heroDefault": "A compelling hero section for a website about [topic]. It should have a strong, attention-grabbing headline, a brief paragraph explaining the core value proposition, and a clear call-to-action.",
+    "contentDefault": "A content section that follows a hero. It should elaborate on a key feature or benefit related to [topic]. Include a sub-headline and a descriptive paragraph."
   }
 }

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/compositor/aiPaneParser.ts

@@ -78,7 +78,6 @@ function buildKeyNormalizationLookup(): Map<string, string> {
 
   const keyMap = new Map<string, string>();
   for (const key in tailwindClasses) {
-    // Store lowercase key -> correctly cased key
     keyMap.set(key.toLowerCase(), key);
   }
   KEY_NORMALIZATION_LOOKUP = keyMap;
@@ -97,7 +96,6 @@ function normalizeKeys(
     if (Object.prototype.hasOwnProperty.call(styleObj, key)) {
       const lowerKey = key.toLowerCase();
       const correctKey = keyMap.get(lowerKey);
-      // Use the correctly cased key if found, otherwise keep original (handles potential non-Tailwind keys)
       normalized[correctKey || key] = styleObj[key];
     }
   }
@@ -258,22 +256,16 @@ function walkDom(
 ) {
   if (domNode.nodeType === Node.TEXT_NODE) {
     const copy = domNode.textContent || '';
-    // Preserve leading/trailing spaces unless the *entire* content is just whitespace.
-    // Trim internal excessive whitespace as a basic sanitation step.
     const trimmedCopy = copy.replace(/\s+/g, ' ').trim();
 
     if (trimmedCopy.length > 0) {
-      // Use the original copy to preserve meaningful spaces, but cleaned up.
       let finalCopy = copy.replace(/\s+/g, ' ');
-      // Preserve single leading space if original had one AND previous sibling exists
       if (copy.startsWith(' ') && domNode.previousSibling) {
         finalCopy = ' ' + finalCopy.trimStart();
       }
-      // Preserve single trailing space if original had one AND next sibling exists
       if (copy.endsWith(' ') && domNode.nextSibling) {
         finalCopy = finalCopy.trimEnd() + ' ';
       }
-      // Special case: if it was ONLY space, respect if it was intended between elements
       if (
         trimmedCopy.length === 0 &&
         copy.length > 0 &&
@@ -283,15 +275,13 @@ function walkDom(
         finalCopy = ' ';
       }
 
-      // Only create node if there's actual content or a meaningful space
       if (finalCopy.trim().length > 0 || finalCopy === ' ') {
         const textNode: TemplateNode = {
           id: ulid(),
           nodeType: 'TagElement',
           parentId: parentId,
           tagName: 'text',
-          copy: finalCopy, // Use the carefully preserved copy
-          overrideClasses: {},
+          copy: finalCopy,
         };
         parsedNodes.push({
           flatNode: textNode,
@@ -326,7 +316,6 @@ function walkDom(
         nodeType: 'TagElement',
         parentId: parentId,
         tagName: 'p',
-        overrideClasses: {},
       };
       parsedNodes.push({
         flatNode: pNode,
@@ -341,8 +330,7 @@ function walkDom(
       id: ulid(),
       nodeType: 'TagElement',
       parentId: finalParentId,
-      tagName: 'a',
-      overrideClasses: {},
+      tagName: 'a', // Buttons are converted to anchor tags for our system
       href: '#',
       buttonPayload: {
         ...buttonPayload,
@@ -368,7 +356,6 @@ function walkDom(
     nodeType: 'TagElement',
     parentId: parentId,
     tagName: tagName,
-    overrideClasses: {},
   };
 
   if (tagName === 'span') {
@@ -493,14 +480,41 @@ function parseDefaultClassesFromShell(
   return sanitizedDefaults;
 }
 
+/**
+ * Parses a raw HTML string from the AI into a structured array of TemplateNodes.
+ * @param copyHtml The raw HTML string.
+ * @param markdownId The parent ID for the top-level nodes.
+ * @returns An array of TemplateNodes representing the structured content.
+ */
+export function parseAiCopyHtml(
+  copyHtml: string,
+  markdownId: string
+): TemplateNode[] {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(copyHtml, 'text/html');
+
+  const allParsedNodes: ParsedNode[] = [];
+  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
+
+  // When parsing copy in isolation, all classes are treated as potential overrides.
+  // The consumer is responsible for merging these with a set of defaults if needed.
+  return allParsedNodes.map((pNode) => {
+    if (
+      Object.keys(pNode.responsiveClasses).length > 0 &&
+      pNode.flatNode.tagName !== 'span'
+    ) {
+      pNode.flatNode.overrideClasses = pNode.responsiveClasses;
+    }
+    return pNode.flatNode;
+  });
+}
+
 export const parseAiPane = (
   shellJson: string,
   copyHtml: string,
   layout: string
 ): TemplatePane => {
   const shell: ShellJson = JSON.parse(shellJson);
-  const parser = new DOMParser();
-  const doc = parser.parseFromString(copyHtml, 'text/html');
 
   const paneId = ulid();
   const markdownId = ulid();
@@ -527,73 +541,7 @@ export const parseAiPane = (
     defaultClasses: shellDefaults,
   };
 
-  const allParsedNodes: ParsedNode[] = [];
-  walkDom(doc.body, markdownId, allParsedNodes, markdownId);
-
-  const templateNodes: TemplateNode[] = [];
-  const nodesByTag = new Map<string, ParsedNode[]>();
-
-  allParsedNodes.forEach((parsedNode) => {
-    templateNodes.push(parsedNode.flatNode);
-    const tagName = parsedNode.flatNode.tagName;
-
-    if (
-      tagName &&
-      tagName !== 'span' &&
-      tagName !== 'text' &&
-      tagName !== 'em' &&
-      tagName !== 'strong' &&
-      tagName !== 'a'
-    ) {
-      if (!nodesByTag.has(tagName)) {
-        nodesByTag.set(tagName, []);
-      }
-      nodesByTag.get(tagName)!.push(parsedNode);
-    }
-  });
-
-  nodesByTag.forEach((nodes, tagName) => {
-    const commonResponsiveFromCopy = findMostCommonClasses(nodes);
-    const requiredCommonFromCopy = ensureRequiredViewports(
-      commonResponsiveFromCopy
-    );
-
-    const existingShellDefault = markdownNode.defaultClasses![tagName];
-    const mergedDefault = ensureRequiredViewports(
-      mergeResponsive(existingShellDefault, commonResponsiveFromCopy)
-    );
-
-    markdownNode.defaultClasses![tagName] = mergedDefault;
-
-    nodes.forEach((parsedNode) => {
-      const requiredNodeResponsive = ensureRequiredViewports(
-        parsedNode.responsiveClasses
-      );
-
-      if (!isDeepEqual(requiredNodeResponsive, requiredCommonFromCopy)) {
-        if (!parsedNode.flatNode.overrideClasses) {
-          parsedNode.flatNode.overrideClasses = {};
-        }
-        parsedNode.flatNode.overrideClasses = parsedNode.responsiveClasses;
-      }
-    });
-  });
-
-  if (layout.includes('Image')) {
-    const imgNode: TemplateNode = {
-      id: ulid(),
-      nodeType: 'TagElement',
-      parentId: markdownId,
-      tagName: 'img',
-      src: '/static.jpg',
-      overrideClasses: {},
-    };
-    if (layout === 'Text + Image Left') {
-      templateNodes.unshift(imgNode);
-    } else {
-      templateNodes.push(imgNode);
-    }
-  }
+  const templateNodes = parseAiCopyHtml(copyHtml, markdownId);
 
   const templatePane: TemplatePane = {
     id: paneId,

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

@@ -1,5 +1,6 @@
 import { ulid } from 'ulid';
 import { getCtx, type NodesContext } from '@/stores/nodes';
+import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import {
   type PaneNode,
   type FlatNode,
@@ -13,8 +14,6 @@ import {
   type VisualBreakNode,
   type TemplatePane,
   type TemplateNode,
-  type BaseNode,
-  type TemplateMarkdown,
 } from '@/types/compositorTypes';
 import type {
   BrandConfig,
@@ -329,3 +328,89 @@ export function convertStorageToLiveTemplate(
 
   return liveTemplatePane;
 }
+
+// Helper to convert a style object { "px": "4", "fontBOLD": "bold" } to "px-4 font-bold"
+function classObjectToString(
+  classObj: Record<string, string> | undefined
+): string {
+  if (!classObj) return '';
+
+  return Object.entries(classObj)
+    .map(([key, value]) => {
+      const definition = tailwindClasses[key];
+      if (!definition) return ''; // Ignore keys not in our definitions
+
+      if (definition.useKeyAsClass) {
+        return value; // e.g., for 'fontBOLD', value is 'font-bold'
+      }
+
+      // Handle negative values
+      if (typeof value === 'string' && value.startsWith('-')) {
+        return `-${definition.prefix}${value.substring(1)}`;
+      }
+
+      return `${definition.prefix}${value}`;
+    })
+    .filter(Boolean)
+    .join(' ');
+}
+
+/**
+ * Translates a TemplatePane from the design library into an AI-compatible JSON shell
+ * for the hybrid AI copy generation path.
+ * @param template The TemplatePane object selected by the user.
+ * @returns A JSON string compatible with the AI's second-stage prompt.
+ */
+export function convertTemplateToAIShell(template: TemplatePane): string {
+  const shell: any = {
+    bgColour: template.bgColour || '#ffffff',
+    parentClasses: [],
+    defaultClasses: {},
+  };
+
+  // 1. Process parentClasses (layout)
+  if (template.markdown?.parentClasses) {
+    shell.parentClasses = template.markdown.parentClasses.map((layer) => {
+      const newLayer: { mobile?: string; tablet?: string; desktop?: string } =
+        {};
+      if (layer.mobile && Object.keys(layer.mobile).length > 0) {
+        newLayer.mobile = classObjectToString(layer.mobile);
+      }
+      if (layer.tablet && Object.keys(layer.tablet).length > 0) {
+        newLayer.tablet = classObjectToString(layer.tablet);
+      }
+      if (layer.desktop && Object.keys(layer.desktop).length > 0) {
+        newLayer.desktop = classObjectToString(layer.desktop);
+      }
+      return newLayer;
+    });
+  }
+
+  // 2. Process defaultClasses (typography, etc.)
+  if (template.markdown?.defaultClasses) {
+    for (const tag in template.markdown.defaultClasses) {
+      const styles = template.markdown.defaultClasses[tag];
+      const newTagStyles: {
+        mobile?: string;
+        tablet?: string;
+        desktop?: string;
+      } = {};
+
+      if (styles.mobile && Object.keys(styles.mobile).length > 0) {
+        newTagStyles.mobile = classObjectToString(styles.mobile);
+      }
+      if (styles.tablet && Object.keys(styles.tablet).length > 0) {
+        newTagStyles.tablet = classObjectToString(styles.tablet);
+      }
+      if (styles.desktop && Object.keys(styles.desktop).length > 0) {
+        newTagStyles.desktop = classObjectToString(styles.desktop);
+      }
+
+      if (Object.keys(newTagStyles).length > 0) {
+        shell.defaultClasses[tag] = newTagStyles;
+      }
+    }
+  }
+
+  return JSON.stringify(shell, null, 2);
+}

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
+    }
   }
 
   /**