astro-tractstack 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Astro integration for TractStack - the digital experience platform (DXP) for the missing middle",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/compositor/Compositor.tsx

@@ -18,6 +18,7 @@ import {
   brandConfigStore,
   viewportModeStore,
   setViewportMode,
+  sandboxTokenStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
 import { stopLoadingAnimation } from '@/utils/helpers';
@@ -53,6 +54,7 @@ export type CompositorProps = {
   urlParams: Record<string, string | boolean>;
   fullCanonicalURL: string;
   isSandboxMode?: boolean;
+  sandboxToken?: string;
 };
 
 const VERBOSE = false;
@@ -300,12 +302,16 @@ export const Compositor = (props: CompositorProps) => {
     preferredThemeStore.set(props.config.THEME as Theme);
     codehookMapStore.set(props.availableCodeHooks);
     brandConfigStore.set(props.config);
+    if (props.sandboxToken) {
+      sandboxTokenStore.set(props.sandboxToken);
+    }
   }, [
     props.fullContentMap,
     props.urlParams,
     props.fullCanonicalURL,
     props.availableCodeHooks,
     props.config,
+    props.sandboxToken,
   ]);
 
   // Initialize nodes tree and set up subscriptions

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

@@ -7,7 +7,7 @@ import SquaresPlusIcon from '@heroicons/react/24/outline/SquaresPlusIcon';
 import DocumentIcon from '@heroicons/react/24/outline/DocumentIcon';
 import { NodesContext, getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
-import { hasAssemblyAIStore } from '@/stores/storykeep';
+import { hasAssemblyAIStore, sandboxTokenStore } from '@/stores/storykeep';
 import prompts from '@/constants/prompts.json';
 import type { DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
@@ -60,9 +60,14 @@ const callAskLemurAPI = async (
   let resultData: any;
 
   if (isSandboxMode) {
+    const token = sandboxTokenStore.get();
     const response = await fetch(`/api/sandbox`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json', 'X-Tenant-ID': tenantId },
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+        'X-Sandbox-Token': token || '',
+      },
       credentials: 'include',
       body: JSON.stringify({ action: 'askLemur', payload: requestBody }),
     });

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

@@ -6,6 +6,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import { getCtx } from '@/stores/nodes';
 import { selectionStore } from '@/stores/selection';
+import { sandboxTokenStore } from '@/stores/storykeep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import prompts from '@/constants/prompts.json';
 import { TractStackAPI } from '@/utils/api';
@@ -34,11 +35,13 @@ const callAskLemurAPI = async (
   let resultData: any;
 
   if (isSandboxMode) {
+    const token = sandboxTokenStore.get();
     const response = await fetch(`/api/sandbox`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
         'X-Tenant-ID': tenantId,
+        'X-Sandbox-Token': token || '',
       },
       credentials: 'include',
       body: JSON.stringify({ action: 'askLemur', payload: requestBody }),

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

@@ -1,3 +1,4 @@
+import { createHmac } from 'node:crypto';
 import type { APIRoute } from '@/types/astro';
 
 export const POST: APIRoute = async ({ request, locals }) => {
@@ -17,14 +18,48 @@ export const POST: APIRoute = async ({ request, locals }) => {
     );
   }
 
-  const profileCookie = request.headers
-    .get('cookie')
-    ?.includes('tractstack_profile');
-  if (!profileCookie) {
+  const tokenHeader = request.headers.get('X-Sandbox-Token');
+  if (!tokenHeader) {
     return new Response(
       JSON.stringify({
         success: false,
-        error: 'Forbidden: Missing sandbox profile.',
+        error: 'Unauthorized: Missing sandbox token',
+      }),
+      { status: 403, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
+  const [timestamp, signature] = tokenHeader.split('.');
+  if (!timestamp || !signature) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Unauthorized: Invalid token format',
+      }),
+      { status: 403, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
+  const now = Date.now();
+  if (now - parseInt(timestamp, 10) > 2 * 60 * 60 * 1000) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Session expired. Please refresh the page.',
+      }),
+      { status: 403, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
+
+  const expectedSignature = createHmac('sha256', sharedSecret)
+    .update(timestamp)
+    .digest('hex');
+
+  if (signature !== expectedSignature) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: 'Unauthorized: Invalid signature',
       }),
       { status: 403, headers: { 'Content-Type': 'application/json' } }
     );

package/templates/src/pages/sandbox.astro

@@ -1,5 +1,6 @@
 ---
 import { ulid } from 'ulid';
+import { createHmac } from 'node:crypto';
 import Layout from '@/layouts/Layout.astro';
 import Header from '@/components/Header.astro';
 import { getFullContentMap } from '@/stores/analytics';
@@ -49,9 +50,11 @@ for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
 
-const hasProfile = Astro.request.headers
-  .get('cookie')
-  ?.includes('tractstack_profile=true');
+const timestamp = Date.now().toString();
+const signature = createHmac('sha256', import.meta.env.PRIVATE_SANDBOX_SECRET)
+  .update(timestamp)
+  .digest('hex');
+const sandboxToken = `${timestamp}.${signature}`;
 ---
 
 <Layout
@@ -81,71 +84,65 @@ const hasProfile = Astro.request.headers
     menu={null}
   />
 
-  {
-    hasProfile && (
-      <>
-        <section
-          id="storykeepHeader"
-          role="banner"
-          class="left-0 right-0 z-101 bg-mywhite drop-shadow transition-all duration-200"
+  <section
+    id="storykeepHeader"
+    role="banner"
+    class="left-0 right-0 z-101 bg-mywhite 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="h-full bg-myblue/20 bg-mylightgrey 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)',
+          }}
         >
-          <StoryKeepHeader
-            slug="sandbox"
-            isContext={false}
+          <Compositor
+            id={storyFragmentID}
+            nodes={loadData}
+            config={brandConfig}
+            fullContentMap={fullContentMap}
+            fullCanonicalURL="/sandbox"
+            urlParams={urlParams}
+            availableCodeHooks={Object.keys(codeHookComponents)}
             isSandboxMode={true}
+            sandboxToken={sandboxToken}
             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="h-full bg-myblue/20 bg-mylightgrey 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>
+      </div>
+    </main>
+  </div>
 
-        <aside
-          id="settingsControls"
-          class="pointer-events-none fixed bottom-16 right-2 z-101 flex flex-col items-end gap-2 md:bottom-2"
-        >
-          <div class="pointer-events-none flex-grow" />
+  <aside
+    id="settingsControls"
+    class="pointer-events-none fixed bottom-16 right-2 z-101 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 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>
-      </>
-    )
-  }
+    <div class="pointer-events-auto max-h-full">
+      <SettingsPanel
+        availableCodeHooks={Object.keys(codeHookComponents)}
+        client:only="react"
+      />
+    </div>
+  </aside>
 </Layout>
 
 <script>

