astro-tractstack 2.2.1 → 2.2.3

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

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

@@ -4,7 +4,7 @@ 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 { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
+import { htmlToHtmlAst, cleanHtml } from '@/utils/compositor/htmlAst';
 import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
 import type { TemplatePane } from '@/types/compositorTypes';
 
@@ -51,7 +51,7 @@ export const AiRefineDesignStep = ({
 
       userPrompt = userPrompt.replace('{{DESIGN_NOTES}}', prompt);
       userPrompt = userPrompt.replace('{{CSS_INPUT}}', initialCss);
-      userPrompt = userPrompt.replace('{{HTML_INPUT}}', initialHtml);
+      userPrompt = userPrompt.replace('{{HTML_INPUT}}', cleanHtml(initialHtml));
 
       // 1. Get RAW output from AI
       const resultHtml = await callAskLemurAPI({

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

@@ -1,7 +1,11 @@
 import { useState, useCallback, useMemo, useEffect } from 'react';
 import prompts from '@/constants/prompts.json';
-import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+import {
+  parseAiPane,
+  createDefaultShell,
+} from '@/utils/compositor/aiPaneParser';
 import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { markdownToHtml } from '@/utils/compositor/htmlAst';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
 import BooleanToggle from '@/components/form/BooleanToggle';
@@ -43,10 +47,13 @@ export const AiStandardDesignStep = ({
   const [col1Copy, setCol1Copy] = useState('');
   const [col2Copy, setCol2Copy] = useState('');
 
+  // Prompts State
   const [masterShellSystem, setMasterShellSystem] = useState('');
   const [masterShellUser, setMasterShellUser] = useState('');
   const [masterCopySystem, setMasterCopySystem] = useState('');
   const [masterCopyUser, setMasterCopyUser] = useState('');
+  const [masterStyleSystem, setMasterStyleSystem] = useState('');
+  const [masterStyleUser, setMasterStyleUser] = useState('');
 
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
@@ -75,6 +82,7 @@ export const AiStandardDesignStep = ({
     }
   }, [promptOptions, selectedPromptId]);
 
+  // Load Prompt Templates
   useEffect(() => {
     if (!selectedPromptId) return;
 
@@ -85,8 +93,11 @@ export const AiStandardDesignStep = ({
 
     const promptKey = activeConfig.prompts.copy;
     const shellKey = activeConfig.prompts.shell;
+    const styleKey = activeConfig.prompts.style; // New: Load style prompt key
+
     const copyPromptGroup = (prompts as any)[promptKey];
     const shellPromptGroup = (prompts as any)[shellKey];
+    const stylePromptGroup = (prompts as any)[styleKey];
 
     if (shellPromptGroup) {
       setMasterShellSystem(shellPromptGroup.system || '');
@@ -96,6 +107,10 @@ export const AiStandardDesignStep = ({
       setMasterCopySystem(copyPromptGroup.system || '');
       setMasterCopyUser(copyPromptGroup.user_template || '');
     }
+    if (stylePromptGroup) {
+      setMasterStyleSystem(stylePromptGroup.system || '');
+      setMasterStyleUser(stylePromptGroup.user_template || '');
+    }
 
     if (!copyPromptGroup) return;
 
@@ -126,65 +141,128 @@ export const AiStandardDesignStep = ({
       );
       if (!activeConfig) throw new Error('Selected prompt type not found.');
 
-      let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
-      if (aiDesignConfig.baseColor)
-        designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
-      if (aiDesignConfig.accentColor)
-        designInput += ` Use **${aiDesignConfig.accentColor}** as an accent color.`;
-      if (additionalNotes)
-        designInput += ` Refine with these notes: "${additionalNotes}"`;
-
       const layoutType = 'Text Only';
       const promptMap = prompts as any;
 
-      const injectTopic = (text: string) => {
-        return text.replace('{{TOPIC}}', topic.trim());
-      };
-
-      let formattedShellPrompt = masterShellUser
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', layoutType);
+      // --- 1. Shell Generation ---
+      let shellResult = '';
 
-      if (layoutChoice === 'grid') {
-        const finalOverallPrompt = injectTopic(overallPrompt);
-        formattedShellPrompt = formattedShellPrompt.replace(
-          '{{COPY_INPUT}}',
-          finalOverallPrompt
-        );
-      }
-
-      const shellResult = await callAskLemurAPI({
-        prompt: formattedShellPrompt,
-        context: masterShellSystem,
-        expectJson: true,
-        isSandboxMode,
-      });
+      if (isAiStyling) {
+        // AI Path: Generate Shell via AskLemur
+        let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
+        if (aiDesignConfig.baseColor)
+          designInput += ` Base the colors around **${aiDesignConfig.baseColor}**.`;
+        if (aiDesignConfig.accentColor)
+          designInput += ` Use **${aiDesignConfig.accentColor}** as an accent color.`;
+        if (additionalNotes)
+          designInput += ` Refine with these notes: "${additionalNotes}"`;
 
-      if (layoutChoice === 'standard') {
-        const copyInputContent =
-          copyMode === 'prompt' ? injectTopic(promptValue) : copyValue;
+        const injectTopic = (text: string) => {
+          return text.replace('{{TOPIC}}', topic.trim());
+        };
 
-        const formattedCopyPrompt = masterCopyUser
-          .replace('{{COPY_INPUT}}', copyInputContent)
+        let formattedShellPrompt = masterShellUser
           .replace('{{DESIGN_INPUT}}', designInput)
-          .replace('{{LAYOUT_TYPE}}', layoutType)
-          .replace('{{SHELL_JSON}}', shellResult);
+          .replace('{{LAYOUT_TYPE}}', layoutType);
+
+        if (layoutChoice === 'grid') {
+          const finalOverallPrompt = injectTopic(overallPrompt);
+          formattedShellPrompt = formattedShellPrompt.replace(
+            '{{COPY_INPUT}}',
+            finalOverallPrompt
+          );
+        }
 
-        const copyResult = await callAskLemurAPI({
-          prompt: formattedCopyPrompt,
-          context: masterCopySystem,
-          expectJson: false,
+        shellResult = await callAskLemurAPI({
+          prompt: formattedShellPrompt,
+          context: masterShellSystem,
+          expectJson: true,
           isSandboxMode,
         });
+      } else {
+        // No AI Path: Use Default Shell
+        shellResult = JSON.stringify(createDefaultShell(layoutChoice));
+      }
+
+      const designInputForCopy = isAiStyling
+        ? `Using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme.`
+        : 'Use the provided default classes.';
+
+      // --- 2. Content Generation ---
+      if (layoutChoice === 'standard') {
+        let finalHtml = '';
+
+        if (copyMode === 'prompt') {
+          // A. Prompt Mode: AI writes copy
+          const injectTopic = (text: string) =>
+            text.replace('{{TOPIC}}', topic.trim());
+          const copyInputContent = injectTopic(promptValue);
+
+          const formattedCopyPrompt = masterCopyUser
+            .replace('{{COPY_INPUT}}', copyInputContent)
+            .replace('{{DESIGN_INPUT}}', designInputForCopy)
+            .replace('{{LAYOUT_TYPE}}', layoutType)
+            .replace('{{SHELL_JSON}}', shellResult);
+
+          finalHtml = await callAskLemurAPI({
+            prompt: formattedCopyPrompt,
+            context: masterCopySystem,
+            expectJson: false,
+            isSandboxMode,
+          });
+        } else {
+          // B. Raw Mode: User provided markdown
+          if (isAiStyling) {
+            // Style with AI: Use the 'style' prompt to format markdown
+            const formattedStylePrompt = masterStyleUser
+              .replace('{{SHELL_JSON}}', shellResult)
+              .replace('{{COPY_INPUT}}', copyValue);
+
+            finalHtml = await callAskLemurAPI({
+              prompt: formattedStylePrompt,
+              context: masterStyleSystem,
+              expectJson: false,
+              isSandboxMode,
+            });
+          } else {
+            // No AI: Local conversion
+            finalHtml = markdownToHtml(copyValue);
+          }
+        }
 
-        const finalPane = parseAiPane(shellResult, copyResult, layoutType);
+        const finalPane = parseAiPane(shellResult, finalHtml, layoutType);
         onCreatePane(finalPane);
       } else if (layoutChoice === 'grid') {
+        // --- Grid Layout Path ---
         if (copyMode === 'raw') {
+          // B. Raw Mode (Grid)
           const rawContents = [col1Copy, col2Copy];
-          const finalPane = parseAiPane(shellResult, rawContents, layoutType);
+          let finalContents: string[] = [];
+
+          if (isAiStyling) {
+            // Style with AI: Loop through columns and style each
+            for (const content of rawContents) {
+              const formattedStylePrompt = masterStyleUser
+                .replace('{{SHELL_JSON}}', shellResult)
+                .replace('{{COPY_INPUT}}', content);
+
+              const styledHtml = await callAskLemurAPI({
+                prompt: formattedStylePrompt,
+                context: masterStyleSystem,
+                expectJson: false,
+                isSandboxMode,
+              });
+              finalContents.push(styledHtml);
+            }
+          } else {
+            // No AI: Local conversion
+            finalContents = rawContents.map(markdownToHtml);
+          }
+
+          const finalPane = parseAiPane(shellResult, finalContents, layoutType);
           onCreatePane(finalPane);
         } else {
+          // A. Prompt Mode (Grid): AI writes copy
           const copyPromptKey = activeConfig.prompts.copy;
           const copyPromptDetails = promptMap[copyPromptKey];
           const preset =
@@ -192,6 +270,9 @@ export const AiStandardDesignStep = ({
             copyPromptDetails.presets?.heroDefault;
           const copyResults: string[] = [];
 
+          const injectTopic = (text: string) =>
+            text.replace('{{TOPIC}}', topic.trim());
+
           const promptsToRun = [
             { prompt: promptValueCol1, presetKey: 'left' as ColumnPresetKey },
             { prompt: promptValueCol2, presetKey: 'right' as ColumnPresetKey },
@@ -204,7 +285,7 @@ export const AiStandardDesignStep = ({
               .replace('{{SHELL_JSON}}', shellResult)
               .replace('{{COPY_INPUT}}', injectTopic(overallPrompt))
               .replace('{{COLUMN_PROMPT}}', item.prompt)
-              .replace('{{DESIGN_INPUT}}', designInput)
+              .replace('{{DESIGN_INPUT}}', designInputForCopy)
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
@@ -245,16 +326,25 @@ export const AiStandardDesignStep = ({
     masterShellSystem,
     masterCopyUser,
     masterCopySystem,
+    masterStyleUser,
+    masterStyleSystem,
     topic,
+    isAiStyling, // Added dependency
   ]);
 
   if (isGenerating) {
     return (
       <div className="flex min-h-96 flex-col items-center justify-center space-y-4 p-6">
         <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-cyan-600"></div>
-        <p className="text-sm text-gray-600">Generating Design & Content...</p>
+        <p className="text-sm text-gray-600">
+          {isAiStyling
+            ? 'Generating Design & Content...'
+            : 'Processing Content...'}
+        </p>
         <p className="text-xs text-gray-500">
-          Creating a unique layout from scratch.
+          {isAiStyling
+            ? 'Creating a unique layout from scratch.'
+            : 'Applying standard formatting.'}
         </p>
       </div>
     );
@@ -301,42 +391,45 @@ export const AiStandardDesignStep = ({
         masterCopyUser={masterCopyUser}
         setMasterCopyUser={setMasterCopyUser}
       >
-        <div className="border-t pt-4">
-          <div>
-            <label
-              htmlFor="dashboard-notes"
-              className="block text-sm font-bold text-gray-700"
-            >
-              Design Notes
-            </label>
-            <textarea
-              id="dashboard-notes"
-              rows={2}
-              className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
-              placeholder="e.g. Clean, minimal, high contrast..."
-              value={additionalNotes}
-              onChange={(e) => setAdditionalNotes(e.target.value)}
-            />
-          </div>
-
-          <div className="my-4 flex items-center">
-            <BooleanToggle
-              label="Customize Colors"
-              value={showColors}
-              onChange={setShowColors}
-              size="sm"
-            />
-          </div>
+        {/* Style config is only relevant if AI Styling is ON */}
+        {isAiStyling && (
+          <div className="border-t pt-4">
+            <div>
+              <label
+                htmlFor="dashboard-notes"
+                className="block text-sm font-bold text-gray-700"
+              >
+                Design Notes
+              </label>
+              <textarea
+                id="dashboard-notes"
+                rows={2}
+                className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                placeholder="e.g. Clean, minimal, high contrast..."
+                value={additionalNotes}
+                onChange={(e) => setAdditionalNotes(e.target.value)}
+              />
+            </div>
 
-          {showColors && (
-            <div className="rounded-lg border border-gray-100 bg-gray-50 p-4">
-              <AiDesignStep
-                designConfig={aiDesignConfig}
-                onDesignConfigChange={setAiDesignConfig}
+            <div className="my-4 flex items-center">
+              <BooleanToggle
+                label="Customize Colors"
+                value={showColors}
+                onChange={setShowColors}
+                size="sm"
               />
             </div>
-          )}
-        </div>
+
+            {showColors && (
+              <div className="rounded-lg border border-gray-100 bg-gray-50 p-4">
+                <AiDesignStep
+                  designConfig={aiDesignConfig}
+                  onDesignConfigChange={setAiDesignConfig}
+                />
+              </div>
+            )}
+          </div>
+        )}
       </CopyInputStep>
 
       {error && (
@@ -363,7 +456,7 @@ export const AiStandardDesignStep = ({
           }
           className="rounded-md bg-cyan-600 px-6 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
         >
-          ✨ Generate Pane
+          {isAiStyling ? '✨ Generate Pane' : 'Create Pane'}
         </button>
       </div>
     </div>

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

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { getCtx } from '@/stores/nodes';
 import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
 import type { TemplatePane } from '@/types/compositorTypes';
 
@@ -28,7 +27,6 @@ export const CreativeInjectStep = ({
 
     try {
       const htmlAst = await htmlToHtmlAst(html, css);
-
       const template: TemplatePane = {
         id: '',
         nodeType: 'Pane',
@@ -48,10 +46,7 @@ export const CreativeInjectStep = ({
           nodes: [],
         },
       };
-
       onCreatePane(template);
-      const ctx = getCtx();
-      ctx.showSaveBypass.set(true);
     } catch (err: any) {
       console.error('Compiler Error:', err);
       setError(`Compilation failed: ${err.message}`);

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

@@ -56,8 +56,9 @@ const TemplatePreviewItem = ({
   );
 
   const fragmentRequest = useMemo((): PanePreviewRequest[] => {
-    // This preview logic is correct: it creates a *temporary* context.
+    // This preview logic creates a *temporary* context.
     const ctx = new NodesContext();
+    ctx.isTemplate.set(true);
     ctx.addNode(createEmptyStorykeep('tmp'));
     ctx.addTemplatePane('tmp', liveTemplate);
     return [{ id: liveTemplate.id, ctx }];

package/templates/src/components/edit/panels/StyleBreakPanel.tsx

@@ -104,10 +104,7 @@ const StyleBreakPanel = ({ node, parentNode }: BasePanelProps) => {
       }
     });
 
-    const updatedNodes = [
-      { ...breakNode, isChanged: true },
-      { ...paneNode, isChanged: true },
-    ];
+    const updatedNodes = [{ ...breakNode }, { ...paneNode }];
     ctx.modifyNodes(updatedNodes);
   }, [settings, node, parentNode, ctx, allNodes]);
 

package/templates/src/components/edit/panels/StyleCodeHookPanel.tsx

@@ -64,7 +64,6 @@ const StyleCodeHookPanel = ({
         codeHookPayload: {
           options: JSON.stringify(options),
         },
-        isChanged: true,
       };
       ctx.modifyNodes([updatedNode]);
     },

package/templates/src/components/edit/panels/StyleElementPanel.tsx

@@ -215,7 +215,7 @@ const StyleElementPanel = ({
       ...preset,
     };
 
-    ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+    ctx.modifyNodes([{ ...targetNode }]);
 
     setShowPresets(false);
   };

package/templates/src/components/edit/panels/StyleElementPanel_remove.tsx

@@ -100,10 +100,7 @@ const StyleElementRemovePanel = ({
       }
     }
 
-    ctx.modifyNodes([
-      { ...elementNode, isChanged: true },
-      { ...markdownNode, isChanged: true },
-    ]);
+    ctx.modifyNodes([{ ...elementNode }, { ...markdownNode }]);
     resetStore();
   };
 

package/templates/src/components/edit/panels/StyleElementPanel_update.tsx

@@ -131,7 +131,7 @@ const StyleElementUpdatePanel = ({
           break;
       }
 
-      ctx.modifyNodes([{ ...elementNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...elementNode }]);
     } else {
       // Update default classes
       const markdownNode = cloneDeep(
@@ -170,7 +170,7 @@ const StyleElementUpdatePanel = ({
           break;
       }
 
-      ctx.modifyNodes([{ ...markdownNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...markdownNode }]);
     }
 
     setPendingUpdate(null);
@@ -251,7 +251,7 @@ const StyleElementUpdatePanel = ({
         }
       }
 
-      ctx.modifyNodes([{ ...elementNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...elementNode }]);
       setIsOverridden(checked);
     },
     [node, className, parentNode]

package/templates/src/components/edit/panels/StyleImagePanel.tsx

@@ -269,7 +269,7 @@ const StyleImagePanel = ({
     const imgNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
     if (!imgNode) return;
     imgNode.alt = newAlt;
-    ctx.modifyNodes([{ ...imgNode, isChanged: true }]);
+    ctx.modifyNodes([{ ...imgNode }]);
   };
 
   const handleImageUpdate = (params: ImageParams) => {
@@ -285,7 +285,7 @@ const StyleImagePanel = ({
       params.altDescription || '!!This is requires a description!!'
     );
     if (params.srcSet) imgNode.srcSet = params.srcSet;
-    ctx.modifyNodes([{ ...imgNode, isChanged: true }]);
+    ctx.modifyNodes([{ ...imgNode }]);
   };
 
   const handleImageRemove = () => {
@@ -297,7 +297,7 @@ const StyleImagePanel = ({
     imgNode.src = `/static.jpg`;
     if (typeof imgNode.srcSet === `string`) delete imgNode.srcSet;
     imgNode.alt = `This is a placeholder for an image that hasn't yet been uploaded`;
-    ctx.modifyNodes([{ ...imgNode, isChanged: true }]);
+    ctx.modifyNodes([{ ...imgNode }]);
   };
 
   if (

package/templates/src/components/edit/panels/StyleImagePanel_remove.tsx

@@ -109,10 +109,7 @@ const StyleImageRemovePanel = ({
       }
     }
 
-    ctx.modifyNodes([
-      { ...targetNode, isChanged: true },
-      { ...parentNodeClone, isChanged: true },
-    ]);
+    ctx.modifyNodes([{ ...targetNode }, { ...parentNodeClone }]);
     resetStore();
   };
 

package/templates/src/components/edit/panels/StyleImagePanel_update.tsx

@@ -18,7 +18,6 @@ const StyleImageUpdatePanel = ({
   node,
   parentNode,
   className,
-  config,
   childId,
 }: BasePanelProps) => {
   if (
@@ -119,7 +118,7 @@ const StyleImageUpdatePanel = ({
           break;
       }
 
-      ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...targetNode }]);
     } else {
       const markdownNode = cloneDeep(
         allNodes.get(parentNode.id)
@@ -158,7 +157,7 @@ const StyleImageUpdatePanel = ({
           break;
       }
 
-      ctx.modifyNodes([{ ...markdownNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...markdownNode }]);
     }
 
     setPendingUpdate(null);
@@ -240,7 +239,7 @@ const StyleImageUpdatePanel = ({
         }
       }
 
-      ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+      ctx.modifyNodes([{ ...targetNode }]);
       setIsOverridden(checked);
     },
     [node, className, parentNode, childId, isImage]