astro-tractstack 2.0.18 → 2.0.20

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}

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

@@ -15,11 +15,12 @@ import { viewportKeyStore } from '@/stores/storykeep';
 import { createEmptyStorykeep } from '@/utils/compositor/nodesHelper';
 import { convertStorageToLiveTemplate } from '@/utils/compositor/designLibraryHelper';
 import type { StoragePane } from '@/types/compositorTypes';
-import type { BrandConfig, DesignLibraryEntry } from '@/types/tractstack';
+import type { DesignLibraryEntry } from '@/types/tractstack';
 import {
   PaneSnapshotGenerator,
   type SnapshotData,
 } from '@/components/compositor/preview/PaneSnapshotGenerator';
+import { brandConfigStore } from '@/stores/storykeep';
 import {
   PanesPreviewGenerator,
   type PanePreviewRequest,
@@ -32,7 +33,6 @@ const PAGE_SIZE = 12;
 // --- Sub-component for rendering a single preview item ---
 interface TemplatePreviewItemProps {
   storageTemplate: StoragePane;
-  config: BrandConfig;
   onClick: () => void;
   title: string;
   category: string;
@@ -40,7 +40,6 @@ interface TemplatePreviewItemProps {
 
 const TemplatePreviewItem = ({
   storageTemplate,
-  config,
   onClick,
   title,
   category,
@@ -113,7 +112,6 @@ const TemplatePreviewItem = ({
             id={liveTemplate.id}
             htmlString={previewState.htmlFragment}
             outputWidth={800}
-            config={config}
             onComplete={(_id, data) => handleSnapshotComplete(data)}
             onError={(_id, err) =>
               setPreviewState((prev) =>
@@ -150,15 +148,11 @@ const TemplatePreviewItem = ({
 
 // --- Main component ---
 interface DesignLibraryStepProps {
-  config: BrandConfig;
   onSelect: (entry: DesignLibraryEntry) => void;
 }
 
-export const DesignLibraryStep = ({
-  config,
-  onSelect,
-}: DesignLibraryStepProps) => {
-  const designLibrary = config?.DESIGN_LIBRARY || [];
+export const DesignLibraryStep = ({ onSelect }: DesignLibraryStepProps) => {
+  const designLibrary = brandConfigStore.get()?.DESIGN_LIBRARY || [];
   const viewport = useStore(viewportKeyStore).value;
 
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
@@ -321,7 +315,6 @@ export const DesignLibraryStep = ({
               <TemplatePreviewItem
                 key={entry.title}
                 storageTemplate={entry.template}
-                config={config}
                 onClick={() => onSelect(entry)}
                 title={entry.title}
                 category={entry.category}

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

@@ -34,7 +34,7 @@ interface BreakNode extends FlatNode {
   bgColor: string;
 }
 
-const StyleBreakPanel = ({ node, parentNode, config }: BasePanelProps) => {
+const StyleBreakPanel = ({ node, parentNode }: BasePanelProps) => {
   if (!node || !isBreakNode(node) || !parentNode || !isPaneNode(parentNode)) {
     return null;
   }
@@ -161,7 +161,6 @@ const StyleBreakPanel = ({ node, parentNode, config }: BasePanelProps) => {
           onColorChange={(color: string) =>
             setSettings((prev) => ({ ...prev, svgFill: color }))
           }
-          config={config!}
         />
         <ColorPickerCombo
           title="Background Color"
@@ -169,7 +168,6 @@ const StyleBreakPanel = ({ node, parentNode, config }: BasePanelProps) => {
           onColorChange={(color: string) =>
             setSettings((prev) => ({ ...prev, bgColor: color }))
           }
-          config={config!}
           allowNull={true}
         />
       </div>

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

@@ -19,14 +19,12 @@ import type {
   MarkdownPaneFragmentNode,
   GridLayoutNode,
 } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 export interface StyleElementUpdatePanelProps {
   node: FlatNode;
   parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
   className: string;
   onTitleChange?: (title: string) => void;
-  config?: BrandConfig | null;
 }
 
 const StyleElementUpdatePanel = ({
@@ -34,7 +32,6 @@ const StyleElementUpdatePanel = ({
   parentNode,
   className,
   onTitleChange,
-  config,
 }: StyleElementUpdatePanelProps) => {
   if (
     !node ||
@@ -309,7 +306,6 @@ const StyleElementUpdatePanel = ({
           onFinalChange={handleFinalChange}
           values={values}
           viewport="mobile"
-          config={config!}
           isInferred={false}
         />
         <ViewportComboBox
@@ -318,7 +314,6 @@ const StyleElementUpdatePanel = ({
           values={values}
           viewport="tablet"
           isInferred={!isOverridden && tabletValue === mobileValue}
-          config={config!}
         />
         <ViewportComboBox
           value={desktopValue}
@@ -326,7 +321,6 @@ const StyleElementUpdatePanel = ({
           values={values}
           viewport="desktop"
           isInferred={!isOverridden && desktopValue === tabletValue}
-          config={config!}
         />
       </div>
     </div>

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

@@ -28,7 +28,6 @@ const StyleImagePanel = ({
   outerContainerNode,
   parentNode,
 }: StyleImagePanelProps) => {
-  console.log(`StyleImagePanel`, parentNode, node);
   const [altDescription, setAltDescription] = useState(node.alt || '');
 
   const imgDefaultClasses = parentNode.defaultClasses?.[node.tagName];

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

@@ -288,7 +288,6 @@ const StyleImageUpdatePanel = ({
           onFinalChange={handleFinalChange}
           values={values}
           viewport="mobile"
-          config={config!}
           isInferred={false}
         />
         <ViewportComboBox
@@ -297,7 +296,6 @@ const StyleImageUpdatePanel = ({
           values={values}
           viewport="tablet"
           isInferred={!isOverridden && tabletValue === mobileValue}
-          config={config!}
         />
         <ViewportComboBox
           value={desktopValue}
@@ -305,7 +303,6 @@ const StyleImageUpdatePanel = ({
           values={values}
           viewport="desktop"
           isInferred={!isOverridden && desktopValue === tabletValue}
-          config={config!}
         />
       </div>
     </div>

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

@@ -18,7 +18,6 @@ const StyleLiElementUpdatePanel = ({
   node,
   parentNode,
   className,
-  config,
   childId,
 }: BasePanelProps) => {
   if (
@@ -289,7 +288,6 @@ const StyleLiElementUpdatePanel = ({
           onFinalChange={handleFinalChange}
           values={values}
           viewport="mobile"
-          config={config!}
           isInferred={false}
         />
         <ViewportComboBox
@@ -298,7 +296,6 @@ const StyleLiElementUpdatePanel = ({
           values={values}
           viewport="tablet"
           isInferred={!isOverridden && tabletValue === mobileValue}
-          config={config!}
         />
         <ViewportComboBox
           value={desktopValue}
@@ -306,7 +303,6 @@ const StyleLiElementUpdatePanel = ({
           values={values}
           viewport="desktop"
           isInferred={!isOverridden && desktopValue === tabletValue}
-          config={config!}
         />
       </div>
     </div>

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

@@ -4,19 +4,22 @@ import { getCtx } from '@/stores/nodes';
 import { cloneDeep } from '@/utils/helpers';
 import { lispLexer } from '@/utils/actions/lispLexer';
 import { preParseAction } from '@/utils/actions/preParse_Action';
-import { preParseBunny } from '@/utils/actions/preParse_Bunny';
 import ActionBuilderField from '@/components/form/ActionBuilderField';
+import { brandConfigStore } from '@/stores/storykeep';
 import { GOTO_TARGETS } from '@/constants';
-import type { BrandConfig } from '@/types/tractstack';
 import type { FlatNode, LispToken } from '@/types/compositorTypes';
 
 interface StyleLinkConfigPanelProps {
   node: FlatNode;
-  config: BrandConfig;
 }
 
-const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
-  if (!node?.tagName || (node.tagName !== 'a' && node.tagName !== 'button')) {
+const StyleLinkConfigPanel = ({ node }: StyleLinkConfigPanelProps) => {
+  const config = brandConfigStore.get();
+  if (
+    !config ||
+    !node?.tagName ||
+    (node.tagName !== 'a' && node.tagName !== 'button')
+  ) {
     return null;
   }
 

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

@@ -7,7 +7,7 @@ import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import ViewportComboBox from '@/components/fields/ViewportComboBox';
 import type { BasePanelProps, FlatNode } from '@/types/compositorTypes';
 
-const StyleLinkUpdatePanel = ({ node, className, config }: BasePanelProps) => {
+const StyleLinkUpdatePanel = ({ node, className }: BasePanelProps) => {
   if (
     !node ||
     !className ||
@@ -99,7 +99,6 @@ const StyleLinkUpdatePanel = ({ node, className, config }: BasePanelProps) => {
           onFinalChange={(newValue) => handleFinalChange(newValue)}
           values={values}
           viewport="mobile"
-          config={config!}
           isInferred={false}
         />
       </div>

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

@@ -53,7 +53,6 @@ const StyleParentPanel = ({
   node: initialNode,
   parentNode: paneNode,
   layer,
-  config,
 }: ParentBasePanelProps) => {
   const [currentView, setCurrentView] = useState<PanelView>('summary');
   const [currentLayer, setCurrentLayer] = useState<number>(layer || 1);
@@ -322,7 +321,6 @@ const StyleParentPanel = ({
               title="Pane Background Color"
               defaultColor={paneNode.bgColour || ''}
               onColorChange={handleColorChange}
-              config={config!}
               allowNull={true}
             />
             <div className="flex items-center justify-between border-t border-gray-200 pt-3">
@@ -599,7 +597,7 @@ const StyleParentPanel = ({
   const renderBackgroundImageVIew = () => (
     <div className="space-y-4">
       <BackButton />
-      <BackgroundImageWrapper paneId={paneNode.id} config={config!} />
+      <BackgroundImageWrapper paneId={paneNode.id} />
     </div>
   );
 

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

@@ -1,5 +1,5 @@
 import { useState, useCallback, useMemo } from 'react';
-import { settingsPanelStore } from '@/stores/storykeep';
+import { settingsPanelStore, brandConfigStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import { tailwindClasses } from '@/utils/compositor/tailwindClasses';
 import { cloneDeep } from '@/utils/helpers';
@@ -32,10 +32,10 @@ const StyleParentPanelUpdate = ({
   layer,
   className,
   targetProperty,
-  config,
 }: CustomPanelProps) => {
   const ctx = getCtx();
   const styleableNode = node as StyleableNode | null;
+  const config = brandConfigStore.get();
 
   if (
     !styleableNode ||
@@ -182,7 +182,6 @@ const StyleParentPanelUpdate = ({
           value={values.mobile}
           values={validTailwindValues}
           onFinalChange={handleUpdate}
-          config={config}
           allowNegative={tailwindConfig.allowNegative}
         />
         <ViewportComboBox
@@ -190,7 +189,6 @@ const StyleParentPanelUpdate = ({
           value={values.tablet}
           values={validTailwindValues}
           onFinalChange={handleUpdate}
-          config={config}
           allowNegative={tailwindConfig.allowNegative}
         />
         <ViewportComboBox
@@ -198,7 +196,6 @@ const StyleParentPanelUpdate = ({
           value={values.desktop}
           values={validTailwindValues}
           onFinalChange={handleUpdate}
-          config={config}
           allowNegative={tailwindConfig.allowNegative}
         />
       </div>

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

@@ -13,14 +13,12 @@ import ToggleWidget from '@/components/edit/widgets/ToggleWidget';
 import YouTubeWidget from '@/components/edit/widgets/YouTubeWidget';
 import InteractiveDisclosureWidget from '@/components/edit/widgets/InteractiveDisclosureWidget';
 import type { FlatNode } from '@/types/compositorTypes';
-import type { BrandConfig } from '@/types/tractstack';
 
 interface StyleWidgetConfigPanelProps {
   node: FlatNode;
-  config: BrandConfig;
 }
 
-function StyleWidgetConfigPanel({ node, config }: StyleWidgetConfigPanelProps) {
+function StyleWidgetConfigPanel({ node }: StyleWidgetConfigPanelProps) {
   const [init, setInit] = useState(false);
 
   useEffect(() => {
@@ -97,11 +95,7 @@ function StyleWidgetConfigPanel({ node, config }: StyleWidgetConfigPanelProps) {
     toggle: () => <ToggleWidget node={node} onUpdate={handleParamUpdate} />,
     youtube: () => <YouTubeWidget node={node} onUpdate={handleParamUpdate} />,
     interactiveDisclosure: () => (
-      <InteractiveDisclosureWidget
-        node={node}
-        onUpdate={handleParamUpdate}
-        config={config}
-      />
+      <InteractiveDisclosureWidget node={node} onUpdate={handleParamUpdate} />
     ),
   };
 

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

@@ -19,7 +19,6 @@ const StyleWidgetUpdatePanel = ({
   node,
   parentNode,
   className,
-  config,
   childId,
 }: BasePanelProps) => {
   if (
@@ -285,7 +284,6 @@ const StyleWidgetUpdatePanel = ({
           onFinalChange={handleFinalChange}
           values={values}
           viewport="mobile"
-          config={config!}
           isInferred={false}
         />
         <ViewportComboBox
@@ -294,7 +292,6 @@ const StyleWidgetUpdatePanel = ({
           values={values}
           viewport="tablet"
           isInferred={!isOverridden && tabletValue === mobileValue}
-          config={config!}
         />
         <ViewportComboBox
           value={desktopValue}
@@ -302,7 +299,6 @@ const StyleWidgetUpdatePanel = ({
           values={values}
           viewport="desktop"
           isInferred={!isOverridden && desktopValue === tabletValue}
-          config={config!}
         />
       </div>
     </div>

package/templates/src/components/edit/state/SaveToLibraryModal.tsx

@@ -1,13 +1,11 @@
 import { useState, useMemo, useEffect } from 'react';
-import type { BrandConfig } from '@/types/tractstack';
+import { CheckIcon } from '@heroicons/react/20/solid';
 import { savePaneToLibrary } from '@/utils/compositor/designLibraryHelper';
 import StringInput from '@/components/form/StringInput';
-import { CheckIcon } from '@heroicons/react/20/solid';
+import { brandConfigStore } from '@/stores/storykeep';
 
 interface SaveToLibraryModalProps {
   paneId: string;
-  config: BrandConfig;
-  tenantId: string;
   onClose: () => void;
 }
 
@@ -37,8 +35,6 @@ const OTHER_CATEGORY = 'other';
 
 export function SaveToLibraryModal({
   paneId,
-  config,
-  tenantId,
   onClose,
 }: SaveToLibraryModalProps) {
   const [title, setTitle] = useState('');
@@ -48,13 +44,14 @@ export function SaveToLibraryModal({
   const [saveState, setSaveState] = useState<SaveState>('idle');
   const [error, setError] = useState('');
 
+  const designLibrary = brandConfigStore.get()?.DESIGN_LIBRARY || [];
   const categories = useMemo(() => {
     const cats =
-      config.DESIGN_LIBRARY?.map((item) => item.category).filter(
-        (v, i, a) => a.indexOf(v) === i
-      ) || [];
+      designLibrary
+        .map((item) => item.category)
+        .filter((v, i, a) => a.indexOf(v) === i) || [];
     return [...cats, OTHER_CATEGORY];
-  }, [config.DESIGN_LIBRARY]);
+  }, [designLibrary]);
 
   useEffect(() => {
     if (saveState === 'saved') {
@@ -80,14 +77,28 @@ export function SaveToLibraryModal({
       category: finalCategory,
       copyMode: copyMode,
     };
-
-    const success = await savePaneToLibrary(paneId, tenantId, config, formData);
-
-    if (success) {
-      setSaveState('saved');
+    const brandConfig = brandConfigStore.get();
+
+    if (brandConfig) {
+      const newBrandConfig = await savePaneToLibrary(
+        paneId,
+        brandConfig.TENANT_ID,
+        brandConfig,
+        formData
+      );
+      if (newBrandConfig) {
+        brandConfigStore.set({
+          ...newBrandConfig,
+          TENANT_ID: brandConfig.TENANT_ID,
+        });
+        setSaveState('saved');
+      } else {
+        setSaveState('idle');
+        setError('Failed to save template. Please try again.');
+      }
     } else {
       setSaveState('idle');
-      setError('Failed to save template. Please try again.');
+      setError('Failed to save template. Brand Config not found.');
     }
   };
 

package/templates/src/components/edit/storyfragment/StoryFragmentConfigPanel.tsx

@@ -18,20 +18,16 @@ import {
   hexToTailwind,
   findClosestTailwindColor,
 } from '@/utils/compositor/tailwindColors';
+import { brandConfigStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import type { FullContentMapItem, BrandConfig } from '@/types/tractstack';
+import type { FullContentMapItem } from '@/types/tractstack';
 import {
   StoryFragmentMode,
   type StoryFragmentNode,
 } from '@/types/compositorTypes';
 
-const StoryFragmentConfigPanel = ({
-  nodeId,
-  config,
-}: {
-  nodeId: string;
-  config?: BrandConfig;
-}) => {
+const StoryFragmentConfigPanel = ({ nodeId }: { nodeId: string }) => {
+  const brandColors = brandConfigStore.get()?.BRAND_COLOURS || '';
   const [isNodeAvailable, setIsNodeAvailable] = useState(false);
   const [storyfragmentNode, setStoryfragmentNode] =
     useState<StoryFragmentNode | null>(null);
@@ -156,7 +152,7 @@ const StoryFragmentConfigPanel = ({
       delete updatedNode.tailwindBgColour;
     } else {
       // Set the new background color
-      const val = hexToTailwind(tempBgColor, config?.BRAND_COLOURS);
+      const val = hexToTailwind(tempBgColor, brandColors);
       const exactValPayload = val
         ? null
         : findClosestTailwindColor(tempBgColor);
@@ -178,23 +174,11 @@ const StoryFragmentConfigPanel = ({
   }
 
   if (mode === StoryFragmentMode.SLUG) {
-    return (
-      <StoryFragmentSlugPanel
-        nodeId={nodeId}
-        setMode={setMode}
-        config={config!}
-      />
-    );
+    return <StoryFragmentSlugPanel nodeId={nodeId} setMode={setMode} />;
   } else if (mode === StoryFragmentMode.MENU) {
     return <StoryFragmentMenuPanel nodeId={nodeId} setMode={setMode} />;
   } else if (mode === StoryFragmentMode.OG) {
-    return (
-      <StoryFragmentOpenGraphPanel
-        nodeId={nodeId}
-        setMode={setMode}
-        config={config}
-      />
-    );
+    return <StoryFragmentOpenGraphPanel nodeId={nodeId} setMode={setMode} />;
   }
 
   return (
@@ -253,7 +237,7 @@ const StoryFragmentConfigPanel = ({
             </>
           )}
 
-          {config && (
+          {brandColors && (
             <div className="flex items-center gap-2">
               <div className="text-md">Background Colour:</div>
               <ColorPickerCombo
@@ -262,12 +246,11 @@ const StoryFragmentConfigPanel = ({
                   storyfragmentNode.tailwindBgColour
                     ? tailwindToHex(
                         storyfragmentNode.tailwindBgColour,
-                        config?.BRAND_COLOURS || null
+                        brandColors
                       )
                     : ''
                 }
                 onColorChange={handleBgColorChange}
-                config={config}
                 allowNull={true}
               />
               {tempBgColor !== null && (

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_og.tsx

@@ -28,11 +28,7 @@ import {
   getImageDimensions,
   type FileValidationOptions,
 } from '@/utils/api/fileHelpers';
-import type {
-  FullContentMapItem,
-  BrandConfig,
-  Topic,
-} from '@/types/tractstack';
+import type { FullContentMapItem, Topic } from '@/types/tractstack';
 import type { ImageDimensions } from '@/types/formTypes';
 import {
   StoryFragmentMode,
@@ -45,7 +41,6 @@ const TARGET_HEIGHT = 630;
 interface StoryFragmentOpenGraphPanelProps {
   nodeId: string;
   setMode: (mode: StoryFragmentMode) => void;
-  config?: BrandConfig;
 }
 
 const hasSlug = (
@@ -58,7 +53,6 @@ const hasSlug = (
 const StoryFragmentOpenGraphPanel = ({
   nodeId,
   setMode,
-  config,
 }: StoryFragmentOpenGraphPanelProps) => {
   const $contentMap = useStore(fullContentMapStore);
   const $storyFragmentTopics = useStore(storyFragmentTopicsStore);
@@ -691,15 +685,12 @@ const StoryFragmentOpenGraphPanel = ({
               </div>
             ) : (
               <>
-                {config && (
-                  <OgImagePreview
-                    nodeId={nodeId}
-                    title={draftTitle}
-                    socialImagePath={draftImagePath}
-                    config={config}
-                    onColorChange={handleColorChange}
-                  />
-                )}
+                <OgImagePreview
+                  nodeId={nodeId}
+                  title={draftTitle}
+                  socialImagePath={draftImagePath}
+                  onColorChange={handleColorChange}
+                />
                 <div className="mt-4 flex space-x-4">
                   <div
                     className="relative w-64 overflow-hidden rounded-md bg-gray-100"

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_slug.tsx

@@ -7,7 +7,7 @@ import { Switch } from '@ark-ui/react/switch';
 import { getCtx } from '@/stores/nodes';
 import { pendingHomePageSlugStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
-import type { BrandConfig } from '@/types/tractstack';
+import { brandConfigStore } from '@/stores/storykeep';
 import {
   StoryFragmentMode,
   type StoryFragmentNode,
@@ -16,13 +16,11 @@ import {
 interface StoryFragmentSlugPanelProps {
   nodeId: string;
   setMode: (mode: StoryFragmentMode) => void;
-  config: BrandConfig;
 }
 
 const StoryFragmentSlugPanel = ({
   nodeId,
   setMode,
-  config,
 }: StoryFragmentSlugPanelProps) => {
   const [slug, setSlug] = useState('');
   const [isValid, setIsValid] = useState(false);
@@ -30,7 +28,8 @@ const StoryFragmentSlugPanel = ({
   const [charCount, setCharCount] = useState(0);
   const [validationError, setValidationError] = useState<string | null>(null);
   const [canSave, setCanSave] = useState(false);
-  const isHomeSlug = slug === config.HOME_SLUG;
+  const homeSlug = brandConfigStore.get()?.HOME_SLUG || `hello`;
+  const isHomeSlug = slug === homeSlug;
   const pendingHomePageSlug = useStore(pendingHomePageSlugStore);
   const isSetAsHomePage = pendingHomePageSlug === slug;
 
@@ -51,7 +50,7 @@ const StoryFragmentSlugPanel = ({
     setCharCount(length);
 
     // If it's the home slug, consider it valid but locked
-    if (value === config.HOME_SLUG) {
+    if (value === homeSlug) {
       setIsValid(true);
       setCanSave(false);
       setValidationError(null);
@@ -92,7 +91,7 @@ const StoryFragmentSlugPanel = ({
     value: string
   ): { isValid: boolean; error?: string } => {
     // Don't allow saving if it's the home slug
-    if (value === config.HOME_SLUG) {
+    if (value === homeSlug) {
       return {
         isValid: false,
         error: 'Cannot modify the home page slug',