astro-tractstack 2.3.3 → 2.3.4

package/templates/src/components/compositor/Node.tsx

@@ -8,6 +8,7 @@ import {
   isTopLevelBlockNode,
   parseCodeHook,
 } from '@/utils/compositor/nodesHelper';
+import { isStoryFragmentNode } from '@/utils/compositor/typeGuards';
 import { PaneAddMode } from '@/types/compositorTypes';
 import { NodeOverlay } from './tools/NodeOverlay';
 import PanelVisibilityWrapper from '@/components/compositor/PanelVisibilityWrapper';
@@ -108,14 +109,6 @@ export const Node = memo((props: NodeProps) => {
     case 'Pane':
       {
         const paneNode = node as PaneNode;
-        const storyfragmentNodeId = ctx.getClosestNodeTypeFromId(
-          node.id,
-          'StoryFragment'
-        );
-        const storyfragmentNode = ctx.allNodes
-          .get()
-          .get(storyfragmentNodeId) as StoryFragmentNode;
-        const first = paneNode.id === storyfragmentNode.paneIds?.[0];
         const isHtmlAstPane = !!paneNode.htmlAst;
         const paneNodes = ctx.getChildNodeIDs(node.id);
 
@@ -140,7 +133,7 @@ export const Node = memo((props: NodeProps) => {
             );
           }
 
-          if (!isPreview && !paneNodes.length) {
+          if (!isPreview && !paneNodes.length && !isHtmlAstPane) {
             return (
               <>
                 <ContextPanePanel nodeId={node.id} />
@@ -160,8 +153,45 @@ export const Node = memo((props: NodeProps) => {
               </>
             );
           }
+
+          const contextContent = isHtmlAstPane ? (
+            <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
+          ) : (
+            <Pane {...props} />
+          );
+
+          element = (
+            <>
+              <div className="py-0.5">
+                <ConfigPanePanel
+                  nodeId={props.nodeId}
+                  isHtmlAstPane={isHtmlAstPane}
+                  isSandboxMode={props.isSandboxMode || false}
+                />
+                <PanelVisibilityWrapper
+                  nodeId={props.nodeId}
+                  panelType="settings"
+                  ctx={ctx}
+                >
+                  {contextContent}
+                </PanelVisibilityWrapper>
+              </div>
+            </>
+          );
+          break;
         }
 
+        const storyfragmentNodeId = ctx.getClosestNodeTypeFromId(
+          node.id,
+          'StoryFragment'
+        );
+        const storyfragmentNode = storyfragmentNodeId
+          ? (ctx.allNodes.get().get(storyfragmentNodeId) ?? null)
+          : null;
+        const first =
+          isStoryFragmentNode(storyfragmentNode) &&
+          paneNode.id === storyfragmentNode.paneIds?.[0];
+
         const content = isHtmlAstPane ? (
           <CreativePane nodeId={props.nodeId} htmlAst={paneNode.htmlAst!} />
         ) : (

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)}