astro-tractstack 2.3.0 → 2.3.2

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

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
+import { classNames } from '@/utils/helpers';
 import { epinetCustomFilters } from '@/stores/analytics';
 import { Accordion } from '@ark-ui/react';
 import ChevronLeftIcon from '@heroicons/react/24/outline/ChevronLeftIcon';
@@ -68,6 +69,7 @@ const EpinetTableView = ({
   const [currentDay, setCurrentDay] = useState<string | null>(null);
   const [availableDays, setAvailableDays] = useState<string[]>([]);
   const [currentDayIndex, setCurrentDayIndex] = useState(0);
+  const [openAccordionValues, setOpenAccordionValues] = useState<string[]>([]);
 
   const getContentInfo = (
     contentId: string
@@ -215,6 +217,12 @@ const EpinetTableView = ({
     setCurrentDay(availableDays[newIndex]);
   };
 
+  useEffect(() => {
+    setOpenAccordionValues((prev) =>
+      prev.filter((v) => !v.startsWith('empty-'))
+    );
+  }, [currentDay]);
+
   const getCurrentDayData = (): {
     data: HourData[];
     dailyTotal: number;
@@ -485,129 +493,162 @@ const EpinetTableView = ({
           </div>
         </div>
 
-        <Accordion.Root multiple className="w-full">
-          {dayData.map((item, index) => (
-            <Accordion.Item
-              key={item.type === 'active' ? item.hourKey : `empty-${index}`}
-              value={item.type === 'active' ? item.hourKey : `empty-${index}`}
-              className="border-b border-gray-100 last:border-b-0"
-            >
-              <Accordion.ItemTrigger className="flex w-full cursor-pointer items-center justify-between p-3 text-left transition-colors duration-200 hover:bg-gray-100">
-                {item.type === 'active' ? (
-                  <div className="flex flex-grow items-center justify-between space-x-3">
-                    <div className="flex flex-grow items-center space-x-3">
-                      <span className="text-sm font-bold text-gray-700">
-                        {item.humanReadableTime}
-                      </span>
-                      <span className="text-xs text-gray-600">
-                        {item.hourlyTotal} event
-                        {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
-                        {item.hourlyVisitors} visitor
-                        {item.hourlyVisitors !== 1 ? 's' : ''}
-                      </span>
-                      <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
-                        <div
-                          className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
-                          style={{
-                            width: `${Math.max(item.relativeToMax * 100, 5)}%`,
-                          }}
-                          title={`${item.hourlyTotal} events (${(
-                            item.relativeToMax * 100
-                          ).toFixed(1)}% of busiest hour)`}
-                        />
+        <Accordion.Root
+          multiple
+          className="w-full"
+          value={openAccordionValues}
+          onValueChange={({ value }) =>
+            setOpenAccordionValues(value.filter((v) => !v.startsWith('empty-')))
+          }
+        >
+          {dayData.map((item, index) => {
+            const itemValue =
+              item.type === 'active' ? item.hourKey : `empty-${index}`;
+            const isExpandable = item.type === 'active';
+            const isOpen = openAccordionValues.includes(itemValue);
+            return (
+              <Accordion.Item
+                key={item.type === 'active' ? item.hourKey : `empty-${index}`}
+                value={itemValue}
+                disabled={!isExpandable}
+                className="border-b border-gray-100 last:border-b-0"
+              >
+                <Accordion.ItemTrigger
+                  className={classNames(
+                    'flex w-full items-center justify-between p-3 text-left transition-colors duration-200',
+                    isExpandable
+                      ? 'cursor-pointer hover:bg-gray-100'
+                      : 'cursor-default hover:bg-transparent'
+                  )}
+                >
+                  {item.type === 'active' ? (
+                    <div className="flex flex-grow items-center justify-between space-x-3">
+                      <div className="flex flex-grow items-center space-x-3">
+                        <span className="text-sm font-bold text-gray-700">
+                          {item.humanReadableTime}
+                        </span>
+                        <span className="text-xs text-gray-600">
+                          {item.hourlyTotal} event
+                          {item.hourlyTotal !== 1 ? 's' : ''} /{' '}
+                          {item.hourlyVisitors} visitor
+                          {item.hourlyVisitors !== 1 ? 's' : ''}
+                        </span>
+                        <div className="relative h-2 w-full max-w-48 rounded bg-gray-200">
+                          <div
+                            className="absolute left-0 top-0 h-2 rounded bg-cyan-600"
+                            style={{
+                              width: `${Math.max(item.relativeToMax * 100, 5)}%`,
+                            }}
+                            title={`${item.hourlyTotal} events (${(
+                              item.relativeToMax * 100
+                            ).toFixed(1)}% of busiest hour)`}
+                          />
+                        </div>
                       </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <div
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          focusOnThisHour(item.hourKey);
-                        }}
-                        className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
-                        role="button"
-                        tabIndex={0}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
+                      <div className="flex items-center space-x-2">
+                        <div
+                          onClick={(e) => {
                             e.stopPropagation();
                             focusOnThisHour(item.hourKey);
-                          }
-                        }}
-                      >
-                        <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
-                        Journeys this Hour
+                          }}
+                          className="flex cursor-pointer items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800 transition-colors duration-200 hover:bg-orange-200"
+                          role="button"
+                          tabIndex={0}
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              focusOnThisHour(item.hourKey);
+                            }
+                          }}
+                        >
+                          <MagnifyingGlassIcon className="mr-1 h-3 w-3" />
+                          Journeys this Hour
+                        </div>
+                        <div className="flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800">
+                          <Accordion.ItemIndicator>
+                            <ChevronDownIcon
+                              className={classNames(
+                                'h-3 w-3 transition-transform duration-200',
+                                isOpen && 'rotate-180'
+                              )}
+                            />
+                          </Accordion.ItemIndicator>
+                          <span
+                            className={classNames(
+                              'ml-1',
+                              isOpen ? 'hidden' : 'block'
+                            )}
+                          >
+                            Expand Details
+                          </span>
+                          <span
+                            className={classNames(
+                              'ml-1',
+                              isOpen ? 'block' : 'hidden'
+                            )}
+                          >
+                            Hide Details
+                          </span>
+                        </div>
                       </div>
-                      <div className="flex items-center rounded-md bg-orange-100 px-2 py-1 text-xs font-bold text-orange-800">
-                        <Accordion.ItemIndicator>
-                          <ChevronDownIcon className="h-3 w-3 transition-transform duration-200 data-[state=open]:rotate-180" />
-                        </Accordion.ItemIndicator>
-                        <span className="ml-1 data-[state=closed]:block data-[state=open]:hidden">
-                          Expand Details
+                    </div>
+                  ) : (
+                    <div className="flex flex-grow items-center">
+                      <div className="flex items-center">
+                        <span className="text-sm text-gray-700">
+                          {item.humanReadableDisplay}
                         </span>
-                        <span className="ml-1 data-[state=open]:block data-[state=closed]:hidden">
-                          Hide Details
+                        <span className="ml-2 text-xs italic text-gray-500">
+                          {item.isFuture ? 'The future awaits!' : 'No activity'}
                         </span>
                       </div>
                     </div>
-                  </div>
-                ) : (
-                  <div className="flex flex-grow items-center justify-between">
-                    <div className="flex items-center">
-                      <span className="text-sm text-gray-700">
-                        {item.humanReadableDisplay}
-                      </span>
-                      <span className="ml-2 text-xs italic text-gray-500">
-                        {item.isFuture ? 'The future awaits!' : 'No activity'}
-                      </span>
-                    </div>
-                    <Accordion.ItemIndicator>
-                      <ChevronDownIcon className="h-5 w-5 text-gray-500 transition-transform duration-200 data-[state=open]:rotate-180" />
-                    </Accordion.ItemIndicator>
-                  </div>
-                )}
-              </Accordion.ItemTrigger>
-
-              <Accordion.ItemContent className="p-4">
-                {item.type === 'active' && (
-                  <div className="space-y-4">
-                    {item.contentItems.map((content) => (
-                      <div
-                        key={`${item.hourKey}-${content.contentId}`}
-                        className="mb-3"
-                      >
-                        <div className="mb-1 flex items-center justify-between text-sm font-bold text-gray-700">
-                          <div className="flex items-center">
-                            {getContentIcon(content.contentType)}
-                            {content.title}
-                          </div>
-                          {content.visitorIds.length > 0 && (
-                            <div
-                              className="flex items-center text-xs text-gray-600"
-                              title={content.visitorIds.join(', ')}
-                            >
-                              <UserGroupIcon className="mr-1 h-3 w-3" />
-                              {content.visitorIds.length} unique visitor
-                              {content.visitorIds.length !== 1 ? 's' : ''}
-                            </div>
-                          )}
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                          {content.events.map((event, eventIdx) => (
-                            <div
-                              key={`${item.hourKey}-${content.contentId}-${event.verb}-${eventIdx}`}
-                              className="rounded-full bg-cyan-100 px-2 py-0.5 text-xs font-bold text-cyan-800"
-                            >
-                              {event.verb} [{event.count}]
+                  )}
+                </Accordion.ItemTrigger>
+
+                {isExpandable && (
+                  <Accordion.ItemContent className="p-4">
+                    <div className="space-y-4">
+                      {item.contentItems.map((content) => (
+                        <div
+                          key={`${item.hourKey}-${content.contentId}`}
+                          className="mb-3"
+                        >
+                          <div className="mb-1 flex items-center justify-between text-sm font-bold text-gray-700">
+                            <div className="flex items-center">
+                              {getContentIcon(content.contentType)}
+                              {content.title}
                             </div>
-                          ))}
+                            {content.visitorIds.length > 0 && (
+                              <div
+                                className="flex items-center text-xs text-gray-600"
+                                title={content.visitorIds.join(', ')}
+                              >
+                                <UserGroupIcon className="mr-1 h-3 w-3" />
+                                {content.visitorIds.length} unique visitor
+                                {content.visitorIds.length !== 1 ? 's' : ''}
+                              </div>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap gap-2">
+                            {content.events.map((event, eventIdx) => (
+                              <div
+                                key={`${item.hourKey}-${content.contentId}-${event.verb}-${eventIdx}`}
+                                className="rounded-full bg-cyan-100 px-2 py-0.5 text-xs font-bold text-cyan-800"
+                              >
+                                {event.verb} [{event.count}]
+                              </div>
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    ))}
-                  </div>
+                      ))}
+                    </div>
+                  </Accordion.ItemContent>
                 )}
-              </Accordion.ItemContent>
-            </Accordion.Item>
-          ))}
+              </Accordion.Item>
+            );
+          })}
 
           {dayData.length === 0 && (
             <div className="py-6 text-center text-sm text-gray-500">

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

@@ -269,7 +269,10 @@ const EpinetWrapper = ({
     return (
       <div className="flex h-96 w-full items-center justify-center rounded bg-gray-100">
         <div className="text-center">
-          <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-cyan-600 border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]"></div>
+          <div
+            className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-cyan-600 border-r-transparent motion-reduce:animate-none"
+            style={{ verticalAlign: '-0.125em' }}
+          ></div>
           <p className="mt-4 text-sm text-gray-600">
             Discovering analytics configuration...
           </p>

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

@@ -22,6 +22,13 @@ const comboboxItemStyles = `
   .combo-item[data-state="checked"] .check-indicator {
     display: flex;
   }
+  .combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+  .combo-item[data-highlighted] .check-indicator {
+    color: #fff;
+  }
 `;
 
 const FeaturedArticleSetup = ({
@@ -268,7 +275,7 @@ const FeaturedArticleSetup = ({
               <Combobox.Item
                 key={item.slug}
                 item={item}
-                className="combo-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                className="combo-item relative cursor-default select-none py-2 pl-10 pr-4 text-gray-900"
               >
                 <span className="block truncate">{item.title}</span>
                 <span className="check-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">

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

@@ -7,6 +7,13 @@ import { fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import type { PaneNode } from '@/types/compositorTypes';
 
+const productCardComboItemHighlightStyles = `
+  .product-card-combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+`;
+
 interface ProductCardSetupProps {
   nodeId: string;
   params: Record<string, any> | null;
@@ -118,6 +125,7 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
             <Combobox.Label className="text-sm font-bold text-gray-700">
               Find a product
             </Combobox.Label>
+            <style>{productCardComboItemHighlightStyles}</style>
             <Combobox.Control>
               <Combobox.Input
                 className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
@@ -131,7 +139,7 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
                     <Combobox.Item
                       key={item.value}
                       item={item}
-                      className="relative cursor-pointer select-none px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                      className="product-card-combo-item relative cursor-pointer select-none px-4 py-2 text-gray-900"
                     >
                       <Combobox.ItemText>{item.label}</Combobox.ItemText>
                     </Combobox.Item>

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

@@ -35,6 +35,13 @@ const modes = [
   },
 ];
 
+const productGridComboItemHighlightStyles = `
+  .product-grid-combo-item[data-highlighted] {
+    background-color: #0891b2;
+    color: #fff;
+  }
+`;
+
 export const ProductGridSetup = (props: ProductGridSetupProps) => {
   const { nodeId, params } = props;
   const ctx = getCtx();
@@ -235,6 +242,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                 <Combobox.Label className="text-sm font-bold text-gray-700">
                   Find products to include
                 </Combobox.Label>
+                <style>{productGridComboItemHighlightStyles}</style>
                 <Combobox.Control>
                   <Combobox.Input
                     className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
@@ -248,7 +256,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                         <Combobox.Item
                           key={item.value}
                           item={item}
-                          className="relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                          className="product-grid-combo-item relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900"
                         >
                           <Combobox.ItemText>{item.label}</Combobox.ItemText>
                           <Combobox.ItemIndicator className="ml-auto">

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

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { getCtx } from '@/stores/nodes';
 import { viewportKeyStore } from '@/stores/storykeep';
 import {
@@ -15,7 +16,7 @@ export const BgPaneWrapper = (props: NodeProps) => {
 
   const viewport = viewportKeyStore.get().value;
 
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = (e: MouseEvent) => {
     getCtx(props).setClickedNodeId(props.nodeId, true);
     e.stopPropagation();
   };

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

@@ -85,7 +85,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
     setShowInsertOptions(false);
   };
 
-  const handleClose = (e: React.MouseEvent) => {
+  const handleClose = (e: MouseEvent) => {
     e.stopPropagation();
     getCtx(props).setPanelMode('', '', '');
     setShowInsertOptions(false);

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

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react';
 import { useStore } from '@nanostores/react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { getCtx } from '@/stores/nodes';
@@ -20,7 +21,7 @@ const AddElementsPanel = ({
     ctx.notifyNode('root');
   };
 
-  const handleMouseDown = (e: React.MouseEvent, mode: ToolAddMode) => {
+  const handleMouseDown = (e: MouseEvent, mode: ToolAddMode) => {
     e.preventDefault();
     startToolDrag('insert', mode, e.clientX, e.clientY);
     initToolDragListeners();

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type ChangeEvent } from 'react';
 import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { getCtx } from '@/stores/nodes';
@@ -42,7 +42,7 @@ const PaneSlugPanel = ({ nodeId, setMode }: PaneSlugPanelProps) => {
     //.replace(/^-+|-+$/g, '');
   };
 
-  const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleSlugChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newSlug = validateSlug(e.target.value);
     if (newSlug.length <= 75) {
       // Prevent more than 75 chars

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

@@ -103,6 +103,19 @@ const AddPaneCodeHookPanel = ({
       parentId: '',
       codeHookTarget: selected,
       isContextPane: isContextPane,
+      ...(selected === 'shopify-product-grid' ||
+      selected === 'shopify-service-list'
+        ? {
+            codeHookPayload: {
+              options: JSON.stringify({
+                category: 'product|service',
+                group: '',
+                title: '',
+                bgColor: '#f9f9f9',
+              }),
+            },
+          }
+        : {}),
     };
     const targetId =
       isStoryFragment || isContextPane

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

@@ -276,9 +276,9 @@ const AddPaneNewPanel = ({
         {!hasAssemblyAI && (
           <div className="rounded-lg border-l-4 border-blue-400 bg-blue-50 p-4 shadow-sm">
             <p className="text-sm text-blue-800">
-              Tract Stack uses AssemblyAI AskLemur service to generate designs,
-              describe content, and streamline the management of your site. We
-              strongly recommend enabling these features. See{' '}
+              Tract Stack uses AssemblyAI to generate designs, describe content,
+              and streamline the management of your site. We strongly recommend
+              enabling these features. See{' '}
               <a
                 href="https://freewebpress.org"
                 target="_blank"

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, type ChangeEvent } from 'react';
 
 interface AddPaneNewCustomCopyProps {
   value: string;
@@ -11,7 +11,7 @@ export const AddPaneNewCustomCopy = ({
 }: AddPaneNewCustomCopyProps) => {
   const [localValue, setLocalValue] = useState(initialValue);
 
-  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setLocalValue(e.target.value);
   };
 

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

@@ -11,7 +11,7 @@ import { AiDesignStep, type AiDesignConfig } from './steps/AiDesignStep';
 import { AiRefineDesignStep } from './steps/AiRefineDesignStep';
 import prompts from '@/constants/prompts.json';
 import { parseAiPane } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { PaneNode, TemplatePane } from '@/types/compositorTypes';
 
 interface AiRestylePaneModalProps {
@@ -87,7 +87,7 @@ export const AiRestylePaneModal = ({
         .replace('{{COPY_INPUT}}', 'A generic content section')
         .replace('{{LAYOUT_TYPE}}', 'Text Only');
 
-      const resultStr = await callAskLemurAPI({
+      const resultStr = await callAaiAPI({
         prompt: formattedPrompt,
         context: shellPromptDetails.system || '',
         expectJson: true,

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

@@ -302,7 +302,7 @@ const ConfigPanePanel = ({
           {/* Right Aligned Tools */}
           <div className="ml-auto flex items-center gap-2 px-2">
             {/* Delete & Reorder Tools */}
-            {!isTemplate && !isContextPane && !isHtmlAstPane && (
+            {!isTemplate && !isContextPane && (
               <div className="flex items-center gap-1 border-r border-gray-300 pr-2">
                 <button
                   onClick={handleMoveUp}

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

@@ -6,7 +6,7 @@ import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRou
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst } from '@/utils/compositor/htmlAst';
 import type { TemplatePane } from '@/types/compositorTypes';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import BooleanToggle from '@/components/form/BooleanToggle';
 import { AiDesignStep, type AiDesignConfig } from './AiDesignStep';
 
@@ -86,7 +86,7 @@ export const AiCreativeDesignStep = ({
       userPrompt = userPrompt.replace('{{DESIGN_NOTES}}', combinedNotes);
 
       // Use shared infrastructure utility
-      const rawHtml = await callAskLemurAPI({
+      const rawHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,

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

@@ -6,7 +6,7 @@ import {
   convertTemplateToAIShell,
 } from '@/utils/compositor/designLibraryHelper';
 import { parseAiPane, parseAiCopyHtml } from '@/utils/compositor/aiPaneParser';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import { CopyInputStep, type CopyMode } from './CopyInputStep';
 import type { DesignLibraryEntry } from '@/types/tractstack';
 import type { TemplatePane } from '@/types/compositorTypes';
@@ -159,7 +159,7 @@ export const AiLibraryCopyStep = ({
               .replace('{{LAYOUT_TYPE}}', layoutType)
               .replace('{{COLUMN_EXAMPLE}}', columnPreset.example);
 
-            const copyResult = await callAskLemurAPI({
+            const copyResult = await callAaiAPI({
               prompt: formattedCopyPrompt,
               context: copyPromptDetails.system || '',
               expectJson: false,
@@ -201,7 +201,7 @@ export const AiLibraryCopyStep = ({
             .replace('{{LAYOUT_TYPE}}', layoutType)
             .replace('{{SHELL_JSON}}', shellResult);
 
-          const copyResult = await callAskLemurAPI({
+          const copyResult = await callAaiAPI({
             prompt: formattedCopyPrompt,
             context: copyPromptDetails.system || '',
             expectJson: false,

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

@@ -5,7 +5,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import ArrowPathRoundedSquareIcon from '@heroicons/react/24/outline/ArrowPathRoundedSquareIcon';
 import prompts from '@/constants/prompts.json';
 import { htmlToHtmlAst, cleanHtml } from '@/utils/compositor/htmlAst';
-import { callAskLemurAPI } from '@/utils/compositor/aiGeneration';
+import { callAaiAPI } from '@/utils/compositor/aiGeneration';
 import type { TemplatePane } from '@/types/compositorTypes';
 
 interface AiRefineDesignStepProps {
@@ -54,7 +54,7 @@ export const AiRefineDesignStep = ({
       userPrompt = userPrompt.replace('{{HTML_INPUT}}', cleanHtml(initialHtml));
 
       // 1. Get RAW output from AI
-      const resultHtml = await callAskLemurAPI({
+      const resultHtml = await callAaiAPI({
         prompt: userPrompt,
         context: systemPrompt,
         expectJson: false,