astro-tractstack 2.3.2 → 2.3.4

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}