astro-tractstack 2.3.3 → 2.3.5

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

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useLayoutEffect,
   useState,
   useRef,
   type FocusEvent,
@@ -23,16 +24,147 @@ const viewportMap = {
   desktop: 'xl',
 } as const;
 
+function removeEditProxies(container: HTMLElement) {
+  container.querySelectorAll('[data-proxy-positioned]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    const prev = htmlEl.getAttribute('data-proxy-prev-position');
+    htmlEl.style.position = prev ?? '';
+    htmlEl.removeAttribute('data-proxy-positioned');
+    htmlEl.removeAttribute('data-proxy-prev-position');
+  });
+
+  container
+    .querySelectorAll('[data-proxy-for]')
+    .forEach((icon) => icon.remove());
+
+  container.querySelectorAll('[data-ast-id]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    htmlEl.style.outline = '';
+    htmlEl.style.outlineOffset = '';
+    htmlEl.style.cursor = '';
+  });
+}
+
+function ensurePositionedAnchor(anchorEl: HTMLElement) {
+  if (getComputedStyle(anchorEl).position !== 'static') return;
+
+  anchorEl.setAttribute('data-proxy-positioned', 'true');
+  anchorEl.setAttribute('data-proxy-prev-position', anchorEl.style.position);
+  anchorEl.style.position = 'relative';
+}
+
+function createProxyIcon(
+  htmlEl: HTMLElement,
+  astId: string,
+  htmlAst: CreativePanePayload,
+  paneNodeId: string
+) {
+  const icon = document.createElement('div');
+  icon.setAttribute('data-proxy-for', astId);
+  icon.className = 'compositor-chrome';
+  icon.style.position = 'absolute';
+  icon.style.zIndex = '1003';
+  icon.style.width = '24px';
+  icon.style.height = '24px';
+  icon.style.backgroundColor = '#06b6d4';
+  icon.style.borderRadius = '9999px';
+  icon.style.display = 'flex';
+  icon.style.alignItems = 'center';
+  icon.style.justifyContent = 'center';
+  icon.style.color = 'white';
+  icon.style.fontSize = '12px';
+  icon.style.boxShadow = '0 10px 15px -3px rgb(0 0 0 / 0.1)';
+  icon.style.cursor = 'pointer';
+  icon.style.pointerEvents = 'auto';
+  icon.innerHTML = '✎';
+
+  icon.onmouseenter = () => {
+    htmlEl.style.outline = '3px solid #06b6d4';
+  };
+  icon.onmouseleave = () => {
+    htmlEl.style.outline = '2px dotted #06b6d4';
+  };
+  icon.onclick = (e) => {
+    e.stopPropagation();
+    const meta = htmlAst.editableElements?.[astId];
+    if (!meta) return;
+
+    let action = '';
+    if (meta.isCssBackground) {
+      action = 'style-creative-bg';
+    } else if (meta.tagName === 'img') {
+      action = 'style-creative-img';
+    } else if (meta.tagName === 'a') {
+      action = 'style-creative-link';
+    } else if (meta.tagName === 'button') {
+      action = 'style-creative-btn';
+    }
+
+    if (action) {
+      settingsPanelStore.set({
+        action,
+        nodeId: paneNodeId,
+        childId: astId,
+        expanded: true,
+      });
+    }
+  };
+
+  return icon;
+}
+
+function syncEditProxies(
+  container: HTMLElement,
+  htmlAst: CreativePanePayload,
+  paneNodeId: string
+) {
+  removeEditProxies(container);
+
+  container.querySelectorAll('[data-ast-id]').forEach((el) => {
+    const htmlEl = el as HTMLElement;
+    if (htmlEl.isContentEditable) return;
+
+    const astId = htmlEl.getAttribute('data-ast-id');
+    if (!astId) return;
+
+    htmlEl.style.outline = '2px dotted #06b6d4';
+    htmlEl.style.outlineOffset = '2px';
+
+    const icon = createProxyIcon(htmlEl, astId, htmlAst, paneNodeId);
+
+    if (htmlEl.tagName === 'IMG') {
+      const parent = htmlEl.parentElement;
+      if (parent instanceof HTMLElement) {
+        ensurePositionedAnchor(parent);
+        icon.style.top = `${htmlEl.offsetTop - 12}px`;
+        icon.style.left = `${htmlEl.offsetLeft - 12}px`;
+        parent.appendChild(icon);
+        return;
+      }
+    }
+
+    ensurePositionedAnchor(htmlEl);
+    icon.style.top = '-12px';
+    icon.style.left = '-12px';
+    htmlEl.appendChild(icon);
+  });
+}
+
 export const CreativePane = ({
   nodeId,
   htmlAst,
   isProtected = false,
 }: CreativePaneProps) => {
+  const ctx = getCtx();
   const previews = useStore(renderedPreviews);
   const { value: viewportKey } = useStore(viewportKeyStore);
+  const { value: toolModeVal } = useStore(ctx.toolModeValStore);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+  const htmlAstRef = useRef(htmlAst);
+  htmlAstRef.current = htmlAst;
 
   const activeViewport = viewportMap[viewportKey];
   const htmlContent = previews[nodeId];
@@ -101,100 +233,56 @@ export const CreativePane = ({
     };
   }, [htmlAst?.css, htmlAst?.tree, nodeId]);
 
