astro-tractstack 2.0.44 → 2.0.46

package/dist/index.js

@@ -150,12 +150,6 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/Pane_layout.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/codehooks/SandboxAuthWrapper.tsx"
-      ),
-      dest: "src/components/codehooks/SandboxAuthWrapper.tsx"
-    },
     {
       src: t(
         "../templates/src/components/codehooks/SandboxRegisterForm.tsx"
@@ -476,6 +470,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/RestylePaneModal.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/AiRestylePaneModal.tsx"
+      ),
+      dest: "src/components/edit/pane/AiRestylePaneModal.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/steps/CopyInputStep.tsx"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.44",
+  "version": "2.0.46",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx

@@ -4,6 +4,7 @@ import ArchiveBoxArrowDownIcon from '@heroicons/react/24/outline/ArchiveBoxArrow
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import SparklesIcon from '@heroicons/react/24/solid/SparklesIcon';
 import { viewportKeyStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
@@ -12,6 +13,7 @@ import type { NodeProps } from '@/types/nodeProps';
 import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
 import { SaveToLibraryModal } from '@/components/edit/state/SaveToLibraryModal';
 import { RestylePaneModal } from '@/components/edit/pane/RestylePaneModal';
+import { AiRestylePaneModal } from '@/components/edit/pane/AiRestylePaneModal';
 import { selectionStore } from '@/stores/selection';
 import { copyPaneToClipboard } from '@/utils/compositor/designLibraryHelper';
 
@@ -35,9 +37,12 @@ function getSizeClasses(
 
 export const Pane_DesignLibrary = (props: NodeProps) => {
   const ctx = getCtx(props);
-  const { isRestyleModalOpen } = useStore(selectionStore, {
-    keys: ['isRestyleModalOpen'],
-  });
+  const { isRestyleModalOpen, isAiRestyleModalOpen } = useStore(
+    selectionStore,
+    {
+      keys: ['isRestyleModalOpen', 'isAiRestyleModalOpen'],
+    }
+  );
   const [currentViewport, setCurrentViewport] = useState(
     viewportKeyStore.get().value
   );
@@ -81,6 +86,12 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     selectionStore.setKey('isRestyleModalOpen', true);
   };
 
+  const handleAiRestyleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    selectionStore.setKey('paneToRestyleId', props.nodeId);
+    selectionStore.setKey('isAiRestyleModalOpen', true);
+  };
+
   const handleSaveClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     setIsSaveModalOpen(true);
@@ -106,6 +117,13 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
           <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
         </button>
       )}
+      <button
+        title="Re-Color"
+        onClick={handleAiRestyleClick}
+        className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-600 p-1.5 shadow-lg hover:bg-purple-700"
+      >
+        <SparklesIcon className="h-5 w-5 text-white" />
+      </button>
       <button
         title="Restyle Pane from Design Library"
         onClick={handleRestyleClick}
@@ -243,6 +261,9 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
       )}
 
       {isRestyleModalOpen && <RestylePaneModal />}
