astro-tractstack 2.0.15 → 2.0.17

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

@@ -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/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'
@@ -467,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'
@@ -603,12 +613,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 +848,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 +896,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 +2168,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',