-  useEffect(() => {
-    const ctx = getCtx();
-    const unsubscribe = ctx.toolModeValStore.subscribe((state) => {
-      const container = contentRef.current;
-      if (!container) return;
+  useLayoutEffect(() => {
+    const el = previewRef.current;
+    if (!el || htmlContent == null) return;
+    if (el.innerHTML !== htmlContent) {
+      el.innerHTML = htmlContent;
+    }
+  }, [htmlContent]);
 
-      const editables = container.querySelectorAll('[data-ast-id]');
+  useLayoutEffect(() => {
+    const container = contentRef.current;
+    if (!container || !htmlContent) return;
 
-      if (state.value === 'text') {
-        editables.forEach((el) => {
-          const htmlEl = el as HTMLElement;
-          if (htmlEl.isContentEditable) return;
-          htmlEl.style.outline = '2px dotted #06b6d4';
-          htmlEl.style.outlineOffset = '2px';
+    if (toolModeVal === 'text') {
+      syncEditProxies(container, htmlAstRef.current, nodeId);
+    } else {
+      removeEditProxies(container);
+    }
+  });
 
-          const astId = htmlEl.getAttribute('data-ast-id');
-          if (!astId) return;
+  useEffect(() => {
+    const container = contentRef.current;
+    if (!container || !htmlContent) return;
 
-          const existingIcon = container.querySelector(
-            `[data-proxy-for="${astId}"]`
-          );
-          if (existingIcon) return;
-
-          const icon = document.createElement('div');
-          icon.setAttribute('data-proxy-for', astId);
-          icon.style.position = 'absolute';
-          icon.style.zIndex = '1003';
-          icon.style.width = '24px';
-          icon.style.height = '24px';
-          icon.style.backgroundColor = '#06b6d4';
-          icon.style.borderRadius = '9999px';
-          icon.style.display = 'flex';
-          icon.style.alignItems = 'center';
-          icon.style.justifyContent = 'center';
-          icon.style.color = 'white';
-          icon.style.fontSize = '12px';
-          icon.style.boxShadow = '0 10px 15px -3px rgb(0 0 0 / 0.1)';
-          icon.style.cursor = 'pointer';
-          icon.innerHTML = '✎';
-
-          const rect = htmlEl.getBoundingClientRect();
-          const containerRect = container.getBoundingClientRect();
-          icon.style.top = `${rect.top - containerRect.top - 12}px`;
-          icon.style.left = `${rect.left - containerRect.left - 12}px`;
-
-          icon.onmouseenter = () => {
-            htmlEl.style.outline = '3px solid #06b6d4';
-          };
-          icon.onmouseleave = () => {
-            htmlEl.style.outline = '2px dotted #06b6d4';
-          };
-          icon.onclick = () => {
-            const meta = htmlAst.editableElements?.[astId];
-            if (meta) {
-              let action = '';
-              if (meta.isCssBackground) {
-                action = 'style-creative-bg';
-              } else if (meta.tagName === 'img') {
-                action = 'style-creative-img';
-              } else if (meta.tagName === 'a') {
-                action = 'style-creative-link';
-              } else if (meta.tagName === 'button') {
-                action = 'style-creative-btn';
-              }
-
-              if (action) {
-                settingsPanelStore.set({
-                  action,
-                  nodeId,
-                  childId: astId,
-                  expanded: true,
-                });
-              }
-            }
-          };
-
-          container.appendChild(icon);
-        });
-      } else {
-        editables.forEach((el) => {
-          (el as HTMLElement).style.outline = '';
-          (el as HTMLElement).style.outlineOffset = '';
-          (el as HTMLElement).style.cursor = '';
-        });
-        const icons = container.querySelectorAll('[data-proxy-for]');
-        icons.forEach((icon) => icon.remove());
-      }
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (ctx.toolModeValStore.get().value !== 'text') return;
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => {
+        if (ctx.toolModeValStore.get().value === 'text') {
+          syncEditProxies(container, htmlAstRef.current, nodeId);
+        }
+      }, 100);
     });
+    resizeObserver.observe(container);
 
-    return () => unsubscribe();
-  }, [htmlContent]);
+    return () => {
+      resizeObserver.disconnect();
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  }, [htmlContent, nodeId, toolModeVal, ctx]);
+
+  useEffect(() => {
+    return () => {
+      const container = contentRef.current;
+      if (container) removeEditProxies(container);
+    };
+  }, []);
 
   const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    const ctx = getCtx();
     const mode = ctx.toolModeValStore.get().value;
     if (mode !== 'text' || isProtected) return;
 
