astro-tractstack 2.1.2 → 2.2.0

package/templates/src/stores/nodes.ts

@@ -9,6 +9,11 @@ import allowInsert from '@/utils/compositor/allowInsert';
 import { reservedSlugs } from '@/constants';
 import { NodesHistory, PatchOp } from '@/stores/nodesHistory';
 import { moveNodeAtLocationInContext } from '@/utils/compositor/nodesHelper';
+import {
+  rehydrateChildrenFromHtml,
+  regenerateCreativePane,
+  extractFileIdsFromAst,
+} from '@/utils/compositor/htmlAst';
 import { MarkdownGenerator } from '@/utils/compositor/nodesMarkdownGenerator';
 import {
   hasButtonPayload,
@@ -19,6 +24,8 @@ import {
   toTag,
 } from '@/utils/compositor/typeGuards';
 import { startLoadingAnimation } from '@/utils/helpers';
+import { lispLexer } from '@/utils/actions/lispLexer';
+import { preParseAction } from '@/utils/actions/preParse_Action';
 import { settingsPanelStore } from '@/stores/storykeep';
 import {
   PaneAddMode,
@@ -26,6 +33,7 @@ import {
   ContextPaneMode,
 } from '@/types/compositorTypes';
 import type {
+  EditableElementMetadata,
   PanelState,
   BaseNode,
   FlatNode,
@@ -55,7 +63,6 @@ import type {
 } from '@/types/compositorTypes';
 import type { NodeProps, WidgetProps } from '@/types/nodeProps';
 import type { CSSProperties } from 'react';
-import { selectionStore } from '@/stores/selection';
 import type { SelectionRange, SelectionStoreState } from '@/stores/selection';
 import type { CompositorProps } from '@/components/compositor/Compositor';
 
@@ -83,6 +90,7 @@ export class NodesContext {
   allNodes = atom<Map<string, BaseNode>>(new Map<string, BaseNode>());
   impressionNodes = atom<Set<ImpressionNode>>(new Set<ImpressionNode>());
   parentNodes = atom<Map<string, string[]>>(new Map<string, string[]>());
+  showSaveBypass = atom<boolean>(false);
   hasTitle = atom<boolean>(false);
   hasPanes = atom<boolean>(false);
   isTemplate = atom<boolean>(false);
@@ -342,15 +350,6 @@ export class NodesContext {
 
     // click handler based on toolModeVal
     switch (toolModeVal) {
-      case `styles`:
-        const selection = selectionStore.get();
-        if (!selection.isActive)
-          handleClickEventDefault(
-            node,
-            dblClick,
-            this.clickedParentLayer.get()
-          );
-        break;
       case `text`:
         if (
           dblClick &&
@@ -358,7 +357,6 @@ export class NodesContext {
           'tagName' in node &&
           (node.tagName === 'a' || node.tagName === 'button')
         ) {
-          this.toolModeValStore.set({ value: 'styles' });
           handleClickEventDefault(
             node,
             dblClick,
@@ -366,7 +364,6 @@ export class NodesContext {
           );
         }
         if (dblClick && ![`Markdown`].includes(node.nodeType)) {
-          this.toolModeValStore.set({ value: 'styles' });
           handleClickEventDefault(
             node,
             dblClick,
@@ -374,10 +371,6 @@ export class NodesContext {
           );
         }
         break;
-      case `eraser`:
-        this.handleEraseEvent(node.id);
-        this.deleteNode(node.id);
-        break;
       default:
     }
     // reset on parentLayer
@@ -562,34 +555,38 @@ export class NodesContext {
 
   applyShellToPane(paneId: string, template: TemplatePane) {
     const allNodes = new Map(this.allNodes.get());
-    const paneNode = allNodes.get(paneId) as PaneNode;
-    if (!paneNode) return;
+    const originalPane = allNodes.get(paneId);
+    if (!originalPane) return;
+
+    const paneNode = cloneDeep(originalPane) as PaneNode;
+    paneNode.isChanged = true;
 
     if (template.bgColour) {
       paneNode.bgColour = template.bgColour;
-      paneNode.isChanged = true;
+    }
+    if (template.htmlAst) {
+      paneNode.htmlAst = template.htmlAst;
     }
 
+    allNodes.set(paneId, paneNode);
+
     const childrenIds = this.getChildNodeIDs(paneId);
 
-    const gridLayoutNode = childrenIds
+    const gridNodeRaw = childrenIds
       .map((id) => allNodes.get(id))
-      .find((n) => n?.nodeType === 'GridLayoutNode') as
-      | GridLayoutNode
-      | undefined;
+      .find((n) => n?.nodeType === 'GridLayoutNode');
 
-    const markdownNodes = childrenIds
-      .map((id) => allNodes.get(id))
-      .filter((n) => n?.nodeType === 'Markdown') as MarkdownPaneFragmentNode[];
+    if (gridNodeRaw && template.gridLayout) {
+      const gridLayoutNode = cloneDeep(gridNodeRaw) as GridLayoutNode;
+      gridLayoutNode.isChanged = true;
 
-    if (gridLayoutNode && template.gridLayout) {
       if (template.gridLayout.parentClasses) {
         gridLayoutNode.parentClasses = template.gridLayout.parentClasses;
       }
       if (template.gridLayout.defaultClasses) {
         gridLayoutNode.defaultClasses = template.gridLayout.defaultClasses;
       }
-      gridLayoutNode.isChanged = true;
+      allNodes.set(gridLayoutNode.id, gridLayoutNode);
 
       if (
         template.gridLayout.nodes &&
@@ -599,30 +596,134 @@ export class NodesContext {
 
         columnIds.forEach((colId, index) => {
           const templateCol = template.gridLayout!.nodes![index];
-          if (templateCol && templateCol.gridClasses) {
-            const liveColNode = allNodes.get(colId) as MarkdownPaneFragmentNode;
-            if (liveColNode) {
-              liveColNode.gridClasses = templateCol.gridClasses;
-              liveColNode.isChanged = true;
-            }
+          const colNodeRaw = allNodes.get(colId);
+          if (templateCol && colNodeRaw) {
+            const liveColNode = cloneDeep(
+              colNodeRaw
+            ) as MarkdownPaneFragmentNode;
+            liveColNode.gridClasses = templateCol.gridClasses;
+            liveColNode.isChanged = true;
+            allNodes.set(colId, liveColNode);
           }
         });
       }
-    } else if (markdownNodes.length > 0 && template.markdown) {
-      const primaryMarkdown = markdownNodes[0];
-
-      if (template.markdown.parentClasses) {
-        primaryMarkdown.parentClasses = template.markdown.parentClasses;
-      }
-      if (template.markdown.defaultClasses) {
-        primaryMarkdown.defaultClasses = template.markdown.defaultClasses;
+    } else {
+      const markdownNodes = childrenIds
+        .map((id) => allNodes.get(id))
+        .filter(
+          (n) => n?.nodeType === 'Markdown'
+        ) as MarkdownPaneFragmentNode[];
+
+      if (markdownNodes.length > 0 && template.markdown) {
+        const primaryMarkdown = cloneDeep(markdownNodes[0]);
+        primaryMarkdown.isChanged = true;
+
+        if (template.markdown.parentClasses) {
+          primaryMarkdown.parentClasses = template.markdown.parentClasses;
+        }
+        if (template.markdown.defaultClasses) {
+          primaryMarkdown.defaultClasses = template.markdown.defaultClasses;
+        }
+        allNodes.set(primaryMarkdown.id, primaryMarkdown);
       }
-      primaryMarkdown.isChanged = true;
     }
 
     this.allNodes.set(allNodes);
     this.notifyNode(paneId);
     this.notifyNode('root');
+    this.showSaveBypass.set(true);
+  }
+
+  async updateCreativeAsset(
+    paneId: string,
+    astId: string,
+    updates: Partial<EditableElementMetadata>
+  ) {
+    const allNodes = new Map(this.allNodes.get());
+    const originalPane = allNodes.get(paneId);
+
+    if (!originalPane || originalPane.nodeType !== 'Pane') return;
+
+    const paneNode = cloneDeep(originalPane) as PaneNode;
+    if (!paneNode.htmlAst) return;
+
+    if (updates.tagName === 'a' && updates.buttonPayload?.callbackPayload) {
+      try {
+        const config = (window as any).TRACTSTACK_CONFIG || {};
+        const lexed = lispLexer(updates.buttonPayload.callbackPayload);
+
+        const resolvedHref = preParseAction(
+          lexed,
+          paneNode.slug,
+          !!paneNode.isContextPane,
+          config
+        );
+
+        if (resolvedHref) {
+          updates.href = resolvedHref;
+        }
+      } catch (e) {
+        console.warn('[Nodes] Failed to resolve href from ActionLisp:', e);
+      }
+    }
+
+    let newHtmlAst = await regenerateCreativePane(
+      paneNode.htmlAst,
+      astId,
+      updates
+    );
+
+    if (newHtmlAst.editableElements[astId]) {
+      newHtmlAst.editableElements[astId] = {
+        ...newHtmlAst.editableElements[astId],
+        ...updates,
+      };
+    }
+
+    paneNode.htmlAst = newHtmlAst;
+    paneNode.isChanged = true;
+
+    this.modifyNodes([paneNode]);
+  }
+
+  updateCreativePane(paneId: string, containerId: string, htmlContent: string) {
+    const allNodes = new Map(this.allNodes.get());
+    const originalPane = allNodes.get(paneId);
+
+    // 1. Validation and Clone (matching applyShellToPane pattern)
+    if (!originalPane || originalPane.nodeType !== 'Pane') return;
+
+    // Deep clone ensures we don't mutate state outside the atom update
+    const paneNode = cloneDeep(originalPane) as PaneNode;
+
+    // Guard: Ensure we are in HTML mode
+    if (!('htmlAst' in paneNode) || !paneNode.htmlAst) return;
+
+    // 2. Logic: Rehydrate and Patch
+    const newChildren = rehydrateChildrenFromHtml(htmlContent);
+
+    // Recursive patcher to find the container in the cloned tree
+    const patchNode = (nodes: any[]): boolean => {
+      for (const node of nodes) {
+        if (node.id === containerId) {
+          node.children = newChildren;
+          return true;
+        }
+        if (node.children && node.children.length > 0) {
+          if (patchNode(node.children)) return true;
+        }
+      }
+      return false;
+    };
+
+    // 3. Commit
+    if (patchNode(paneNode.htmlAst.tree)) {
+      paneNode.isChanged = true;
+      allNodes.set(paneId, paneNode);
+      this.allNodes.set(allNodes);
+      this.notifyNode(paneId);
+      this.showSaveBypass.set(true);
+    }
   }
 
   /**
@@ -2001,9 +2102,7 @@ export class NodesContext {
         });
         break;
     }
-    if ([`p`, `h2`, `h3`, `h4`, `li`].includes(tagName))
-      this.toolModeValStore.set({ value: 'text' });
-    else this.toolModeValStore.set({ value: 'styles' });
+    this.toolModeValStore.set({ value: 'text' });
     this.notifyNode('root');
   }
 
@@ -2585,7 +2684,15 @@ export class NodesContext {
   getPaneImageFileIds(paneId: string): string[] {
     const paneNode = this.allNodes.get().get(paneId);
     if (!paneNode || paneNode.nodeType !== 'Pane') return [];
+    const pane = paneNode as PaneNode;
+
+    // 1. Extract from Creative AST (if present)
+    let creativeFileIds: string[] = [];
+    if (pane.htmlAst) {
+      creativeFileIds = extractFileIdsFromAst(pane.htmlAst);
+    }
 
+    // 2. Extract from Standard Nodes (TagElement, BgPane)
     const allNodes = this.getNodesRecursively(paneNode);
 
     const embeddedFileIds = allNodes
@@ -2612,7 +2719,10 @@ export class NodesContext {
       .map((node) => node.fileId)
       .filter((id): id is string => id !== undefined);
 
-    return [...embeddedFileIds, ...bgFileIds];
+    // 3. Merge unique IDs
+    return Array.from(
+      new Set([...embeddedFileIds, ...bgFileIds, ...creativeFileIds])
+    );
   }
 
   getPaneImagesMap(): Record<string, string[]> {
@@ -3193,6 +3303,11 @@ export class NodesContext {
     paneTemplate: TemplatePane,
     newPaneId: string
   ): BaseNode[] {
+    if (paneTemplate.htmlAst) {
+      // No nodes when in htmlAst mode
+      return [];
+    }
+
     let allNodes: BaseNode[] = [];
 
     // 1. Process Markdown Content
@@ -3350,8 +3465,6 @@ export class NodesContext {
         };
         allNodes.push(bgPaneNode);
       }
-      // This helper only processes nodes, it doesn't modify the paneTemplate.
-      // The deletion of `duplicatedPane.bgPane` will remain in `addTemplatePane`.
     }
 
     return allNodes;

package/templates/src/stores/orphanAnalysis.ts

@@ -1,4 +1,4 @@
-import { atom } from 'nanostores';
+import { atom, computed } from 'nanostores';
 
 export interface OrphanAnalysisData {
   storyFragments: Record<string, string[]>;
@@ -39,35 +39,11 @@ const defaultOrphanState: OrphanAnalysisState = {
   lastFetched: null,
 };
 
-const createOrphanAnalysisStore = () => {
-  const store = {
-    get: () => {
-      const tenantId = getCurrentTenantId();
-      return tenantOrphanAnalysis.get()[tenantId] || defaultOrphanState;
-    },
-
-    subscribe: (callback: (value: OrphanAnalysisState) => void) => {
-      const tenantId = getCurrentTenantId();
-      return tenantOrphanAnalysis.subscribe((analysis) => {
-        callback(analysis[tenantId] || defaultOrphanState);
-      });
-    },
-    lc: 0,
-    listen: function (callback: any) {
-      return this.subscribe(callback);
-    },
-    notify: function () {},
-    off: function () {},
-    get value() {
-      return this.get();
-    },
-    set: function () {}, // Orphan store is read-only for components
-  };
-
-  return store;
-};
-
-export const orphanAnalysisStore = createOrphanAnalysisStore();
+// Computed store that slices the state for the current tenant
+export const orphanAnalysisStore = computed(tenantOrphanAnalysis, (states) => {
+  const tenantId = getCurrentTenantId();
+  return states[tenantId] || defaultOrphanState;
+});
 
 function updateTenantState(
   tenantId: string,

package/templates/src/stores/previews.ts

@@ -0,0 +1,7 @@
+import { map } from 'nanostores';
+
+export const renderedPreviews = map<Record<string, string>>({});
+
+export const updatePreview = (paneId: string, html: string) => {
+  renderedPreviews.setKey(paneId, html);
+};

package/templates/src/stores/storykeep.ts

@@ -32,14 +32,6 @@ export const pendingHomePageSlugStore = atom<string | null>(null);
 export const saasModalOpenStore = atom<boolean>(false);
 export const sandboxTokenStore = atom<string | null>(null);
 
-export type ToolModeVal =
-  | 'styles'
-  | 'text'
-  | 'insert'
-  | 'eraser'
-  | 'move'
-  | 'debug';
-
 export type ToolAddMode =
   | 'p'
   | 'h2'

package/templates/src/types/compositorTypes.ts

@@ -4,15 +4,7 @@ export type LispToken = string | number | LispToken[];
 
 export type ViewportKey = 'mobile' | 'tablet' | 'desktop' | 'auto';
 export type ViewportAuto = 'mobile' | 'tablet' | 'desktop';
-export type ToolModeVal =
-  | 'styles'
-  | 'text'
-  | 'insert'
-  | 'eraser'
-  | 'move'
-  | 'layout'
-  | 'designLibrary'
-  | 'debug';
+export type ToolModeVal = 'text' | 'insert';
 
 export const toolAddModes = [
   'p',
@@ -27,6 +19,7 @@ export const toolAddModes = [
   'interactiveDisclosure',
   'identify',
   'toggle',
+  'span',
   //"aside",
 ] as const;
 export type ToolAddMode = (typeof toolAddModes)[number];
@@ -55,6 +48,51 @@ export enum PaneConfigMode {
   CODEHOOK = 'CODEHOOK',
 }
 
+export interface HtmlAstNode {
+  tag: string;
+  attrs?: Record<string, string>;
+  children?: HtmlAstNode[];
+  text?: string;
+  id?: string;
+}
+
+export type CreativeButtonPayload = {
+  callbackPayload: string;
+  isExternalUrl?: boolean;
+  bunnyPayload?: {
+    t: string;
+    videoId: string | null;
+    slug?: string;
+    isContext?: boolean;
+  };
+};
+
+export interface EditableElementMetadata {
+  astId: string;
+  tagName: string;
+  src?: string;
+  srcSet?: string;
+  fileId?: string;
+  base64Data?: string;
+  alt?: string;
+  href?: string;
+  buttonPayload?: CreativeButtonPayload;
+  isCssBackground?: boolean;
+  collection?: string;
+  image?: string;
+}
+
+export interface CreativePanePayload {
+  css: string;
+  viewportCss: {
+    xs: string;
+    md: string;
+    xl: string;
+  };
+  tree: HtmlAstNode[];
+  editableElements: Record<string, EditableElementMetadata>;
+}
+
 export enum StoryFragmentMode {
   DEFAULT = 'DEFAULT',
   SLUG = 'SLUG',
@@ -73,6 +111,7 @@ export type SettingsPanelSignal = {
   nodeId: string;
   childId?: string;
   layer?: number;
+  view?: string;
   className?: string;
   minimized?: boolean;
   expanded?: boolean;
@@ -146,7 +185,8 @@ export type Tag =
   | 'belief'
   | 'identify'
   | 'toggle'
-  | 'code';
+  | 'code'
+  | 'span';
 
 export const tagTitles: Record<Tag, string> = {
   p: 'Paragraph',
@@ -168,6 +208,7 @@ export const tagTitles: Record<Tag, string> = {
   belief: 'Belief Select Widget',
   toggle: 'Belief Toggle Widget',
   identify: 'Identify As Widget',
+  span: 'Creative Span',
 };
 
 export type NodeType =
@@ -232,6 +273,7 @@ export interface PaneNode extends BaseNode {
   codeHookPayload?: {
     [key: string]: string;
   };
+  htmlAst?: CreativePanePayload;
   heldBeliefs?: BeliefDatum;
   withheldBeliefs?: BeliefDatum;
 }
@@ -566,6 +608,7 @@ export type ParentBasePanelProps = {
   parentNode?: FlatNode | PaneNode;
   config?: BrandConfig | null;
   layer?: number;
+  view?: string;
   className?: string;
   childId?: string;
   availableCodeHooks?: string[];

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

@@ -0,0 +1,93 @@
+import { TractStackAPI } from '@/utils/api';
+import { sandboxTokenStore } from '@/stores/storykeep';
+
+interface AiGenerationOptions {
+  prompt: string;
+  context: string;
+  expectJson: boolean;
+  isSandboxMode: boolean;
+  maxTokens?: number;
+  temperature?: number;
+}
+
+export const callAskLemurAPI = async ({
+  prompt,
+  context,
+  expectJson,
+  isSandboxMode,
+  maxTokens = 2000,
+  temperature = 0.5,
+}: AiGenerationOptions): Promise<string> => {
+  const tenantId =
+    (window as any).TRACTSTACK_CONFIG?.tenantId ||
+    import.meta.env.PUBLIC_TENANTID ||
+    'default';
+
+  const requestBody = {
+    prompt,
+    input_text: context,
+    final_model: '',
+    temperature,
+    max_tokens: maxTokens,
+  };
+
+  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 }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Sandbox API failed: ${response.status} ${errorText}`);
+    }
+
+    const json = await response.json();
+    if (!json.success) {
+      throw new Error(json.error || 'Sandbox generation failed');
+    }
+    resultData = json.data;
+  } else {
+    const api = new TractStackAPI(tenantId);
+    const response = await api.post('/api/v1/aai/askLemur', requestBody);
+
+    if (!response.success) {
+      throw new Error(
+        response.error || 'Generation failed to return valid response.'
+      );
+    }
+    resultData = response.data;
+  }
+
+  if (!resultData?.response) {
+    throw new Error('Generation failed to return a response object.');
+  }
+
+  const rawResponseData = resultData.response;
+
+  if (expectJson && typeof rawResponseData === 'object') {
+    return JSON.stringify(rawResponseData);
+  }
+
+  if (typeof rawResponseData === 'string') {
+    let responseString = rawResponseData;
+    // Clean up markdown code blocks if present to ensure clean parsing by caller
+    if (responseString.startsWith('```json')) {
+      responseString = responseString.slice(7, -3).trim();
+    } else if (responseString.startsWith('```html')) {
+      responseString = responseString.slice(7, -3).trim();
+    }
+    return responseString;
+  }
+
+  throw new Error('Unexpected response format received from API.');
+};

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

@@ -16,6 +16,8 @@ const allowInsert = (
     case 'ol':
       {
         switch (tagNameNew) {
+          case 'span':
+            return false;
           case 'bunny':
           case 'yt':
           case 'interactiveDisclosure':