astro-tractstack 2.2.1 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.2.1",
+  "version": "2.2.3",
   "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/codehooks/BunnyVideoSetup.tsx

@@ -149,7 +149,6 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
             bgColor,
           }),
         },
-        isChanged: true,
       };
 
       if (bgColor) {

package/templates/src/components/codehooks/FeaturedArticleSetup.tsx

@@ -90,7 +90,6 @@ const FeaturedArticleSetup = ({
           }),
         },
         bgColour: bgColor || undefined,
-        isChanged: true,
       };
 
       // If bgColor is empty, remove the property

package/templates/src/components/codehooks/ListContentSetup.tsx

@@ -109,7 +109,6 @@ const ListContentSetup = ({ params, nodeId }: ListContentSetupProps) => {
             }),
           },
           bgColour: bgColor || undefined,
-          isChanged: true,
         };
 
         // If bgColor is empty, remove the property

package/templates/src/components/codehooks/ProductCardSetup.tsx

@@ -56,7 +56,6 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
         target: paneNode.codeHookPayload?.target,
         options: JSON.stringify(newPayload),
       },
-      isChanged: true,
     };
     ctx.modifyNodes([updatedPaneNode]);
   };

package/templates/src/components/codehooks/ProductGridSetup.tsx

@@ -117,7 +117,6 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
           target: paneNode.codeHookPayload?.target,
           options: JSON.stringify(constructPayload()),
         },
-        isChanged: true,
       };
       ctx.modifyNodes([updatedPaneNode]);
     }, 500);

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