@@ -208,7 +296,6 @@ export const CreativePane = ({
   };
 
   const handleBlur = (e: FocusEvent<HTMLDivElement>) => {
-    const ctx = getCtx();
     const mode = ctx.toolModeValStore.get().value;
     if (mode !== 'text' || isProtected) return;
 
@@ -255,7 +342,7 @@ export const CreativePane = ({
         {isProtected && (
           <div className="absolute inset-0 z-50 cursor-crosshair bg-transparent" />
         )}
-        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
+        <div ref={previewRef} />
       </div>
     </>
   );

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

@@ -94,7 +94,7 @@ const AddPanePanel = ({
         />
       ) : mode === PaneAddMode.REUSE && !isContextPane ? (
         <AddPaneReUsePanel nodeId={nodeId} first={first} setMode={setMode} />
-      ) : mode === PaneAddMode.CODEHOOK ? (
+      ) : mode === PaneAddMode.CODEHOOK && !isContextPane ? (
         <AddPaneCodeHookPanel
           nodeId={nodeId}
           first={first}
@@ -139,7 +139,7 @@ const AddPanePanel = ({
                   )}
                 </>
               )}
-              {!isTemplate && (
+              {!isTemplate && !isContextPane && (
                 <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"

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

@@ -294,13 +294,14 @@ const AddPaneNewPanel = ({
 
         <div className="mx-auto mb-6 max-w-xl text-center">
           <h3 className="text-lg font-bold text-gray-800">
-            Don't publish a page. Stack your story.
+            {isContextPane
+              ? 'One focused page for in-context links.'
+              : "Don't publish a page. Stack your story."}
           </h3>
           <p className="text-sm text-gray-500">
-            A static page is a wall of text. A Smart Tract is a series of beats.
-            Build one Pane at a time and give each one a single job. Every Pane
-            acts as a listening device—telling you exactly when your audience
-            leans in, and when they drift away.
+            {isContextPane
+              ? 'Readers open this URL from links on your Smart Tract—definitions, offers, FAQs, or anything that needs its own address without breaking the flow. Design this single pane for that job; they close the page and return to where they came from.'
+              : 'A static page is a wall of text. A Smart Tract is a series of beats. Build one Pane at a time and give each one a single job. Every Pane acts as a listening device—telling you exactly when your audience leans in, and when they drift away.'}
           </p>
         </div>
 

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

@@ -174,24 +174,13 @@ const AddPaneReUsePanel = ({
 
       templateData.paneNode.parentId = storyfragmentId;
 
-      let specificIdx = -1;
-      let elIdx = -1;
       const location = first ? 'before' : 'after';
-
-      specificIdx = storyFragmentNode.paneIds.indexOf(nodeId);
-      elIdx = specificIdx;
-      if (elIdx === -1) {
-        storyFragmentNode.paneIds.push(templateData.paneNode.id);
-      } else {
+      const elIdx = storyFragmentNode.paneIds.indexOf(nodeId);
+      let specificIdx = elIdx;
+      if (elIdx !== -1) {
         if (location === 'before') {
-          storyFragmentNode.paneIds.splice(elIdx, 0, templateData.paneNode.id);
           specificIdx = Math.max(0, specificIdx - 1);
         } else {
-          storyFragmentNode.paneIds.splice(
-            elIdx + 1,
-            0,
-            templateData.paneNode.id
-          );
           specificIdx = Math.min(
             specificIdx + 1,
             storyFragmentNode.paneIds.length
@@ -206,7 +195,12 @@ const AddPaneReUsePanel = ({
         specificIdx
       );
       ctx.addNodes(templateData.childNodes);
-      ctx.notifyNode(storyfragmentId);
+      ctx.insertPaneId(
+        storyfragmentId,
+        templateData.paneNode.id,
+        nodeId,
+        location
+      );
 
       setMode(PaneAddMode.DEFAULT);
     } catch (error) {

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

@@ -260,7 +260,7 @@ const ConfigPanePanel = ({
                     )}
                   </>
                 )}
-                {isCodeHook && (
+                {isCodeHook && !isContextPane && (
                   <button
                     onClick={handleCodeHookConfig}
                     className={buttonClass}

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -19,7 +19,10 @@ const GOOGLE_TERMS_URL = 'https://renees.freewebpress.com/terms';
 const GOOGLE_AUTHORIZED_DOMAIN = 'freewebpress.com';
 const GOOGLE_REDIRECT_URI =
   'https://renees.freewebpress.com/api/google/oauth/callback';
-const GOOGLE_SCOPE = 'https://www.googleapis.com/auth/calendar.events';
+const GOOGLE_SCOPES = [
+  'https://www.googleapis.com/auth/calendar.events',
+  'https://www.googleapis.com/auth/calendar.readonly',
+] as const;
 const GOOGLE_VERIFICATION_VIDEO_URL =
   'https://www.youtube.com/watch?v=kJI4XdqiiAI';
 
@@ -43,7 +46,8 @@ export default function APIConfigSection({
   const shopifyVersionConfigured = Boolean(status?.shopifyApiVersion);
   const shopifyAdminSlugConfigured = status?.shopifyAdminSlugSet;
   const shopifyWebhooksConfigured = status?.userSetupWebhooks;
-  const resendConfigured = status?.resendApiKeySet;
+  const resendConfigured = status?.hasResend;
+  const resendKeyConfigured = status?.resendApiKeySet;
   const googleHasSync = status?.hasGoogleSync;
   const googleClientIDConfigured = status?.googleOauthClientIdSet;
   const googleClientSecretConfigured = status?.googleOauthClientSecretSet;
@@ -298,13 +302,30 @@ export default function APIConfigSection({
               value={state.resendApiKey}
               onChange={(value) => updateField('resendApiKey', value)}
               type="password"
-              placeholder={resendConfigured ? '••••••••••••••••' : 're_...'}
+              placeholder={resendKeyConfigured ? '••••••••••••••••' : 're_...'}
               error={errors.resendApiKey}
             />
             <p className="mt-2 text-xs text-gray-500">
               Required for sending system emails.
-              {resendConfigured && ' Leave blank to keep existing key.'}
+              {resendKeyConfigured && ' Leave blank to keep existing key.'}
             </p>
+            <StringInput
+              label="From Email"
+              value={state.adminEmail}
+              onChange={(value) => updateField('adminEmail', value)}
+              type="email"
+              placeholder="admin@example.com"
+              required={true}
+              error={errors.adminEmail}
+            />
+            <StringInput
+              label="From Name"
+              value={state.adminEmailName}
+              onChange={(value) => updateField('adminEmailName', value)}
+              placeholder="Your Site Name"
+              required={true}
+              error={errors.adminEmailName}
+            />
           </div>
 
           {/* Google Calendar / Meet Section */}
@@ -371,10 +392,16 @@ export default function APIConfigSection({
                     </ul>
                   </li>
                   <li>
-                    Open <strong>Data Access</strong> and add scope:
-                    <code className="ml-1 rounded bg-gray-100 px-1 py-0.5">
-                      {GOOGLE_SCOPE}
-                    </code>
+                    Open <strong>Data Access</strong> and add scopes:
+                    <ul className="mt-1 list-disc space-y-1 pl-4">
+                      {GOOGLE_SCOPES.map((scope) => (
+                        <li key={scope}>
+                          <code className="rounded bg-gray-100 px-1 py-0.5">
+                            {scope}
+                          </code>
+                        </li>
+                      ))}
+                    </ul>
                   </li>
                   <li>
                     Open <strong>Branding</strong> and set:

package/templates/src/components/form/brand/SiteConfigSection.tsx

@@ -58,6 +58,15 @@ export default function SiteConfigSection({
           error={errors.adminEmail}
         />
 
+        <StringInput
+          value={state.adminEmailName}
+          onChange={(value) => updateField('adminEmailName', value)}
+          label="Admin Email Name"
+          placeholder="Your Site Name"
+          required={true}
+          error={errors.adminEmailName}
+        />
+
         <StringInput
           value={state.gtag}
           onChange={(value) => updateField('gtag', value)}

package/templates/src/components/search/SearchResults.tsx

@@ -8,7 +8,7 @@ import {
   getResourceUrl,
   getResourceImage,
   getResourceDescription,
-} from '@/utils/customHelpers';
+} from '@/custom/customHelpers';
 
 const VERBOSE = false;
 

package/templates/src/components/search/SearchWrapper.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
-import { initSearch } from '@/utils/customHelpers';
+import { initSearch } from '@/custom/customHelpers';
 import SearchModal from './SearchModal';
 import type { FullContentMapItem } from '@/types/tractstack';
 

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -1,28 +1,37 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useFormState } from '@/hooks/useFormState';
 import {
-  convertToLocalState,
+  convertToLocalState as convertAdvancedToLocalState,
   convertToBackendFormat,
   validateAdvancedConfig,
   advancedStateIntercept,
 } from '@/utils/api/advancedHelpers';
+import {
+  convertToLocalState as convertBrandToLocalState,
+  convertToBackendFormat as convertBrandToBackendFormat,
+  validateBrandConfig,
+} from '@/utils/api/brandHelpers';
 import {
   getAdvancedConfigStatus,
   saveAdvancedConfig,
 } from '@/utils/api/advancedConfig';
+import { getBrandConfig, saveBrandConfig } from '@/utils/api/brandConfig';
 import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
 import AuthConfigSection from '@/components/form/advanced/AuthConfigSection';
 import APIConfigSection from '@/components/form/advanced/APIConfigSection';
 import type {
   AdvancedConfigState,
   AdvancedConfigStatus,
+  BrandConfig,
 } from '@/types/tractstack';
 
 interface StoryKeepDashboardAdvancedProps {
+  brandConfig: BrandConfig;
   initialize?: boolean;
 }
 
 export default function StoryKeepDashboard_Advanced({
+  brandConfig,
   initialize = false,
 }: StoryKeepDashboardAdvancedProps) {
   const [status, setStatus] = useState<AdvancedConfigStatus | null>(null);
@@ -30,14 +39,33 @@ export default function StoryKeepDashboard_Advanced({
   const [error, setError] = useState<string>('');
   const hasHydratedInitialFormState = useRef(false);
 
-  // Load status on mount
+  const tenantId = window.TRACTSTACK_CONFIG?.tenantId || 'default';
+
+  const validateAdvancedForm = useCallback(
+    (state: AdvancedConfigState) => {
+      const advancedErrors = validateAdvancedConfig(state);
+      const brandLocal = {
+        ...convertBrandToLocalState(brandConfig),
+        adminEmail: state.adminEmail,
+        adminEmailName: state.adminEmailName,
+      };
+      const brandErrors = validateBrandConfig(brandLocal);
+      return {
+        ...advancedErrors,
+        ...(brandErrors.adminEmail && { adminEmail: brandErrors.adminEmail }),
+        ...(brandErrors.adminEmailName && {
+          adminEmailName: brandErrors.adminEmailName,
+        }),
+      };
+    },
+    [brandConfig]
+  );
+
   useEffect(() => {
     async function loadStatus() {
       try {
         setIsLoading(true);
-        const statusData = await getAdvancedConfigStatus(
-          window.TRACTSTACK_CONFIG?.tenantId || 'default'
-        );
+        const statusData = await getAdvancedConfigStatus(tenantId);
         setStatus(statusData);
       } catch (err) {
         setError(
@@ -50,27 +78,31 @@ export default function StoryKeepDashboard_Advanced({
       }
     }
     loadStatus();
-  }, []);
+  }, [tenantId]);
 
   const formState = useFormState<AdvancedConfigState>({
-    initialData: convertToLocalState(status),
-    validator: validateAdvancedConfig,
+    initialData: convertAdvancedToLocalState(status),
+    validator: validateAdvancedForm,
     interceptor: advancedStateIntercept,
     onSave: async (state: AdvancedConfigState) => {
       const backendPayload = convertToBackendFormat(state);
-      await saveAdvancedConfig(
-        window.TRACTSTACK_CONFIG?.tenantId || 'default',
-        backendPayload
-      );
-
-      // Reload status after save
-      const newStatus = await getAdvancedConfigStatus(
-        window.TRACTSTACK_CONFIG?.tenantId || 'default'
-      );
+      await saveAdvancedConfig(tenantId, backendPayload);
+
+      const brandConfigFresh = await getBrandConfig(tenantId);
+      const brandLocal = convertBrandToLocalState(brandConfigFresh);
+      brandLocal.adminEmail = state.adminEmail.trim();
+      brandLocal.adminEmailName = state.adminEmailName.trim();
+      await saveBrandConfig(tenantId, convertBrandToBackendFormat(brandLocal));
+
+      const newStatus = await getAdvancedConfigStatus(tenantId);
       setStatus(newStatus);
 
-      // Reset form to new state (clears password fields and isDirty)
-      const newState = convertToLocalState(newStatus);
+      const brandLocalHydrate = convertBrandToLocalState(brandConfigFresh);
+      const newState = {
+        ...convertAdvancedToLocalState(newStatus),
+        adminEmail: brandLocalHydrate.adminEmail,
+        adminEmailName: brandLocalHydrate.adminEmailName,
+      };
       formState.resetToState(newState);
 
       window.location.reload();
@@ -82,9 +114,14 @@ export default function StoryKeepDashboard_Advanced({
     if (!status || hasHydratedInitialFormState.current) {
       return;
     }
-    formState.resetToState(convertToLocalState(status));
+    const brandLocal = convertBrandToLocalState(brandConfig);
+    formState.resetToState({
+      ...convertAdvancedToLocalState(status),
+      adminEmail: brandLocal.adminEmail,
+      adminEmailName: brandLocal.adminEmailName,
+    });
     hasHydratedInitialFormState.current = true;
-  }, [status, formState]);
+  }, [status, formState, brandConfig]);
 
   if (isLoading) {
     return (
@@ -102,7 +139,6 @@ export default function StoryKeepDashboard_Advanced({
     );
   }
 
-  // Database status component
   const DatabaseStatusSection = () => {
     const databaseType = status?.tursoEnabled
       ? 'Turso Cloud Database'