astro-tractstack 2.0.17 → 2.0.18

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

@@ -139,6 +139,8 @@ const AddPaneNewPanel = ({
   const [copyMode, setCopyMode] = useState<CopyMode>('prompt');
   const [promptValue, setPromptValue] = useState('');
   const [copyValue, setCopyValue] = useState('');
+  const [selectedLibraryEntry, setSelectedLibraryEntry] =
+    useState<DesignLibraryEntry | null>(null);
   const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
     harmony: 'Analogous',
     baseColor: '',
@@ -153,27 +155,31 @@ const AddPaneNewPanel = ({
 
     if (choice === 'blank') {
       handleBlankSlate();
-    } else {
-      setStep('copyInput');
+    } else if (choice === 'library') {
+      setStep('designLibrary');
+    } else if (choice === 'ai') {
+      setStep('aiDesign');
     }
   };
 
   const handleBack = () => {
     setError(null);
     if (step === 'copyInput') {
-      setStep('initial');
+      if (initialChoice === 'library') {
+        setStep('designLibrary');
+      } else if (initialChoice === 'ai') {
+        setStep('aiDesign');
+      } else {
+        setStep('initial');
+      }
     } else if (step === 'directInject') {
       setStep('aiDesign');
-    } else if (step === 'designLibrary' || step === 'aiDesign' || 'error') {
-      setStep('copyInput');
-    }
-  };
-
-  const handleCopyContinue = () => {
-    if (initialChoice === 'library') {
-      setStep('designLibrary');
-    } else if (initialChoice === 'ai') {
-      setStep('aiDesign');
+    } else if (
+      step === 'designLibrary' ||
+      step === 'aiDesign' ||
+      step === 'error'
+    ) {
+      setStep('initial');
     }
   };
 
@@ -182,7 +188,7 @@ const AddPaneNewPanel = ({
       id: '',
       nodeType: 'Pane',
       parentId: '',
-      title: 'New Pane',
+      title: '',
       slug: '',
       isDecorative: false,
       markdown: {
@@ -199,130 +205,25 @@ const AddPaneNewPanel = ({
     handleApplyTemplate(blankTemplate);
   };
 
-  const handleDesignLibrarySelect = async (entry: DesignLibraryEntry) => {
-    if (copyMode === 'raw') {
-      const liveTemplate = convertStorageToLiveTemplate(
-        mergeCopyIntoTemplate(entry.template, [])
-      );
-      if (liveTemplate.markdown) {
-        liveTemplate.markdown.markdownBody = copyValue;
-      }
-      handleApplyTemplate(liveTemplate);
-      return;
-    }
-
-    if (copyMode === 'prompt') {
-      setError(null);
-      setStep('loading');
-      try {
-        const liveTemplate = convertStorageToLiveTemplate(entry.template);
-        if (!liveTemplate.markdown) {
-          throw new Error(
-            'The selected design library item is not compatible with this workflow as it has no markdown section.'
-          );
-        }
-
-        const shellJson = convertTemplateToAIShell(liveTemplate);
-        if (!shellJson || shellJson === '{}') {
-          throw new Error(
-            'Could not generate a valid AI shell from this design.'
-          );
-        }
-
-        const copyPromptDetails = prompts.aiPaneCopyPrompt;
-        const layout = 'Text Only';
-        const formattedCopyPrompt = copyPromptDetails.user_template
-          .replace('{{COPY_INPUT}}', promptValue)
-          .replace(
-            '{{DESIGN_INPUT}}',
-            "N/A - Use the provided Shell JSON's design."
-          )
-          .replace('{{LAYOUT_TYPE}}', layout)
-          .replace('{{SHELL_JSON}}', shellJson);
-
-        const copyResult = await callAskLemurAPI(
-          formattedCopyPrompt,
-          copyPromptDetails.system || '',
-          false,
-          isSandboxMode
-        );
-
-        const newNodes = parseAiCopyHtml(copyResult, liveTemplate.markdown.id);
-
-        const finalPane = cloneDeep(liveTemplate);
-
-        finalPane.markdown!.nodes = newNodes;
-
-        handleApplyTemplate(finalPane);
-      } catch (err: any) {
-        setError(err.message || 'Failed to generate AI copy for this design.');
-        setStep('error');
-      }
-    }
+  const handleDesignLibrarySelect = (entry: DesignLibraryEntry) => {
+    setSelectedLibraryEntry(entry);
+    setStep('copyInput');
   };
 
-  const handleAiDesignGenerate = useCallback(async () => {
-    setError(null);
-    setStep('loading');
-
-    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 (aiDesignConfig.additionalNotes)
-      designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
-
-    try {
-      const shellPromptDetails = prompts.aiPaneShellPrompt;
-      const copyPromptDetails = prompts.aiPaneCopyPrompt;
-      const layout = 'Text Only';
-
-      const formattedShellPrompt = shellPromptDetails.user_template
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', layout);
-
-      const shellResult = await callAskLemurAPI(
-        formattedShellPrompt,
-        shellPromptDetails.system || '',
-        true,
-        isSandboxMode
-      );
-
-      const copyInputContent = copyMode === 'prompt' ? promptValue : copyValue;
-      const formattedCopyPrompt = copyPromptDetails.user_template
-        .replace('{{COPY_INPUT}}', copyInputContent)
-        .replace('{{DESIGN_INPUT}}', designInput)
-        .replace('{{LAYOUT_TYPE}}', layout)
-        .replace('{{SHELL_JSON}}', shellResult);
-
-      const copyResult = await callAskLemurAPI(
-        formattedCopyPrompt,
-        copyPromptDetails.system || '',
-        false,
-        isSandboxMode
-      );
-
-      const finalPane = parseAiPane(shellResult, copyResult, layout);
-      handleApplyTemplate(finalPane);
-    } catch (err: any) {
-      setError(err.message || 'Failed to generate AI pane.');
-      setStep('error');
-    }
-  }, [aiDesignConfig, copyMode, promptValue, copyValue, isSandboxMode]);
+  const handleAiDesignContinue = () => {
+    setStep('copyInput');
+  };
 
   const handleApplyTemplate = async (template: TemplatePane) => {
-    console.log(template);
     if (!ctx) return;
     try {
       const insertTemplate = cloneDeep(template);
-      insertTemplate.title = insertTemplate.title || 'New Pane';
-      insertTemplate.slug = insertTemplate.slug || '';
-
       const ownerId =
         isStoryFragment || isContextPane
           ? nodeId
           : ctx.getClosestNodeTypeFromId(nodeId, 'StoryFragment');
+      insertTemplate.title = '';
+      insertTemplate.slug = '';
 
       if (isContextPane) {
         insertTemplate.isContextPane = true;
@@ -352,6 +253,127 @@ const AddPaneNewPanel = ({
     }
   };
 
+  const handleFinalGenerate = useCallback(async () => {
+    setError(null);
+    setStep('loading');
+
+    try {
+      if (initialChoice === 'library') {
+        if (!selectedLibraryEntry) {
+          throw new Error('No design library item was selected.');
+        }
+
+        if (copyMode === 'raw') {
+          const liveTemplate = convertStorageToLiveTemplate(
+            mergeCopyIntoTemplate(selectedLibraryEntry.template, [])
+          );
+          if (liveTemplate.markdown) {
+            liveTemplate.markdown.markdownBody = copyValue;
+          }
+          handleApplyTemplate(liveTemplate);
+          return;
+        }
+
+        if (copyMode === 'prompt') {
+          const liveTemplate = convertStorageToLiveTemplate(
+            selectedLibraryEntry.template
+          );
+          if (!liveTemplate.markdown) {
+            throw new Error(
+              'The selected design library item is not compatible with this workflow as it has no markdown section.'
+            );
+          }
+
+          const shellJson = convertTemplateToAIShell(liveTemplate);
+          if (!shellJson || shellJson === '{}') {
+            throw new Error(
+              'Could not generate a valid AI shell from this design.'
+            );
+          }
+
+          const copyPromptDetails = prompts.aiPaneCopyPrompt;
+          const layout = 'Text Only';
+          const formattedCopyPrompt = copyPromptDetails.user_template
+            .replace('{{COPY_INPUT}}', promptValue)
+            .replace(
+              '{{DESIGN_INPUT}}',
+              "N/A - Use the provided Shell JSON's design."
+            )
+            .replace('{{LAYOUT_TYPE}}', layout)
+            .replace('{{SHELL_JSON}}', shellJson);
+
+          const copyResult = await callAskLemurAPI(
+            formattedCopyPrompt,
+            copyPromptDetails.system || '',
+            false,
+            isSandboxMode
+          );
+
+          const newNodes = parseAiCopyHtml(
+            copyResult,
+            liveTemplate.markdown.id
+          );
+          const finalPane = cloneDeep(liveTemplate);
+          finalPane.markdown!.nodes = newNodes;
+          handleApplyTemplate(finalPane);
+        }
+      } else if (initialChoice === 'ai') {
+        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 (aiDesignConfig.additionalNotes)
+          designInput += ` Refine with these notes: "${aiDesignConfig.additionalNotes}"`;
+
+        const shellPromptDetails = prompts.aiPaneShellPrompt;
+        const copyPromptDetails = prompts.aiPaneCopyPrompt;
+        const layout = 'Text Only';
+
+        const formattedShellPrompt = shellPromptDetails.user_template
+          .replace('{{DESIGN_INPUT}}', designInput)
+          .replace('{{LAYOUT_TYPE}}', layout);
+
+        const shellResult = await callAskLemurAPI(
+          formattedShellPrompt,
+          shellPromptDetails.system || '',
+          true,
+          isSandboxMode
+        );
+
+        const copyInputContent =
+          copyMode === 'prompt' ? promptValue : copyValue;
+        const formattedCopyPrompt = copyPromptDetails.user_template
+          .replace('{{COPY_INPUT}}', copyInputContent)
+          .replace('{{DESIGN_INPUT}}', designInput)
+          .replace('{{LAYOUT_TYPE}}', layout)
+          .replace('{{SHELL_JSON}}', shellResult);
+
+        const copyResult = await callAskLemurAPI(
+          formattedCopyPrompt,
+          copyPromptDetails.system || '',
+          false,
+          isSandboxMode
+        );
+
+        const finalPane = parseAiPane(shellResult, copyResult, layout);
+        handleApplyTemplate(finalPane);
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to generate AI pane.');
+      setStep('error');
+    }
+  }, [
+    aiDesignConfig,
+    copyMode,
+    promptValue,
+    copyValue,
+    isSandboxMode,
+    initialChoice,
+    selectedLibraryEntry,
+    handleApplyTemplate,
+  ]);
+
   const renderInitialStep = () => (
     <div className="p-4">
       <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
@@ -417,26 +439,15 @@ const AddPaneNewPanel = ({
           ← Back
         </button>
         <button
-          onClick={handleCopyContinue}
+          onClick={handleFinalGenerate}
           disabled={
             copyMode === 'prompt' ? !promptValue.trim() : !copyValue.trim()
           }
           className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-gray-400"
         >
-          Continue →
+          ✨ Generate Pane
         </button>
       </div>
-      {initialChoice === `ai` && !isSandboxMode && (
-        <div className="mt-6 text-center text-sm text-gray-600">
-          ADVANCED:{' '}
-          <button
-            onClick={() => setStep('directInject')}
-            className="font-bold text-cyan-700 underline hover:text-cyan-900 focus:outline-none"
-          >
-            Direct Inject
-          </button>
-        </div>
-      )}
     </div>
   );
 
@@ -447,7 +458,7 @@ const AddPaneNewPanel = ({
           onClick={handleBack}
           className="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          ← Back to Content
+          ← Back to Choice
         </button>
       </div>
       <DesignLibraryStep
@@ -472,12 +483,23 @@ const AddPaneNewPanel = ({
           ← Back
         </button>
         <button
-          onClick={handleAiDesignGenerate}
+          onClick={handleAiDesignContinue}
           className="rounded-md bg-cyan-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-700"
         >
-          ✨ Generate with AI
+          Continue →
         </button>
       </div>
+      {initialChoice === `ai` && !isSandboxMode && (
+        <div className="mt-6 text-center text-sm text-gray-600">
+          ADVANCED:{' '}
+          <button
+            onClick={() => setStep('directInject')}
+            className="font-bold text-cyan-700 underline hover:text-cyan-900 focus:outline-none"
+          >
+            Direct Inject
+          </button>
+        </div>
+      )}
     </div>
   );
 
@@ -486,7 +508,7 @@ const AddPaneNewPanel = ({
   );
 
   const renderLoading = () => (
-    <div className="flex min-h-[300px] flex-col items-center justify-center space-y-4 p-6">
+    <div className="flex min-h-80 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 AI Pane...</p>
       <p className="text-xs text-gray-500">This may take a moment.</p>
@@ -550,7 +572,7 @@ const AddPaneNewPanel = ({
           </>
         )}
       </div>
-      <div className="min-h-[400px] rounded-md border bg-gray-50">
+      <div className="min-h-96 rounded-md border bg-gray-50">
         {renderStep()}
       </div>
     </div>

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

@@ -310,7 +310,7 @@ const AddPaneReUsePanel = ({
       <style>{comboboxItemStyles}</style>
       <div className="w-full rounded-md bg-white p-1.5">
         <div className="flex flex-wrap items-center gap-2">
-          <div className="flex min-w-[200px] flex-wrap items-center gap-2">
+          <div className="flex min-w-48 flex-wrap items-center gap-2">
             <button
               onClick={() => setMode(PaneAddMode.DEFAULT)}
               className="w-fit flex-none rounded bg-gray-100 px-3 py-1 text-sm text-gray-700 transition-colors hover:bg-gray-200 focus:bg-gray-200"
@@ -323,7 +323,7 @@ const AddPaneReUsePanel = ({
             </div>
           </div>
 
-          <div className="min-w-[300px] flex-1">
+          <div className="min-w-72 flex-1">
             <Combobox.Root
               collection={collection}
               value={[]}

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

@@ -9,11 +9,7 @@ import {
   isContextPaneNode,
   hasBeliefPayload,
 } from '@/utils/compositor/typeGuards';
-import {
-  settingsPanelStore,
-  viewportKeyStore,
-  fullContentMapStore,
-} from '@/stores/storykeep';
+import { settingsPanelStore, fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import PaneTitlePanel from './PanePanel_title';
 import PaneMagicPathPanel from './PanePanel_path';
@@ -34,8 +30,6 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   const isActiveMode =
     activePaneMode.panel === 'settings' && activePaneMode.paneId === nodeId;
   const $contentMap = useStore(fullContentMapStore);
-  const $viewportKey = useStore(viewportKeyStore);
-  const isMobile = $viewportKey.value === `mobile`;
 
   const allNodes = ctx.allNodes.get();
   const paneNode = allNodes.get(nodeId) as PaneNode;

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

@@ -200,7 +200,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
               onChange={(e) => handleInputChange('body', e.target.value)}
               onBlur={handleBlur}
               placeholder="Enter impression body text"
-              className={`${commonInputClass} min-h-[100px]`}
+              className={`${commonInputClass} min-h-24`}
             />
           </div>
 

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

@@ -130,7 +130,7 @@ const TemplatePreviewItem = ({
         )}
       </div>
       <div className="p-3">
-        <h3 className="truncate font-semibold" title={template.title}>
+        <h3 className="truncate font-bold" title={template.title}>
           {template.title}
         </h3>
         <p className="text-sm text-gray-600">
@@ -404,9 +404,12 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
       <Portal>
         <Dialog.Backdrop className="z-103 fixed inset-0 bg-black/70" />
         <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
-          <Dialog.Content className="flex h-[90vh] w-[90vw] flex-col rounded-lg bg-white shadow-2xl">
+          <Dialog.Content
+            className="flex flex-col rounded-lg bg-white shadow-2xl"
+            style={{ height: '90vw', width: '90vw' }}
+          >
             <header className="flex items-center justify-between border-b p-4">
-              <Dialog.Title className="text-xl font-semibold">
+              <Dialog.Title className="text-xl font-bold">
                 Restyle Pane from Design Library
               </Dialog.Title>
               <Dialog.CloseTrigger
@@ -427,7 +430,7 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
                 className="w-48"
                 positioning={{ gutter: 4 }}
               >
-                <Select.Label className="mb-1 text-sm font-medium">
+                <Select.Label className="mb-1 text-sm font-bold">
                   Category
                 </Select.Label>
                 <Select.Control>
@@ -461,7 +464,7 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
                 className="flex-1"
                 positioning={{ gutter: 4 }}
               >
-                <Combobox.Label className="mb-1 text-sm font-medium">
+                <Combobox.Label className="mb-1 text-sm font-bold">
                   Filter by Title
                 </Combobox.Label>
                 <Combobox.Control>

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

@@ -37,11 +37,11 @@ export const AiDesignStep = ({
 
   return (
     <div className="space-y-6 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         2. Configure AI Design
       </label>
       <div>
-        <label className="block text-base font-semibold text-gray-800">
+        <label className="block text-base font-bold text-gray-800">
           Color Harmony
         </label>
         <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -58,7 +58,7 @@ export const AiDesignStep = ({
               />
               <label
                 htmlFor={`harmony-${option}`}
-                className="text-sm font-medium text-gray-700"
+                className="text-sm font-bold text-gray-700"
               >
                 {option}
               </label>
@@ -89,7 +89,7 @@ export const AiDesignStep = ({
       </div>
 
       <div>
-        <label className="block text-base font-semibold text-gray-800">
+        <label className="block text-base font-bold text-gray-800">
           Theme / Mood
         </label>
         <div className="mt-2 flex flex-wrap gap-x-4 gap-y-2">
@@ -106,7 +106,7 @@ export const AiDesignStep = ({
               />
               <label
                 htmlFor={`theme-${option}`}
-                className="text-sm font-medium text-gray-700"
+                className="text-sm font-bold text-gray-700"
               >
                 {option}
               </label>
@@ -118,7 +118,7 @@ export const AiDesignStep = ({
       <div>
         <label
           htmlFor="additional-notes"
-          className="block text-base font-semibold text-gray-800"
+          className="block text-base font-bold text-gray-800"
         >
           Additional Design Notes (Optional)
         </label>

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

@@ -30,7 +30,7 @@ export const CopyInputStep = ({
 
   return (
     <div className="space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         1. Provide Content
       </label>
       <div className="my-2 flex space-x-4">
@@ -46,7 +46,7 @@ export const CopyInputStep = ({
           />
           <label
             htmlFor="copy-prompt-mode"
-            className="text-sm font-medium text-gray-700"
+            className="text-sm font-bold text-gray-700"
           >
             Write a prompt
           </label>
@@ -63,7 +63,7 @@ export const CopyInputStep = ({
           />
           <label
             htmlFor="copy-raw-mode"
-            className="text-sm font-medium text-gray-700"
+            className="text-sm font-bold text-gray-700"
           >
             Provide Copy (Markdown)
           </label>

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

@@ -139,7 +139,7 @@ const TemplatePreviewItem = ({
         </div>
       </div>
       <div className="flex-grow p-3">
-        <h3 className="truncate font-semibold" title={title}>
+        <h3 className="truncate font-bold" title={title}>
           {title}
         </h3>
         <p className="text-sm capitalize text-gray-600">{category}</p>
@@ -226,7 +226,7 @@ export const DesignLibraryStep = ({
 
   return (
     <div className="flex h-full flex-col space-y-4 rounded-lg bg-gray-50 p-4 shadow-inner">
-      <label className="block text-lg font-semibold text-gray-800">
+      <label className="block text-lg font-bold text-gray-800">
         2. Choose a Design
       </label>
 
@@ -241,7 +241,7 @@ export const DesignLibraryStep = ({
           className="w-48"
           positioning={{ gutter: 4 }}
         >
-          <Select.Label className="mb-1 text-sm font-medium text-gray-700">
+          <Select.Label className="mb-1 text-sm font-bold text-gray-700">
             Category
           </Select.Label>
           <Select.Control>
@@ -280,7 +280,7 @@ export const DesignLibraryStep = ({
           className="flex-1"
           positioning={{ gutter: 4 }}
         >
-          <Combobox.Label className="mb-1 text-sm font-medium text-gray-700">
+          <Combobox.Label className="mb-1 text-sm font-bold text-gray-700">
             Filter by Title
           </Combobox.Label>
           <Combobox.Control>

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

@@ -5,18 +5,22 @@ import {
   settingsPanelStore,
 } from '@/stores/storykeep';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
-import { isMarkdownPaneFragmentNode } from '@/utils/compositor/typeGuards';
+import {
+  isMarkdownPaneFragmentNode,
+  isGridLayoutNode,
+} from '@/utils/compositor/typeGuards';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
   Tag,
   FlatNode,
   MarkdownPaneFragmentNode,
+  GridLayoutNode,
 } from '@/types/compositorTypes';
 
-interface StyleElementPanelProps {
+export interface StyleElementPanelProps {
   node: FlatNode;
-  parentNode: MarkdownPaneFragmentNode;
+  parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
   onTitleChange?: (title: string) => void;
 }
 
@@ -25,7 +29,10 @@ const StyleElementPanel = ({
   parentNode,
   onTitleChange,
 }: StyleElementPanelProps) => {
-  if (!node?.tagName || !isMarkdownPaneFragmentNode(parentNode)) {
+  if (
+    !node?.tagName ||
+    (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
+  ) {
     return null;
   }