astro-tractstack 2.2.2 → 2.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "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,97 +91,159 @@ export const Node = memo((props: NodeProps) => {
         );
       }
 
-      if (!isPreview && !paneNodes.length) {
-        // Context Pane Empty State
-        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}
-            />
-          </>
-        );
+      if (!hasPanes && !isPreview) {
+        return <EmptyPageHandler {...props} />;
       }
-    }
 
-    // Resolve Content
-    const content = isHtmlAstPane ? (
-      <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
-    ) : (
-      <Pane {...props} />
-    );
-
-    element = (
-      <>
-        <div className="py-0.5">
-          <ConfigPanePanel
+      return (
+        <>
+          <StoryFragmentConfigPanel
             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} />
-      </>
-    );
-  }
-  // 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;
-      }
-      default:
+          <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 = (
-          <NodeBasicTag
-            {...props}
-            tagName={flatNode.tagName as keyof JSX.IntrinsicElements}
-            isSelectableText={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;
+      }
+      break;
+
+    case 'BgPane':
+      element = <BgPaneWrapper {...props} />;
+      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;
+      }
     }
   }
 

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;
 

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/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}

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

@@ -100,7 +100,6 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
           ...cloneDeep(impressionNode),
           tagName: 'impression',
           ...data,
-          isChanged: true,
         };
         ctx.modifyNodes([node]);
       } else {
@@ -111,14 +110,12 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
           nodeType: 'Impression',
           parentId: nodeId,
           ...data,
-          isChanged: true,
         } as ImpressionNode;
         ctx.addTemplateImpressionNode(nodeId, node);
       }
       ctx.modifyNodes([
         {
           ...paneNode,
-          isChanged: true,
         },
       ]);
     },
@@ -156,7 +153,6 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
       ctx.modifyNodes([
         {
           ...paneNode,
-          isChanged: true,
         },
       ]);
       setMode(PaneConfigMode.DEFAULT);

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

@@ -107,7 +107,6 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
 
       updatedNode.heldBeliefs = updatedHeldPaths;
       updatedNode.withheldBeliefs = updatedWithheldPaths;
-      updatedNode.isChanged = true;
 
       const currentPanelState = ctx.activePaneMode.get();
 

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

@@ -145,7 +145,6 @@ const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
         ...cloneDeep(paneNode),
         title,
         slug: updatedSlug,
-        isChanged: true,
       };
       ctx.modifyNodes([updatedNode]);
     }
@@ -154,7 +153,7 @@ const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
   const handleSlugBlur = () => {
     if (canSaveSlug) {
       const ctx = getCtx();
-      const updatedNode = { ...cloneDeep(paneNode), slug, isChanged: true };
+      const updatedNode = { ...cloneDeep(paneNode), slug };
       ctx.modifyNodes([updatedNode]);
     }
   };

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

@@ -60,6 +60,7 @@ const TemplatePreviewItem = ({
 
   const fragmentRequest = useMemo((): PanePreviewRequest[] => {
     const ctx = new NodesContext();
+    ctx.isTemplate.set(true);
     ctx.addNode(createEmptyStorykeep('tmp'));
     ctx.addTemplatePane('tmp', template);
     return [{ id: template.id, ctx }];
@@ -319,11 +320,7 @@ export const RestylePaneModal = () => {
     paneToUpdate.heightRatioDesktop = template.heightRatioDesktop;
     paneToUpdate.heightRatioMobile = template.heightRatioMobile;
     paneToUpdate.heightRatioTablet = template.heightRatioTablet;
-    paneToUpdate.isChanged = true;
-
     ctx.modifyNodes([paneToUpdate]);
-    ctx.notifyNode('root');
-
     handleClose();
   };
 

package/templates/src/components/edit/pane/steps/AiCreativeDesignStep.tsx

@@ -4,7 +4,6 @@ import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import prompts from '@/constants/prompts.json';
-import { getCtx } from '@/stores/nodes';
 import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
 import type { TemplatePane } from '@/types/compositorTypes';
 import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
@@ -163,8 +162,6 @@ export const AiCreativeDesignStep = ({
   const handleAccept = () => {
     if (pendingTemplate) {
       onCreatePane(pendingTemplate);
-      const ctx = getCtx();
-      ctx.showSaveBypass.set(true);
       onSuccess();
     }
   };