astro-tractstack 2.0.19 → 2.0.20

package/templates/src/components/compositor/preview/PaneSnapshotGenerator.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import * as htmlToImage from 'html-to-image';
-import type { BrandConfig } from '@/types/tractstack';
+import { brandConfigStore } from '@/stores/storykeep';
 
 export type SnapshotData = {
   imageData: string;
@@ -12,7 +12,6 @@ export interface PaneSnapshotGeneratorProps {
   htmlString: string;
   onComplete: (id: string, data: SnapshotData) => void;
   onError?: (id: string, error: string) => void;
-  config?: BrandConfig;
   outputWidth?: number;
 }
 
@@ -33,7 +32,6 @@ export const PaneSnapshotGenerator = ({
   htmlString,
   onComplete,
   onError,
-  config,
   outputWidth = 800,
 }: PaneSnapshotGeneratorProps) => {
   const [isGenerating, setIsGenerating] = useState(false);
@@ -80,7 +78,8 @@ export const PaneSnapshotGenerator = ({
         const customCssUrl = `${cssBasePath}/custom.css`;
         const storykeepCssUrl = `${cssBasePath}/storykeep.css`;
 
-        const brandColors = config?.BRAND_COLOURS?.split(',') || [];
+        const brandColors =
+          brandConfigStore.get()?.BRAND_COLOURS?.split(',') || [];
 
         // Get all existing CSS links from current document
         const existingCssLinks = Array.from(
@@ -100,7 +99,7 @@ export const PaneSnapshotGenerator = ({
   <link rel="stylesheet" href="${storykeepCssUrl}">
   ${existingCssLinks.map((href) => `<link rel="stylesheet" href="${href}">`).join('\n')}
   ${
-    config
+    brandColors
       ? `
   <style>
     :root {
@@ -203,7 +202,7 @@ export const PaneSnapshotGenerator = ({
     };
 
     generateSnapshot();
-  }, [id, htmlString, isGenerating, onComplete, onError, config, outputWidth]);
+  }, [id, htmlString, isGenerating, onComplete, onError, outputWidth]);
 
   // Show spinner while generating
   if (isGenerating) {

package/templates/src/components/compositor/preview/PanesPreviewGenerator.tsx

@@ -62,6 +62,7 @@ export const PanesPreviewGenerator = ({
             request.ctx,
             actualPaneId
           );
+          console.log(previewPayload);
 
           previewPayloads.push(previewPayload);
           requestMap.set(previewPayload.id, request.id);

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

@@ -36,7 +36,6 @@ import StyleLiElementUpdatePanel from './panels/StyleLiElementPanel_update';
 import StyleLiElementRemovePanel from './panels/StyleLiElementPanel_remove';
 import StyleCodeHookPanel from './panels/StyleCodeHookPanel';
 import { getSettingsPanelTitle } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
 import type {
   FlatNode,
   GridLayoutNode,
@@ -44,13 +43,11 @@ import type {
 } from '@/types/compositorTypes';
 
 interface SettingsPanelProps {
-  config: BrandConfig;
   availableCodeHooks: string[];
   onTitleChange?: (title: string) => void;
 }
 
 const PanelSwitch = ({
-  config,
   availableCodeHooks,
   onTitleChange,
 }: SettingsPanelProps) => {
@@ -101,13 +98,7 @@ const PanelSwitch = ({
   switch (signal.action) {
     case 'style-break':
       if (clickedNode && paneNode)
-        return (
-          <StyleBreakPanel
-            config={config}
-            node={clickedNode}
-            parentNode={paneNode}
-          />
-        );
+        return <StyleBreakPanel node={clickedNode} parentNode={paneNode} />;
       break;
 
     case 'style-parent':
@@ -117,7 +108,6 @@ const PanelSwitch = ({
             node={markdownNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
-            config={config}
           />
         );
       else if (gridLayoutNode && paneNode)
@@ -126,7 +116,6 @@ const PanelSwitch = ({
             node={gridLayoutNode}
             parentNode={paneNode}
             layer={signal.layer || 0}
-            config={config}
           />
         );
       break;
@@ -181,7 +170,6 @@ const PanelSwitch = ({
             node={clickedNode}
             layer={signal.layer || 0}
             className={signal.className}
-            config={config}
             targetProperty={(signal as any).targetProperty}
           />
         );
@@ -215,7 +203,6 @@ const PanelSwitch = ({
           <StyleLinkUpdatePanel
             node={clickedNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -232,8 +219,7 @@ const PanelSwitch = ({
       break;
 
     case 'style-link-config':
-      if (clickedNode)
-        return <StyleLinkConfigPanel node={clickedNode} config={config} />;
+      if (clickedNode) return <StyleLinkConfigPanel node={clickedNode} />;
       break;
 
     case 'style-element':
@@ -280,7 +266,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             onTitleChange={onTitleChange}
-            config={config}
           />
         );
       break;
@@ -353,7 +338,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;
@@ -429,8 +413,7 @@ const PanelSwitch = ({
     }
 
     case 'style-code-config':
-      if (clickedNode)
-        return <StyleWidgetConfigPanel node={clickedNode} config={config} />;
+      if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
       break;
 
     case 'style-code-add':
@@ -453,7 +436,6 @@ const PanelSwitch = ({
             node={clickedNode}
             parentNode={styleContextNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -467,7 +449,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;
@@ -541,7 +522,6 @@ const PanelSwitch = ({
             node={clickedNode}
             parentNode={styleContextNode}
             className={signal.className}
-            config={config}
           />
         );
       break;
@@ -554,7 +534,6 @@ const PanelSwitch = ({
             parentNode={styleContextNode}
             className={signal.className}
             childId={signal.childId}
-            config={config}
           />
         );
       break;

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

@@ -66,7 +66,6 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
         <div className="min-h-0 flex-1 space-y-4 overflow-y-auto p-1.5 pt-0 md:p-2.5 md:pt-0">
           <div className="rounded bg-gray-50 p-1.5 md:p-2.5">
             <PanelSwitch
-              config={config}
               availableCodeHooks={availableCodeHooks}
               onTitleChange={setPanelTitle}
             />

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

@@ -52,6 +52,12 @@ const storykeepToolModes = [
     title: 'Design Library',
     description: 'Save pane to design library',
   },
+  {
+    key: 'debug' as const,
+    Icon: BugAntIcon,
+    title: 'Debug Mode',
+    description: 'Toggle node tree id reveal',
+  },
 ] as const;
 
 interface StoryKeepToolModeProps {
@@ -62,7 +68,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const ctx = getCtx();
   const { value: toolModeVal } = useStore(ctx.toolModeValStore);
   const $selection = useStore(selectionStore);
-  const showGuids = useStore(ctx.showGuids);
   const navRef = useRef<HTMLElement>(null);
 
   const hasTitle = useStore(ctx.hasTitle);
@@ -73,8 +78,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
   const className =
     'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
   const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
-  const classNameDebugActive =
-    'w-8 h-8 py-1.5 rounded-md bg-orange-500 text-white';
 
   const currentToolMode =
     storykeepToolModes.find((mode) => mode.key === toolModeVal) ??
@@ -86,11 +89,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     ctx.notifyNode('root');
   };
 
-  const handleDebugToggle = () => {
-    ctx.showGuids.set(!showGuids);
-    ctx.notifyNode('root');
-  };
-
   const handleStyleClick = () => {
     selectionStore.setKey('pendingAction', 'style');
   };
@@ -156,12 +154,6 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
                 )}
               </div>
             ))}
-            <div title="Toggle debug node ids" key="debug">
-              <BugAntIcon
-                className={showGuids ? classNameDebugActive : className}
-                onClick={handleDebugToggle}
-              />
-            </div>
           </div>
         )}
 

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

@@ -5,9 +5,9 @@ import AddPaneNewPanel from './AddPanePanel_new';
 import AddPaneBreakPanel from './AddPanePanel_break';
 import AddPaneReUsePanel from './AddPanePanel_reuse';
 import AddPaneCodeHookPanel from './AddPanePanel_codehook';
+import AddPanePanel_paste from './AddPanePanel_paste';
 import { NodesContext, ROOT_NODE_NAME, getCtx } from '@/stores/nodes';
 import { PaneAddMode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface AddPanePanelProps {
   nodeId: string;
@@ -15,7 +15,6 @@ interface AddPanePanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
-  config?: BrandConfig;
   isSandboxMode?: boolean;
 }
 
@@ -25,16 +24,14 @@ const AddPanePanel = ({
   ctx,
   isStoryFragment = false,
   isContextPane = false,
-  config,
   isSandboxMode = false,
 }: AddPanePanelProps) => {
   const [reset, setReset] = useState(false);
-  const lookup = first ? `${nodeId}-0` : nodeId;
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  // Always get a valid context, either from props or the global getter
+  const lookup = first ? `${nodeId}-0` : nodeId;
   const nodesCtx = ctx || getCtx();
 
-  // Use the guaranteed context to subscribe to stores
   const activePaneMode = useStore(nodesCtx.activePaneMode);
   const hasPanes = useStore(nodesCtx.hasPanes);
   const isTemplate = useStore(nodesCtx.isTemplate);
@@ -51,12 +48,14 @@ const AddPanePanel = ({
 
   const setMode = (newMode: PaneAddMode, reset?: boolean) => {
     setReset(true);
-    nodesCtx.setPanelMode(lookup, 'add', newMode); // No longer needs optional chaining
+    nodesCtx.setPanelMode(lookup, 'add', newMode);
+    if (newMode === PaneAddMode.DEFAULT) {
+      setIsExpanded(false);
+    }
     if (reset) nodesCtx.notifyNode(ROOT_NODE_NAME);
     settingsPanelStore.set(null);
   };
 
-  // Always render a stable container div for the intersection observer
   return (
     <div className="add-pane-panel-wrapper border-mydarkgrey border-b-2 border-t-2 border-dotted">
       {mode === PaneAddMode.NEW || (!hasPanes && first && !reset) ? (
@@ -67,7 +66,6 @@ const AddPanePanel = ({
           ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
-          config={config!}
           isSandboxMode={isSandboxMode}
         />
       ) : mode === PaneAddMode.BREAK && !isContextPane ? (
@@ -79,47 +77,60 @@ const AddPanePanel = ({
           isStoryFragment={isStoryFragment}
         />
       ) : mode === PaneAddMode.REUSE && !isContextPane ? (
-        <AddPaneReUsePanel
+        <AddPaneReUsePanel nodeId={nodeId} first={first} setMode={setMode} />
+      ) : mode === PaneAddMode.CODEHOOK ? (
+        <AddPaneCodeHookPanel
           nodeId={nodeId}
           first={first}
           setMode={setMode}
-          //ctx={nodesCtx}
+          isStoryFragment={isStoryFragment}
+          isContextPane={isContextPane}
         />
-      ) : mode === PaneAddMode.CODEHOOK ? (
-        <AddPaneCodeHookPanel
+      ) : mode === PaneAddMode.PASTE ? (
+        <AddPanePanel_paste
           nodeId={nodeId}
           first={first}
           setMode={setMode}
+          ctx={nodesCtx}
           isStoryFragment={isStoryFragment}
           isContextPane={isContextPane}
         />
-      ) : (
+      ) : isExpanded ? (
         <div className="border-mylightgrey border-t border-dotted">
-          <div className="group flex w-full gap-1 px-1.5 pb-0.5 pt-1.5">
-            <div className="rounded-md bg-gray-200 px-2 py-1 text-sm text-gray-800">
-              Insert Pane Here
-            </div>
-            <div className={`flex gap-1 transition-opacity`}>
+          <div className="group flex w-full flex-wrap items-center gap-2 px-1.5 pb-0.5 pt-1.5">
+            <button
+              onClick={() => setIsExpanded(false)}
+              className="rounded-md bg-gray-200 px-2 py-1 text-sm font-bold text-gray-800"
+            >
+              &lt; Cancel
+            </button>
+            <div className={`flex flex-wrap gap-1 transition-opacity`}>
               <button
                 onClick={() => setMode(PaneAddMode.NEW)}
-                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
               >
                 + Design New
               </button>
+              <button
+                onClick={() => setMode(PaneAddMode.PASTE)}
+                className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
+              >
+                + Paste Pane
+              </button>
               {!isContextPane && (
                 <>
                   <button
                     onClick={() => setMode(PaneAddMode.BREAK)}
-                    className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                    className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                   >
                     + Visual Break
                   </button>
                   {!isTemplate && (
                     <button
                       onClick={() => setMode(PaneAddMode.REUSE)}
-                      className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                      className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                     >
-                      + Re-use existing pane
+                      + Re-use Pane
                     </button>
                   )}
                 </>
@@ -127,14 +138,23 @@ const AddPanePanel = ({
               {!isTemplate && (
                 <button
                   onClick={() => setMode(PaneAddMode.CODEHOOK)}
-                  className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+                  className="rounded bg-white px-2 py-1 text-sm text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white"
                 >
-                  + Custom Code Hook
+                  + Code Hook
                 </button>
               )}
             </div>
           </div>
         </div>
+      ) : (
+        <div className="border-mylightgrey border-t border-dotted p-2">
+          <button
+            onClick={() => setIsExpanded(true)}
+            className="text-sm text-gray-500 underline decoration-dotted underline-offset-4 transition-colors hover:text-cyan-700"
+          >
+            Insert Pane Here
+          </button>
+        </div>
       )}
     </div>
   );

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

@@ -9,7 +9,7 @@ import { NodesContext, getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import { hasAssemblyAIStore } from '@/stores/storykeep';
 import prompts from '@/constants/prompts.json';
-import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
+import type { DesignLibraryEntry } from '@/types/tractstack';
 import { PaneAddMode, type TemplatePane } from '@/types/compositorTypes';
 import { useStore } from '@nanostores/react';
 import { CopyInputStep } from './steps/CopyInputStep';
@@ -120,7 +120,6 @@ interface AddPaneNewPanelProps {
   ctx?: NodesContext;
   isStoryFragment?: boolean;
   isContextPane?: boolean;
-  config?: BrandConfig;
   isSandboxMode?: boolean;
 }
 
@@ -131,7 +130,6 @@ const AddPaneNewPanel = ({
   ctx: providedCtx,
   isStoryFragment = false,
   isContextPane = false,
-  config,
   isSandboxMode = false,
 }: AddPaneNewPanelProps) => {
   const ctx = providedCtx || getCtx();
@@ -672,17 +670,13 @@ const AddPaneNewPanel = ({
           ← Back to Choice
         </button>
       </div>
-      <DesignLibraryStep
-        config={config!}
-        onSelect={handleDesignLibrarySelect}
-      />
+      <DesignLibraryStep onSelect={handleDesignLibrarySelect} />
     </div>
   );
 
   const renderAiDesignStep = () => (
     <div className="space-y-4 p-4">
       <AiDesignStep
-        config={config!}
         designConfig={aiDesignConfig}
         onDesignConfigChange={setAiDesignConfig}
       />

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

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { getCtx, type NodesContext } from '@/stores/nodes';
+import { PaneAddMode, type StoragePane } from '@/types/compositorTypes';
+import {
+  remapPaneIds,
+  convertStorageToLiveTemplate,
+} from '@/utils/compositor/designLibraryHelper';
+
+interface AddPanePanelPasteProps {
+  nodeId: string;
+  first: boolean;
+  setMode: (mode: PaneAddMode, reset?: boolean) => void;
+  ctx?: NodesContext;
+  isStoryFragment?: boolean;
+  isContextPane?: boolean;
+}
+
+const AddPanePanel_paste = ({
+  nodeId,
+  first,
+  setMode,
+  ctx: providedCtx,
+  isStoryFragment,
+  isContextPane,
+}: AddPanePanelPasteProps) => {
+  const [jsonInput, setJsonInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const ctx = providedCtx || getCtx();
+
+  const handleCreate = () => {
+    setError(null);
+    if (!jsonInput.trim()) {
+      setError('Paste content cannot be empty.');
+      return;
+    }
+
+    try {
+      const parsedPane = JSON.parse(jsonInput) as StoragePane;
+      if (parsedPane.nodeType !== 'Pane') {
+        throw new Error('Pasted content is not a valid Pane object.');
+      }
+
+      const remappedPane = remapPaneIds(parsedPane);
+      const liveTemplate = convertStorageToLiveTemplate(remappedPane);
+
+      const ownerId =
+        isStoryFragment || isContextPane
+          ? nodeId
+          : ctx.getClosestNodeTypeFromId(nodeId, 'StoryFragment');
+
+      ctx.addTemplatePane(
+        ownerId,
+        liveTemplate,
+        nodeId,
+        first ? 'before' : 'after'
+      );
+      ctx.notifyNode('root');
+      setMode(PaneAddMode.DEFAULT, true);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An unknown error occurred during parsing.';
+      setError(`Invalid Pane JSON: ${message}`);
+    }
+  };
+
+  return (
+    <div className="p-2 shadow-inner">
+      <div className="rounded-md border bg-gray-50 p-4">
+        <div className="flex items-center justify-between pb-4">
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => setMode(PaneAddMode.DEFAULT)}
+              className="w-fit rounded bg-gray-200 px-3 py-1 text-sm text-gray-800 transition-colors hover:bg-gray-300"
+            >
+              ← Go Back
+            </button>
+            <h3 className="font-action text-sm font-bold text-cyan-700">
+              Paste Pane
+            </h3>
+          </div>
+        </div>
+        <div className="space-y-4">
+          <p className="text-sm text-gray-600">
+            Paste the JSON content of a copied pane into the text area below.
+          </p>
+          <textarea
+            value={jsonInput}
+            onChange={(e) => setJsonInput(e.target.value)}
+            placeholder="Paste pane JSON here..."
+            className="h-48 w-full rounded-md border border-gray-300 bg-white p-2 font-mono text-xs focus:border-cyan-500 focus:ring-cyan-500"
+            spellCheck={false}
+          />
+          {error && <p className="text-sm text-red-600">{error}</p>}
+          <div className="flex justify-end">
+            <button
+              onClick={handleCreate}
+              disabled={!jsonInput.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"
+            >
+              Create Pane from Paste
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AddPanePanel_paste;

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

@@ -15,6 +15,7 @@ import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { selectionStore } from '@/stores/selection';
 import { getCtx, NodesContext } from '@/stores/nodes';
 import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
+import { brandConfigStore } from '@/stores/storykeep';
 import {
   extractPaneCopy,
   mergeCopyIntoTemplate,
@@ -24,10 +25,10 @@ import type {
   PaneNode,
   StoragePane,
   TemplatePane,
-  TemplateMarkdown, // Added import
-  BaseNode, // Added import
+  TemplateMarkdown,
+  BaseNode,
 } from '@/types/compositorTypes';
-import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
+import type { DesignLibraryEntry } from '@/types/tractstack';
 import {
   PaneSnapshotGenerator,
   type SnapshotData,
@@ -44,13 +45,11 @@ const VERBOSE = false;
 
 interface TemplatePreviewItemProps {
   template: TemplatePane;
-  config: BrandConfig;
   onClick: () => void;
 }
 
 const TemplatePreviewItem = ({
   template,
-  config,
   onClick,
 }: TemplatePreviewItemProps) => {
   const [previewState, setPreviewState] = useState<{
@@ -111,7 +110,6 @@ const TemplatePreviewItem = ({
             id={template.id}
             htmlString={previewState.htmlFragment}
             outputWidth={800}
-            config={config}
             onComplete={(_id, data) => handleSnapshotComplete(data)}
             onError={(_id, err) =>
               setPreviewState((prev) =>
@@ -141,16 +139,12 @@ const TemplatePreviewItem = ({
   );
 };
 
-interface RestylePaneModalProps {
-  config: BrandConfig;
-}
-
-export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
+export const RestylePaneModal = () => {
   const ctx = getCtx();
   const { isRestyleModalOpen, paneToRestyleId } = useStore(selectionStore, {
     keys: ['isRestyleModalOpen', 'paneToRestyleId'],
   });
-  const designLibrary = config?.DESIGN_LIBRARY || [];
+  const designLibrary = brandConfigStore.get()?.DESIGN_LIBRARY || [];
 
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [searchTerm, setSearchTerm] = useState('');
@@ -502,7 +496,6 @@ export const RestylePaneModal = ({ config }: RestylePaneModalProps) => {
                     <TemplatePreviewItem
                       key={template.id}
                       template={template}
-                      config={config}
                       onClick={() => handleSelectTemplate(template)}
                     />
                   ))}

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

@@ -1,5 +1,4 @@
 import ColorPickerCombo from '@/components/fields/ColorPickerCombo';
-import type { BrandConfig } from '@/types/tractstack';
 
 export interface AiDesignConfig {
   harmony: string;
@@ -10,7 +9,6 @@ export interface AiDesignConfig {
 }
 
 interface AiDesignStepProps {
-  config: BrandConfig;
   designConfig: AiDesignConfig;
   onDesignConfigChange: (newConfig: AiDesignConfig) => void;
 }
@@ -24,7 +22,6 @@ const harmonyOptions = [
 const themeOptions = ['Light', 'Dark', 'Bright', 'Muted', 'Pastel', 'Earthy'];
 
 export const AiDesignStep = ({
-  config,
   designConfig,
   onDesignConfigChange,
 }: AiDesignStepProps) => {
@@ -71,7 +68,6 @@ export const AiDesignStep = ({
         <div>
           <ColorPickerCombo
             title="Base Color (Optional)"
-            config={config}
             defaultColor={designConfig.baseColor}
             onColorChange={(color) => updateField('baseColor', color)}
             allowNull={true}
@@ -80,7 +76,6 @@ export const AiDesignStep = ({
         <div>
           <ColorPickerCombo
             title="Accent Color (Optional)"
-            config={config}
             defaultColor={designConfig.accentColor}
             onColorChange={(color) => updateField('accentColor', color)}
             allowNull={true}