+      {isAiRestyleModalOpen && (
+        <AiRestylePaneModal isSandboxMode={props.isSandboxMode} />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,230 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { Dialog } from '@ark-ui/react';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
+import { getCtx } from '@/stores/nodes';
+import { selectionStore } from '@/stores/selection';
+import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
+import prompts from '@/constants/prompts.json';
+import { TractStackAPI } from '@/utils/api';
+import { parseAiPane } from '@/utils/compositor/aiPaneParser';
+
+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: 2000,
+  };
+
+  let resultData: any;
+
+  if (isSandboxMode) {
+    const response = await fetch(`/api/sandbox`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      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;
+}
+
+export const AiRestylePaneModal = ({
+  isSandboxMode = false,
+}: AiRestylePaneModalProps) => {
+  const ctx = getCtx();
+  const { isAiRestyleModalOpen, paneToRestyleId } = useStore(selectionStore);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [aiDesignConfig, setAiDesignConfig] = useState<AiDesignConfig>({
+    harmony: 'Analogous',
+    baseColor: '',
+    accentColor: '',
+    theme: 'Light',
+    additionalNotes: '',
+  });
+
+  const handleClose = () => {
+    if (loading) return;
+    selectionStore.setKey('isAiRestyleModalOpen', false);
+    selectionStore.setKey('paneToRestyleId', null);
+    setError(null);
+  };
+
+  const handleGenerate = async () => {
+    if (!paneToRestyleId) return;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const childIds = ctx.getChildNodeIDs(paneToRestyleId);
+      const nodesMap = ctx.allNodes.get();
+      const gridNode = childIds.find(
+        (id) => nodesMap.get(id)?.nodeType === 'GridLayoutNode'
+      );
+      const isGrid = !!gridNode;
+
+      const promptConfig = isGrid
+        ? prompts.aiPromptsIndex.find((p) => p.layout === 'grid')
+        : prompts.aiPromptsIndex.find((p) => p.layout === 'standard');
+
+      if (!promptConfig) throw new Error('No suitable prompt found');
+
+      let designInput = `Generate a design using a **${aiDesignConfig.harmony.toLowerCase()}** color scheme with a **${aiDesignConfig.theme.toLowerCase()}** theme.`;
+      if (aiDesignConfig.baseColor)
+        designInput += ` Base around **${aiDesignConfig.baseColor}**.`;
+      if (aiDesignConfig.accentColor)
+        designInput += ` Accent with **${aiDesignConfig.accentColor}**.`;
+      if (aiDesignConfig.additionalNotes)
+        designInput += ` Notes: "${aiDesignConfig.additionalNotes}"`;
+
+      const shellPromptKey = promptConfig.prompts.shell as keyof typeof prompts;
+      const shellPromptDetails = prompts[shellPromptKey] as any;
+
+      const formattedPrompt = shellPromptDetails.user_template
+        .replace('{{DESIGN_INPUT}}', designInput)
+        .replace('{{COPY_INPUT}}', 'A generic content section')
+        .replace('{{LAYOUT_TYPE}}', 'Text Only');
+
+      const resultStr = await callAskLemurAPI(
+        formattedPrompt,
+        shellPromptDetails.system || '',
+        true,
+        isSandboxMode
+      );
+
+      let dummyCopy: string | string[] = '';
+      if (isGrid) {
+        dummyCopy = ['', ''];
+      }
+
+      const hydratedTemplate = parseAiPane(resultStr, dummyCopy, 'Text Only');
+
+      ctx.applyShellToPane(paneToRestyleId, hydratedTemplate);
+      handleClose();
+    } catch (err: any) {
+      console.error(err);
+      setError(err.message || 'Failed to restyle pane');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isAiRestyleModalOpen) return null;
+
+  return (
+    <Dialog.Root
+      open={isAiRestyleModalOpen}
+      onOpenChange={(e) => !e.open && handleClose()}
+    >
+      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
+      <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Content className="flex max-w-2xl flex-col rounded-lg bg-white shadow-2xl">
+          <div className="flex items-center justify-between border-b p-4">
+            <h3 className="flex items-center gap-2 text-lg font-bold">
+              <SparklesIcon className="h-5 w-5 text-purple-600" />
+              Re-Color Pane
+            </h3>
+            <button
+              onClick={handleClose}
+              disabled={loading}
+              className="rounded-full p-1 text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+
+          <form className="p-6" onSubmit={(e) => e.preventDefault()}>
+            <div className={loading ? 'pointer-events-none opacity-50' : ''}>
+              <AiDesignStep
+                designConfig={aiDesignConfig}
+                onDesignConfigChange={setAiDesignConfig}
+              />
+            </div>
+
+            {error && (
+              <div className="mt-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+
+            <div className="mt-8 flex justify-end gap-3">
+              <button
+                type="button"
+                onClick={handleClose}
+                disabled={loading}
+                className="rounded-lg px-4 py-2 font-bold text-gray-600 hover:bg-gray-100 disabled:opacity-50"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleGenerate}
+                disabled={loading}
+                className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-2 font-bold text-white shadow transition-all hover:from-purple-500 hover:to-indigo-500 hover:shadow-lg disabled:cursor-not-allowed disabled:opacity-75"
+              >
+                {loading ? (
+                  <>
+                    <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                    Generating...
+                  </>
+                ) : (
+                  <>
+                    <SparklesIcon className="h-5 w-5" />
+                    Apply Re-Color
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+        </Dialog.Content>
+      </Dialog.Positioner>
+    </Dialog.Root>
+  );
+};

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

@@ -1,4 +1,5 @@
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { findClosestTailwindColor } from '@/utils/compositor/tailwindColors';
 
 export interface AiDesignConfig {
   harmony: string;
@@ -11,6 +12,7 @@ export interface AiDesignConfig {
 interface AiDesignStepProps {
   designConfig: AiDesignConfig;
   onDesignConfigChange: (newConfig: AiDesignConfig) => void;
+  idPrefix?: string;
 }
 
 const harmonyOptions = [
@@ -24,6 +26,7 @@ const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
 export const AiDesignStep = ({
   designConfig,
   onDesignConfigChange,
+  idPrefix = '',
 }: AiDesignStepProps) => {
   const updateField = <K extends keyof AiDesignConfig>(
     field: K,
@@ -32,6 +35,20 @@ export const AiDesignStep = ({
     onDesignConfigChange({ ...designConfig, [field]: value });
   };
 
+  const handleColorChange = (
+    field: 'baseColor' | 'accentColor',
+    color: string
+  ) => {
+    if (!color) {
+      updateField(field, '');
+      return;
+    }
+    const closest = findClosestTailwindColor(color);
+    if (closest) {
+      updateField(field, `${closest.name}-${closest.shade}`);
+    }
+  };
+
   return (
     <div className="space-y-6">
       <div>
@@ -43,15 +60,15 @@ export const AiDesignStep = ({
             <div key={option} className="flex items-center space-x-2">
               <input
                 type="radio"
-                id={`harmony-${option}`}
-                name="harmonyOptions"
+                id={`${idPrefix}harmony-${option}`}
+                name={`${idPrefix}harmonyOptions`}
                 value={option}
                 checked={designConfig.harmony === option}
                 onChange={(e) => updateField('harmony', e.target.value)}
                 className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
               <label
-                htmlFor={`harmony-${option}`}
+                htmlFor={`${idPrefix}harmony-${option}`}
                 className="text-sm font-bold text-gray-700"
               >
                 {option}
@@ -66,7 +83,7 @@ export const AiDesignStep = ({
           <ColorPickerCombo
             title="Base Color (Optional)"
             defaultColor={designConfig.baseColor}
-            onColorChange={(color) => updateField('baseColor', color)}
+            onColorChange={(color) => handleColorChange('baseColor', color)}
             allowNull={true}
           />
         </div>
@@ -74,7 +91,7 @@ export const AiDesignStep = ({
           <ColorPickerCombo
             title="Accent Color (Optional)"
             defaultColor={designConfig.accentColor}
-            onColorChange={(color) => updateField('accentColor', color)}
+            onColorChange={(color) => handleColorChange('accentColor', color)}
             allowNull={true}
           />
         </div>
@@ -89,15 +106,15 @@ export const AiDesignStep = ({
             <div key={option} className="flex items-center space-x-2">
               <input
                 type="radio"
-                id={`theme-${option}`}
-                name="themeOptions"
+                id={`${idPrefix}theme-${option}`}
+                name={`${idPrefix}themeOptions`}
                 value={option}
                 checked={designConfig.theme === option}
                 onChange={(e) => updateField('theme', e.target.value)}
                 className="h-4 w-4 border-gray-300 text-cyan-600 focus:ring-cyan-500"
               />
               <label
-                htmlFor={`theme-${option}`}
+                htmlFor={`${idPrefix}theme-${option}`}
                 className="text-sm font-bold text-gray-700"
               >
                 {option}
@@ -109,7 +126,7 @@ export const AiDesignStep = ({
 
       <div>
         <label
-          htmlFor="additional-notes"
+          htmlFor={`${idPrefix}additional-notes`}
           className="block text-base font-bold text-gray-800"
         >
           Additional Design Notes (Optional)
@@ -119,7 +136,7 @@ export const AiDesignStep = ({
           texture".
         </p>
         <textarea
-          id="additional-notes"
+          id={`${idPrefix}additional-notes`}
           value={designConfig.additionalNotes}
           onChange={(e) => updateField('additionalNotes', e.target.value)}
           placeholder="Enter additional notes..."

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

@@ -1,8 +1,12 @@
 import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { Portal } from '@ark-ui/react';
+import SparklesIcon from '@heroicons/react/24/outline/SparklesIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
+import { selectionStore } from '@/stores/selection';
 import {
   settingsPanelStore,
   stylePanelTargetMemoryStore,
@@ -18,6 +22,7 @@ import {
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import BackgroundImageWrapper from '@/components/fields/BackgroundImageWrapper';
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
+import { AiRestylePaneModal } from '@/components/edit/pane/AiRestylePaneModal';
 import { cloneDeep } from '@/utils/helpers';
 import {
   convertToGrid,
@@ -60,6 +65,7 @@ const StyleParentPanel = ({
   const [selectedTargetIndex, setSelectedTargetIndex] = useState(0);
 
   const ctx = getCtx();
+  const { isAiRestyleModalOpen } = useStore(selectionStore);
 
   useEffect(() => {
     if (
@@ -518,6 +524,19 @@ const StyleParentPanel = ({
             })}
           </div>
         </div>
+        <div className="space-y-3 border-t border-gray-200 pt-4">
+          <button
+            onClick={() => {
+              ctx.toolModeValStore.set({ value: 'styles' });
+              selectionStore.setKey('paneToRestyleId', paneNode.id);
+              selectionStore.setKey('isAiRestyleModalOpen', true);
+            }}
+            className="flex w-full items-center justify-center gap-2 rounded bg-purple-600 px-4 py-2 text-sm font-bold text-white hover:bg-purple-700"
+          >
+            <SparklesIcon className="h-5 w-5" />
+            Re-Color this Pane
+          </button>
+        </div>
       </div>
     );
   };
@@ -645,7 +664,16 @@ const StyleParentPanel = ({
     }
   };
 
-  return <div className="space-y-4">{renderContent()}</div>;
+  return (
+    <div className="space-y-4">
+      {renderContent()}
+      {isAiRestyleModalOpen && (
+        <Portal>
+          <AiRestylePaneModal />
+        </Portal>
+      )}
+    </div>
+  );
 };
 
 export default StyleParentPanel;

package/templates/src/pages/sandbox.astro

@@ -12,7 +12,6 @@ import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
 import SettingsPanel from '@/components/edit/SettingsPanel';
 import { Compositor } from '@/components/compositor/Compositor';
-import SandboxAuthWrapper from '@/components/codehooks/SandboxAuthWrapper.tsx';
 import { preHealthCheck } from '@/utils/backend';
 
 if (!import.meta.env.PRIVATE_SANDBOX_SECRET) {
@@ -63,8 +62,6 @@ const hasProfile = Astro.request.headers
   isStoryKeep={true}
   isEditor={true}
 >
-  <SandboxAuthWrapper client:load isServerSideAuthenticated={!!hasProfile} />
-
   <CodeHook
     target="get-tractstack"
     options={{

package/templates/src/stores/nodes.ts

@@ -560,6 +560,71 @@ export class NodesContext {
     );
   }
 
+  applyShellToPane(paneId: string, template: TemplatePane) {
+    const allNodes = new Map(this.allNodes.get());
+    const paneNode = allNodes.get(paneId) as PaneNode;
+    if (!paneNode) return;
+
+    if (template.bgColour) {
+      paneNode.bgColour = template.bgColour;
+      paneNode.isChanged = true;
+    }
+
+    const childrenIds = this.getChildNodeIDs(paneId);
+
+    const gridLayoutNode = childrenIds
+      .map((id) => allNodes.get(id))
+      .find((n) => n?.nodeType === 'GridLayoutNode') as
+      | GridLayoutNode
+      | undefined;
+
+    const markdownNodes = childrenIds
+      .map((id) => allNodes.get(id))
+      .filter((n) => n?.nodeType === 'Markdown') as MarkdownPaneFragmentNode[];
+
+    if (gridLayoutNode && template.gridLayout) {
+      if (template.gridLayout.parentClasses) {
+        gridLayoutNode.parentClasses = template.gridLayout.parentClasses;
+      }
+      if (template.gridLayout.defaultClasses) {
+        gridLayoutNode.defaultClasses = template.gridLayout.defaultClasses;
+      }
+      gridLayoutNode.isChanged = true;
+
+      if (
+        template.gridLayout.nodes &&
+        Array.isArray(template.gridLayout.nodes)
+      ) {
+        const columnIds = this.getChildNodeIDs(gridLayoutNode.id);
+
+        columnIds.forEach((colId, index) => {
+          const templateCol = template.gridLayout!.nodes![index];
+          if (templateCol && templateCol.gridClasses) {
+            const liveColNode = allNodes.get(colId) as MarkdownPaneFragmentNode;
+            if (liveColNode) {
+              liveColNode.gridClasses = templateCol.gridClasses;
+              liveColNode.isChanged = true;
+            }
+          }
+        });
+      }
+    } else if (markdownNodes.length > 0 && template.markdown) {
+      const primaryMarkdown = markdownNodes[0];
+
+      if (template.markdown.parentClasses) {
+        primaryMarkdown.parentClasses = template.markdown.parentClasses;
+      }
+      if (template.markdown.defaultClasses) {
+        primaryMarkdown.defaultClasses = template.markdown.defaultClasses;
+      }
+      primaryMarkdown.isChanged = true;
+    }
+
+    this.allNodes.set(allNodes);
+    this.notifyNode(paneId);
+    this.notifyNode('root');
+  }
+
   /**
    * Splits a text node at a given character offset.
    * This is a robust function that correctly handles splits at offset 0

package/templates/src/stores/selection.ts

@@ -20,6 +20,7 @@ export interface SelectionStoreState extends SelectionRange {
   selectionBox: SelectionBox | null;
   pendingAction: 'style' | 'link' | 'carousel' | null;
   isRestyleModalOpen: boolean;
+  isAiRestyleModalOpen: boolean;
   paneToRestyleId: string | null;
 }
 
@@ -35,6 +36,7 @@ const DEFAULT_SELECTION_STATE: SelectionStoreState = {
   selectionBox: null,
   pendingAction: null,
   isRestyleModalOpen: false,
+  isAiRestyleModalOpen: false,
   paneToRestyleId: null,
 };
 

package/utils/inject-files.ts

@@ -151,12 +151,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/compositor/nodes/Pane_layout.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/codehooks/SandboxAuthWrapper.tsx'
-      ),
-      dest: 'src/components/codehooks/SandboxAuthWrapper.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/codehooks/SandboxRegisterForm.tsx'
@@ -477,6 +471,12 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/edit/pane/RestylePaneModal.tsx',
     },
+    {
+      src: resolve(
+        '../templates/src/components/edit/pane/AiRestylePaneModal.tsx'
+      ),
+      dest: 'src/components/edit/pane/AiRestylePaneModal.tsx',
+    },
     {
       src: resolve(
         '../templates/src/components/edit/pane/steps/CopyInputStep.tsx'