package/templates/src/stores/storykeep.ts

@@ -30,8 +30,8 @@ export const codehookMapStore = atom<string[]>([]);
 export const pendingHomePageSlugStore = atom<string | null>(null);
 
 export const saasModalOpenStore = atom<boolean>(false);
+export const sandboxTokenStore = atom<string | null>(null);
 
-// Tool mode types
 export type ToolModeVal =
   | 'styles'
   | 'text'
@@ -40,7 +40,6 @@ export type ToolModeVal =
   | 'move'
   | 'debug';
 
-// Tool add mode types
 export type ToolAddMode =
   | 'p'
   | 'h2'
@@ -54,10 +53,8 @@ export type ToolAddMode =
   | 'identify'
   | 'toggle';
 
-// Header positioning state
 export type HeaderPositionState = 'normal' | 'sticky';
 
-// Viewport and display state
 export const viewportModeStore = atom<ViewportKey>('auto');
 export const viewportKeyStore = map<{
   value: 'mobile' | 'tablet' | 'desktop';
@@ -69,26 +66,19 @@ export const isEditingStore = atom<boolean>(false);
 
 export const showAnalyticsStore = atom<boolean>(false);
 
-// Header positioning
 export const headerPositionStore = atom<HeaderPositionState>('normal');
 
-// Settings panel state
 export const settingsPanelOpenStore = atom<boolean>(false);
 export const addPanelOpenStore = atom<boolean>(false);
 
-// Mobile-specific behavior
 export const mobileHeaderFadedStore = atom<boolean>(false);
 
-// Undo/redo state
 export const canUndoStore = atom<boolean>(false);
 export const canRedoStore = atom<boolean>(false);
 
-// Actions
 export const toggleSettingsPanel = () => {
   const isOpen = !settingsPanelOpenStore.get();
   settingsPanelOpenStore.set(isOpen);
-
-  // Handle mobile behavior
   handleSettingsPanelMobile(isOpen);
 };
 export const toggleAddPanel = () => {
@@ -112,7 +102,6 @@ const getViewportFromWidth = (
 
 export const setViewportMode = (mode: ViewportKey) => {
   viewportModeStore.set(mode);
-  // Sync viewportKeyStore
   if (mode === 'auto') {
     const actualViewport = getViewportFromWidth(window.innerWidth);
     viewportKeyStore.setKey('value', actualViewport);