astro-tractstack 2.1.1 → 2.1.3

package/package.json

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

package/templates/custom/minimal/CodeHook.astro

@@ -10,6 +10,7 @@ import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   target: string;
+  paneId: string;
   fullContentMap: FullContentMapItem[];
   resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {

package/templates/custom/with-examples/CodeHook.astro

@@ -13,6 +13,7 @@ import type { ResourceNode } from '@/types/compositorTypes';
 
 export interface Props {
   target: string;
+  paneId: string;
   fullContentMap: FullContentMapItem[];
   resourcesPayload?: Record<string, ResourceNode[]>;
   options?: {

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/[...slug].astro

@@ -158,6 +158,7 @@ paneIds.forEach((paneId: string) => {
                 <div class="relative overflow-hidden">
                   <CodeHook
                     target={codeHookTargets[paneId]}
+                    paneId={paneId}
                     options={(() => {
                       const optionsStr =
                         codeHookTargets[paneId + '-' + codeHookTargets[paneId]];

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/context/[...contextSlug].astro

@@ -126,6 +126,7 @@ if (!brandConfig.SITE_INIT) {
         codeHookTarget ? (
           <CodeHook
             target={codeHookTarget}
+            paneId={paneId}
             resourcesPayload={resourcesPayload}
             fullContentMap={fullContentMap}
           />

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';
@@ -48,6 +49,12 @@ const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
+
+const timestamp = Date.now().toString();
+const signature = createHmac('sha256', import.meta.env.PRIVATE_SANDBOX_SECRET)
+  .update(timestamp)
+  .digest('hex');
+const sandboxToken = `${timestamp}.${signature}`;
 ---
 
 <Layout
@@ -111,6 +118,7 @@ for (const [key, value] of Astro.url.searchParams) {
             urlParams={urlParams}
             availableCodeHooks={Object.keys(codeHookComponents)}
             isSandboxMode={true}
+            sandboxToken={sandboxToken}
             client:only="react"
           />
         </div>

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);