@@ -463,7 +463,6 @@ export const Compositor = (props: CompositorProps) => {
               {
                 ...node,
                 wordCarouselPayload: { words, speed: 2 },
-                isChanged: true,
               } as FlatNode,
             ]);
             settingsPanelStore.set({

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

@@ -8,7 +8,6 @@ import {
   isTopLevelBlockNode,
   parseCodeHook,
 } from '@/utils/compositor/nodesHelper';
-import { isPaneNode, isGridLayoutNode } from '@/utils/compositor/typeGuards';
 import { PaneAddMode } from '@/types/compositorTypes';
 import { NodeOverlay } from './tools/NodeOverlay';
 import PanelVisibilityWrapper from '@/components/compositor/PanelVisibilityWrapper';
@@ -59,70 +58,32 @@ export const Node = memo((props: NodeProps) => {
   const ctx = getCtx(props);
   const node = ctx.allNodes.get().get(props.nodeId);
   const viewport = useStore(viewportKeyStore).value;
-  const isPreview = ctx.rootNodeId.get() === `tmp`;
+  const isPreview = ctx.rootNodeId.get() === `tmp` || ctx.isTemplate.get();
   const hasPanes = useStore(ctx.hasPanes);
 
   if (!node) return null;
 
   let element: ReactNode = null;
 
-  // 1. Root Types (StoryFragment & Pane) - handled with specific early returns or complex wrapping
-  if (node.nodeType === 'StoryFragment') {
-    const sf = node as StoryFragmentNode;
-    if (!isPreview) ctx.hasTitle.set(!(!sf.slug || !sf.title));
+  switch (node.nodeType) {
+    case 'StoryFragment': {
+      const sf = node as StoryFragmentNode;
+      if (!isPreview) ctx.hasTitle.set(!(!sf.slug || !sf.title));
 
-    if (!(sf.slug && sf.title)) {
-      return (
-        <div
-          className="fixed inset-0 overflow-y-auto bg-black bg-opacity-75"
-          style={{ zIndex: 9005 }}
-        >
-          <div className="flex min-h-screen items-center justify-center p-1.5">
-            <div
-              className="fixed inset-0 bg-black opacity-65"
-              onClick={() => (window.location.href = '/storykeep')}
-            />
-            <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-xl">
-              <div className="p-6">
-                <StoryFragmentTitlePanel nodeId={props.nodeId} />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    if (!hasPanes && !isPreview) {
-      return <EmptyPageHandler {...props} />;
-    }
-
-    return (
-      <>
-        <StoryFragmentConfigPanel
-          nodeId={props.nodeId}
-          isSandboxMode={props.isSandboxMode || false}
-        />
-        <StoryFragment {...props} />
-      </>
-    );
-  } else if (isPaneNode(node)) {
-    const paneNode = node as PaneNode;
-    const isHtmlAstPane = !!paneNode.htmlAst;
-    const paneNodes = ctx.getChildNodeIDs(node.id);
-
-    if (paneNode.isContextPane) {
-      if (!isPreview) ctx.hasTitle.set(!(!paneNode.slug || !paneNode.title));
-
-      if (!isPreview && !(paneNode.slug && paneNode.title)) {
+      if (!(sf.slug && sf.title)) {
         return (
           <div
             className="fixed inset-0 overflow-y-auto bg-black bg-opacity-75"
             style={{ zIndex: 9005 }}
           >
             <div className="flex min-h-screen items-center justify-center p-1.5">
+              <div
+                className="fixed inset-0 bg-black opacity-65"
+                onClick={() => (window.location.href = '/storykeep')}
+              />
               <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-xl">
                 <div className="p-6">
-                  <ContextPaneTitlePanel nodeId={props.nodeId} />
+                  <StoryFragmentTitlePanel nodeId={props.nodeId} />
                 </div>
               </div>
             </div>
@@ -130,96 +91,159 @@ export const Node = memo((props: NodeProps) => {
         );
       }
 
-      if (!isPreview && !paneNodes.length) {
-        // Context Pane Empty State
-        return (
+      if (!hasPanes && !isPreview) {
+        return <EmptyPageHandler {...props} />;
+      }
+
+      return (
+        <>
+          <StoryFragmentConfigPanel
+            nodeId={props.nodeId}
+            isSandboxMode={props.isSandboxMode || false}
+          />
+          <StoryFragment {...props} />
+        </>
+      );
+    }
+    case 'Pane':
+      {
+        const paneNode = node as PaneNode;
+        const storyfragmentNodeId = ctx.getClosestNodeTypeFromId(
+          node.id,
+          'StoryFragment'
+        );
+        const storyfragmentNode = ctx.allNodes
+          .get()
+          .get(storyfragmentNodeId) as StoryFragmentNode;
+        const first = paneNode.id === storyfragmentNode.paneIds?.[0];
+        const isHtmlAstPane = !!paneNode.htmlAst;
+        const paneNodes = ctx.getChildNodeIDs(node.id);
+
+        if (paneNode.isContextPane) {
+          if (!isPreview)
+            ctx.hasTitle.set(!(!paneNode.slug || !paneNode.title));
+
+          if (!isPreview && !(paneNode.slug && paneNode.title)) {
+            return (
+              <div
+                className="fixed inset-0 overflow-y-auto bg-black bg-opacity-75"
+                style={{ zIndex: 9005 }}
+              >
+                <div className="flex min-h-screen items-center justify-center p-1.5">
+                  <div className="relative w-full max-w-4xl rounded-lg bg-white shadow-xl">
+                    <div className="p-6">
+                      <ContextPaneTitlePanel nodeId={props.nodeId} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          }
+
+          if (!isPreview && !paneNodes.length) {
+            return (
+              <>
+                <ContextPanePanel nodeId={node.id} />
+                <PanelVisibilityWrapper
+                  nodeId={node.id}
+                  panelType="add"
+                  ctx={ctx}
+                >
+                  <Pane {...props} />
+                </PanelVisibilityWrapper>
+                <AddPanePanel
+                  nodeId={node.id}
+                  first={true}
+                  ctx={ctx}
+                  isContextPane={true}
+                />
+              </>
+            );
+          }
+        }
+
+        const content = isHtmlAstPane ? (
+          <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
+        ) : (
+          <Pane {...props} />
+        );
+
+        element = (
           <>
-            <ContextPanePanel nodeId={node.id} />
-            <PanelVisibilityWrapper nodeId={node.id} panelType="add" ctx={ctx}>
-              <Pane {...props} />
-            </PanelVisibilityWrapper>
-            <AddPanePanel
-              nodeId={node.id}
-              first={true}
-              ctx={ctx}
-              isContextPane={true}
-            />
+            {first && (
+              <AddPanePanel nodeId={props.nodeId} first={true} ctx={ctx} />
+            )}
+            <div className="py-0.5">
+              <ConfigPanePanel
+                nodeId={props.nodeId}
+                isHtmlAstPane={isHtmlAstPane}
+                isSandboxMode={props.isSandboxMode || false}
+              />
+              <PanelVisibilityWrapper
+                nodeId={props.nodeId}
+                panelType="settings"
+                ctx={ctx}
+              >
+                {content}
+              </PanelVisibilityWrapper>
+            </div>
+            <AddPanePanel nodeId={props.nodeId} first={false} ctx={ctx} />
           </>
         );
       }
-    }
+      break;
 
-    // Resolve Content
-    const content = isHtmlAstPane ? (
-      <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
-    ) : (
-      <Pane {...props} />
-    );
+    case 'BgPane':
+      element = <BgPaneWrapper {...props} />;
+      break;
 
-    element = (
-      <>
-        <div className="py-0.5">
-          <ConfigPanePanel
-            nodeId={props.nodeId}
-            isHtmlAstPane={isHtmlAstPane}
-          />
-          <PanelVisibilityWrapper
-            nodeId={props.nodeId}
-            panelType="settings"
-            ctx={ctx}
-          >
-            {content}
-          </PanelVisibilityWrapper>
-        </div>
-        <AddPanePanel nodeId={props.nodeId} first={false} ctx={ctx} />
-      </>
-    );
-  }
-  // 2. Content Types
-  else if (node.nodeType === 'BgPane') {
-    element = <BgPaneWrapper {...props} />;
-  } else if (node.nodeType === 'Markdown') {
-    element = <Markdown {...props} />;
-  } else if (isGridLayoutNode(node)) {
-    element = <GridLayout {...props} />;
-  } else if (node.nodeType === 'TagElement') {
-    const flatNode = node as FlatNode;
-
-    switch (flatNode.tagName) {
-      case 'text':
-        element = <NodeText {...props} />;
-        break;
-      case 'img':
-        element = <NodeImg {...props} />;
-        break;
-      case 'a':
-        element = <NodeA {...props} />;
-        break;
-      case 'button':
-        element = <NodeButton {...props} />;
-        break;
-      case 'code': {
-        const hookData = parseCodeHook(node);
-        element = hookData ? (
-          <Widget
-            {...props}
-            hook={hookData.hook}
-            value1={hookData.value1}
-            value2={hookData.value2}
-            value3={hookData.value3}
-          />
-        ) : null;
-        break;
+    case 'Markdown':
+      element = <Markdown {...props} />;
+      break;
+
+    case 'GridLayoutNode':
+      element = <GridLayout {...props} />;
+      break;
+
+    case 'TagElement': {
+      const flatNode = node as FlatNode;
+
+      switch (flatNode.tagName) {
+        case 'text':
+          element = <NodeText {...props} />;
+          break;
+        case 'img':
+          element = <NodeImg {...props} />;
+          break;
+        case 'a':
+          element = <NodeA {...props} />;
+          break;
+        case 'button':
+          element = <NodeButton {...props} />;
+          break;
+        case 'code': {
+          const hookData = parseCodeHook(node);
+          element = hookData ? (
+            <Widget
+              {...props}
+              hook={hookData.hook}
+              value1={hookData.value1}
+              value2={hookData.value2}
+              value3={hookData.value3}
+            />
+          ) : null;
+          break;
+        }
+        default:
+          element = (
+            <NodeBasicTag
+              {...props}
+              tagName={flatNode.tagName as keyof JSX.IntrinsicElements}
+              isSelectableText={true}
+            />
+          );
+          break;
       }
-      default:
-        element = (
-          <NodeBasicTag
-            {...props}
-            tagName={flatNode.tagName as keyof JSX.IntrinsicElements}
-            isSelectableText={true}
-          />
-        );
-        break;
     }
   }
 

package/templates/src/components/compositor/nodes/tagElements/NodeBasicTag.tsx

@@ -497,7 +497,6 @@ export const NodeBasicTag = (props: NodeTagProps) => {
             const updatedNode = {
               ...cloneDeep(node),
               isPlaceholder: false,
-              isChanged: true,
             };
             ctx.modifyNodes([updatedNode]);
           }
@@ -507,7 +506,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
             const paneNode = cloneDeep(
               ctx.allNodes.get().get(paneNodeId)
             ) as PaneNode;
-            ctx.modifyNodes([{ ...paneNode, isChanged: true }]);
+            ctx.modifyNodes([paneNode]);
           }
         }
       } catch (error) {
@@ -573,7 +572,6 @@ export const NodeBasicTag = (props: NodeTagProps) => {
             const updatedNode = {
               ...cloneDeep(node),
               isPlaceholder: false,
-              isChanged: true,
             };
             ctx.modifyNodes([updatedNode]);
           }
@@ -591,7 +589,7 @@ export const NodeBasicTag = (props: NodeTagProps) => {
       const paneNode = cloneDeep(
         ctx.allNodes.get().get(paneNodeId)
       ) as PaneNode;
-      ctx.modifyNodes([{ ...paneNode, isChanged: true }]);
+      ctx.modifyNodes([paneNode]);
     }
 
     ctx.clearEditLock();

package/templates/src/components/edit/Header.tsx

@@ -34,7 +34,6 @@ const StoryKeepHeader = ({
   const viewport = useStore(viewportModeStore);
   const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const ctx = getCtx();
-  const showSaveBypass = useStore(ctx.showSaveBypass);
   const hasTitle = useStore(ctx.hasTitle);
   const hasPanes = useStore(ctx.hasPanes);
   const [canUndo, setCanUndo] = useState(false);
@@ -124,7 +123,7 @@ const StoryKeepHeader = ({
   ];
 
   // Show save button if there are undo changes OR pending home page change
-  const shouldShowSave = canUndo || pendingHomePageSlug || showSaveBypass;
+  const shouldShowSave = canUndo || pendingHomePageSlug;
 
   if (!hasTitle && !hasPanes) return null;
 
@@ -203,12 +202,9 @@ const StoryKeepHeader = ({
               console.log('Total Nodes in Store:', allNodesArray.length);
               console.log('Full Nodes Map:', allNodesMap);
 
-              // Specifically audit Creative Panes for large htmlAst payloads
-              // Using type guards/property checks to handle the BaseNode vs PaneNode distinction
               const creativePanes = allNodesArray.filter(
                 (n) => n.nodeType === 'Pane' && 'htmlAst' in n
               );
-
               if (creativePanes.length > 0) {
                 console.group('Creative Panes Detail (htmlAst Audit)');
                 creativePanes.forEach((pane) => {
@@ -229,7 +225,7 @@ const StoryKeepHeader = ({
             }}
             className="rounded-md bg-myblue px-3.5 py-1.5 font-action font-bold text-white hover:bg-myorange"
           >
-            Inspect
+            Nodes Dump
           </button>
         )}
 

package/templates/src/components/edit/context/ContextPaneConfig_slug.tsx

@@ -57,7 +57,7 @@ const PaneSlugPanel = ({ nodeId, setMode }: PaneSlugPanelProps) => {
     if (slug.length >= 3) {
       // Only update if meets minimum length
       const ctx = getCtx();
-      const updatedNode = { ...cloneDeep(paneNode), slug, isChanged: true };
+      const updatedNode = { ...cloneDeep(paneNode), slug };
       ctx.modifyNodes([updatedNode]);
     }
   };

package/templates/src/components/edit/context/ContextPaneConfig_title.tsx

@@ -57,7 +57,6 @@ const ContextPaneTitlePanel = ({
         ...paneNode,
         title,
         ...(newSlug ? { slug: newSlug } : {}),
-        isChanged: true,
       });
       ctx.modifyNodes([updatedNode]);
     }

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

@@ -114,6 +114,7 @@ const AddPaneBreakPanel = ({
   useEffect(() => {
     const newPreviews = filteredVariants.map((variant, index: number) => {
       const ctx = new NodesContext();
+      ctx.isTemplate.set(true);
       ctx.addNode(createEmptyStorykeep('tmp'));
       const template = templateCategory.getTemplatesByVariant(variant)[0];
       ctx.addTemplatePane('tmp', template);

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

@@ -134,22 +134,18 @@ const AddPaneNewPanel = ({
 
       if (isContextPane) {
         insertTemplate.isContextPane = true;
-        await ctx.applyAtomicUpdate(async (tmpCtx) => {
-          tmpCtx.addContextTemplatePane(ownerId, insertTemplate);
-        });
+        ctx.addContextTemplatePane(ownerId, insertTemplate);
       } else {
-        await ctx.applyAtomicUpdate(async (tmpCtx) => {
-          tmpCtx.addTemplatePane(
-            ownerId,
-            insertTemplate,
-            nodeId,
-            first ? 'before' : 'after'
-          );
-        });
+        ctx.addTemplatePane(
+          ownerId,
+          insertTemplate,
+          nodeId,
+          first ? 'before' : 'after'
+        );
         const storyFragment = cloneDeep(
           ctx.allNodes.get().get(ownerId)
         ) as StoryFragmentNode;
-        ctx.modifyNodes([{ ...storyFragment, isChanged: true }]);
+        ctx.modifyNodes([{ ...storyFragment }]);
       }
       ctx.notifyNode(`root`);
       setParentMode(PaneAddMode.DEFAULT, false);

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

@@ -91,11 +91,15 @@ const AddPaneReUsePanel = ({
               pane.slug.toLowerCase().includes(query.toLowerCase())
           );
 
-    const newPreviews = filteredPanes.map((pane, index) => ({
-      ctx: new NodesContext(),
-      pane,
-      index,
-    }));
+    const newPreviews = filteredPanes.map((pane, index) => {
+      const previewCtx = new NodesContext();
+      previewCtx.isTemplate.set(true);
+      return {
+        ctx: previewCtx,
+        pane,
+        index,
+      };
+    });
 
     setPreviews(newPreviews);
     setCurrentPage(0);
@@ -194,7 +198,6 @@ const AddPaneReUsePanel = ({
           );
         }
       }
-      storyFragmentNode.isChanged = true;
 
       ctx.addNode(templateData.paneNode);
       ctx.linkChildToParent(

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

@@ -7,75 +7,13 @@ import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import { getCtx } from '@/stores/nodes';
 import { selectionStore } from '@/stores/selection';
 import { renderedPreviews } from '@/stores/previews';
-import { sandboxTokenStore } from '@/stores/storykeep';
 import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { AiRefineDesignStep } from './steps/AiRefineDesignStep';
 import prompts from '@/constants/prompts.json';
-import { TractStackAPI } from '@/utils/api';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
 import type { PaneNode, TemplatePane } from '@/types/compositorTypes';
 
-const callAskLemurAPI = async (
-  prompt: string,
-  context: string,
-  expectJson: boolean,
-  isSandboxMode: boolean
-): Promise<string> => {
-  const tenantId =
-    (window as any).TRACTSTACK_CONFIG?.tenantId ||
-    import.meta.env.PUBLIC_TENANTID ||
-    'default';
-  const api = new TractStackAPI(tenantId);
-
-  const requestBody = {
-    prompt,
-    input_text: context,
-    final_model: '',
-    temperature: 0.5,
-    max_tokens: 10000,
-  };
-
-  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 response = await api.post('/api/v1/aai/askLemur', requestBody);
-    if (!response.success || !response.data?.response) {
-      throw new Error(response.error || 'AI generation failed');
-    }
-    resultData = response.data;
-  }
-
-  let raw = resultData.response;
-  if (typeof raw === 'string') {
-    if (raw.startsWith('```json')) raw = raw.slice(7, -3).trim();
-  }
-  if (expectJson && typeof raw === 'object') return JSON.stringify(raw);
-  return raw;
-};
-
 interface AiRestylePaneModalProps {
   isSandboxMode?: boolean;
 }
@@ -149,12 +87,12 @@ export const AiRestylePaneModal = ({
         .replace('{{COPY_INPUT}}', 'A generic content section')
         .replace('{{LAYOUT_TYPE}}', 'Text Only');
 
-      const resultStr = await callAskLemurAPI(
-        formattedPrompt,
-        shellPromptDetails.system || '',
-        true,
-        isSandboxMode
-      );
+      const resultStr = await callAskLemurAPI({
+        prompt: formattedPrompt,
+        context: shellPromptDetails.system || '',
+        expectJson: true,
+        isSandboxMode,
+      });
 
       let dummyCopy: string | string[] = '';
       if (isGrid) {

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

@@ -252,7 +252,7 @@ const ConfigPanePanel = ({
           </div>
 
           {/* Design Library Tools (Right Aligned) */}
-          <div className="ml-auto flex items-center gap-2 border-l border-gray-300 pl-2">
+          <div className="ml-auto flex items-center gap-2 border-l border-gray-300 px-2">
             {!isHtmlAstPane && !isSandboxMode && (
               <button
                 title="Save Pane to Design Library"
@@ -280,7 +280,7 @@ const ConfigPanePanel = ({
                 <ArrowPathRoundedSquareIcon className="h-4 w-4 text-white" />
               </button>
             )}
-            {import.meta.env.DEV && (
+            {import.meta.env.DEV && !isHtmlAstPane && (
               <button
                 title="Copy Pane Design to Clipboard"
                 onClick={handleCopyToClipboard}